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;