using a texture on a custom geometry results in a webgl error "attempt to access out of range vertices"

Question

Using this code:

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 ))

using wireMesh works okay:

wiremesh

but trying to use the textured mesh grassFaceMaterial as the material in the last line produces an error:

error

I found [this solution][1], hope it well help you . [1]: http://stackoverflow.com/questions/9252764/how-to-create-a-custom-mesh-on-three-js — AbuQauod, Jan 03 '13 at 07:58

score 4 · Accepted Answer · answered Jan 03 '13 at 08:15

4

You probably forgot to add the 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)
] )

answered Jan 03 '13 at 08:15

Gero3

2,817
1
22
21

using a texture on a custom geometry results in a webgl error "attempt to access out of range vertices"

1 Answers1