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

【问题标题】：Three.js - Cannot 'See Through' Cube FaceThree.js - 无法“透视”立方体面
【发布时间】：2013-07-14 05:40:03
【问题描述】：

我有一个包含三种材料的数组。其中之一是 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 );

【问题讨论】：

请添加一些代码，你试图得到更好的响应。

标签： html html5-canvas three.js

【解决方案1】：

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

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

【讨论】：

这就是问题所在。谢谢！