THREE.JS 旧的 renderDepth 和新的 renderOrder 问题

Question

我更新了原型中的 Three.JS 库，renderDepth 似乎已被删除。然而，renderOrder 并没有正确地完成这项工作！它不能改变深度来定义彼此重叠的对象。

在下图中，右侧显示了使用旧版本 Three.JS 的正确可视化（我使用了 renderDepth）。然而，左图是Three.JS的最新版本。你可以看到小 3D 物体的一些面被隐藏了。

我实现了场景 2 以重叠场景 1 并突出显示场景 2 中的对象。但它并没有提供令人愉快的视觉效果。

这是link来源：

The source code in fiddle 在这个原型中，我想从任何角度看红色物体。目前它被其他一些对象隐藏了。

var container, camera, scene, renderer, dae, i;
    container = document.createElement( 'div' );
    document.body.appendChild( container );
    var loader = new THREE.ColladaLoader();
    loader.load( 'https://dl.dropboxusercontent.com/u/44791710/Project37.dae', function ( collada ) {
        dae = collada.scene;
        dae.scale.x = dae.scale.y = dae.scale.z = 3;
        dae.rotation.x=-Math.PI/2;      
        dae.rotation.z= -Math.PI/20;                            
        dae.position.x=0;  
        dae.position.y=-50;  
        dae.position.z=0;  
        dae.updateMatrix();


        for (var i=0; i < dae.children.length; i++) {
                dae.children[i].visible=true;
                dae.children[i].children[0].material.opacity=0.1;
                dae.children[i].children[0].material.transparent=true;
                dae.children[i].children[0].renderOrder= 1;
        }
        init();
        animate();

    } );
    function init() {
        camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 0.1, 10000 );
        camera.position.set( 200, 180, 200 );
        camera.lookAt(new THREE.Vector3( 0, -40, 0 ));                  
        camera.updateProjectionMatrix();
        scene = new THREE.Scene();
        scene.add( dae );
        scene.getObjectByName('Lot_103Pt-2', true).children[0].material.opacity=0.8;
        scene.getObjectByName('Lot_103Pt-2', true).children[0].material.color.setHex( 0xff4444 );
        scene.getObjectByName('Lot_103Pt-2', true).renderOrder= 100;    

        // Lights
        scene.add( new THREE.AmbientLight( 0xcccccc ) );
        renderer = new THREE.WebGLRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.sortObjects = true;
        container.appendChild( renderer.domElement );
        controls = new THREE.OrbitControls(camera, container, 1);
    }

    function animate(time) {
        requestAnimationFrame( animate );
        controls.update(1);
        renderer.render( scene, camera );
    }

Answer 1

透明度对于 webGL 来说可能很棘手。由于你所有的对象都是透明的，并且你想确保某些对象不被遮挡，你可以设置

mesh.material.depthTest = false;
mesh.renderOrder = 999; // render them last

对于那些对象（在你的例子中是红色的）。

fiddle: http://jsfiddle.net/VsWb9/5112

three.js r.76

THREE.JS 旧的 renderDepth 和新的 renderOrder 问题

THREE.JS old renderDepth and issue with new renderOrder

depth

three.js