How do I render points on every vertex of my geometry in React with three.js and Three-React-fiber?

Question

I am wondering how to use the pointsmaterial and the points object from three-react-fiber. I have a custom geometry that I import from a .gltf file and I currently render it like this:

<mesh
    castShadow
    receiveShadow
    ref={grip}
    geometry={nodes.Circle002_1.geometry}
    material={wired}
  />

However, I am lost in how to create a pointsmaterial and attach it to the mesh instead of the wired material I use now. Can someone please explain how to do this in React?

score 2 · Accepted Answer · answered May 12 '22 at 08:53

Okay, the answer was really easy. I changed the <mesh tag to a <points tag, and I made a material with the following constructor:

const pMaterial = new PointsMaterial(); then I set the points size with:

pMaterial.size = 0.01

and I changed the material prop in the <points tag to:

material={pMaterial}.

This draws points at every vertex intersection of a custom 3d geometry.

How do I render points on every vertex of my geometry in React with three.js and Three-React-fiber?

1 Answers1