three.js 用 MeshFaceMaterial 面改变对象的颜色答案

【问题标题】：three.js changing colour of object with MeshFaceMaterial facesthree.js 用 MeshFaceMaterial 面改变对象的颜色
【发布时间】：2015-10-15 16:26:38
【问题描述】：

我正在尝试使用 three.js，我制作了这个简单的谷物盒并将其添加到我的场景中。作为 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);

我一直在结合使用投影仪和光线投射器来更改场景中使用鼠标突出显示的对象的颜色。这段代码用于将所有对象更改为红色，除了我的多面谷物盒对象。我该如何修改这段代码来解决这个问题。

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

        }
}

我试图包含一段如下代码，但还没有成功。

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

【问题讨论】：

创建一个 jsfiddle 会让我们更容易为您提供帮助。

标签： three.js

【解决方案1】：

小提琴会让你的问题更容易理解，我们可以更容易地看到问题所在，但在此之前我可以告诉你的至少是我在需要类似内容的程序中所做的事情。

它可能与您如何设置颜色一样小。我的做法是：

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

“myObject.geo”对您来说将是“intersects[0].object.geometry”。

【讨论】：