当用户单击立方体的面时绘制该面

Question

我正在努力按照标题所说的去做。 当用户单击立方体的一个面时，该面会改变颜色。

这是我的代码片段：

// create a cube
var cubeGeometry = new THREE.BoxGeometry(20, 20, 20);
var cubeMaterial = new THREE.MeshLambertMaterial({color: 0xffff00 }); //0xF7F7F7 = gray
cube = new THREE.Mesh(cubeGeometry, cubeMaterial);
cube.userData.originalColor = 0xffff00;

function onDocumentMouseClick(event) //if we detect a click event
    {
        // the following line would stop any other event handler from firing
        // (such as the mouse's TrackballControls)
        event.preventDefault();

        // update the mouse variable
        mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
        mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
         
        var vector = new THREE.Vector3( ( event.clientX / window.innerWidth ) * 2 - 1, - ( event.clientY / window.innerHeight ) * 2 + 1, 0.5 );
        vector.unproject( camera );
        raycaster.set( camera.position, vector.sub( camera.position ).normalize() );

        var intersects = raycaster.intersectObject( cube );
        if ( intersects.length > 0 )
        {
            var index = Math.floor( intersects[0].faceIndex / 2 );
            switch (index)
            {
                 case 0: 
                 case 1: 
                 case 2: 
                 case 3: 
                 case 4: 
                 case 5: 
            }

        }
}

此代码不完整。 我的问题是：

1. 我不知道这个策略是否正确且有效
2. 我不知道在不同的情况下使用什么代码来绘制立方体的那一侧。

Answer 1

首先，考虑将立方体的面分成多个绘制组。 这个答案深入探讨了如何做到这一点。

这个想法是立方体的所有面都具有相同的颜色，但材质不同。这将允许您单独更改材质的颜色，因此您将单独更改立方体面的颜色。

当您从

Raycaster

收到响应时，请查找

faceIndex

属性。这将告诉您相交面的索引。找到该索引属于哪个绘制组，然后您可以引用该组的材质索引，从而更改材质的颜色。

Answer 2

我需要的是

materialIndex

。它对我有用：

var index = intersects[0].face.materialIndex;