104. 相机控件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;