Threejs 多个模型对象自动居中显示

--always

已于 2023-06-12 16:51:49 修改

阅读量603

点赞数 3

文章标签： javascript 3d

于 2023-06-12 16:48:34 首次发布

本文链接：https://blog.youkuaiyun.com/qq_27080351/article/details/131172248

版权

该文章介绍了如何在Three.js场景中通过创建Group来组合多个网格模型，并利用Box3计算包围盒，进而实现这些模型的居中对齐。首先，创建两个立方体模型并设置它们的位置，然后将它们添加到Group中。接着，通过Box3扩展方法获取Group的包围盒中心点，最后调整Group的位置使其居中。此外，文章还涉及了如何调整相机位置和控制器目标以使相机居中显示模型。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用 Group 与 Box3 实现多个网格模型对象居中

const geometry = new THREE.BoxGeometry( 1, 1, 1 );
const material = new THREE.MeshBasicMaterial( {color: 0x00ff00} );

const cubeA = new THREE.Mesh( geometry, material );
cubeA.position.set( 100, 100, 0 );

const cubeB = new THREE.Mesh( geometry, material );
cubeB.position.set( -100, -100, 0 );

const group = new THREE.Group();
group.add( cubeA );
group.add( cubeB );

scene.add( group );

const box3 = new THREE.Box3();
// 计算层级模型group的包围盒
// 模型group是加载一个三维模型返回的对象，包含多个网格模型
box3.expandByObject(group);
// 计算一个层级模型对应包围盒的几何体中心在世界坐标中的位器
const center = new THREE.Vector3();
box3.getCenter(center);

// 下面两种居中方式
// 重新设置模型的位置，使之居中。
group.position.x = group.position.x - center.x
group.position.y = group.position.y - center.y
group.position.z = group.position.z - center.z

// 调整相机位置和控制器target，使相机居中显示
// const cameraTarget = center;
// camera.position.set(cameraTarget.x, cameraTarget.y, cameraTarget.z + 150);
// camera.lookAt(new THREE.Vector3(cameraTarget.x, cameraTarget.y, cameraTarget.z));
// controls.target.set(cameraTarget.x, cameraTarget.y, cameraTarget.z);
// camera.up.x = 0;
// camera.up.y = 1;
// camera.up.z = 0;
// camera.updateProjectionMatrix();

// 重新渲染
renderer.render(scene, camera);