Assigning Material to Specific Faces of Geometry

[vance]

Hallo,
Since the materials array is deprecated, how might one assign a different material to each face? Let's do a simple cube example.

var materialA= new THREE.MeshLambertMaterial({color: 0x00ffaa });
cursorBox = new THREE.CubeGeometry(1, 1, 1);
cubeMesh = new THREE.Mesh(cursorBox, materialA);

// how I might have assigned materialB to face 1 prior to the change? Not sure.

var materialB = new THREE.MeshLambertMaterial({color: 0xff0000 });
mesh.materials.push( materialB);
cubeMesh.goemetry.faces[0].materialIndex = 1;

// my theory on how to do it now. It causes no error but fails to change anything. 
// Waited for one render cycle to pass in case the material/geometry needs to bind

cubeMesh.geometry.faces[0].material = materialB ;              

Any ideas? I may just be missing something fundamentally simple. I'm using a dev build 036caa6.

[alteredq]

Like this:

geometry.materials = [ materialA, materialB ];
geometry.faces[ 0 ].materialIndex = 0; // materialA
geometry.faces[ 1 ].materialIndex = 1; // materialB

var mesh = new THREE.Mesh( geometry, new THREE.MeshFaceMaterial() );

Please note that if you use MeshFaceMaterial you must assign materialIndex to all faces in the geometry.

[vance]

Hm. I tried to implement as you shown, but my faces no longer have visible materials. Collision detection shows that the geometry is there. I looked at THREE.MeshFaceMaterial() and it is an empty constructor.

Oh, maybe since we are defining each material, do we also have to explicitly define vertex normals? (I've also tried double-sided and changing depth testing in case something else was interfering).

[alteredq]

Oops, sorry, forgot to add new for MeshFaceMaterial - updated code snippet.

[vance]

Awesome. I missed the new, too. Easy to overlook. MeshFaceMaterial was exactly what I needed. Cheers!

[drsagitn]

@vance: Can you share your final code, please? I have the same problem. Thanks.

[vance]

The code I have written has already been abstracted into a texture loading class. I can post that, but it would probably be more confusing. It is based on alteredhq's solution. If you're using textures, be sure to force the update once the image loads.

myExampleTexture.needsUpdate = true;

It might be better if you post your code and I can see what's wrong with it.

[drsagitn]

I could make different texture on different side of cylinder by :

var cyGeo = new THREE.CylinderGeometry( 20, 20, 60, 30, 5, false ); cyGeo.materials = [ new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( 'textures/red.png' ), overdraw: true } ), new THREE.MeshBasicMaterial({ map: THREE.ImageUtils.loadTexture( 'textures/blue.png' ), overdraw: true } )

];

                for(var z = 0; z< cyGeo.faces.length; z++)
                    if(cyGeo.faces[z] instanceof THREE.Face3)
                        cyGeo.faces[z].materialIndex = 1;
                    else
                        cyGeo.faces[z].materialIndex = 0;


                voxel = new THREE.Mesh( cyGeo, new THREE.MeshFaceMaterial() );

The side face is beautifully textured. But the caps are not as my expectation. The cap consists of multiple triangle faces and the images textured on it can not be centered but will be spit to multiple triangles For example:

This is the image I would like to texture for the cap: http://imageshack.us/photo/my-images/811/abcjc.png/
This is image I expect the cap to be: http://imageshack.us/photo/my-images/507/expectg.jpg/
This is what I got http://imageshack.us/photo/my-images/13/resultpg.jpg/
It only take the top first pixels to color for the triangles :(

Appreciate any suggestion to solve this, thanks.

[vance]

I don't know too much about the UV mapping for the circle end caps of a cylinder. It looks like the scale of the texture is not getting mapped appropriately, i.e. only the corner where white meets blue is getting mapped to each triangle. I don't have too much time to work with this, but I can suggest a hacky workaround if you're in a rush.

#495

try making a cylinder without end caps. then put in a quad/sprite with transparent image of the cap texture and scale it appropriately. Or maybe use a flattened sphere/cone to avoid depth testing issues with transparency.

[nardove]

I would like to know how to apply different materials to the front and back faces of a Plane, basically apply an image to the front and a solid color to the back, any help will be much appreciated