three.map.control
网址:https://github.com/anvaka/three.map.control
在threejs群里发现的一个很有意思的问题之前没有接触过:
存在的问题:
three.map.control
Mobile friendly three.js camera that mimics 2d maps navigation with pan and zoom.
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的更多相关文章
- Bing Map
To use map services in Windows 10 packages for this application, you need to acquire a token from th ...
- DevExpress WPF v19.1新版亮点:Gantt/Map控件新功能
行业领先的.NET界面控件DevExpress 日前正式发布v19.1版本,本站将以连载的形式介绍各版本新增内容.在本系列文章中将为大家介绍DevExpress WPFv19.1中新增的一些控件及部分 ...
- ArcGIS Engine开发之鹰眼视图
鹰眼是GIS软件的必备功能之一.它是一个MapControl控件,主要用来表示数据视图中的地理范围在全图中的位置. 鹰眼一般具有的功能: 1)鹰眼视图与数据视图的地理范围保持同步. 2)数据视图的当前 ...
- 课程上线 -“新手入门 : Windows Phone 8.1 开发”
经过近1个月的准备和录制,“新手入门 : Windows Phone 8.1 开发”系列课程已经在Microsoft 虚拟学院上线,链接地址为:http://www.microsoftvirtuala ...
- 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码
本文为 Dennis Gao 原创技术文章,发表于博客园博客,未经作者本人允许禁止任何形式的转载. 开源倾情奉献系列链接 开源倾情奉献:基于.NET打造IP智能网络视频监控系统(一)开放源代码 开源倾 ...
- UWP深入学习五: 传感器与搜索、共享及链接
Responding to motion and orientation sensors: Quickstart: Responding to user movement with the accel ...
- javascript: jquery.gomap-1.3.3.js
from:http://www.pittss.lv/jquery/gomap/solutions.php jquery.gomap-1.3.3.js: /** * jQuery goMap * * @ ...
- Google地图接口API之Google地图 API 参考手册(七)
Google 地图API 参考手册 地图 构造函数/对象 描述 Map() 在指定的 HTML 容器中创建新的地图,该容器通常是一个DIV元素. 叠加层 构造函数/对象 描述 Marker 创建一个标 ...
- Google地图接口API之地图控件集(五)
1.默认控件集 当使用一个标准的google地图,它的控件默认设置如下: (1). Zoom-显示一个滑动条来控制map的Zoom级别,如下所示:
随机推荐
- VUE 计算属性 vs 侦听属性
计算属性 vs 侦听属性 Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动:侦听属性.当你有一些数据需要随着其它数据变动而变动时,你很容易滥用 watch——特别是如果你之前使用过 ...
- cap文件的格式说明
前面24个字节是.cap文件的文件头. 头信息对应的结构体为:struct pcap_file_header { bpf_u_int32 magic; u_short version_major; ...
- 18.3 redis 的安装
因为之前我们server不存东西 我们 发现 后打开的网页 是接手不到之前的变化,不能更新到最新的变化的. 我们需要做到server给client发最新的代码已达到同步 我们有三种做法同步到最新的代码 ...
- Hibernate学习笔记2.3(Hibernate基础配置)
映射,注释可以放在成员变量上面,也可以放在get方法上面 写在成员变量的话 破坏了java的面向对象思维 直接让hibernate访问内部的私有元素 要是能直接设指不合适哈哈 所以主张写在get方法上 ...
- Python列表推导式
- 2017-2018面向对象程序设计(Java)课程助教工作职责及分工
2017-2018面向对象程序设计(Java)课程助教工作职责及分工 一.研究生助教团队名单 张光辉,王玉环,牟巧玲,徐进 二.工作职责与要求 1) 针对所指导学习小组学生,批改课程实验作业每周一次, ...
- mongo的csv文件参考
https://blog.csdn.net/u012318074/article/details/77713228
- shiro 基于springmvc中做登陆功能
1.添加依赖 <!-- shiro --> <dependency> <groupId>org.apache.shiro</groupId> <a ...
- 解题7(FindFirstOnlyOne)
题目描述 找出字符串中第一个只出现一次的字符 输入描述: 输入一个非空字符串 输出描述: 输出第一个只出现一次的字符,如果不存在输出-1 示例1 输入 asdfasdfo 输出 o 代码如下: pac ...
- PUDN用户名与密码
Pudn 用户名与密码 boumang8171 que2538 温馨提示:1. 95%的用户第一次登录不成功,都是因为在复制粘贴帐号和密码时,把空格也复制粘贴上了.2. 如果连续3次帐号或密 ...