网址:https://github.com/anvaka/three.map.control

在threejs群里发现的一个很有意思的问题之前没有接触过:

存在的问题:

 我在微信小游戏中,用orbit也会出现计算错误的情况,动一下就不见了。 
解决办法

 发现了, 原来是小游戏里面获取不到 element.clientWidth, 要替换成 window.innerWidth 

three.map.control

Mobile friendly three.js camera that mimics 2d maps navigation with pan and zoom.

DEMO

Features

  • Touch friendly. Drag scene around with single finger touch, or zoom it with standard pinch gesture.

  • Zoom into point. Use your mouse wheel to zoom into particular point on the scene.
  • Easing. When you pan around, the movement does not stop immediately. Smooth kinetic panning gives natural feel to it.

  • Tiny. It's less than 400 lines of documented code.

usage

// let's say you have a standard THREE.js PerspectiveCamera:
var camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 3000 ); // To turn on a map-like navigation:
var createPanZoom = require('three.map.control'); // We assume that three.js scene is hosted inside DOM element `container`
var panZoom = createPanZoom(camera, container); // That's it. panZoom wil now listen to events from `container`. You can pan and
// zoom with your mouse or fingers (on touch device) // If you want to dispose three.js scene, make sure to call:
panZoom.dispose();

events

// the panZoom api fires events when something happens,
// so that you can react to user actions:
panZoom.on('panstart', function() {
// fired when users begins panning (dragging) the surface
console.log('panstart fired');
}); panZoom.on('panend', function() {
// fired when user stpos panning (dragging) the surface
console.log('panend fired');
}); panZoom.on('beforepan', function(panPayload) {
// fired when camera position will be changed.
console.log('going to move camera.position.x by: ' + panPayload.dx);
console.log('going to move camera.position.y by: ' + panPayload.dy);
}); panZoom.on('beforezoom', function(panPayload) {
// fired when befor zoom in/zoom out
console.log('going to move camera.position.x by: ' + panPayload.dx);
console.log('going to move camera.position.y by: ' + panPayload.dy);
console.log('going to move camera.position.z by: ' + panPayload.dz);
});

license

MIT

three.map.control的更多相关文章

  1. Bing Map

    To use map services in Windows 10 packages for this application, you need to acquire a token from th ...

  2. DevExpress WPF v19.1新版亮点:Gantt/Map控件新功能

    行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPFv19.1中新增的一些控件及部分 ...

  3. ArcGIS Engine开发之鹰眼视图

    鹰眼是GIS软件的必备功能之一.它是一个MapControl控件,主要用来表示数据视图中的地理范围在全图中的位置. 鹰眼一般具有的功能: 1)鹰眼视图与数据视图的地理范围保持同步. 2)数据视图的当前 ...

  4. 课程上线 -“新手入门 : Windows Phone 8.1 开发”

    经过近1个月的准备和录制,“新手入门 : Windows Phone 8.1 开发”系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microsoftvirtuala ...

  5. 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码

    本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾 ...

  6. UWP深入学习五: 传感器与搜索、共享及链接

    Responding to motion and orientation sensors: Quickstart: Responding to user movement with the accel ...

  7. javascript: jquery.gomap-1.3.3.js

    from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...

  8. Google地图接口API之Google地图 API 参考手册(七)

    Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...

  9. Google地图接口API之地图控件集(五)

    1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:

随机推荐

  1. VUE 计算属性 vs 侦听属性

    计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...

  2. cap文件的格式说明

    前面24个字节是.cap文件的文件头. 头信息对应的结构体为:struct pcap_file_header {  bpf_u_int32 magic;  u_short version_major; ...

  3. 18.3 redis 的安装

    因为之前我们server不存东西 我们 发现 后打开的网页 是接手不到之前的变化,不能更新到最新的变化的. 我们需要做到server给client发最新的代码已达到同步 我们有三种做法同步到最新的代码 ...

  4. Hibernate学习笔记2.3(Hibernate基础配置)

    映射,注释可以放在成员变量上面,也可以放在get方法上面 写在成员变量的话 破坏了java的面向对象思维 直接让hibernate访问内部的私有元素 要是能直接设指不合适哈哈 所以主张写在get方法上 ...

  5. Python列表推导式

  6. 2017-2018面向对象程序设计(Java)课程助教工作职责及分工

    2017-2018面向对象程序设计(Java)课程助教工作职责及分工 一.研究生助教团队名单 张光辉,王玉环,牟巧玲,徐进 二.工作职责与要求 1) 针对所指导学习小组学生,批改课程实验作业每周一次, ...

  7. mongo的csv文件参考

    https://blog.csdn.net/u012318074/article/details/77713228

  8. shiro 基于springmvc中做登陆功能

    1.添加依赖 <!-- shiro --> <dependency> <groupId>org.apache.shiro</groupId> <a ...

  9. 解题7(FindFirstOnlyOne)

    题目描述 找出字符串中第一个只出现一次的字符 输入描述: 输入一个非空字符串 输出描述: 输出第一个只出现一次的字符,如果不存在输出-1 示例1 输入 asdfasdfo 输出 o 代码如下: pac ...

  10. PUDN用户名与密码

    Pudn 用户名与密码 boumang8171    que2538  温馨提示:1.  95%的用户第一次登录不成功,都是因为在复制粘贴帐号和密码时,把空格也复制粘贴上了.2. 如果连续3次帐号或密 ...