如何使用 Three JS 和 React-Three-Fibre 創建點

Question

我正在使用 React、Three JS 和 React-Three-Fibre

我想創建一個 100 個點的數組，隨機 colors、position 和大小。 我對如何 go 感到困惑，我想通過預定義緩沖區 arrays 來完成它，然后在某個循環中每個點都將從緩沖區分配顏色、position 和大小。

// Buffers
    let positionsBuffer = new Float32Array([[0, 0, 0], [3, 3, 3], [6, 6, 6]] )
    let colorsBuffer = new Float32Array([[92, 123, 23], [123, 12, 233], [23, 98, 198]]) 
    let sizesBuffer = new Float32Array([[1], [2], [3]])

return (
        <mesh
            position={[position_x, position_y, position_z]}
            ref={ref}
            scale={clicked ? 1.5 : 1}
            onClick={() => setClicked(!clicked)}
            onPointerOver={() => setHovered(true)}
            onPointerOut={() => setHovered(false)}
        >
            <Points positions={positionsBuffer} colors={colorsBuffer} sizes={sizesBuffer}>
                <pointsMaterial />
            </Points>
        </mesh>
    )

如果對於每個緩沖區我只有 1 個項目let positionsBuffer = new Float32Array([3, 3, 3])我將能夠放置一個點。 如果緩沖區 arrays 包含多個項目，我 go 如何為緩沖區 arrays 中的每個項目渲染一個點？

Answer 1

我可以給你我的例子，希望它會有所幫助。

const particlesCount = 100;
const particlePositions = new Float32Array(particlesCount * 3);

for (let i = 0; i < particlesCount; i++) {
  const i3 = i * 3;

  particlePositions[i3] = Math.random();
  particlePositions[i3 + 1] = Math.random();
  particlePositions[i3 + 2] = Math.random();
}

export const Particles = () => {
  return (
    <points>
      <bufferGeometry>
        <bufferAttribute
          attach='attributes-position'
          count={particlesCount}
          itemSize={3}
          array={particlePositions}
        />
      </bufferGeometry>
      <pointsMaterial
        size={0.04}
        color={colors.materialColor}
        transparent
      />
    </points>
  );
};