如何使用Three JS和React-Three-Fibre创建点

Question

我正在使用React, Three JS和React-Three- fibre

我想创建一个数组的100点随机颜色，位置和大小。我对如何去做感到困惑，我想通过预定义缓冲区数组来完成它，然后在一些循环中，每个点将从缓冲区中分配颜色，位置和大小。

// 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>
)

如果对于每个缓冲区我只有一个项目let positionsBuffer = new Float32Array([3, 3, 3])，我将能够放置一个点。如果缓冲区数组包含多个项目，我如何为缓冲区数组中的每个项目呈现一个点?

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>
);
};