three.js应用之二—— 一些刚接触可能不会注意到的常见场景和问题【可能就有你遇到的问题哦】

 

1. 开启模型自动旋转

2. 将模型移动到世界系原点

因为有时候模型师并不一定都把模型给你定位好，位于中心点位置所以就需要去调整到坐标系原点，也是将模型在盒子中居中，美观一些。

在加载模型new xxxLoader().load(url,onload, onprogress, onError)的第二个参数，也就是模型加载完之后的回调中执行：
     onload =  （object）=> {
      let box = new THREE.Box3().setFromObject(object);
      let mdlen = box.max.x - box.min.x;
      let mdwid = box.max.z - box.min.z;
      let mdhei = box.max.y - box.min.y;
      let x1 = box.min.x + mdlen / 2;
      let y1 = box.min.y + mdhei / 2;
      let z1 = box.min.z + mdwid / 2;
      object.position.set(-x1, -y1, -z1);
 }
 
 亲测有用，原理之后研究再补上，先留白
 【原理】

 

3.找到空间系原点

threejs 官方提供了一个辅助类---AxesHelper，用于去简单模拟3个坐标轴的对象.这个坐标轴是一个右手系，并且原点就是模型所处的三维空间系坐标系原点（0，0，0），

添加到场景中就可以看到

红色代表 X 轴. 绿色代表 Y 轴. 蓝色代表 Z 轴.