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

使用此代码：

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

用作最后一行中的材质会产生错误：

---

您可能忘了添加UV

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

---

您可能忘了添加UV

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

---

我找到了[此解决方案][1]，希望它能很好地帮助您。[1] ：我找到了[此解决方案][1]，希望它能对您有所帮助。[1]: