如何在three.js中使立方体的内部颜色可见？

Question

我想用 THREE.js 从一个立方体开始建造一个房间。到目前为止，我有以下代码：

function loadModelcube() {
    console.log("Inside the function");
    cube.traverse( function( node ) {
    if( node.material ) {
        node.material.side = THREE.DoubleSide;
        }
    });
    scene.add( cube );
}

var geometry = new THREE.BoxGeometry(100,50,100);
var material = new THREE.MeshBasicMaterial({color: 0xff4444, wireframe: false}); 
cube = new THREE.Mesh(geometry, material);

var managercube = new THREE.LoadingManager( loadModelcube );

使用上面的代码，立方体并不像预期的那样可见。另外，我没有看到控制台日志按预期打印出来（即由于调用了函数loadModelcube()）。有谁知道出了什么问题？

Answer 1

要使盒子几何图形从内部可见，您需要确保正确设置了material 的side field（即分配给cube 网格的那个）。

在您的情况下，将material.side 设置为THREE.BackSide 会达到预期的效果。

应用以下更改应该适合您：

var geometry = new THREE.BoxGeometry(100,50,100);
var material = new THREE.MeshBasicMaterial({color: 0xff4444, wireframe: false}); 

/* Cause the material to be visible for inside and outside */
material.side = THREE.BackSide; 

var cube = new THREE.Mesh(geometry, material);
scene.add(cube);

或者，如果您希望立方体从内部和外部可见，您可以将material.side 设置为THREE.DoubleSide。