Applying a DataTexture to a programmatically generated Mesh in three.js

Question

The actual question:

Do I need to set more than faceVertexUvs[0] to texture a Material on a Mesh? I'm not sure how to get rid of the glDrawElements error. I have tried using different Materials such as MeshPhongMaterial and MeshLambertMaterial, but frankly I'm not sure what the difference is. I've also tried calling computeVertexNormals() and computeTangents() on my underlying geometry. The firehose approach is not working here..

Previous description

I am building a mesh at runtime using a geometry that starts out as a triangle-tesselated plane. I deform the mesh by updating the z coordinates of the vertices periodically. This all works fine, but I'm having problems using a Material with a DataTexture.

I get this error:

glDrawElements: attempt to access out of range elements in attribute 0

I think that this message means that it cannot find the UV layer for my geometry, but this is not for lack of trying to insert the vectors. Here is my code that loads faces into my Geometry called model

for (j=0; j<vh-1; j++) {
for (i=0; i<vw-1; i++) {

    var a = j*vw+i;
    var b = (j+1)*vw+i;
    var c = (j*vw+i+1);
    var d = (j+1)*vw+i+1;

    model.faces.push( new THREE.Face3(a,b,c) );
    model.faces.push( new THREE.Face3(c,b,d) );

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

}
}

I then add this model, along with a material to a faceMesh, which is in turn added to the scene:

var material = new THREE.MeshBasicMaterial();
var faceMesh = new THREE.Mesh(model, material);

It is later in the code that I add a texture to this material, and this is when the above gL errors show up (in the Chrome javascript console)

material.map = new THREE.DataTexture(new Uint8Array(bytes, rgbByteIdx), 
                     inputW, inputH, THREE.RGBFormat);

material.needsUpdate = true;

I have tried using faceUVs in addition to faceVertexUVs when building the Geometry. Perhaps I need to use something other than MeshBasicMaterial for this?

craig · Accepted Answer · 2013-03-04 03:21:22Z

2

I figured it out, after much trial and error.

The problem here is that I initially set my MeshBasicMaterial with no texture. After adding a texture and setting the needsUpdate flag for this material, it proceeded to throw the gL errors.

By initially creating my Material with a specific texture (using ImageUtils.generateDataTexture), the later addition of a texture is accepted by the system, the errors go away, and I am successfully drawing my picture on the mesh.

var texture = THREE.ImageUtils.generateDataTexture(inputW, inputH, initColor );
var material = new THREE.MeshBasicMaterial( { map : texture });
var faceMesh = new THREE.Mesh(model, material);

answered Mar 4, 2013 at 3:21

craig

1562 silver badges5 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Applying a DataTexture to a programmatically generated Mesh in three.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related