Offer 驾到，掘友接招！我正在参与2022春招打卡活动，点击查看活动详情。
示例代码采用three.js-r73版本: github.com/mrdoob/thre…
上一节，我们了解建模中心点的问题，这节我们来解决下这个问题，让模型围绕自身中心点旋转。让我们来看看吧。
给模型添加包围盒
- 为了方便我们查看模型的中心点，我们给模型添加一个包围盒
// 模型的包围盒
boxHelper = new THREE.BoxHelper(objMesh);
scene.add(boxHelper);
复制代码THREE.BoxHelper:用于图形化地展示对象世界轴心对齐的包围盒的辅助对象。
计算模型中心
- 还记得我们之前讲的如何处理模型中心吗
- 通过找到包围盒的xyz最大最小值可以计算出模型中心位置。
- 再通过把模型放到组中，然后移动模型到组的某个位置，然后我们操作组的时候看起来就会像操作模型的中心点。
创建分组
pivot = new THREE.Group();
scene.add(pivot);
pivot.add(objMesh);
axis3 = new THREE.AxisHelper(100);
axis3.position.copy(pivot.position);
scene.add(axis3);
复制代码- 这个时候效果上没有什么变化，分组的中心在原点上
- 旋转分组时，模型会围绕组进行旋转
计算模型最大点和最小点
- 通过下面函数可以返回模型的最小点和最大点
box = new THREE.Box3().setFromObject(objMesh);
复制代码- 有了最大和最小点我们可以计算出中心点，通过
box.center()可以直接设置
计算模型中心位置，移动到分组中心
- 我们把模型移动到分组中心轴，模型就可以在分组中心轴围绕分组进行旋转
- 移动的距离就是计算的中心点->原点的距离(分组中心就在原点)
box.center(objMesh.position)
复制代码- 由于计算出的中心点是负数，与原来坐标想加得到的仍是负数，造成了模型向负距离移动
- 我们需要把所有向量乘-1
// 所有坐标乘以一个数
objMesh.position.multiplyScalar(-1)
复制代码multiplyScalar:此方法继承自vector3
- 这个时候就是在分组中心旋转了，我们还需要把分组中心移动到原来模型的位置，模型旋转的效果就是围绕自身旋转啦
// 把box的中心赋值给pivot.position
box.center(pivot.position);
复制代码