如何在three.js中显示立方体的内部颜色?

时间:2019-06-07 08:33:57

标签: javascript three.js

我想用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())。有人知道出了什么问题吗?

1 个答案:

答案 0 :(得分:3)

要使框的几何形状从内部可见,您需要确保正确设置material的{​​{3}}(即分配给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