Три JS: Загрузите OBJ, переведите в исходное положение (в центре на сцену), орбита

Question

Все, что я хочу сделать, это загрузить OBJ-файл и перевести его координаты в мировое происхождение (0,0,0), чтобы элементы управления орбиты работайте отлично (нет точек опоры).

Я хотел бы загрузить случайные объекты OBJ с различными геометриями/центрами и перевести их автоматически в происхождение сцены. Другими словами, «жестко закодированное» решение для перевода для конкретной модели не будет работать

Это один из самых распространенных сценариев для трех JS (основного 3D-зрителя объектов), поэтому я удивлен Я не могу найти окончательное решение на SO.

К сожалению, есть много старых ответов с устаревшими функциями, поэтому я бы очень признателен за новый ответ, даже если есть похожие решения.

Вещей я пытался

1. ниже код подходит объект красиво к камере, но не решает проблему/орбитальный перевода.

   // подгонка камеры к объекту var bBox = новый THREE.Box3(). SetFromObject (сцена); var height = bBox.size(). Y; var dist = высота/(2 * Math.tan (камера.fov * Math.PI/360)); var pos = scene.position;

   // fudge factor, так что объект не занимает весь вид camera.position.set (pos.x, pos.y, dist * 0.5); camera.lookAt (pos);

2. По-видимому, geometry.center() хорош для перевода координат объекта обратно в начало координат, но THREEx.GeometryUtils.center заменен геометрией.center(), и я продолжаю получать ошибки при попытке использовать его ,

3. при загрузке OBJs, геометрия теперь заменена буфером геометрии. Я не могу представить буферную геометрию в геометрию, чтобы использовать функцию center(). мне нужно разместить это в потоке объекта> дочерний цикл так? это кажется излишне сложным.

   geometry = new THREE.Geometry(). FromBufferГеометрия (child.geometry);

Мой код - очень простой 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 первый реальный вопрос на SO да простят любые вопросы форматирования/Noob)

Answer 1

Из моего понимания вашего вопроса, вы хотите, чтобы объекты, которые были добавлены к сцене в происхождении зрения камеры , Я считаю, что общий способ достижения решения для просмотра объектов - это добавить элементы управления камерой к вашей камере в сцене, в основном, THREE.OrbitControls и указать цель для камеры как объекта, на который вы хотите сосредоточиться. Это заставляет объект фокусироваться в центре, и вращение камеры и движение будут основаны на этом объекте.

Answer 2

ОК понял это, используя некоторые очень полезные функции от Meshviewer Master, старшего объекта просмотра объектов JS. https://github.com/ideesculture/meshviewer Все кредит Готье Michelin для этого кода https://github.com/gautiermichelin

После загрузки OBJ, что вам нужно сделать 3 вещи:

1. Создать габаритный прямоугольник на основе OBJ

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. Настройте камеру на основе этого ограничивающего прямоугольника/радиуса сцены

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

(код просмотра сетки также содержит функции для просмотра слева, сверху и т.д.)

3. Переставьте OBJ к месту происхождения Как и любому центрирующему упражнение, позиция то ширина и высота разделённый на 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; 

}