Drei JS: Laden Sie einen OBJ, übersetzen Sie zum Ursprung (Zentrum in Szene), Orbit

Question

Alles, was ich tun möchte, ist eine OBJ-Datei laden und ihre Koordinaten zu den Weltursprüngen (0,0,0), so dass die Bahn steuert funktionieren perfekt (keine Pivot-Punkte bitte).

Ich möchte zufällige OBJ-Objekte mit unterschiedlichen Geometrien/Mittelpunkten laden und sie automatisch in den Szenenursprung übersetzen lassen. Mit anderen Worten, eine 'hartcodierte' Übersetzungslösung für ein spezifisches Modell wird nicht funktionieren.

Dies muss einer der häufigsten Szenarien für Three JS (grundlegende 3D-Objekt-Viewer) sein, also bin ich überrascht Ich kann keine endgültige Lösung für SO finden.

Leider gibt es viele ältere Antworten mit veralteten Funktionen, so würde ich wirklich eine neue Antwort schätzen, auch wenn es ähnliche Lösungen gibt.

Dinge, die ich habe versucht,

1. den Code unten passt das Objekt schön in die Kamera, löst aber nicht die Übersetzung/umkreisen Problem.

   // Kamera an Objekt anpassen var bBox = new THREE.Box3(). SetFromObject (Szene); var height = bBox.size(). Y; var dist = Höhe/(2 * Math.tan (Kamera.fov * Math.PI/360)); var pos = Szenenposition;

   // Fudge-Faktor, damit das Objekt nicht die ganze Ansicht einnimmt camera.position.set (pos.x, pos.y, dist * 0.5); camera.lookAt (pos);

2. Anscheinend ist die Geometrie.center() gut für die Übersetzung der Koordinaten eines Objekts zurück zum Ursprung, aber die THREEx.GeometryUtils.center wurde durch geometry.center() ersetzt und ich bekomme Fehler, wenn Sie versuchen, es zu verwenden .

3. Beim Laden von OBJs wurde die Geometrie jetzt durch bufferGeometry ersetzt. Ich kann nicht scheinen, die Puffergeometrie in Geometrie zu werfen, um die Funktion center() zu verwenden. muss ich das so in die Objekttraverse> Kinderschleife legen? das scheint unnötig kompliziert.

   Geometrie = neu THREE.Geometry(). FromBufferGeometry (child.geometry);

Mein Code ist nur ein sehr einfacher OBJLoader.

 var objLoader = new THREE.OBJLoader(); 
     objLoader.setPath('assets/'); 
     objLoader.load('BasketballNet_Skull.obj', function (object) { 


      object.traverse(function (child) { 

       if (child instanceof THREE.Mesh) { 

        child.material = material; 

       } 

     }); 
     scene.add(object); 
}); 

(BTW zuerst auf wirkliche Frage SO Formatierungs/Noob Fragen so vergeben)

Answer 1

Von meinem Verständnis Ihrer Frage, möchten Sie die Objekte, die bei der Entstehung der Kamera Blick auf die Szene hinzugefügt werden . Ich glaube, der übliche Weg, um eine Objekt-Viewer-Lösung zu erreichen, ist das Hinzufügen von Kamerasteuerungen zu Ihrer Kamera in der Szene, meist DREI.OrbitControls, und das Festlegen des Ziels für die Kamera als Objekt, auf das Sie sich konzentrieren möchten. Dadurch wird das Objekt fokussiert, um in der Mitte zu sein, und die Drehung und Bewegung der Kamera wird auf diesem Objekt basieren.

Answer 2

Das habe ich herausgefunden, indem ich einige sehr nützliche Funktionen von Meshviewer Master verwendet habe, einem älteren Three JS Object Viewer. https://github.com/ideesculture/meshviewer Alle Kredite für diesen Code zu Gautier Michelin https://github.com/gautiermichelin

Nach dem OBJ Laden, müssen Sie 3 Dinge tun:

1. eine Bounding Box basiert auf dem OBJ erstellen

boundingbox = new THREE.BoundingBoxHelper(object, 0xff0000); 

    boundingbox.update(); 

    sceneRadiusForCamera = Math.max(
     boundingbox.box.max.y - boundingbox.box.min.y, 
     boundingbox.box.max.z - boundingbox.box.min.z, 
     boundingbox.box.max.x - boundingbox.box.min.x 
    )/2 * (1 + Math.sqrt(5)) ; // golden number to beautify display 

2. Richten Sie die Kamera basierend auf diesem Begrenzungsrahmen/Szenenradius ein

function showFront() { 
if (objectCopy !== undefined) objectCopy.rotation.z = 0; 
    controls.reset(); 
    camera.position.z = 0; 
    camera.position.y = 0; 
    camera.position.x = sceneRadiusForCamera; 
    camera.lookAt(scene.position); 
} 

(der Mesh-Viewer-Code enthält Funktionen auch für linkes Gesicht, top, etc)

3. Setzen Sie die OBJ, um die Szene Herkunft Wie jede Zentrierung Übung ist die Position dann die Breite und Höhe geteilt durch 2

function resetObjectPosition(){ 
    boundingbox.update(); 

    size.x = boundingbox.box.max.x - boundingbox.box.min.x; 
    size.y = boundingbox.box.max.y - boundingbox.box.min.y; 
    size.z = boundingbox.box.max.z - boundingbox.box.min.z; 

    // Repositioning object 
    objectCopy.position.x = -boundingbox.box.min.x - size.x/2; 
    objectCopy.position.y = -boundingbox.box.min.y - size.y/2; 
    objectCopy.position.z = -boundingbox.box.min.z - size.z/2; 
    boundingbox.update(); 
    if (objectCopy !== undefined) objectCopy.rotation.z = 0; 

}