three.js框几何不透明度

Question

朋友们，我使用three.js基本材料创建了2个盒子，我不想看到更大盒子里面的小盒子，但我现在可以看到所有这些盒子。你能救我吗？

   var cube1 = new THREE.Mesh(
new THREE.BoxGeometry(200, 200, 200),
new THREE.MeshBasicMaterial({
    color: 0xffffff,
    transparent: false,
    opacity: 1,
    overdraw: 0.5
}));

scene.add(cube1);

var cube2 = new THREE.Mesh(
new THREE.BoxGeometry(100, 100, 100),
new THREE.MeshBasicMaterial({
    color: 0x000000,
    transparent: false,
    opacity: 1,
    overdraw: 0.5
}));

scene.add(cube2);

Answer 1

理想情况下，这可能不会发生，也许你可能错过了一些东西，我这里是你想要实现的代码片段中的完整代码。

＆＃13;

＆＃13;

var camera, scene, renderer;
var mesh;

init();
animate();

function init() {

    renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
     renderer.setClearColor(0xAAAAAA);
     renderer.sortObjects = true;
    document.body.appendChild(renderer.domElement);

    //

    camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 1, 1000);
    camera.position.z = 400;

    scene = new THREE.Scene();

     cube1 = new THREE.Mesh(
    new THREE.BoxGeometry(200, 200, 200),
    new THREE.MeshBasicMaterial({
        color: 0xffffff,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));

    scene.add(cube1);


    //
     cube2 = new THREE.Mesh(
    new THREE.BoxGeometry(100, 100, 100),
    new THREE.MeshBasicMaterial({
        color: 0x000000,
        transparent: false,
        opacity: 1,
        overdraw: 0.5
    }));

    scene.add(cube2);
    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    requestAnimationFrame(animate);
    cube1.rotation.x += 0.005;
	cube1.rotation.y += 0.01;
    
    cube2.rotation.x += 0.010;
	cube2.rotation.y += 0.01;


    renderer.render(scene, camera);

}

＆＃13;

html, body {
    padding:0px;
    margin:0px;
}
canvas {
    width: 100%;
    height: 100%
}

＆＃13;

<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"></script>

＆＃13;

＆＃13;

＆＃13;

如果您愿意，我还创建了jsfiddle link。希望它能解决您的问题，否则您可以编辑代码段来重现您的问题。

Answer 2

找到原因：

see through example

如果我把立方体位置.z＆lt; 0，我＆＃39; l＆＃39;透过＆＃39;。

但是如果你想看透，这是一个棘手的问题。

[http://jsfiddle.net/agpcn1ej/1/][1]

似乎找到了答案。

那是因为房屋模型的一部分位置.z＆lt; 0，相机附近＆lt; 0 0，也许是three.js z-buffer clear negative = 0，z-buffer决定了sheltery关系。