ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

three.js 模型 居中

2026/9/21 1:52:29 拓冰建站 浏览量
three.js 模型 居中

物体不居中

模型的几何中心位置不对, 设置偏离物体实际几何中心,当设置position(0,0,0)时就会出现偏离。
请添加图片描述

解决方案

此处有两种解决方案

  1. 建模师处理模型,将模型的几何中心移动到(0, 0, 0)
  2. 使用代码进行模型强制居中处理
// 重置几何中心  模型居中  对group、mesh都可使用let box = new THREE.Box3();// box.expandByObject(this.model);box.expandByObject(this.model);// console.log('查看包围盒box3', box);//scaleV3表示包围盒长宽高尺寸let scaleV3 = new THREE.Vector3();// .getSize()计算包围盒长宽高尺寸box.getSize(scaleV3)// 查看控制台包围盒大小,辅助设置相机参数// console.log('查看包围盒尺寸', scaleV3);//scaleV3表示包围盒的几何体中心let center = new THREE.Vector3();// .getCenter()计算一个层级模型对应包围盒的几何体中心box.getCenter(center);// 查看控制台包围盒集合中心,作为lookAt()参数// console.log('查看几何中心', center);
this.model.position.set(-center.x,-center.y,-center.z)// 单 mesh 重置几何中心// this.model.children.forEach(child=>{//     if (child instanceof THREE.Mesh){//         console.log(child)//         child.geometry.computeBoundingBox();//         child.geometry.center();//     }// })