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

おそらく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)
] )