在 react-three/fiber 中创建实例三角形答案

【问题标题】：Create instanced triangles in react-three/fiber在 react-three/fiber 中创建实例三角形
【发布时间】：2021-12-02 06:27:06
【问题描述】：

我可以用 BufferGeometry 创建一个三角形，其中array=new Float32Array([0, 20, 0, 0, 0, 0, 20, 0, 0]);

<mesh>
      <bufferGeometry attach="geometry">
        <bufferAttribute
          attachObject={["attributes", "position"]}
          count={3}
          array={array}
          itemSize={3}
        />
      </bufferGeometry>
      <meshBasicMaterial
        attach="material"
        color="#5243aa"
        wireframe={false}
        side={THREE.DoubleSide}
      />
    </mesh>

现在我想使用InstancedMesh 创建 1 个三角形。但是它并没有像预期的那样工作。

<instancedMesh ref={meshRef} args={[null as any, null as any, 1]}>
        <bufferGeometry attach="geometry">
          <bufferAttribute
            attachObject={["attributes", "position"]}
            count={3}
            array={position}
            itemSize={3}
          />
        </bufferGeometry>
        <meshBasicMaterial
          attach="material"
          color="#5243aa"
          wireframe={false}
          side={THREE.DoubleSide}
        />
      </instancedMesh>

有什么想法吗？

【问题讨论】：

标签： three.js react-three-fiber

【解决方案1】：

声明一个实例化网格，其中vertices=[x1,y1,z1,...] 是三角形的坐标：

<instancedMesh ref={meshRef} args={[null as any, null as any, 10]}>
        <bufferGeometry attach="geometry">
          <bufferAttribute
            attachObject={["attributes", "position"]}
            args={[vertices, 3]}
          />
        </bufferGeometry>
        <meshBasicMaterial attach="material" side={THREE.DoubleSide} />
      </instancedMesh>

更新每个实例的位置和颜色：

useEffect(() => {
    if (meshRef === null) return;
    if (meshRef.current === null) return;

    const mesh: any = meshRef.current;

    for (let i = 0; i < 10; i++) {
      //position
      tempObject.position.set(
        100 * Math.random(),
        100 * Math.random(),
        100 * Math.random()
      );
      tempObject.updateMatrix();
      mesh.setMatrixAt(i, tempObject.matrix);

      // color
      mesh.setColorAt(
        i,
        tempColor.setRGB(Math.random(), Math.random(), Math.random())
      );
    }
  });

结果：

【讨论】：