Search code examples
three.jsdepth

THREE.JS old renderDepth and issue with new renderOrder

I updated the Three.JS libraries in my prototype and it seems renderDepth has been removed. However, renderOrder does not correctly do the job! It cannot change the depth to define objects on top of each other.

In the following Figure, the right shows a correct visualisation using an older version of Three.JS (I used renderDepth). However, the left image is the latest version of Three.JS. You can see some faces of the small 3D object are hidden.

enter image description here

I implemented Scene 2 to overlap the scene1 and highlight objects in the Scene2. But it does not provide a pleasant visualisation.

This is the link to the source:

The source code in fiddle In this prototype I would like to see the red objects from any angle. At the moment it is hidden by some other objects.

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

  • Transparency can be tricky with webGL. Since all of your objects are transparent, and you want to ensure certain objects are not obscured, you can set

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

    for those objects (the red ones in your case).

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

    three.js r.76