THREE.JS alte renderDepth und Problem mit neuen renderOrder

Question

Ich aktualisierte die Three.JS Bibliotheken in meinem Prototyp und es scheint, dass renderDepth wurde entfernt. RenderOrder führt diese Aufgabe jedoch nicht korrekt aus! Es kann nicht die Tiefe ändern, um Objekte übereinander zu definieren.

In der folgenden Abbildung zeigt rechts eine korrekte Visualisierung mit einer älteren Version von Three.JS (ich habe renderDepth verwendet). Das linke Bild ist jedoch die neueste Version von Three.JS. Sie können sehen, dass einige Gesichter des kleinen 3D-Objekts ausgeblendet sind.

I umgesetzt 2 Szene die scene1 zu überlappen und Objekte im Scene2 zu markieren. Aber es bietet keine angenehme Visualisierung.

Dies ist der Link zur Quelle:

The source code in fiddle In diesem Prototyp Ich mag würde die roten Objekte aus jedem Winkel sehen. Im Moment ist es durch einige andere Objekte versteckt.

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

Transparenz kann mit WebGL schwierig sein. Da alle Ihre Objekte transparent sind, und möchten Sie bestimmte Objekte, um sicherzustellen, nicht verdeckt sind, können Sie

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

für diese Objekte (die roten in Ihrem Fall) gesetzt.

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

three.js r.76