该实现与 Three.js 示例有何不同？

Question

我正在尝试重复该示例，但使用的是反应三纤维。

Link 举个例子：https://github.com/mrdoob/three.js/blob/master/examples/webgl_lines_sphere.html（目前只有init方法，没有动画）

我的代码：

const Sphere = () => {
const vertices: number[] = [];
const scalar = 450;

const vertex = new THREE.Vector3();

for(let i = 0; i < 1500; i++) {
    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;

    vertex.normalize();
    vertex.multiplyScalar(scalar);
    vertices.push(vertex.x, vertex.y, vertex.z);
}

const geometry = new THREE.BufferGeometry().setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

const parameters = [[ 0.25, 0xff7700, 1 ], [ 0.5, 0xff9900, 1 ], [ 0.75, 0xffaa00, 0.75 ], [ 1, 0xffaa00, 0.5 ], [ 1.25, 0x000833, 0.8 ], [ 3.0, 0xaaaaaa, 0.75 ], [ 3.5, 0xffffff, 0.5 ], [ 4.5, 0xffffff, 0.25 ], [ 5.5, 0xffffff, 0.125 ]];

return (
    <mesh>
        {
            parameters.map((pGroup, index) => {
                return (
                    <lineSegments
                        key={index}
                        geometry={geometry}
                        scale={new THREE.Vector3(pGroup[0], pGroup[0], pGroup[0])}
                        rotation={new THREE.Euler(undefined, Math.random() * Math.PI, undefined)}
                    >
                        <lineBasicMaterial color={pGroup[1]} opacity={pGroup[2]} />
                    </lineSegments>
                );
            })
        }
    </mesh>
); };

示例结果：

我的结果：

出于某种原因，所有内容都用一条线绘制。而且，正如我注意到的，不透明度属性不起作用。我不明白我哪里出错了？

Answer 1

我真的不知道为什么会这样，但我只是将这段代码移到了一个单独的函数中

const createGeometry = (scalar: number) => {

const geometry = new THREE.BufferGeometry();
const vertices = [];

const vertex = new THREE.Vector3();

for ( let i = 0; i < 1500; i ++ ) {

    vertex.x = Math.random() * 2 - 1;
    vertex.y = Math.random() * 2 - 1;
    vertex.z = Math.random() * 2 - 1;
    vertex.normalize();
    vertex.multiplyScalar(scalar);

    vertices.push(vertex.x, vertex.y, vertex.z);

    vertex.multiplyScalar(Math.random() * 0.09 + 1);

    vertices.push(vertex.x, vertex.y, vertex.z);

}

geometry.setAttribute('position', new THREE.Float32BufferAttribute(vertices, 3));

return geometry; };

该实现与 Three.js 示例有何不同？

How is the implementation different from the Three.js example?

three.js

reactjs

react-three-fiber