平时开发调试代码，或者展示模型的时候，可以通过相机控件OrbitControls实现旋转缩放预览效果。

three版本

"three": "^0.154.0",

效果截图

演示地址

threejs添加轨道控制器

OrbitControls使用

通过OrbitControls我们使用鼠标可以实现以下操作：
旋转：拖动鼠标左键
缩放：滚动鼠标中键
平移：拖动鼠标右键
如果我们不希望鼠标有这些功能，可以通过OrbitControls旋转缩放限制字段来关闭这些功能。

引入扩展库OrbitControls.js

不同版本可能会有差异

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

使用OrbitControls

添加轨道控制器后，我们需要在render方法内添加controls.update();

// 漆加轨道控制器
const controls = new OrbitControls(camera,renderer.domElement)
function render() {
    renderer.render(scene, camera); //执行渲染操作
    controls.update();
    requestAnimationFrame(render);
}

render();

设置带阻尼的惯性

开启阻尼后，拖动场景时会有一定的惯性

 controls.enableDamping = true; //开启阻尼效果

设置阻尼系数

阻尼系数越小惯性越大

controls.dampingFactor = 0.05

设置自动旋转

 controls.autoRotate = true; //是否开启自动旋转

当前内容为观看threejs视频 WebGL/Three.js前端高薪3D可视化 课程-实践的学习笔记

以及观看 threejs视频教程 Three.js可视化企业实战WEBGL课 -Three.js开发入门与调试设置-轨道控制器补充笔记.