网址: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. Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务(转载6)

    Redis进阶实践之六Redis Desktop Manager连接Windows和Linux系统上的Redis服务 一.引言 今天本来没有打算写这篇文章,但是,今天测试Redis的时候发现了两个问题 ...

  2. 转: JQuery this和$(this)的区别及获取$(this)子元素对象的方法

    1.JQuery this和$(this)的区别 相信很多刚接触JQuery的人,很多都会对$(this)和this的区别模糊不清,那么这两者有什么区别呢? 首先来看看JQuery中的  $()  这 ...

  3. oracle归档日志关闭和打开

    查询归档日志状态 方法一 SQL> archive log list; 方法二 SQL> select name,log_mode from V$database; 打开归档日志 orac ...

  4. thread == 售票

    import org.apache.xerces.util.SymbolTable; public class ThreadDemo1 { public static void main(String ...

  5. mysql如何出查出最近7天,最近30天,最近n天的记录?

    已查询浏览量为例:原始数据如下: 思路分析:数据有了,统计某一天的浏览量,所有浏览量,或固定时间段内的浏览量在这里我们就不多说了,大家都会,那我们是如何将最近七天的数据统计出来呢? 首先,我们说的最近 ...

  6. 导出excel时设置单元格格式(避免类似0100的数字丢失前面的0)

    <td style="vnd.ms-excel.numberformat:@;"><s:property value="accountCode" ...

  7. 本地Navicat连不上Linux虚拟机MySQL数据库问题

    LinuxAndMySQL 版权声明:本文为博主原创文章,未经博主允许不得转载. 在Linux登录到MySQL数据:mysql -uroot -p 输入密码 切换到mysql数据库 mysql> ...

  8. Fixation index

    :或者1.简单介绍 固定指数(FST)是一种由遗传结构决定的种群分化指标.它通常是由遗传多态性数据,如单核苷酸多态性(SNP)或微卫星估计.作为莱特f统计的一个特例,它是种群遗传学中最常用的统计方法之 ...

  9. Node KeyNote

    [Node KeyNote] 1.实际上,.node文件在windows下它是一个.dll文件,在*nix下则是一个.so文件. 2.默认变量 function(exports, require, m ...

  10. 在centos xmanager工具环境下启动 xwindow

    # 安装epel源 [root@linuxidc ~]# yum install -y epel-release # 安装lightdm和Xfce 1.安装 lightdm sudo yum inst ...