Three.js：在 MeshFaceMaterial 中使用 cubeMaterials 和不透明度 - THREE.DoubleSide 不起作用？

Question

我正在使用 ThreeJS r65 创建一个简单的多维数据集。立方体的相对面分配了相同的颜色：

var scene = new THREE.Scene(); 
var camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000); 
var renderer = new THREE.WebGLRenderer(); 

renderer.setSize(window.innerWidth, window.innerHeight); 
renderer.setClearColor(0xffffff, 0); // bg color
document.body.appendChild(renderer.domElement); // displays canvas

camera.position.z = 13; // move away to see coord center
camera.position.y = 7;

controls = new THREE.OrbitControls(camera, renderer.domElement);

// CUBE
var geometry = new THREE.CubeGeometry(2,2,2);
var cubeMaterials = [ 
    new THREE.MeshBasicMaterial({color:0x33AA55, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0x55CC00, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x000000, transparent:true, opacity:0.2, side: THREE.DoubleSide}),
    new THREE.MeshBasicMaterial({color:0xFF0000, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0xFF0000, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
    new THREE.MeshBasicMaterial({color:0x5555AA, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
]; 
// Create a MeshFaceMaterial, which allows the cube to have different materials on each face 
var cubeMaterial = new THREE.MeshFaceMaterial(cubeMaterials); 
var cube = new THREE.Mesh(geometry, cubeMaterial);
scene.add( cube );

var render = function () { 
    requestAnimationFrame(render); 
    controls.update();
    renderer.render(scene, camera); 
};

render();

如果从顶部看立方体，您会看到只有前两个绿色面在内部显示它们的颜色。其他 4 个面仅从外部显示颜色，而从内部不显示颜色。另见图片：

难道我做错了什么？这是一个错误吗？还是因为 WebGL？

Answer 1

用这种颜色改变你的材料...... http://jsfiddle.net/ebeit303/rp7NU/

var cubeMaterials = [ 
new THREE.MeshBasicMaterial({color:0xff0000, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({color:0x00ff00, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
new THREE.MeshBasicMaterial({color:0x0000ff, transparent:true, opacity:0.8, side: THREE.DoubleSide}),
new THREE.MeshBasicMaterial({color:0xffff00, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
new THREE.MeshBasicMaterial({color:0xff00ff, transparent:true, opacity:0.8, side: THREE.DoubleSide}), 
new THREE.MeshBasicMaterial({color:0x00ffff, transparent:true, opacity:0.8, side: THREE.DoubleSide})];