之前被项目中的旋转搞晕了……
在 three.js 中实现旋转的几种方式
- rotation：物体的局部旋转
- rotateY：物体的局部旋转，rotateY(rad) = rotation.y += rad
- rotateOnAxis：根据局部空间的标准化向量旋转，可自行指定任意空间
- rotateOnWorldAxis：根据世界空间的标准化向量旋转
确定参考点以及方向向量
- 参考点 align point 无论如何都是物体的 position 属性
- 具体方向看具体使用方式
- rotateOnAxis 参考局部空间，自身是否存在平移、旋转
- rotateOnWorldAxis 参考世界空间
项目中奇怪的现象就可以解释了
- 由于要配合大地旋转，因此对象也需要旋转 90 度，元素之间可能有层级的高度差。元素设置 Z 后，与此同时元素也旋转 90 度添加到场景不符合预期，但给每个元素套一个 Group 后就正常了
- 原因就出在参考点上，直接添加对象，对于旋转和平移都作用在物体上，它的参考点是物体自身的 position。套用 Group 后，旋转作用在 Group 上，同时 Group 的参考点默认是原点
- ……，好好思考吧，总是就是参考点发生了变化