三.js 盒子几何不透明度答案

【问题标题】：three.js box geometry opacity三.js 盒子几何不透明度
【发布时间】：2015-02-23 00:26:09
【问题描述】：

朋友们，我用了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);

【问题讨论】：

如果您使用的是CanvasRenderer，请切换到WebGLRenderer。
没有。我正在使用 webglrender

标签： three.js

【解决方案1】：

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

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);

}

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

&lt;script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r69/three.min.js"&gt;&lt;/script&gt;

如果您愿意，我还创建了一个jsfiddle link。希望它能解决您的问题，否则您可以编辑 sn-p 以重现您的问题。

【讨论】：

【解决方案2】：

找出原因：

see through example

如果我把立方体 position.z

但如果你想看穿，这很棘手。

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

似乎找到了答案。

那是因为部分房屋模型position.z

【讨论】：