Загрузите 3d-объект из файла obj и поместите его в камеру с помощью функции Three.Js

Question

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

То, что я получил:

Что я хочу:

Что я говорил, чтобы добраться до этой точки:

1. Three.js zoom to fit width of objects (ignoring height)

2. How to Fit Camera to Object

3. Smart Centering and Scaling after Model Import in three.js

4. Adjusting camera for visible Three.js shape

5. Calculate camera zoom required for object to fit in screen height

6. Move camera to fit 3D scene

7. Three.js calculate object distance required to fill screen

8. How to calculate the z-distance of a camera to view an image at 100% of its original scale in a 3D space

Код:

camera = new THREE.PerspectiveCamera(45, window.innerWidth/window.innerHeight, 1, 2000); 

controls = new THREE.TrackballControls(camera); 
controls.rotateSpeed = 5.0; 
controls.zoomSpeed = 5; 
controls.panSpeed = 2; 
controls.noZoom = false; 
controls.noPan = false; 
controls.staticMoving = true; 
controls.dynamicDampingFactor = 0.3; 

// scene 
scene = new THREE.Scene(); 

var mtlLoader = new THREE.MTLLoader(); 
mtlLoader.setBaseUrl(path); 
mtlLoader.setPath(path); 
mtlLoader.setMaterialOptions({ 
    ignoreZeroRGBs: true 
}); 

mtlLoader.load(path, function(materials) { 
    materials.preload(); 
    var objLoader = new THREE.OBJLoader(); 
    objLoader.setMaterials(materials); 
    objLoader.setPath(path); 
    objLoader.load(path, function(object) { 

     var helperBox = new THREE.BoundingBoxHelper(object, 0x888888); 
     helperBox.update(); 
     scene.add(helperBox); 

     //Scene 
     scene.add(object); 

     var boxFrmScene = new THREE.Box3().setFromObject(scene); 
     var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x); 
     var dist = height/(2 * Math.tan(camera.fov * Math.PI/360)); 
     var pos = scene.position; 
     var boundingSphere = boxFrmScene.getBoundingSphere(); 
     var center = boundingSphere.center; 
     camera.position.set(center.x, center.y, (dist * 1.1)); 
     camera.lookAt(pos); 
    }, function(error) { 
     console.log(error); 
    }); 
}, function(error) { 
    console.log(error); 
}); 

Объект Deadpool я использовал здесь: http://tf3dm.com/3d-model/deadpool-42722.html. Я не знаю, читал ли я правильные вопросы. Я был бы очень рад, если бы кто-то мог указать мне в правильном направлении. Заранее спасибо.

PS: Я плохо разбираюсь в 3D-математике.

Редактировать: Я пробовал решение, данное на этом: How to Fit Camera to Object, но это не решило мою проблему. На самом деле он перевернул мой предмет вверх ногами. Я пытаюсь поместить объект в центр камеры.

---

Редактировать 2: Я частично исправил это. Теперь объект находится внутри камеры и полностью заметен. Теперь мне нужно найти способ сосредоточить его. Я изменил весь код ниже scene.add(object);

var pos = scene.position; 
camera.position.set(pos.x, pos.y, 100); 
camera.lookAt(pos); 
var boxFrmScene = new THREE.Box3().setFromObject(scene); 
var height = Math.max(boxFrmScene.size().y, boxFrmScene.size().x); 
var fov = camera.fov * (Math.PI/180); 
var distance = Math.abs(height/Math.sin(fov/2)); 
camera.position.set(pos.x, pos.y, distance + (height/2)); 
camera.updateProjectionMatrix(); 

Answer 1

Попробуйте добавить этот код после создания сетки,

var box = new THREE.Box3().setFromObject(mesh); 
box.center(mesh.position); 
mesh.localToWorld(box); 
mesh.position.multiplyScalar(-1); 

Это приведет свой объект в центре экрана