Three.js - MapControls 地图控件

最新推荐文章于 2024-06-28 14:29:37 发布

「已注销」

最新推荐文章于 2024-06-28 14:29:37 发布

阅读量6.1k

点赞数 2

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82379839

版权

本文介绍了Three.js中的MapControls地图控件，适用于展示地图模型并限制用户反转操作。提供了引入js文件、创建实例、设置参数及操控方法的详细步骤，并附带了示例代码和在线演示链接。

摘要由CSDN通过智能技术生成

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"><

最低0.47元/天解锁文章

「已注销」

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
3
评论
Three.js - MapControls 地图控件

THREE.MapControls()地图控件，如果查看类似地图模型或者不希望用户对模型进行反转的时候可以使用这个控件，这个控件是three.jsr94版本徐新添加的。1、示例http://ithanmang.com/threeJs/home/201809/20180904/01-MapControls.html 当screenSpacePanning属性为true的时候，可以拖动旋转模...
复制链接

扫一扫

专栏目录