three.js - threejs如何把obj模型设置到屏幕中心?

Question

threejs加载obj模型 然后缩放1000被后能看到模型,但是特别特别小,稍微旋转一下就找不到了,如何调整,
希望让模型显示在屏幕中间,然后坐标轴在模型上,现在感觉模型像是在太阳系的冥王星这个位置,太远了

Answer 1

思路

1.加载模型并计算边界盒： 使用 THREE.Box3 对象来计算模型的边界盒，并获取模型的中心点和尺寸。

const loader = new THREE.OBJLoader();
loader.load('path/to/model.obj', (obj) => {
    const box = new THREE.Box3().setFromObject(obj);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    // 将模型移动到原点
    obj.position.sub(center);

    // 计算缩放比例
    const maxDim = Math.max(size.x, size.y, size.z);
    const scale = 1 / maxDim;
    obj.scale.set(scale, scale, scale);

    // 将模型添加到场景中
    scene.add(obj);

    // 调整相机位置
    const cameraDistance = maxDim * 2;
    camera.position.set(0, 0, cameraDistance);
    camera.lookAt(0, 0, 0);
});

2.调整相机和控件： 确保相机和控件的设置能够适应模型的显示。

const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

3.渲染循环： 在渲染循环中更新控件。

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();

完整代码

// 加载OBJ模型并调整位置和缩放
const loader = new THREE.OBJLoader();
loader.load('path/to/model.obj', (obj) => {
    const box = new THREE.Box3().setFromObject(obj);
    const center = box.getCenter(new THREE.Vector3());
    const size = box.getSize(new THREE.Vector3());

    // 将模型移动到原点
    obj.position.sub(center);

    // 计算缩放比例
    const maxDim = Math.max(size.x, size.y, size.z);
    const scale = 1 / maxDim;
    obj.scale.set(scale, scale, scale);

    // 将模型添加到场景中
    scene.add(obj);

    // 调整相机位置
    const cameraDistance = maxDim * 2;
    camera.position.set(0, 0, cameraDistance);
    camera.lookAt(0, 0, 0);
});

// 设置相机和控件
const controls = new THREE.OrbitControls(camera, renderer.domElement);
controls.target.set(0, 0, 0);
controls.update();

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
animate();