three.js - Proper method to move plane vertices locations in React-Three-Fiber

Question

I want to create a plane and set the x,y,z locations for the plane individually. So, in three.js it would be something like this ...

var plane = new THREE.PlaneGeometry(planeSize, planeSize, planeDefinition, planeDefinition);
var plane = new THREE.Mesh(plane, new THREE.MeshBasicMaterial({
color: meshColor,
wireframe: true
}));

for (var i = 0; i < plane.vertices.length; i++) {
    plane.vertices[i].z += Math.random() * vertexHeight - vertexHeight;
    plane.vertices[i]._myZ = plane.vertices[i].z
}

I don't need to update these vertices locations, so I don't need to use a hook of any kind. Is there a parameter to feed vertices locations directly into the react component? Is there a better way to do this? I tried creating the vertices and then feeding them into the vertices parameter with a primitive, but that requires you to make the faces as well and I could not get that to work.

Thanks

question from:https://stackoverflow.com/questions/65912403/proper-method-to-move-plane-vertices-locations-in-react-three-fiber

Answer 1

You can't feed vertices directly to the component, you'd have to set that imperatively like in Three.js. You could either get a ref to the geometry component and modify it in useLayoutEffect, or create the geometry inside of something like useMemo or useState and assign it to the geometry prop of the <mesh>. Note that PlaneGeometry is now a BufferGeometry in Three.js r125 so you can't set vertices like you've shown anymore.