How do you create Points using Three JS and React-Three-Fibre

Question

I am using React, Three JS, and React-Three-Fibre

I want to create an array of 100 Points with random colors, position and sizes. I am confused with how to go about it, I would like to accomplish it by pre defining buffer arrays, then in some loop each point will be assigned color, position and size from the buffers.

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

If for every buffer I just have 1 item let positionsBuffer = new Float32Array([3, 3, 3]) I will be able to place a point. If the buffer arrays contain multiple items, how do I go about rendering a point for every item in the buffer arrays?

score 0 · Answer 1 · answered Jan 09 '23 at 21:25

I can give you my example, hopefully, it will help.

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

How do you create Points using Three JS and React-Three-Fibre

1 Answers1