Three.js - MapControls 地图控件

THREE.MapControls()地图控件，如果查看类似地图模型或者不希望用户对模型进行反转的时候可以使用这个控件，这个控件是three.jsr94版本徐新添加的。

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"></script><script src="../../libs/examples/js/controls/MapControls.js"></script></head>
<body>
<p id="loading">loading......</p>
<script>let scene, camera, renderer, controls, guiControls;let stats = initStats();/* 场景 */function initScene() {scene = new THREE.Scene();scene.background = new THREE.Color(0x050505);scene.fog = new THREE.FogExp2(0x050505, 0.005);}/* 相机 */function initCamera() {camera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 0.1, 10000);camera.position.set(0, 90, 220);camera.lookAt(new THREE.Vector3(0, 0, 0));}/* 渲染器 */function initRender() {renderer = new THREE.WebGLRenderer({antialias: true});renderer.setSize(window.innerWidth, window.innerHeight);document.body.appendChild(renderer.domElement);}/* 灯光 */function initLight() {scene.add(new THREE.AmbientLight(0x0c0c0c));let spotLight = new THREE.SpotLight(0xffffff);spotLight.position.set(-400, -400, -400);let spotLight2 = new THREE.SpotLight(0xffffff);spotLight2.position.set(400, 800, 400);scene.add(spotLight);scene.add(spotLight2);}/* 控制器 */function initControls() {/* 地图控件 */controls = new THREE.MapControls(camera, renderer.domElement);/* 属性参数 */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;}/* 调试插件 */function initGui() {guiControls = new function () {this.screenSpacePanning = controls.screenSpacePanning;this.autoRotate = controls.autoRotate;this.reset = function () {controls.reset();};this.getPolarAngle = function () {alert('极坐标:'+controls.getPolarAngle());};this.getAzimuthalAngle = function () {alert('方位角:'+controls.getAzimuthalAngle());};};let gui = new dat.GUI();gui.add(guiControls,'screenSpacePanning').onChange(function (e) {controls.screenSpacePanning = e;});gui.add(guiControls,'autoRotate').onChange(function (e) {controls.autoRotate = e;});gui.add(guiControls,'reset');gui.add(guiControls,'getPolarAngle');gui.add(guiControls,'getAzimuthalAngle');}/* 场景中的内容 */function initContent() {let mtlLoader = new THREE.MTLLoader();mtlLoader.load('../../models/obj/city.mtl', function (materials) {let objLoader = new THREE.OBJLoader();objLoader.setMaterials(materials);objLoader.load('../../models/obj/city.obj', function (object) {let scale = chroma.scale(['red', 'green', 'blue']);setRandomColor(object, scale);console.log(object);scene.add(object);document.getElementById('loading').style.display = 'none';});});}function setRandomColor(object, scale) {let children = object.children;if (children && children.length > 0) {children.forEach(function (e) {setRandomColor(e, scale);});} else {if (object instanceof THREE.Mesh) {for (let i = 0; i < object.material.length; i++) {let material = object.material;if (material[i].name.indexOf('building') === 0) {material[i].emissive = new THREE.Color(scale(Math.random()).hex());material[i].transparent = true;material[i].opacity = 0.7;}}}}}/* 性能插件 */function initStats() {let stats = new Stats();document.body.appendChild(stats.domElement);return stats;}/* 窗口变动触发 */function onWindowResize() {camera.aspect = window.innerWidth / window.innerHeight;camera.updateProjectionMatrix();renderer.setSize(window.innerWidth, window.innerHeight);}let clock = new THREE.Clock();/* 数据更新 */function update() {stats.update();controls.update(clock.getDelta());}/* 初始化 */function init() {initScene();initCamera();initRender();initLight();initControls();initContent();initGui();/* 监听事件 */window.addEventListener('resize', onWindowResize, false);}/* 循环渲染 */function animate() {requestAnimationFrame(animate);renderer.render(scene, camera);update();}/* 初始加载 */(function () {console.log("three init start...");init();animate();console.log("three init end...");})();</script>
</body>
</html>

Three.js - MapControls 地图控件相关推荐

超图js版 iclient 基本开发 - 加载基本图层（以天地图示例）和基本地图控件
以超图的在线示例来学习:运行之后如下: 原网址代码比较长一些:先把多的去掉:看一下基本的加载图层和地图控件的概念: <script type="text/javascript" ...
高德地图开发手册 php,地图控件-参考手册-地图 JS API | 高德地图API
在线插件是在基础地图服务上增加的额外功能,您可以根据自己的需要选择添加.插件分为两类:一类是地图控件,它们是用户与地图交互的UI元素,例如缩放控制条(ToolBar)等:一类是功能型插件,用来完成某些 ...
html 调高德地图导航,地图控件-参考手册-地图 JS API | 高德地图API
在线插件是在基础地图服务上增加的额外功能,您可以根据自己的需要选择添加.插件分为两类:一类是地图控件,它们是用户与地图交互的UI元素,例如缩放控制条(ToolBar)等:一类是功能型插件,用来完成某些 ...
SAP UI5 应用开发教程之六十 - SAP UI5 地图控件的一些高级用法试读版
一套适合 SAP UI5 初学者循序渐进的学习教程教程目录 SAP UI5 本地开发环境的搭建 SAP UI5 应用开发教程之一:Hello World SAP UI5 应用开发教程之二:SAP U ...
OpenLayers基础教程——常规的地图控件
1.前言熟悉GIS的同志对地图控件应该不会陌生,ArcMap中就有很多地图控件,比如放大.缩小.全图等.其实在OpenLayers中也有很多地图控件,它们都继承了ol.control.Control ...
H5新特性百度地图SDK--API引入、地图控件、地理编码与逆地理编码、地图标注、路径规划（基于2.0）
一.API基本使用 1.1 大致流程打开,百度地图官网登录或者注册一个百度账号,并完成相关验证登陆并申请成为开发者在百度地图开发平台的首页选择控制台,在控制台中创建应用创建好应用以后就能在控 ...
OpenLayers学习笔记高级篇（二、地图控件）
在OpenLayers 3中,地图控件指的是下图标注的这些,包括缩放按钮,标尺,版权说明,指北针等等. 他们不会随着地图的移动而移动,一直处于一个固定的位置. 在实现上,并不是在画布上绘制的,而是使用 ...
html 控件坐标定位,利用JS改变html控件位置
8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选? 利用JS改变html控件位置我想写一个贪吃蛇小游戏,所以需要完成蛇的自动移动效果,这就需要改变html控件位置.本来我 ...
ocx js php,JS实现OCX控件的事件响应示例_javascript技巧
JS支持OCX控件的事件(event),当OCX控件定义的事件发生时,JS可以捕获该事件并对事件进行相应的处理. 个人理解,其实就是事件的响应由谁来完成,OCX控件自身肯定是可以实现的,JS提供的这种 ...