javascript - 从 obj 文件中加载一个 3d 对象，并使用 Three.Js 将其放入相机中

Question

我正在尝试使用 THREE.OBJLoader 加载(动态)对象文件并将它们放置在场景(或 Canvas )的中心，以便整个对象在相机中可见。对象是动态的，所以我没有固定的高度或宽度数据。

我有什么:

我想要的:

我所提到的就是这一点:

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

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