three.js - メッシュを別の上に表示 | オーバーラップを削除 | レンダリング順序 | Three.js

Question

私は2つのオブジェクトメッシュを持っています。どちらにもいくつかの共通領域がありますが、完全ではありません。

私はそれらを画面に追加して両方を表示しました..別のメッシュの上にあるメッシュのように。しかし、下のメッシュは上のメッシュと重なっていますが、私が達成したいのは、下のメッシュは常に下にとどまる必要があり、オーバーラップしたり上のメッシュ全体にスペースを与えたりすることはありません.

私はこのフィドルを経験しました..renderorderをいじる

そして、私はこのようなものを試しました..

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           root.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           root.renderOrder = 1;
           scene.add(root);
      });

しかし、重複がまだ残っている理由はわかりません..

私は試した...

var objLoader1 = new OBJLoader2();
objLoader1.load('assets/object1.obj', (root) => {
           objLoader1.renderOrder = 0;
           scene.add(root);
       });
var objLoader2 = new OBJLoader2();
objLoader2.load('assets/object2.obj', (root) => {
           objLoader2.renderOrder = 1;
           scene.add(root);
      });

次に、このフィドルを調べてみました..別のフィドル しかし、実行すると、下または上のメッシュしか得られません。しかし、私は重複せずに両方を見たい..

 var layer1 = new Layer(camera);
 composer.addPass(layer1.renderPass);
 layer1.scene.add(new THREE.AmbientLight(0xFFFFFF));
 var objLoader1 = new OBJLoader2();
 objLoader1.load('assets/object1.obj', (root) => {
        layer1.scene.add(root);
  });
  var layer2 = new Layer(camera);
  composer.addPass(layer2.renderPass);
  layer2.scene.add(new THREE.AmbientLight(0xFFFFFF));
  var objLoader2 = new OBJLoader2();
  objLoader2.load('assets/object2.obj', (root) => {
        layer2.scene.add(root);
  });

マテリアルの depthTest を False にしましたが、何も役に立ちませんでした..

誰かが私が望んでいたことを達成するのを手伝ってもらえますか..オーバーラップの意味がわからない場合は、下の画像を参照してください..

そして、時間と労力をかけて私を助けてくれた人に感謝します...