4

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

我得到了什么： 在此处输入图像描述

我想要的是： 在此处输入图像描述

我所指的是达到这一点：

  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 数学。

编辑：我已经尝试过给出的解决方案：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();
4

1 回答 1

0

创建网格后尝试添加此代码，

var box = new THREE.Box3().setFromObject(mesh);
box.center(mesh.position);
mesh.localToWorld(box);
mesh.position.multiplyScalar(-1);

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

于 2017-01-10T04:58:57.567 回答