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

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

Что у меня есть:

Чего я хочу:

Я уже говорил об этом:

1. Трехкратное масштабирование для соответствия ширине объектов (без учета высоты )

2. Как приспособить камеру к объекту

3. Интеллектуальное центрирование и масштабирование после импорта модели в three.js < / а>

4. Настройка камеры для видимой формы Three.js

5. Рассчитать масштабирование камеры, необходимое для того, чтобы объект поместился на экране высота

6. Переместите камеру в соответствии с трехмерной сценой

7. Three.js вычисляет расстояние до объекта, необходимое для заполнения экрана

8. Как рассчитать расстояние по оси Z до камеры для просмотра изображения в 100% исходном масштабе в трехмерном пространстве

Код:

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: Я плохо разбираюсь в трехмерной математике.

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

Изменить 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();