three.js 模型 居中

发布时间:2023年12月27日

物体不居中

模型的几何中心位置不对, 设置偏离物体实际几何中心,当设置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();
 //     }
 // })
文章来源:https://blog.csdn.net/w710537643/article/details/135250717
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。