Question

我正在尝试使用THREE.OBJLoader加载（动态）目标文件，并将它们放在场景（或画布）的中心，以便整个对象可以在Camera中看到。物体是动态的，所以我没有固定的高度或宽度数据。

我得到了什么：

我想要的是什么：

我所指的是达到这一点：

Three.js zoom to fit width of objects (ignoring height)
How to Fit Camera to Object
Smart Centering and Scaling after Model Import in three.js
Adjusting camera for visible Three.js shape
Calculate camera zoom required for object to fit in screen height
Move camera to fit 3D scene
Three.js calculate object distance required to fill screen
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);

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

从obj文件加载3d对象并使用Three.Js

1 个答案: