html - Three.js - 无法“透视”立方体面

Question

我有一组三种材料。其中之一是 MeshBasicMaterial，透明设置为 true，不透明度设置为 0。

我将这种透明材质分配给立方体的顶面，希望能看到其他面的内壁。

然而，相反，顶面根本没有绘制（出现白色，就像画布的背景），但不允许我“看穿”它。

这是如何实现的？

（最终效果应该只是一个顶部打开的盒子）

// FELT TEXTURE
var felt = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/greenfelt.jpg')
});

// WOOD TEXTURE
var wood = new THREE.MeshLambertMaterial({
    map: THREE.ImageUtils.loadTexture('images/woodgrey.jpg')
});

// TRANSPARENT MATERIAL
var transparent = new THREE.MeshBasicMaterial({ 
    opacity: 0,
    transparent: true
});

var materials = new THREE.MeshFaceMaterial([
    felt,
    wood,
    transparent
]);

var cube = new THREE.CubeGeometry(RECTANGLE_WIDTH, RECTANGLE_HEIGHT, RECTANGLE_DEPTH ); 
    cube.faces[0].materialIndex = 1; // LEFT
    cube.faces[1].materialIndex = 1; // RIGHT
    cube.faces[2].materialIndex = 1; // BACK
    cube.faces[3].materialIndex = 1; // FRONT
    cube.faces[4].materialIndex = 2; // TOP (TRANSPARENT)
    cube.faces[5].materialIndex = 0; // BOTTOM


// RECTANGLE
var rectangle = new THREE.Mesh( cube, materials );

scene.add( rectangle );

Answer 1

也许你的立方体正在被剔除。默认情况下，仅绘制每个面的正面。尝试设置material.side = THREE.DoubleSide所有立方体材质（透明材质不需要它，但所有其他材质）。

felt.side = THREE.DoubleSide;
wood.side = THREE.DoubleSide;
var materials = new THREE.MeshFaceMaterial([
  felt,
  wood,
  transparent
]);