0

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

Joshua Foxworth
  • 1,236
  • 1
  • 22
  • 50

1 Answers1

0

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.

mrossman
  • 561
  • 4
  • 12