相机控件轨道控制器OrbitControls

可以通过相机控件OrbitControls实现三维场景的旋转、缩放、平移预览效果。

引入相机控件扩展库OrbitControls.js

首先你可以找到npm安装模块的文件node_modules，然后找到three/examples/jsm目录,在jsm目录你可以看到很多threejs相关的扩展库，这些扩展的功能，你需要时候，可以单独引入vue项目文件。

在/jsm/controls/目录下，你可以找到OrbitControls.js文件，OrbitControls.js是一个与相机相关的扩展库，可以通过控制相机，实现三维场景的旋转、缩放、平移。

// 引入轨道控制器扩展库OrbitControls.js
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

使用OrbitControls

// 设置相机控件轨道控制器OrbitControls
const controls = new OrbitControls(camera, renderer.domElement);

OrbitControls操作说明

• 旋转：拖动鼠标左键
• 缩放：滚动鼠标中键
• 平移：拖动鼠标右键

辅助观察坐标系AxesHelper

THREE.AxesHelper()的参数表示坐标系坐标轴线段尺寸大小，你可以根据需要改变尺寸。

// AxesHelper：辅助观察的坐标系
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

three.js坐标轴颜色红R、绿G、蓝B分别对应坐标系的x、y、z轴，对于three.js的3D坐标系默认y轴朝上。

材质半透明设置

设置材质半透明,这样可以看到坐标系的坐标原点位置。

const material = new THREE.MeshLambertMaterial({
    color: 0x0000ff, //设置材质颜色
    transparent:true,//开启透明
    opacity:0.5,//设置透明度
});

体验测试：改变模型位置

mesh.position.set(200,0,0);
mesh.position.set(0,200,0);

体验测试：改变相机位置

通过改变相机距离立方体距离，观察立方体大小，呈现出来远小近大的规律，和人眼观察世界的规律一样。

camera.position.set(200,200,200)

camera.position.set(300,300,300)

OrbitControls本质

OrbitControls本质上就是改变相机的参数，比如相机的位置属性，改变相机位置也可以改变相机拍照场景中模型的角度，实现模型的360度旋转预览效果。改变透视投影相机距离模型的距离，就可以改变相机能看到的视野范围。

controls.addEventListener('change', function () {
    // 浏览器控制台查看相机位置变化
    console.log('camera.position',camera.position);
});