THREE.JS old renderDepth и проблема с новым renderOrder

Question

Я обновил библиотеки Three.JS в своем прототипе, и кажется, что renderDepth был удален. Однако renderOrder неправильно выполняет работу! Он не может изменить глубину, чтобы определять объекты друг над другом.

На следующем рисунке справа отображается правильная визуализация с использованием более старой версии Three.JS (я использовал renderDepth). Однако левое изображение является последней версией Three.JS. Вы можете видеть, что некоторые лица небольшого 3D-объекта скрыты.

Я реализовал Scene 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