使用PlaneGeometry实现3D波浪效果时遇vertices未定义错误求助

The Problem #

You're building a 3D wave effect with Three.js's PlaneGeometry, and while your updatePLane function runs without issues, the render function throws an "undefined has no properties" error related to vertices. At first glance, the two functions look syntactically similar, making the root cause tricky to spot.

Here’s your problematic render function code:

function render() { 
  requestAnimationFrame(render); 
  camera.position.z -= 150; 
  var x = camera.position.x; 
  var camZ = camera.position.z; 
  camera.position.z = camZ * Math.cos(0.001) - x * Math.sin(0.001) - 10; 
  camera.lookAt(new THREE.Vector3(0, 8000, 0)) 
  for (var c = 0; 1 < planeGeo.vertices.length;c++) { 
    planeGeo.vertices[c].z = Math.sin((1 + count * 0.00002)) * (planeGeo.vertices[c]._myZ - (planeGeo.vertices[c]._myZ * 0.6)); 
    plane.geometry.verticesNeedUpdate = true; 
    count += 0.1; 
  } 
  renderer.render(scene, camera); 
}

The Root Cause #

Look closely at the loop condition in your render function:

for (var c = 0; 1 < planeGeo.vertices.length;c++)

You accidentally used the number 1 instead of the loop variable c in the condition! This creates an infinite loop (since planeGeo.vertices.length is almost certainly greater than 1). Eventually, c will exceed the length of the vertices array, so planeGeo.vertices[c] becomes undefined—and trying to access properties like .z or ._myZ on an undefined value throws the error you’re seeing.

Your first function uses the correct condition (i < planeGeo.vertices.length), which stops the loop when the index reaches the last vertex.

The Fix #

Replace the incorrect loop condition with the proper one using the loop variable c:

for (var c = 0; c < planeGeo.vertices.length;c++) { 
  planeGeo.vertices[c].z = Math.sin((1 + count * 0.00002)) * (planeGeo.vertices[c]._myZ - (planeGeo.vertices[c]._myZ * 0.6)); 
  plane.geometry.verticesNeedUpdate = true; 
  count += 0.1; 
}

A quick optimization: You can move plane.geometry.verticesNeedUpdate = true; outside the loop. Setting this flag once per frame is enough—no need to set it for every vertex:

for (var c = 0; c < planeGeo.vertices.length;c++) { 
  planeGeo.vertices[c].z = Math.sin((1 + count * 0.00002)) * (planeGeo.vertices[c]._myZ - (planeGeo.vertices[c]._myZ * 0.6)); 
  count += 0.1; 
}
plane.geometry.verticesNeedUpdate = true; // Moved outside the loop

Additional Notes #

As you mentioned, following prisoner849’s tip resolved the issue—this is a classic typo-induced bug that’s easy to overlook but causes critical runtime errors. Always double-check loop conditions when working with array indices!

内容的提问来源于stack exchange，提问作者Elite Cardboard