场景中的3D模型加载

背景

最近在工作项目中遇到在3D场景scene中加载模型的问题，遇到了模型坐标系和场景当中的世界坐标系不一致的问题

解决方案

在于大神交流之后，学到一种此类问题的解决方案，就是将加载的模型先绕着x轴旋转一定的圆弧角度，将其摆正，然后再将摆正的模型放进一个盒子Group里，再将盒子沿着z轴旋转一定的角度，为其position属性赋值，即可将其放置在3D场景中想要的位置上去。

代码示范

object.rotation.x = Math.PI / 2;

// 根据场景里door对象的Geometry信息，对加载的模型的长度，宽度，厚度进行伸缩变化
object.scale.set(1, 2, 1);

// 由于加载的模型坐标系和场景里的环境坐标系不一致，需要把加载的模型放进盒子Group里，摆正模型所在的盒子Group的Z轴旋转角度
let group = new THREE.Group();
group.add(object);
group.rotation.z = Math.atan2(this.door.normal.y, this.door.normal.x) + Math.PI / 2;

// 设置盒子Group放置的位置
group.position.set(this.door.position.x, this.door.position.y, this.door.position.z);

// 将盒子Group渲染到场景中
this.scene.add(group);