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级别,如下所示:
随机推荐
- Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务(转载6)
Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务 一.引言 今天本来没有打算写这篇文章,但是,今天测试Redis的时候发现了两个问题 ...
- 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法
1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的 $() 这 ...
- oracle归档日志关闭和打开
查询归档日志状态 方法一 SQL> archive log list; 方法二 SQL> select name,log_mode from V$database; 打开归档日志 orac ...
- thread == 售票
import org.apache.xerces.util.SymbolTable; public class ThreadDemo1 { public static void main(String ...
- mysql如何出查出最近7天,最近30天,最近n天的记录?
已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...
- 导出excel时设置单元格格式(避免类似0100的数字丢失前面的0)
<td style="vnd.ms-excel.numberformat:@;"><s:property value="accountCode" ...
- 本地Navicat连不上Linux虚拟机MySQL数据库问题
LinuxAndMySQL 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux登录到MySQL数据:mysql -uroot -p 输入密码 切换到mysql数据库 mysql> ...
- Fixation index
:或者1.简单介绍 固定指数(FST)是一种由遗传结构决定的种群分化指标.它通常是由遗传多态性数据,如单核苷酸多态性(SNP)或微卫星估计.作为莱特f统计的一个特例,它是种群遗传学中最常用的统计方法之 ...
- Node KeyNote
[Node KeyNote] 1.实际上,.node文件在windows下它是一个.dll文件,在*nix下则是一个.so文件. 2.默认变量 function(exports, require, m ...
- 在centos xmanager工具环境下启动 xwindow
# 安装epel源 [root@linuxidc ~]# yum install -y epel-release # 安装lightdm和Xfce 1.安装 lightdm sudo yum inst ...