THREE.MapControls()
地图控件,如果查看类似地图模型或者不希望用户对模型进行反转的时候可以使用这个控件,这个控件是three.js
r94版本徐新添加的。
1、示例
https://ithanmang.gitee.io/threejs/home/201809/20180904/01-MapControls.html
当screenSpacePanning
属性为true
的时候,可以拖动旋转模型。
2、使用控件
2.1、引入js文件
<script src="../../libs/examples/js/controls/MapControls.js"></script>
MapControls.js
在版本**r94**
以及以上可以找到。
2.3、创建实例
/* 地图控件 */
controls = new THREE.MapControls(camera, renderer.domElement);
2.4、设置参数
/* 属性参数 */
controls.enableDamping = true;// 启用动态阻尼时需要一个动画循环
controls.dampingFactor = 0.30;
controls.screenSpacePanning = false;// 若为 true 则可以平移
controls.maxDistance = 400;
controls.minDistance = 100;
controls.maxPolarAngle = Math.PI / 2.2;
controls.autoRotate = false;
如果打开controls.enableDamping = true
动态阻尼的话。
需要在循环动画中,调用controls.update()
方法,来更新数据。
完整的参数列表可以查看源码获得
2.5、操控方法
操控 | 动作 |
---|---|
鼠标左键 | 平移 |
鼠标右键 | 旋转和改变极地角度 |
鼠标滑轮 | 缩放 |
3、示例代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="../../../three.png">
<title>MapControls 地图控件</title>
<style>
body {
margin: 0;
overflow: hidden; /* 溢出隐藏 */
}
#loading {
position: fixed;
top: 50%;
left: 50%;
color: #FFFFFF;
font-size: 20px;
margin-top: -30px;
margin-left: -40px;
}
</style>
<script src="../../libs/build/three-r93.js"></script>
<script src="../../libs/examples/js/Detector.js"></script>
<script src="../../libs/examples/js/libs/dat.gui.min.js"></script>
<script src="../../libs/examples/js/libs/stats.min.js"></script>
<script src="../../libs/examples/js/loaders/MTLLoader.js"></script>
<script src="../../libs/examples/js/loaders/OBJLoader.js"></script>
<script src="../../libs/chroma/chroma.js"><