Three.js地图控件MapControls

通过Three.js的相机控件MapControls可以实现地图导航模式,MapControls.js库封装的函数THREE.MapControls()本质上就是检测鼠标或键盘事件变化,然后改变Three.js相机对象的相关参数,相机参数改变,Threejs渲染结果自然改变。

鼠标操作

  • 平移:通过鼠标拖动左键实现场景平移效果

  • 缩放:通过前后滚动鼠标中键可以实现场景缩放效果

  • 旋转:通过拖动鼠标右键可以实现场景旋转效果

键盘操作

  • 通过键盘的方向键可以实现场景的前后左右移动效果

引入文件MapControls.js

文件目录地址:\examples\js\controls\MapControls.js

<script src="./examples/js/controls/MapControls.js"></script>

使用

//参数1:相机对象   参数2:渲染画布renderer.domElement
var controls = new THREE.MapControls(camera,renderer.domElement);