Question

我在原型中更新了Three.JS库，似乎renderDepth已被删除。但是，renderOrder无法正常完成工作！它无法更改深度以将对象定义在彼此之上。

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

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

这是源的链接：

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

对于那些对象（在你的情况下为红色对象）。

小提琴：http://jsfiddle.net/VsWb9/5112

three.js r.76

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

1 个答案: