OBJオブジェクトをThree.JS内の別のものと入れ替えるにはどうすればよいですか？

Question

私はThreeJSを使用してOBJをWebページにロードしていますが、これは正常に完了しましたが、表示されたOBJファイルを別のページにスワップするボタンをページに追加します。オブジェクトをロードするときにオブジェクトの名前を付けようとしました：

object.name = "selectedObject";

新しいボタンが

scene.remove（selectedObject）がクリックされたとき、私は、シーンからそれを削除できるように。

と新しいオブジェクトアタッチ：

scene.add（NEWOBJECT）を、

しかし、私はこれを一般的なコードに実装する方法が間違っています/正しい構文は何でしょうか。

はここでモデルをロードするためのコードです：

  var objectloading = 'obj/male02/new.obj'; 
var loader = new THREE.OBJLoader(manager); 
      loader.load(objectloading, function (object) { 

       object.traverse(function (child) { 

        if (child instanceof THREE.Mesh) { 

         child.material.map = texture; 

        } 

       }); 

       object.position.y = -30; 
       scene.add(object); 

      }, onProgress, onError); 

すべてのヘルプはapreciatedされて、ありがとう！

Answer 1

これについては、さまざまな方法があります。それは、あなたのコードが何がロードされたのかを考慮する必要があるということです。シーンをトラバースすることはできますが、objファイルを特定のリストにキャプチャして一覧表示することは、特にレイキャスティングのようなものを実装する場合には、はるかにクリーンです。

将来的に他のメッシュタイプのサポートを計画していて、単一のインターフェースが必要な場合は、おそらくクラスも作成します。重要なのは、メッシュ名をパラメータとしてscene.addおよびscene.removeに渡すことではなく、実際のオブジェクトへの参照を渡すことです。 Three.jsはこれを実行して、親を無効にして、Three.jsライブラリ内のオブジェクトの「削除」ディスパッチイベントを呼び出すことができます。

したがって、1つの方法は、オブジェクトをハッシュに格納し、そのメッシュのURLを追加および削除のパラメータとして使用することです。

var meshes = {}; 

addObj = function(url){ 
    var objectloading = url; 
    var loader = new THREE.OBJLoader(manager); 
    loader.load(objectloading, function (object) { 
     object.traverse(function (child) { 
      if (child instanceof THREE.Mesh) { 
       child.material.map = texture; 
      } 
     }); 
     object.position.y = -30; 
     meshes[url] = object; 
     scene.add(object); 

    }, onProgress, onError); 
} 

removeObj = function(url){ 
    scene.remove(meshes[url]); 
    delete meshes[url]; 
} 

例えば

、二つのモデルを切り替え、ボタンのクリックで

：

removeObj('obj/male02/old.obj'); 
addObj('obj/male02/new.obj'); 

し、別のボタンのクリックで：

removeObj('obj/male02/new.obj'); 
addObj('obj/male02/old.obj'); 

する任意の文字列であってもよいが「メッシュ」のメンバー名に使用されます.URLを使用すると、アプリケーションが大きくなり、 rlは実際にPOSTリクエストを利用しているサービスURIであるため、参照の別のレイヤーが必要になります。通常は、Three.jsに追加された各オブジェクトにUUIDを使用します。