Proper method to edit plane vertices

[jfoxworth]

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? Thanks

[jniac]

Your code is a bit messy. Not sure to understand what are you trying to do.
If you're only trying to produce some random brownian noise on a plane, here could be a solution :
https://57vjh.csb.app/

The proper way to update a mesh geometry could be:

From a given mesh:

const MyCustomMesh = () => {
  const mesh = useRef(null)
  // --snip--
  return (
    <mesh ref={mesh}>
      <planeBufferGeometry args={[10, 10, 50, 10]} />
      <meshStandardMaterial color="#00ffff"/>
    </mesh>
  )
}

Update the buffer geometry via React.useEffect or useFrame with:

const updateBufferGeometry = () => {
  const { geometry } = mesh.current
  const { position } = geometry.attributes
  for (const index of enumerate(position.count)) {
    position.array[index * 3 + 2] = amplitude * (Math.random() - 0.5)
  }
  position.needsUpdate = true
  geometry.computeVertexNormals()
}

Where enumerate is a little generator helper:

function* enumerate(count) {
  let i = 0
  while (i < count) yield i++
}

That could be replaced by a "old fashion for loop":

for (let index = 0; index < position.count; index++) { /* --snip-- */ }

[jfoxworth]

Yes. This was what I was looking for. Very helpful.

[jfoxworth]

I don't really understand what is happening in the enumerate function. Can you explain this a little?

[jniac]

It's a pattern inspired by the range() function in python.

Javascript now allows declaration of generator functions. enumerate(x) is a simple generator that allow to write "more readable" loop.

It's definitely a question of style.

So you can forget about it and choose the rewrite the function with a "classic for loop.

a little more about:

// "classic" for loop
for (let index = 0; index < 99; index++) {
  doSomethingWith(index)
}

is equivalent to

function* enumerate(count) {
  let i = 0
  while (i < count) yield i++
}

for (const index of enumerate(99)) {
  doSomethingWith(index)
}

So why choosing the second solution, which is longer, which involves a separate function ?
Well... this allows me not to use any semicolon!
I find it easier to read (no "++", no "<"): for (const index of enumerate(99)).
Also, because of the const keyword, it allows index to be immutable.