javascript - 在自定义几何图形上使用纹理会导致 webgl 错误“尝试访问超出范围的顶点”

Question

使用此代码：

var geometry = new THREE.Geometry()
geometry.vertices.length = 0
geometry.faces.length = 0
geometry.vertices.push(new THREE.Vector3(0, 0, 0))
geometry.vertices.push(new THREE.Vector3(0, 0, 32))
geometry.vertices.push(new THREE.Vector3(0, 32, 32))
geometry.vertices.push(new THREE.Vector3(0, 32, 0))
geometry.faces.push(new THREE.Face4(0, 1, 2, 3))

var wireMaterial = new THREE.MeshBasicMaterial({
  color : 0xffffff,
  wireframe : true
})

var grassMaterial = new THREE.MeshLambertMaterial( { map: THREE.ImageUtils.loadTexture("grass.png") } )
var grassFaceMaterial = new THREE.MeshFaceMaterial([grassMaterial])

scene.add(new THREE.Mesh( geometry, grassFaceMaterial ))

使用wireMesh正常：

但尝试使用纹理网格grassFaceMaterial作为最后一行中的材质会产生错误：

Answer 1

您可能忘记添加 uvs。

geometry.faceVertexUvs[ 0 ].push([
   new THREE.Vector2(0, 0 ),
   new THREE.Vector2( 0, 1 ),
   new THREE.Vector2( 1, 1 ),
   new THREE.Vector2( 1, 0)
] )