THREE.JS旧renderDepth并与新Renderder一起发布

我更新了原型中的三个.JS库，看起来renderDepth已经被删除了。但是，renderOrder无法正确执行此任务！它无法更改深度以定义彼此重叠的对象

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

我实现了场景2以重叠场景1并高亮显示场景2中的对象。但它并不能提供令人愉快的视觉效果

这是指向源的链接：

在这个原型中，我希望从任何角度看到红色的物体。目前它被其他一些物体所隐藏

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

var容器、摄影机、场景、渲染器、dae、i；
container=document.createElement（'div'）；
文件.正文.附件（容器）；
var loader=new THREE.ColladaLoader（）；
loader.load（'https://dl.dropboxusercontent.com/u/44791710/Project37.dae，函数（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；
位置x=0；
位置y=-50；
位置z=0；
dae.updateMatrix（）；
对于（变量i=0；i

使用webGL时，透明度可能很棘手。由于所有对象都是透明的，并且希望确保某些对象不被遮挡，因此可以设置

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

对于那些对象（您案例中的红色对象）

小提琴：

---

three.js r.76

除非您显示代码，否则您不可能得到任何帮助。创建一个50行的程序来演示问题，并提供到问题的实时链接。不要链接到您的Ente项目。@WestLangley。代码被添加。谢谢你的评论。我很难复制你的图像。试试@WestLangley谢谢。非常好！