從obj文件加載3d對象並使用Three.Js將其放入相機內

Question

我正在嘗試使用THREE.OBJLoader加載（動態）目標文件，並將它們放在場景（或畫布）的中心，以便整個對象可以在Camera中看到。 對象是動態的，所以我沒有固定的高度或寬度數據。

我得到了什么：

我想要的是：

我所指的是達到這一點：

1. Three.js縮放以適合對象的寬度（忽略高度）

2. 如何使相機適合對象

3. 在three.js中進行模型導入后的智能居中和縮放

4. 調整相機以獲得可見的Three.js形狀

5. 計算物體適合屏幕高度所需的相機變焦

6. 移動相機以適應3D場景

7. Three.js計算填充屏幕所需的物體距離

8. 如何計算相機的z距離，以便在3D空間中以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);
});

我使用的死池對象來自這里： http ：//tf3dm.com/3d-model/deadpool-42722.html。 我不知道我是否一直在閱讀正確的問題。 如果有人能指出我正確的方向，我會很高興。 提前致謝。

PS：我對3D數學不太滿意。

編輯：我已經嘗試了解決方案： 如何將相機適合對象，但它沒有解決我的問題。 事實上，它顛倒了我的對象。 我試圖將對象定位到相機的中心。

---

編輯2：我已經部分解決了這個問題。 現在，物體位於相機平截頭體內並且完全可見。 現在我需要找到一種方法來集中它。 我改變了scene.add(object);下面的整個代碼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);

這會將您的對象帶到屏幕的中心