Question

我正在尝试使用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); 
}

Answer 1

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

它可能与您设置颜色的方式一样小。我这样做的方式是：

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

其中＆＃34; myObject.geo＆＃34;将＆＃34;交叉[0] .object.geometry＆＃34;对你而言。

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

1 个答案: