THREE.JS 旧的 renderDepth 和新的 renderOrder 问题
THREE.JS old renderDepth and issue with new renderOrder
我更新了原型中的 Three.JS 库,renderDepth 似乎已被删除。然而,renderOrder 并没有正确地完成这项工作!它不能改变深度来定义彼此重叠的对象。
在下图中,右侧显示了使用旧版本 Three.JS 的正确可视化(我使用了 renderDepth)。然而,左图是Three.JS的最新版本。你可以看到小 3D 物体的一些面被隐藏了。
我实现了场景 2 以重叠场景 1 并突出显示场景 2 中的对象。但它并没有提供令人愉快的视觉效果。
这是link来源:
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 );
}
透明度对于 webGL 来说可能很棘手。由于你所有的对象都是透明的,并且你想确保某些对象不被遮挡,你可以设置
mesh.material.depthTest = false;
mesh.renderOrder = 999; // render them last
对于那些对象(在你的例子中是红色的)。
fiddle: http://jsfiddle.net/VsWb9/5112
three.js r.76
我更新了原型中的 Three.JS 库,renderDepth 似乎已被删除。然而,renderOrder 并没有正确地完成这项工作!它不能改变深度来定义彼此重叠的对象。
在下图中,右侧显示了使用旧版本 Three.JS 的正确可视化(我使用了 renderDepth)。然而,左图是Three.JS的最新版本。你可以看到小 3D 物体的一些面被隐藏了。
我实现了场景 2 以重叠场景 1 并突出显示场景 2 中的对象。但它并没有提供令人愉快的视觉效果。
这是link来源:
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 );
}
透明度对于 webGL 来说可能很棘手。由于你所有的对象都是透明的,并且你想确保某些对象不被遮挡,你可以设置
mesh.material.depthTest = false;
mesh.renderOrder = 999; // render them last
对于那些对象(在你的例子中是红色的)。
fiddle: http://jsfiddle.net/VsWb9/5112
three.js r.76