質問編集履歴
1
動作条件を追記しました。
title
CHANGED
@@ -1,1 +1,1 @@
|
|
1
|
-
Three.jsにおいて複数Renderer
|
1
|
+
Three.jsにおいて複数Rendererで適切にclippingを動作させたい
|
body
CHANGED
@@ -1,10 +1,12 @@
|
|
1
|
-
Three.jsで複数rendererで、一つのsceneを複数のカメラで描画する時に、
|
1
|
+
Three.jsで複数rendererで、一つのsceneを複数のカメラで描画する時に、clippingが正しく動作しないことについて伺いたく投稿させていただきました。
|
2
2
|
clippingPlaneを`THREE.Vector3(0, 0, -1)`に設定して、オブジェクトの手前側を描画しないようにしています。カメラはOrbitControlsで動かせるようになっています。以下にgifの動作イメージを添付しました。z軸方向負側を描画しないようにしたいだけなので、OrbitControlsでカメラをまわりこませてもz軸方向正側は描画していて欲しいのです。rendererが一つの時はこのように想定する通りに動作しています。
|
3
3
|

|
4
4
|
しかし、rendererを増やすと以下のgifのように、カメラの位置が動くと正しくclippingされません。白い軸状のものや円形の線はきちんとclippingされているようですので、チューブだけの問題のようです。カメラをチューブ状のオブジェクトの真横に移動させると手前側が全て見えなくなってしまうので、イメージとしては、clipping planeが固定されているような感じです。
|
5
5
|

|
6
6
|

|
7
|
+
なぜrendererを増やすとこのような動作になるのか検討もつきません。
|
8
|
+
【追記】clippingは二個目のrendererの方では正しく動作しているようです。
|
7
|
-
な
|
9
|
+
なお、rendererを増やしたのはmulti viewsを実現したかったからです。multi viewsのコードはthree.jsのサンプルを参考にいたしました。
|
8
10
|
[Multi views](https://threejs.org/examples/#webgl_multiple_views)
|
9
11
|
チューブに関してはシェーダーで色を決めたりclippingしたりしています。シェーダーにおけるclippingに関してはこちらを参考にいたしました。
|
10
12
|
[Add clipping to THREE.ShaderMaterial](https://stackoverflow.com/questions/42532545/add-clipping-to-three-shadermaterial)
|