ThreeJS教程：相机控件MapControls
推荐：将NSDT场景编辑器加入你的3D工具链
3D工具集：NSDT简石数字孪生
相机控件MapControls
地图导航相机控件MapControls，你可实现一个类似百度地图的3D导航功能。
MapControls使用操作
你可以打开课件案例源码测试下效果。
- 平移：鼠标左键拖动
- 旋转：鼠标右键拖动
- 缩放：鼠标中键滚动
引入相机控件MapControls
引入相机控件MapControls类，旧版本是通过扩展库文件MapControls.js实现,不过新版本MapControls类和OrbitControls类一样通过 \examples\jsm\controls目录下的OrbitControls.js文件引入。
// 引入相机控件`MapControls`
import { MapControls } from 'three/addons/controls/OrbitControls.js';
注意：如果你在原生.html文件中，使用import { MapControls } from 'three/addons/controls/OrbitControls.js';方式引入，注意通过<script type="importmap">配置好路径。
使用MapControls
参数1是地图导航控件要改变的相机对象，参数2是three.js渲染对应的canvas画布。
const controls = new MapControls(camera, renderer.domElement);
MapControls本质
MapControls本质上就是改变相机的参数，比如相机的位置属性、相机目标观察点。
controls.addEventListener('change', function () {
// 鼠标右键旋转时候，查看.position变化
// 鼠标左键拖动的时候，查看.position、.target的位置会变化
console.log('camera.position',camera.position);
console.log('controls.target',controls.target);
});
缩放、旋转或平移禁止
参考上节课关于OrbitControls的介绍，整体思路是一样的，只是鼠标操作有差异。
controls.enablePan = false; //禁止平移
controls.enableZoom = false;//禁止缩放
controls.enableRotate = false; //禁止旋转
透视投影相机缩放范围
参考上节课关于OrbitControls的介绍
//相机位置与观察目标点最小值
controls.minDistance = 200;
//相机位置与观察目标点最大值
controls.maxDistance = 500;
设置旋转范围
参考上节课关于OrbitControls的介绍
// 上下旋转范围
controls.minPolarAngle = 0;
controls.maxPolarAngle = Math.PI/2;
// 左右旋转范围
controls.minAzimuthAngle = -Math.PI/2;
controls.maxAzimuthAngle = Math.PI/2;