javascript - Three.js-別のジオメトリの上に

Question

Three.jsでは、メッシュの位置がすべてのオブジェクトの背後にある場合でも、メッシュを常にシーンの上にレンダリングすることは可能ですか？メッシュを使用してなげなわ選択を実装しているので、シーンの残りの部分の上に選択ボックスをレンダリングする必要があります。

Answer 1

はい。

最初にこれを行います：

renderer.autoClear = false;

次に、一番上に置きたいオブジェクトだけを含む2番目のシーンを作成します。次に、レンダリングループで：

renderer.clear();                     // clear buffers
renderer.render( scene, camera );     // render scene 1
renderer.clearDepth();                // clear depth buffer
renderer.render( scene2, camera );    // render scene 2

---

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

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

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

Answer 2

前面に 1 つのメッシュのみをレンダリングする場合はdepthTest、そのオブジェクトのマテリアルを次のように設定して管理することもできますfalse。

var onTopMaterial = new THREE.MeshStandardMaterial({
  color: 'red',
  depthTest: false
});

mesh.material = onTopMaterial;

このフィドルでデモンストレーションを確認してください

---

注:renderer.sortObjectsデフォルト値に設定されていることを確認してくださいtrue。