web-dev-qa-db-ja.com

Three Jsでオブジェクトの順序を変更する方法は？

選択して移動できる複数の3Dオブジェクトを配置するwebglレンダラーを使用してシーンを作成しました。ただし、オブジェクトを選択したときに、その軸を描画したいと思います。オブジェクトの中心に線を引くのは問題ありませんが、他のオブジェクトが前面にある場合でもそれらが見えるように、それらをシーンの他の何よりも前に表示したいと思います-Blenderのように。

RenderDepthパラメータを試してみましたが、使用方法が理解できなかったため、結果が得られませんでした。

ご協力ありがとうございました。

three.js
27
Scrubs

一部のオブジェクトを「上」または「前」にレンダリングする場合、1つのトリックは2つのシーンを作成することです。最初のシーンは通常のシーンで、2番目のシーンには上に配置するオブジェクトが含まれています。

まず、設定

_renderer.autoClear = false;
_

次に、2つのシーンを作成します

_var scene = new THREE.Scene();
var scene2 = new THREE.Scene();
_

通常どおり最初のシーンにオブジェクトを追加し、2番目のシーンの上に置きたいオブジェクトを追加します。

次に、render()関数で次のようにします。

_renderer.clear();
renderer.render( scene, camera );
renderer.clearDepth();
renderer.render( scene2, camera );
_

これにより、最初のシーンがレンダリングされ、深度バッファがクリアされてから、2番目のシーンが上にレンダリングされます。

これがフィドルです： http://jsfiddle.net/d9Lzdkkr/

編集：別の解決策は、1つのシーンのみを持つことですが、次のパターンを使用します。

_mesh.renderOrder = 999;
mesh.onBeforeRender = function( renderer ) { renderer.clearDepth(); };
_

メッシュに単一のマテリアルがある場合、「上」にレンダリングされます。

three.js r.85

66
WestLangley