CODEWITHSUNDEEP
three.js
AMorton1989
AMorton1989

Reputation: 313

three.js changing colour of object with MeshFaceMaterial faces

I am experimenting with three.js, and I have made this simple cerealbox and added it to my scene. The cereal box is visualised with loaded images on the faces as part of a THREE.MeshFaceMaterial 

// Cereal box
    // Store the images required for each of the sides on the cereal box. 
    var cerealboxsides = [
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frostiesback.jpg') // west facing side
       }),
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frostiesback.jpg')  // East facing side
       }),
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frostiesback.jpg') 
       }),
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frostiesback.jpg')
       }),
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frosties.jpeg') // Front of box
       }),
       new t.MeshLambertMaterial({
           map: t.ImageUtils.loadTexture('images/frostiesback.jpg') // The back facing side. (or front but using back this time)
       })
    ];
    cerealbox = new t.Mesh(
            new t.BoxGeometry(20, 30, 5, 30, 30, 30),
            new t.MeshFaceMaterial(cerealboxsides)
    );
    cerealbox.position.set(-UNITSIZE-50, 35, -UNITSIZE-50);     // goes x, y, z for width, height, depth again.
    // Scenemodels (array) already added to scene. 
    //scene.add(cerealbox);
    scenemodels.add(cerealbox);

I have been incorporating the use of projectors and raycasters to change the color of objects in my scene when highlighted with the mouse. This passage of code works to change all objects the color red, except for my multi faced cereal box object. How can I amend this passage of code to account for this.

       projector = new t.Projector();
        raycaster = new t.Raycaster();
        mouse2D = new t.Vector3(0, 0, 0);
        pointerDetectRay = new t.Raycaster();
    pointerDetectRay.ray.direction.set(0, -1, 0);

    pointerDetectRay = projector.pickingRay(mouse2D.clone(), cam);

            var intersects = pointerDetectRay.intersectObjects(scenemodels.children);

        if (intersects.length > 0) 
        {


            if ( INTERSECTED != intersects[ 0 ].object ) {
// intersect is object currently beneath mouse          
var intersect = intersects[0];



            intersect.object.material.color.setHex(0xff0000);

        }
}

I have tried to include a passage of code like the following but have not managed to make it work yet. 

var faces = intersects[0].object.geometry.faces;
for (var i = 0; i < faces.length; i++) {
   faces[i].color.setHex(0xff0000); 
}

Upvotes: 0

Views: 1102

Answers (1)

Jicaar
Jicaar

Reputation: 1114

A fiddle would make your question easier to understand and we could see what the issue is more easily, but what I can tell you until then is at least what I do in a program that requires something similar.

It may be as small of a thing as how you are setting the color. The way I do it is: 

var facesLength = myObject.geo.faces.length;
for ( var i = 0; i < facesLength; i++ ) {
    var face = myObject.geo.faces[ i ];
    face.color.setStyle("#0066FF");
}

Where "myObject.geo" would be "intersects[0].object.geometry" for you.

Upvotes: 1

Related Questions