Three.js прозрачный объект окклюзии

Question

В сцене three.js я хотел бы иметь объект, который не виден, но все же перекрывает другие объекты в сцене, как если бы он был видимым.

Это возможно с библиотекой three.js? Вот пример:

Предположим, у меня есть сцена three.js, которая содержит 3 объекта: объект a, объект b, объект c и камеру. Я хотел бы, чтобы объект c был невидимым для камеры, но все же закрывал объект b... Сценарий 1:В сценарии 1 вот что я хотел бы видеть на камере:

Сценарий 2:В сценарии 2 вот что я хотел бы видеть в камере:

Кто-нибудь может подсказать, какую технику использовать для достижения такого эффекта?

Answer 1

Да, в three.js вы можете создать объект, который невидим, но все же закрывает другие объекты, как если бы он был видимым.

Для этого вам нужно использовать две новые функции, доступные в three.js r.71: Object3D.renderOrder а также Material.colorWrite,

Вы должны убедиться, что невидимый объект отображается перед объектом (ами), которые он должен перекрывать.

Вы управляете порядком рендеринга с помощью renderOrder имущество.

Вы делаете закрывающий объект невидимым, устанавливая его материал colorWrite собственность на false,

// material
var material = new THREE.MeshPhongMaterial();

// mesh a
var geometry = new THREE.PlaneGeometry( 10, 10, 4, 4 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0xff0000 );
mesh.renderOrder = 0; // <=================== new
mesh.position.z = - 10;
scene.add( mesh );

// mesh b
var geometry = new THREE.BoxGeometry( 2, 2, 2 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x606060 );
mesh.renderOrder = 3;
mesh.position.z = 0;
scene.add( mesh );

// mesh c
var geometry = new THREE.BoxGeometry( 3, 3, 3 );
mesh = new THREE.Mesh( geometry, material.clone() );
mesh.material.color.set( 0x0000ff );
mesh.material.colorWrite = false; // <================= new
mesh.renderOrder = 2;
mesh.position.z = 10;
scene.add( mesh );

скрипка: http://jsfiddle.net/4vnsbdz6/1/

еще одна скрипка: http://jsfiddle.net/4vnsbdz6/4/

three.js r.71