从 obj 文件加载 3d 对象并使用 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);
});

我使用的死池对象来自这里：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);

这会将您的对象带到屏幕的中心