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;

上一篇:ThreeJS教程:OrbitControls旋转缩放限制 (mvrlink.com)

下一篇:ThreeJS教程:聚光源SpotLight (mvrlink.com)

NSDT场景编辑器 | NSDT 数字孪生 | GLTF在线编辑器 | 3D模型在线转换 | UnrealSynth虚幻合成数据生成器 | 3D模型自动纹理化工具
2023 power by nsdt©鄂ICP备2023000829号