THREE.JS old renderDepthと新しいrenderOrderで問題

Question

私のプロトタイプでThree.JSライブラリを更新しましたが、renderDepthが削除されているようです。ただし、renderOrderはジョブを正しく実行しません。お互いの上にオブジェクトを定義するために深さを変更することはできません。

次の図では、右側に、古いバージョンのThree.JS（私はrenderDepthを使用）を使用した正しい視覚化を示しています。ただし、左の画像はThree.JSの最新バージョンです。あなたは、小さな3Dオブジェクトのいくつかの顔が隠されているのを見ることができます。

IはSCENE2にSCENE1及び強調オブジェクトと重なるシーン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