Wie tausche ich ein OBJ-Objekt für ein anderes in Three.JS?

Question

Ich verwende ThreeJS, um OBJs in eine Webseite zu laden, was ich erfolgreich gemacht habe, aber jetzt möchte ich Schaltflächen zu meiner Seite hinzufügen, die die angezeigte OBJ-Datei gegen eine andere austauschen. Ich habe versucht, das Objekt beim Laden zu benennen:

object.name = "selectedObject";

so, dass ich es aus der Szene entfernen kann, wenn die neue Schaltfläche

scene.remove (SelectedObject) angeklickt wird;

und befestigen das neue Objekt:

scene.add (NewObject);

Aber ich bin dabei verloren, wie dies in den allgemeinen Code/was die richtige Syntax wäre zu implementieren wäre.

Hier ist der Code für das Laden des Modells:

  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); 

Jede Hilfe apreciated wird, danke!

Answer 1

Nun, es gibt viele Möglichkeiten, um darüber zu gehen. Es kommt darauf an, dass Ihr Code berücksichtigen muss, was geladen wurde. Sie können eine Szene durchlaufen, aber das Erfassen und Auflisten Ihrer Obj-Dateien in eigene Listen ist viel sauberer, besonders später, wenn Sie Dinge wie Raycasting implementieren.

Ich würde einige Funktionen schreiben, vielleicht sogar eine Klasse, wenn ich andere Mesh-Typen in Zukunft unterstützen wollte und eine einzige Schnittstelle wollte. Wichtig ist, dass Sie den Mesh-Namen nicht als Parameter an "scene.add" und "scene.remove" übergeben. Sie übergeben einen Verweis auf das tatsächliche Objekt. Three.js macht das so, dass es das Elternelement aufheben und das Objekt "removed" Dispatch-Ereignis in der Three.js-Bibliothek aufrufen kann.

So können Sie zum Beispiel Ihre Objekte in einem Hash speichern und die URL als Parameter zum Hinzufügen und Entfernen verwenden.

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]; 
} 

zum Beispiel Umschalten zwischen zwei Modellen,

in einer Schaltfläche klicken:

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

und dann in einer anderen Knopf klicken:

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

Obwohl jedes String kann sein verwendet für Elementnamen in "Meshes", mit URLs könnte problematisch werden, wenn die Anwendung wächst und die u rl ist eigentlich ein Service-URI, der eine POST-Anfrage verwendet, dann benötigen Sie eine weitere Ebene von Referenzen, möglicherweise und normalerweise unter Verwendung der UUID geben Sie jedem Objekt, das zu Three.js hinzugefügt wurde.