import {Vector3} from 'three';
import {Vector2} from 'three';
import {MOUSE} from 'three';
import {Quaternion} from 'three';
import {Spherical} from 'three';
import {PerspectiveCamera} from 'three';
import {OrthographicCamera} from 'three';
import {EventDispatcher} from 'three';
import {FOV} from './CameraUtils';
import {zoomRange} from '../utils/zoomUtils';
/**
* 實現手勢控制：
* 移動端：
* 單指移動->平移
* 雙指轉動->繞y軸旋轉
* 雙指pinch->縮放
* 雙指上下滑動->繞x軸旋轉(2/3D切換)
* pc端：
* 鼠標左鍵移動->平移
* 鼠標滾輪->縮放
* 鼠標右鍵移動->旋轉
* @type {[type]}
*/
const DEG2RAD = Math.PI / 180;
const INTOUCHDEVICE = 'ontouchstart' in document;
// const zoomRange = [2.3886571, 1.1943286, 0.5971643, 0.2985821, 0.1492911, 0.0746455, 0.0373227];
export let OrbitControls = function ( object, domElement ) {
this.object = object; // Object代表camera
this.domElement = ( domElement !== undefined ) ? domElement : document;
// Set to false to disable this control
this.enabled = true;
// "target" sets the location of focus, where the object orbits around
this.target = new Vector3();
// How far you can dolly in and out ( PerspectiveCamera only )
// 我理解是相機距離target的距離
this.minDistance = 0;
this.maxDistance = Infinity;
// How far you can zoom in and out ( OrthographicCamera only )
this.minZoom = 0;
this.maxZoom = Infinity;
// How far you can orbit vertically, upper and lower limits.
// Range is 0 to Math.PI radians.
// 我理解是在一個包圍y軸的平面內能旋轉的角度（與y軸平行線的夾角）；
// 可以理解為繞垂直y軸和相機的target->position向量形成的平面的向量來轉動（四元數）
this.minPolarAngle = 0; // radians
this.maxPolarAngle = Math.PI; // radians
// How far you can orbit horizontally, upper and lower limits.
// If set, must be a sub-interval of the interval [ - Math.PI, Math.PI ].
// 在一個包圍x軸的平面內能夠旋轉的角度（與x軸平行線的夾角）；可以理解為繞y軸的旋轉
this.minAzimuthAngle = - Infinity; // radians
this.maxAzimuthAngle = Infinity; // radians
// Set to true to enable damping (inertia)
// If damping is enabled, you must call controls.update() in your animation loop
this.enableDamping = false;// 阻尼
this.dampingFactor = 0.25;
// This option actually enables dollying in and out; left as "zoom" for backwards compatibility.
// Set to false to disable zooming
this.enableZoom = true;// 縮放控制（透視相機下dolly距離或正射投影下的zoom）
this.zoomSpeed = 1.0;
// 這個zoomScale是指的地圖數據的級別
this.zoomScale = zoomRange[zoomRange.length - 1];// 設置zoom級別1-6
// Set to false to disable rotating
this.enableRotate = true;
this.rotateSpeed = 1.0;
// Set to false to disable panning
this.enablePan = true;
this.keyPanSpeed = 7.0; // pixels moved per arrow key push
// Set to true to automatically rotate around the target
// If auto-rotate is enabled, you must call controls.update() in your animation loop
this.autoRotate = false;
this.autoRotateSpeed = 2.0; // 30 seconds per round when fps is 60
// Set to false to disable use of the keys
this.enableKeys = true;
// The four arrow keys
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { ORBIT: MOUSE.RIGHT, ZOOM: MOUSE.MIDDLE, PAN: MOUSE.LEFT };
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.zoom0 = this.object.zoom;
//
// public methods
//
this.getPolarAngle = function () {
return spherical.phi;
};
this.getAzimuthalAngle = function () {
return spherical.theta;
};
// 保存當前control的target、position和相機的zoom
this.saveState = function () {
scope.target0.copy( scope.target );
scope.position0.copy( scope.object.position );
scope.zoom0 = scope.object.zoom;
};
// 恢復上次狀態
this.reset = function () {
scope.target.copy( scope.target0 );
scope.object.position.copy( scope.position0 );
scope.object.zoom = scope.zoom0;
scope.object.updateProjectionMatrix();
scope.dispatchEvent( changeEvent );
scope.update();
state = STATE.NONE;
};
// this method is exposed, but perhaps it would be better if we can make it private...
this.update = function () {
var offset = new Vector3();
// so camera.up is the orbit axis
// 根據相機的up軸指向和y軸來求出一個表示繞垂直這兩向量形成的平面的向量的轉動夾角
// 這個四元數表示初始時相機up與y軸的夾角
var quat = new Quaternion().setFromUnitVectors( object.up, new Vector3( 0, 1, 0 ) );
var quatInverse = quat.clone().inverse();// 求共軛四元數
var lastPosition = new Vector3();
var lastQuaternion = new Quaternion();
/**
* [update description]
* @param {[type]} updateZoomScale [zoomScale相同時仍然觸發zoom事件]
* @param {[type]} noUpdateZoom [是否觸發zoom事件]
* @return {[type]} [description]
*/
return function update(updateZoomScale, noUpdateZoom) {
var position = scope.object.position; // 這個時候position跟target應該都還未變化
offset.copy( position ).sub( scope.target );// 形成一個從target->position的向量
// rotate offset to "y-axis-is-up" space
// 相機可以做各種旋轉up也會有各種變化，但我們希望將y軸作為相機的up軸，這樣方便計算
offset.applyQuaternion( quat );// 用一個四元素來旋轉向量, v‘ = qvq-1
// angle from z-axis around y-axis
spherical.setFromVector3( offset );// 將相機位置轉化成球面坐標
if ( scope.autoRotate && state === STATE.NONE ) {
rotateLeft( getAutoRotationAngle() );
}
// 在我看來每次手勢事件轉動物體實際都是相當於在轉動一個球，
// 以屏幕中心為原點轉動軸就是世界坐標系的三個軸，
// 而我們觀察到的物體就是將相機幫到球上轉動后的結果，
// 所以我們先把相機的up軸設置為與y軸重合，
// 這樣相機就相當於在一個標准單位球下來轉動、縮放
// 最后再將相機放回原先的up軸所在空間
// 這樣的好處就是通過改變相機來改變視域中的所有物體，而不是要改變物體的模型矩陣
spherical.theta += sphericalDelta.theta;
// console.log('theta: ' + spherical.theta * 180 / Math.PI, 'phi: ' + spherical.phi * 180 / Math.PI);
// restrict theta to be between desired limits
spherical.theta = Math.max( scope.minAzimuthAngle, Math.min( scope.maxAzimuthAngle, spherical.theta ) );
// if (scope.object instanceof PerspectiveCamera) {
// console.log('spherical.phi: ', spherical.phi, 'sphericalDelta.phi: ', sphericalDelta.phi);
spherical.phi += sphericalDelta.phi;
// restrict phi to be between desired limits
spherical.phi = Math.max( scope.minPolarAngle, Math.min( scope.maxPolarAngle, spherical.phi ) );
// }
spherical.makeSafe();
spherical.radius *= scale; // 縮放，dollyIn或dollyOut
// console.log('scale: ' + scale);
// restrict radius to be between desired limits
spherical.radius = Math.max( scope.minDistance, Math.min( scope.maxDistance, spherical.radius ) );
// console.log('spherical.radius: ' + spherical.radius, scope.minDistance, scope.maxDistance);
// move target to panned location
scope.target.add( panOffset ); // 利用向量加法將觀察點向平移方向移動
// console.log('target: ', scope.target);
offset.setFromSpherical( spherical ); // 利用y軸為up軸的球面坐標坐標系來設置target-position向量
// rotate offset back to "camera-up-vector-is-up" space
offset.applyQuaternion( quatInverse ); // 然后將相機的target-position旋轉到以相機真正up軸為相機正上方的空間中
// 利用向量加法將新觀察點的向量與target-position相加，得到相機新的位置
// 這樣就通過移動相機來實現移動物體；而不是要修改每個物體的模型矩陣
position.copy( scope.target ).add( offset );
scope.object.lookAt( scope.target );
// if (sphericalDelta.theta !== 0 || sphericalDelta.phi !== 0) {
scope.dispatchEvent({
type: 'rotation-change',
sphericalDelta: sphericalDelta,
spherical: spherical
});
// }
if ( scope.enableDamping === true ) {
sphericalDelta.theta *= ( 1 - scope.dampingFactor );
sphericalDelta.phi *= ( 1 - scope.dampingFactor );
} else {
sphericalDelta.set( 0, 0, 0 );
}
if (!noUpdateZoom) {
if (scale !== 1 || updateZoomScale) {
var zoomLevel = getZoomRange(spherical.radius);
if (scope.zoomScale !== zoomLevel || updateZoomScale) {
scope.dispatchEvent({
type: 'zoom-change',
zoom: zoomLevel
});
scope.zoomScale = zoomLevel;
}
scope.dispatchEvent({
type: 'scale-change',
scale: scale
});
// console.log('zoomLevel: ' + zoomLevel);
}
}
// 重置變量
scale = 1;
panOffset.set( 0, 0, 0 );
// update condition is:
// min(camera displacement, camera rotation in radians)^2 > EPS
// using small-angle approximation cos(x/2) = 1 - x^2 / 8
// 滿足更新條件時才會記錄
var ds = lastPosition.distanceToSquared( scope.object.position );
if ( zoomChanged ||
ds > EPS ||
8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
scope.dispatchEvent( changeEvent );
lastPosition.copy( scope.object.position );
lastQuaternion.copy( scope.object.quaternion );
zoomChanged = false;
return true;
}
return false;
};
}();
// this.getPixelMeterRatio = function(target) {
// target = target ? target : scope.target;
// var element = scope.domElement === document ?
// scope.domElement.body : scope.domElement;
// var distance = scope.object.position.distanceTo(target);
// var h = scope.object instanceof PerspectiveCamera ?
// (Math.tan(scope.object.fov / 2 * DEG2RAD) * distance) * 2 :
// (scope.object.top - scope.object.bottom) / scope.object.zoom;
// var meterPerPixel = h / element.clientHeight;
// return meterPerPixel;
// }
this.goTop = function() {
sphericalDelta.phi = -spherical.phi;
}
this.getScaleByDistance = function(distance) {
return distance / spherical.radius;
}
this.getScaleByZoom = function(zoom) {
if (scope.object instanceof OrthographicCamera) {
return 1;
}
var element = scope.domElement === document ?
scope.domElement.body : scope.domElement;
var ratio = zoomRange[zoom - 1];
var h = ratio * element.clientHeight;
var distance = h / 2 / Math.tan(scope.object.fov / 2 * DEG2RAD);
var eyeDis = scope.object.position.distanceTo(scope.target);
return distance / eyeDis;
}
this.setScale = function(s, noUpdateZoom, updateZoomScale) {
scale = s;
scope.update(updateZoomScale, noUpdateZoom);
}
this.unprojectPan = function(deltaVector, moveDown, target) {
// var getProjectLength()
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
var cxv = new Vector3(0, 0, 0).setFromMatrixColumn(scope.object.matrix, 0);// 相機x軸
var cyv = new Vector3(0, 0, 0).setFromMatrixColumn(scope.object.matrix, 1);// 相機y軸
// 相機軸都是單位向量
var pxl = deltaVector.dot(cxv)/* / cxv.length()*/; // 向量在相機x軸的投影
var pyl = deltaVector.dot(cyv)/* / cyv.length()*/; // 向量在相機y軸的投影
// offset=dx * vector(cx) + dy * vector(cy.project(xoz).normalize)
// offset由相機x軸方向向量+相機y軸向量在xoz平面的投影組成
var dv = deltaVector.clone();
dv.y = 0; // 目前算法不會改變相機target的y分量
dv.sub(cxv.multiplyScalar(pxl));
pyl = dv.length();
if ( scope.object instanceof PerspectiveCamera ) {
// perspective
var position = scope.object.position;
var offset = new Vector3(0, 0, 0);
offset.copy(position).sub(target || scope.target);
var distance = offset.length();
distance *= Math.tan(scope.object.fov / 2 * Math.PI / 180);
// console.log('unprojectPan distance: ',distance);
// var xd = 2 * distance * deltaX / element.clientHeight;
// var yd = 2 * distance * deltaY / element.clientHeight;
// panLeft( xd, scope.object.matrix );
// panUp( yd, scope.object.matrix );
var deltaX = pxl * element.clientHeight / (2 * distance);
var deltaY = pyl * element.clientHeight / (2 * distance) * (moveDown ? -1 : 1);
return [deltaX, deltaY];
} else if ( scope.object instanceof OrthographicCamera ) {
// orthographic
// panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
// panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
var deltaX = pxl * element.clientWidth * scope.object.zoom / (scope.object.right - scope.object.left);
var deltaY = pyl * element.clientHeight * scope.object.zoom / (scope.object.top - scope.object.bottom) * (moveDown ? -1 : 1);
return [deltaX, deltaY];
} else {
// camera neither orthographic nor perspective
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
}
}
this.projectPan = function(deltaX, deltaY) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
var deltaVector = new Vector3(0, 0, 0);
if ( scope.object instanceof PerspectiveCamera ) {
var position = scope.object.position;
var offset = new Vector3(0, 0, 0);
offset.copy(position).sub(scope.target);
var distance = offset.length();
distance *= Math.tan(scope.object.fov / 2 * Math.PI / 180);
var xd = 2 * distance * deltaX / element.clientHeight;
var yd = 2 * distance * deltaY / element.clientHeight;
panLeft( xd, scope.object.matrix );
panUp( yd, scope.object.matrix );
deltaVector.set(panOffset.x, panOffset.y, panOffset.z);
panOffset.set(0, 0, 0);
return deltaVector;
} else if ( scope.object instanceof OrthographicCamera ) {
// orthographic
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
deltaVector.set(panOffset.x, panOffset.y, panOffset.z);
panOffset.set(0, 0, 0);
return deltaVector;
} else {
// camera neither orthographic nor perspective
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
}
}
this.dispose = function () {
scope.domElement.removeEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.removeEventListener( 'mousedown', onMouseDown, false );
scope.domElement.removeEventListener( 'wheel', onMouseWheel, false );
scope.domElement.removeEventListener( 'touchstart', onTouchStart, false );
scope.domElement.removeEventListener( 'touchend', onTouchEnd, false );
scope.domElement.removeEventListener( 'touchmove', onTouchMove, false );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
window.removeEventListener( 'keydown', onKeyDown, false );
//scope.dispatchEvent( { type: 'dispose' } ); // should this be added here?
};
this.getPixelMeterRatio = function(target) {
target = target ? target : scope.target;
var distance = scope.object.position.distanceTo(target);
return getPixelMeterRatioByDistance(distance);
}
function getPixelMeterRatioByDistance(distance) {
var element = scope.domElement === document ?
scope.domElement.body : scope.domElement;
// var distance = scope.object.position.distanceTo(target);
var h = scope.object instanceof PerspectiveCamera ?
(Math.tan(scope.object.fov / 2 * DEG2RAD) * distance) * 2 :
(scope.object.top - scope.object.bottom) / scope.object.zoom;
var meterPerPixel = h / element.clientHeight;
return meterPerPixel;
}
function getDistanceByPixelMeterRatio(ratio) {
var element = scope.domElement === document ?
scope.domElement.body : scope.domElement;
let cameraScreenHeight = ratio * element.clientHeight;
let distance = cameraScreenHeight / 2 / Math.tan((scope.object.fov || FOV) / 2 * DEG2RAD);
return distance;
}
function getZoomRange(ds) {
// return 5;
let meterPerPixel = scope.getPixelMeterRatio();
// var maxIdx = zoomRange.length - 1;
// if (meterPerPixel <= zoomRange[maxIdx]) {
// return maxIdx + 1;
// } else if(meterPerPixel >= zoomRange[0]) {
// return 0 + 1;
// }
// for (var i = 1, len = zoomRange.length; i < len; i++) {
// if (meterPerPixel <= zoomRange[i] && meterPerPixel > zoomRange[i + 1]) {
// return i + 1;
// }
// }
return getZoomRangeByRatio(meterPerPixel);
}
function getZoomRangeByRatio(meterPerPixel) {
// let meterPerPixel = scope.getPixelMeterRatio();
var maxIdx = zoomRange.length - 1;
if (meterPerPixel <= zoomRange[maxIdx]) {
return maxIdx + 1;
} else if(meterPerPixel >= zoomRange[0]) {
return 0 + 1;
}
for (var i = 0, len = zoomRange.length; i < len; i++) {
if (meterPerPixel <= zoomRange[i] && meterPerPixel > zoomRange[i + 1]) {
return i + 1;
}
}
}
//
// internals
//
var scope = this;
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3,
TOUCH_DOLLY: 4, TOUCH_PAN: 5, TOUCH_ROTATE_THETA: 6, TOUCH_ROTATE_PHI: 7 };
var state = STATE.NONE;
var EPS = 0.000001;
// current position in spherical coordinates
// 當前的球面坐標系；所有在屏幕的旋轉最終都映射為球的轉動；
// 也就是說你在2d屏幕的轉動實際上相當於在轉一個球
var spherical = new Spherical();
var sphericalDelta = new Spherical();
var scale = 1;
var panOffset = new Vector3();
var zoomChanged = false;
// 記錄touchstart開始的時間，主要用於處理雙指事件時判斷是旋轉還是縮放
var touchStartTime = null;
var rotateStart = new Vector2();
var rotateEnd = new Vector2();
var rotateDelta = new Vector2();
var touchThetaRotateStart = new Vector2();
var touchThetaRotateEnd = new Vector2();
var touchPhiFingerStart1 = new Vector2();
var touchPhiFingerEnd1 = new Vector2();
var touchPhiFingerStart2 = new Vector2();
var touchPhiFingerEnd2 = new Vector2();
var panStart = new Vector2();
var panEnd = new Vector2();
var panDelta = new Vector2();
var dollyStart = new Vector2();
var dollyEnd = new Vector2();
var dollyDelta = new Vector2();
function getAutoRotationAngle() {
return 2 * Math.PI / 60 / 60 * scope.autoRotateSpeed;
}
function getZoomScale() {
return Math.pow( 0.95, scope.zoomSpeed );
}
function rotateLeft( angle ) {// 繞y軸向左轉
// console.log('rotateLeft: ' + sphericalDelta.theta * 180 / Math.PI + ' ' + angle * 180 / Math.PI);
sphericalDelta.theta -= angle;
}
function rotateUp( angle ) {// 極坐標向上轉動
// console.log('rotateUp: ' + sphericalDelta.phi * 180 / Math.PI + ' ' + angle * 180 / Math.PI);
sphericalDelta.phi -= angle;
}
// x軸控制世界的左右、y軸控制世界的上下，z軸控制物體離屏幕的遠近
var panLeft = function () {
var v = new Vector3();
return function panLeft( distance, objectMatrix ) {// panLeft只求出沿着x軸向左平移的距離
v.setFromMatrixColumn( objectMatrix, 0 ); // get X column of objectMatrix
v.multiplyScalar( - distance );
panOffset.add( v );
};
}();
var panUp = function () {
var v = new Vector3();
return function panUp( distance, objectMatrix ) {// panUp求出沿着y軸向上平移的距離
v.setFromMatrixColumn( objectMatrix, 1 ); // get Y column of objectMatrix
var h = v.dot(new Vector3(0, 1, 0));
v.sub(new Vector3(0, h, 0));
v.normalize();
v.multiplyScalar( distance );
panOffset.add( v );
};
}();
// deltaX and deltaY are in pixels; right and down are positive
var pan = function () {
var offset = new Vector3();
return function pan( deltaX, deltaY ) {
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
if ( scope.object instanceof PerspectiveCamera ) {
// perspective
var position = scope.object.position;
offset.copy( position ).sub( scope.target );
var targetDistance = offset.length();
// half of the fov is center to top of screen
targetDistance *= Math.tan( ( scope.object.fov / 2 ) * Math.PI / 180.0 );// 計算出透視屏幕的高度
// console.log('pan targetDistance: ',targetDistance);
// we actually don't use screenWidth, since perspective camera is fixed to screen height
// 不使用屏幕寬度，因為透視相機的屏幕高度是固定的
// 平移的要點是沿着相機投影屏幕的的x軸、y軸移動，也就是沿着相機的right軸和up軸移動
panLeft( 2 * deltaX * targetDistance / element.clientHeight, scope.object.matrix );
panUp( 2 * deltaY * targetDistance / element.clientHeight, scope.object.matrix );
} else if ( scope.object instanceof OrthographicCamera ) {
// orthographic
panLeft( deltaX * ( scope.object.right - scope.object.left ) / scope.object.zoom / element.clientWidth, scope.object.matrix );
panUp( deltaY * ( scope.object.top - scope.object.bottom ) / scope.object.zoom / element.clientHeight, scope.object.matrix );
} else {
// camera neither orthographic nor perspective
console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - pan disabled.' );
scope.enablePan = false;
}
};
}();
function dollyIn( dollyScale ) {
// if ( scope.object instanceof PerspectiveCamera ) {
if (INTOUCHDEVICE) {
scale = dollyScale;
} else {
scale /= dollyScale;
}
// } else
if ( scope.object instanceof OrthographicCamera ) {
console.log('dollyIn: ', dollyScale);
if (INTOUCHDEVICE) {
scale = (2 - dollyScale / scope.object.zoom);
}
let zoom = scope.object.zoom;
if (INTOUCHDEVICE) {
zoom = dollyScale;
} else {
zoom = scope.object.zoom * dollyScale;
}
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, zoom ) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
// else {
// console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
// scope.enableZoom = false;
// }
}
function dollyOut( dollyScale ) {
// console.log()
// if ( scope.object instanceof PerspectiveCamera ) {
if (INTOUCHDEVICE) {
scale = dollyScale;
} else {
scale *= dollyScale;
}
// } else
if ( scope.object instanceof OrthographicCamera ) {
console.log('dollyOut: ', dollyScale);
if (INTOUCHDEVICE) {
scale = (2 - dollyScale / scope.object.zoom);
}
let zoom = scope.object.zoom;
if (INTOUCHDEVICE) {
zoom = dollyScale;
} else {
zoom = scope.object.zoom / dollyScale;
}
scope.object.zoom = Math.max( scope.minZoom, Math.min( scope.maxZoom, zoom) );
scope.object.updateProjectionMatrix();
zoomChanged = true;
}
// else {
// console.warn( 'WARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.' );
// scope.enableZoom = false;
// }
}
//
// event callbacks - update the object state
//
function handleMouseDownRotate( event ) {
//console.log( 'handleMouseDownRotate' );
rotateStart.set( event.clientX, event.clientY );
}
function handleMouseDownDolly( event ) {
//console.log( 'handleMouseDownDolly' );
dollyStart.set( event.clientX, event.clientY );
}
function handleMouseDownPan( event ) {
//console.log( 'handleMouseDownPan' );
panStart.set( event.clientX, event.clientY );
}
function handleMouseMoveRotate( event ) {
//console.log( 'handleMouseMoveRotate' );
rotateEnd.set( event.clientX, event.clientY );
rotateDelta.subVectors( rotateEnd, rotateStart );
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
// rotating across whole screen goes 360 degrees around
// 這是在轉一個橢圓，將deltax映射成為弧度，類似於用周長代表角度
rotateLeft( 2 * Math.PI * rotateDelta.x / element.clientWidth * scope.rotateSpeed );
// rotating up and down along whole screen attempts to go 360, but limited to 180
rotateUp( 2 * Math.PI * rotateDelta.y / element.clientHeight * scope.rotateSpeed );
rotateStart.copy( rotateEnd );
scope.update();
}
function handleMouseMoveDolly( event ) {
//console.log( 'handleMouseMoveDolly' );
dollyEnd.set( event.clientX, event.clientY );
dollyDelta.subVectors( dollyEnd, dollyStart );
if ( dollyDelta.y > 0 ) { // 竟然只是簡單的用y來控制每次的縮放差
dollyIn( getZoomScale() );
} else if ( dollyDelta.y < 0 ) {
dollyOut( getZoomScale() );
}
dollyStart.copy( dollyEnd );
scope.update();
}
function handleMouseMovePan( event ) {
//console.log( 'handleMouseMovePan' );
panEnd.set( event.clientX, event.clientY );
panDelta.subVectors( panEnd, panStart );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
scope.update();
}
function handleMouseUp( event ) {
// console.log( 'handleMouseUp' );
}
function handleMouseWheel( event ) {
// console.log( 'handleMouseWheel' );
if ( event.deltaY < 0 ) {
dollyOut( getZoomScale() );
} else if ( event.deltaY > 0 ) {
dollyIn( getZoomScale() );
}
scope.update();
}
function handleKeyDown( event ) {
//console.log( 'handleKeyDown' );
switch ( event.keyCode ) {
case scope.keys.UP:
pan( 0, scope.keyPanSpeed );
scope.update();
break;
case scope.keys.BOTTOM:
pan( 0, - scope.keyPanSpeed );
scope.update();
break;
case scope.keys.LEFT:
pan( scope.keyPanSpeed, 0 );
scope.update();
break;
case scope.keys.RIGHT:
pan( - scope.keyPanSpeed, 0 );
scope.update();
break;
}
}
function handleTouchStartRotate( event ) {
//console.log( 'handleTouchStartRotate' );
// rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
touchThetaRotateStart.set(dx, dy);
touchPhiFingerStart1.set(event.touches[0].pageX, event.touches[0].pageY);
touchPhiFingerStart2.set(event.touches[1].pageX, event.touches[1].pageY);
}
function handleTouchStartDolly( event ) {
//console.log( 'handleTouchStartDolly' );
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyStart.set( 0, distance );// touch情況下只是用兩指之間距離來控制delta scale
}
function handleTouchStartPan( event ) {
//console.log( 'handleTouchStartPan' );
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
function handleTouchMoveRotate( event ) {
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
touchThetaRotateEnd.set(dx, dy);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
touchPhiFingerEnd1.set(event.touches[0].pageX, event.touches[0].pageY);
touchPhiFingerEnd2.set(event.touches[1].pageX, event.touches[1].pageY);
let deltaPhi = Math.PI *
(touchPhiFingerEnd1.y - touchPhiFingerStart1.y +
touchPhiFingerEnd2.y - touchPhiFingerStart2.y) /
2 / element.clientHeight;
// console.log(deltaPhi);
if (Math.abs(deltaPhi) > 0.01) {
rotateUp(deltaPhi);
}
var costheta = touchThetaRotateEnd.dot(touchThetaRotateStart) /
(touchThetaRotateStart.length() * touchThetaRotateEnd.length());
// console.log('costheta', costheta);
var cross = touchThetaRotateStart.x * touchThetaRotateEnd.y -
touchThetaRotateEnd.x * touchThetaRotateStart.y;
// console.log('cross', cross);
var theta = Math.acos(costheta);
// console.log('theta', theta);
// 防止浮點數精度問題引發問題，比如Math.acos(1.000000000000002);
theta = typeof theta === 'number' && isFinite(theta) ? theta : 0;
if (Math.abs(theta) > 0.01) {
sphericalDelta.theta = cross >= 0 ? theta : -theta;
}
touchThetaRotateStart.copy(touchThetaRotateEnd);
touchPhiFingerStart1.copy(touchPhiFingerEnd1);
touchPhiFingerStart2.copy(touchPhiFingerEnd2);
scope.update();
}
function handleTouchMoveDolly( event ) {
// console.log( 'handleTouchMoveDolly' );
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyDelta.subVectors( dollyEnd, dollyStart );
// console.log(dollyDelta, dollyStart);
// console.log('handleTouchMoveDolly: ', (1 - dollyDelta.y / dollyStart.y));
if (scope.object instanceof PerspectiveCamera) {
if ( dollyDelta.y > 0 ) {
dollyOut( 1 - dollyDelta.y / dollyStart.y );
} else if ( dollyDelta.y < 0 ) {
dollyIn( 1 - dollyDelta.y / dollyStart.y );
}
} else if (scope.object instanceof OrthographicCamera) {
if ( dollyDelta.y > 0 ) {
dollyOut(scope.object.zoom * (1 + dollyDelta.y / dollyStart.y));
} else if ( dollyDelta.y < 0 ) {
dollyIn(scope.object.zoom * ( 1 + dollyDelta.y / dollyStart.y ));
}
}
dollyStart.copy( dollyEnd );
scope.update();
}
function handleTouchMovePan( event ) {
// console.log( 'handleTouchMovePan' );
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
panDelta.subVectors( panEnd, panStart );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
scope.update();
}
function handleTouchEnd( event ) {
//console.log( 'handleTouchEnd' );
}
//
// event handlers - FSM: listen for events and reset state
//
function onMouseDown( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( event.button ) {
case scope.mouseButtons.ORBIT:
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
break;
case scope.mouseButtons.ZOOM:
if ( scope.enableZoom === false ) return;
handleMouseDownDolly( event );
state = STATE.DOLLY;
break;
case scope.mouseButtons.PAN:
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
break;
}
if ( state !== STATE.NONE ) {
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( startEvent );
}
}
function onMouseMove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( state ) {
case STATE.ROTATE:
if ( scope.enableRotate === false ) return;
handleMouseMoveRotate( event );
break;
case STATE.DOLLY:
if ( scope.enableZoom === false ) return;
handleMouseMoveDolly( event );
break;
case STATE.PAN:
if ( scope.enablePan === false ) return;
handleMouseMovePan( event );
break;
}
}
function onMouseUp( event ) {
if ( scope.enabled === false ) return;
handleMouseUp( event );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onMouseWheel( event ) {
if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
event.preventDefault();
event.stopPropagation();
handleMouseWheel( event );
scope.dispatchEvent( startEvent ); // not sure why these are here...
scope.dispatchEvent( endEvent );
}
function onKeyDown( event ) {
if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
handleKeyDown( event );
}
function onTouchStart( event ) {
if ( scope.enabled === false ) return;
console.log('OrbitControls+_start');
switch ( event.touches.length ) {
// case 1: // one-fingered touch: rotate
// if ( scope.enableRotate === false ) return;
// handleTouchStartRotate( event );
// state = STATE.TOUCH_ROTATE;
// break;
case 2: // two-fingered touch: dolly or rotate
// if ( scope.enableZoom === false ) return;
// handleTouchStartDolly( event );
// state = STATE.TOUCH_DOLLY;
touchStartTime = Date.now();
if (scope.enableZoom) {
handleTouchStartDolly( event );
}
if (scope.enableRotate) {
handleTouchStartRotate( event );
}
state = STATE.NONE;
break;
case 1: // one-fingered touch: pan
if ( scope.enablePan === false ) return;
handleTouchStartPan( event );
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
if ( state !== STATE.NONE ) {
scope.dispatchEvent( startEvent );
}
}
function onTouchMove( event ) {
// console.log('OrbitControls+_move');
if ( scope.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
// case 1: // one-fingered touch: rotate
// if ( scope.enableRotate === false ) return;
// if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?...
// handleTouchMoveRotate( event );
// break;
case 2: // two-fingered touch: dolly
// if ( scope.enableZoom === false ) return;
// if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
handleTouchMoveDolly( event );
handleTouchMoveRotate(event);
// if (state === STATE.NONE) {
// var now = Date.now();
// // 如果雙指在50ms內進行了縮放操作則記錄state為dolly
// // 否則為Pan，在移動時無論是Pan還是dolly都會同時處理移動和縮放
// if (now - touchStartTime >= 200) {
// // 記錄移動距離
// var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
// var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
// var distance = Math.sqrt( dx * dx + dy * dy );
// dollyEnd.set( 0, distance );
// dollyDelta.subVectors( dollyEnd, dollyStart );
// let dollyLength = dollyDelta.length();
// touchThetaRotateEnd.set(dx, dy);
// var costheta = touchThetaRotateEnd.dot(touchThetaRotateStart) / (touchThetaRotateStart.length() * touchThetaRotateEnd.length());
// var theta = Math.acos(costheta);
// touchPhiFingerEnd1.set(event.touches[0].pageX, event.touches[0].pageY);
// touchPhiFingerEnd2.set(event.touches[1].pageX, event.touches[1].pageY);
// if (Math.abs(dollyLength) >= 10) {
// state = STATE.TOUCH_DOLLY; // 既可以縮放又可以theta旋轉
// } else if (theta > 5 * Math.PI / 180) {
// state = STATE.TOUCH_ROTATE_THETA;
// } else if (Math.abs(touchPhiFingerEnd1.x - touchPhiFingerStart1.x) < 5 &&
// Math.abs(touchPhiFingerEnd2.x - touchPhiFingerStart2.x) < 5 &&
// (Math.abs(touchPhiFingerEnd1.y - touchPhiFingerStart1.y) > 5) &&
// (Math.abs(touchPhiFingerEnd2.y - touchPhiFingerStart2.y) > 5)) {
// state = STATE.TOUCH_ROTATE_PHI;
// }
// dollyStart.copy(dollyEnd);
// dollyDelta.subVectors(dollyEnd, dollyStart);
// touchThetaRotateStart.copy(touchThetaRotateEnd);
// touchPhiFingerStart1.copy(touchPhiFingerEnd1);
// touchPhiFingerStart2.copy(touchPhiFingerEnd2);
// } else if (now - touchStartTime >= 400) {
// state = STATE.TOUCH_DOLLY;
// } else {
// state = STATE.NONE;
// }
// } else if (state === STATE.TOUCH_DOLLY && scope.enableZoom) {
// handleTouchMoveDolly(event);
// handleTouchMoveRotate(event);
// } else if ((state === STATE.TOUCH_ROTATE ||
// state === STATE.TOUCH_ROTATE_THETA || state === STATE.TOUCH_ROTATE_PHI) &&
// scope.enableRotate) {
// if (state === STATE.TOUCH_ROTATE_THETA) {
// handleTouchMoveDolly(event);
// }
// handleTouchMoveRotate(event);
// }
break;
case 1: // one-fingered touch: pan
if ( scope.enablePan === false ) return;
// if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
if (state !== STATE.TOUCH_PAN) {// 處理突然由兩指變成單指情況
handleTouchStartPan( event );
} else {
handleTouchMovePan( event );
}
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
}
function onTouchEnd( event ) {
if ( scope.enabled === false ) return;
handleTouchEnd( event );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onContextMenu( event ) {
event.preventDefault();
}
if (INTOUCHDEVICE) {
scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
scope.domElement.addEventListener( 'touchmove',
onTouchMove
, false );
} else {
scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
window.addEventListener( 'keydown', onKeyDown, false );
}
// force an update at start
this.update();
this.pan = pan;
this.rotate = function(theta, phi) {
if (typeof theta === 'number' && isFinite(theta)) {
sphericalDelta.theta -= theta;
}
if (typeof phi === 'number' && isFinite(phi)) {
sphericalDelta.phi -= phi;
}
scope.update();
};
this.getMinDistanceByZoom = function() {
return getDistanceByPixelMeterRatio(zoomRange[zoomRange.length - 1]);
};
this.getMaxDistanceByZoom = function() {
return getDistanceByPixelMeterRatio(zoomRange[0]);
};
this.getDistanceByZoom = function(zoom) {
// zoom代表數據側zoom：1-7
return getDistanceByPixelMeterRatio(zoomRange[zoom - 1]);
};
this.getZoomByDistance = function(distance) {
var meterPerPixel = getPixelMeterRatioByDistance(distance);
var mapZoom = getZoomRangeByRatio(meterPerPixel);
return mapZoom;
};
};
OrbitControls = OrbitControls;
OrbitControls.prototype = Object.create( EventDispatcher.prototype );
OrbitControls.prototype.constructor = OrbitControls;
Object.defineProperties( OrbitControls.prototype, {
center: {
get: function () {
console.warn( 'OrbitControls: .center has been renamed to .target' );
return this.target;
}
},
// backward compatibility
noZoom: {
get: function () {
console.warn( 'OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
return ! this.enableZoom;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
this.enableZoom = ! value;
}
},
noRotate: {
get: function () {
console.warn( 'OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
return ! this.enableRotate;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
this.enableRotate = ! value;
}
},
noPan: {
get: function () {
console.warn( 'OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
return ! this.enablePan;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
this.enablePan = ! value;
}
},
noKeys: {
get: function () {
console.warn( 'OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
return ! this.enableKeys;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
this.enableKeys = ! value;
}
},
staticMoving: {
get: function () {
console.warn( 'OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
return ! this.enableDamping;
},
set: function ( value ) {
console.warn( 'OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
this.enableDamping = ! value;
}
},
dynamicDampingFactor: {
get: function () {
console.warn( 'OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
return this.dampingFactor;
},
set: function ( value ) {
console.warn( 'OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
this.dampingFactor = value;
}
}
} );
}
function handleTouchMoveRotate( event ) {
var dx = event.touches[0].pageX - event.touches[1].pageX;
var dy = event.touches[0].pageY - event.touches[1].pageY;
touchThetaRotateEnd.set(dx, dy);
var element = scope.domElement === document ? scope.domElement.body : scope.domElement;
touchPhiFingerEnd1.set(event.touches[0].pageX, event.touches[0].pageY);
touchPhiFingerEnd2.set(event.touches[1].pageX, event.touches[1].pageY);
let deltaPhi = Math.PI *
(touchPhiFingerEnd1.y - touchPhiFingerStart1.y +
touchPhiFingerEnd2.y - touchPhiFingerStart2.y) /
2 / element.clientHeight;
// console.log(deltaPhi);
if (Math.abs(deltaPhi) > 0.01) {
rotateUp(deltaPhi);
}
var costheta = touchThetaRotateEnd.dot(touchThetaRotateStart) /
(touchThetaRotateStart.length() * touchThetaRotateEnd.length());
// console.log('costheta', costheta);
var cross = touchThetaRotateStart.x * touchThetaRotateEnd.y -
touchThetaRotateEnd.x * touchThetaRotateStart.y;
// console.log('cross', cross);
var theta = Math.acos(costheta);
// console.log('theta', theta);
// 防止浮點數精度問題引發問題，比如Math.acos(1.000000000000002);
theta = typeof theta === 'number' && isFinite(theta) ? theta : 0;
if (Math.abs(theta) > 0.01) {
sphericalDelta.theta = cross >= 0 ? theta : -theta;
}
touchThetaRotateStart.copy(touchThetaRotateEnd);
touchPhiFingerStart1.copy(touchPhiFingerEnd1);
touchPhiFingerStart2.copy(touchPhiFingerEnd2);
scope.update();
}
function handleTouchMoveDolly( event ) {
// console.log( 'handleTouchMoveDolly' );
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyDelta.subVectors( dollyEnd, dollyStart );
// console.log(dollyDelta, dollyStart);
// console.log('handleTouchMoveDolly: ', (1 - dollyDelta.y / dollyStart.y));
if (scope.object instanceof PerspectiveCamera) {
if ( dollyDelta.y > 0 ) {
dollyOut( 1 - dollyDelta.y / dollyStart.y );
} else if ( dollyDelta.y < 0 ) {
dollyIn( 1 - dollyDelta.y / dollyStart.y );
}
} else if (scope.object instanceof OrthographicCamera) {
if ( dollyDelta.y > 0 ) {
dollyOut(scope.object.zoom * (1 + dollyDelta.y / dollyStart.y));
} else if ( dollyDelta.y < 0 ) {
dollyIn(scope.object.zoom * ( 1 + dollyDelta.y / dollyStart.y ));
}
}
dollyStart.copy( dollyEnd );
scope.update();
}
function handleTouchMovePan( event ) {
// console.log( 'handleTouchMovePan' );
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
panDelta.subVectors( panEnd, panStart );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
scope.update();
}
function handleTouchEnd( event ) {
//console.log( 'handleTouchEnd' );
}
//
// event handlers - FSM: listen for events and reset state
//
function onMouseDown( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( event.button ) {
case scope.mouseButtons.ORBIT:
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
break;
case scope.mouseButtons.ZOOM:
if ( scope.enableZoom === false ) return;
handleMouseDownDolly( event );
state = STATE.DOLLY;
break;
case scope.mouseButtons.PAN:
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
break;
}
if ( state !== STATE.NONE ) {
document.addEventListener( 'mousemove', onMouseMove, false );
document.addEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( startEvent );
}
}
function onMouseMove( event ) {
if ( scope.enabled === false ) return;
event.preventDefault();
switch ( state ) {
case STATE.ROTATE:
if ( scope.enableRotate === false ) return;
handleMouseMoveRotate( event );
break;
case STATE.DOLLY:
if ( scope.enableZoom === false ) return;
handleMouseMoveDolly( event );
break;
case STATE.PAN:
if ( scope.enablePan === false ) return;
handleMouseMovePan( event );
break;
}
}
function onMouseUp( event ) {
if ( scope.enabled === false ) return;
handleMouseUp( event );
document.removeEventListener( 'mousemove', onMouseMove, false );
document.removeEventListener( 'mouseup', onMouseUp, false );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onMouseWheel( event ) {
if ( scope.enabled === false || scope.enableZoom === false || ( state !== STATE.NONE && state !== STATE.ROTATE ) ) return;
event.preventDefault();
event.stopPropagation();
handleMouseWheel( event );
scope.dispatchEvent( startEvent ); // not sure why these are here...
scope.dispatchEvent( endEvent );
}
function onKeyDown( event ) {
if ( scope.enabled === false || scope.enableKeys === false || scope.enablePan === false ) return;
handleKeyDown( event );
}
function onTouchStart( event ) {
if ( scope.enabled === false ) return;
console.log('OrbitControls+_start');
switch ( event.touches.length ) {
// case 1: // one-fingered touch: rotate
// if ( scope.enableRotate === false ) return;
// handleTouchStartRotate( event );
// state = STATE.TOUCH_ROTATE;
// break;
case 2: // two-fingered touch: dolly or rotate
// if ( scope.enableZoom === false ) return;
// handleTouchStartDolly( event );
// state = STATE.TOUCH_DOLLY;
touchStartTime = Date.now();
if (scope.enableZoom) {
handleTouchStartDolly( event );
}
if (scope.enableRotate) {
handleTouchStartRotate( event );
}
state = STATE.NONE;
break;
case 1: // one-fingered touch: pan
if ( scope.enablePan === false ) return;
handleTouchStartPan( event );
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
if ( state !== STATE.NONE ) {
scope.dispatchEvent( startEvent );
}
}
function onTouchMove( event ) {
// console.log('OrbitControls+_move');
if ( scope.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
// case 1: // one-fingered touch: rotate
// if ( scope.enableRotate === false ) return;
// if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?...
// handleTouchMoveRotate( event );
// break;
case 2: // two-fingered touch: dolly
// if ( scope.enableZoom === false ) return;
// if ( state !== STATE.TOUCH_DOLLY ) return; // is this needed?...
handleTouchMoveDolly( event );
handleTouchMoveRotate(event);
// if (state === STATE.NONE) {
// var now = Date.now();
// // 如果雙指在50ms內進行了縮放操作則記錄state為dolly
// // 否則為Pan，在移動時無論是Pan還是dolly都會同時處理移動和縮放
// if (now - touchStartTime >= 200) {
// // 記錄移動距離
// var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
// var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
// var distance = Math.sqrt( dx * dx + dy * dy );
// dollyEnd.set( 0, distance );
// dollyDelta.subVectors( dollyEnd, dollyStart );
// let dollyLength = dollyDelta.length();
// touchThetaRotateEnd.set(dx, dy);
// var costheta = touchThetaRotateEnd.dot(touchThetaRotateStart) / (touchThetaRotateStart.length() * touchThetaRotateEnd.length());
// var theta = Math.acos(costheta);
// touchPhiFingerEnd1.set(event.touches[0].pageX, event.touches[0].pageY);
// touchPhiFingerEnd2.set(event.touches[1].pageX, event.touches[1].pageY);
// if (Math.abs(dollyLength) >= 10) {
// state = STATE.TOUCH_DOLLY; // 既可以縮放又可以theta旋轉
// } else if (theta > 5 * Math.PI / 180) {
// state = STATE.TOUCH_ROTATE_THETA;
// } else if (Math.abs(touchPhiFingerEnd1.x - touchPhiFingerStart1.x) < 5 &&
// Math.abs(touchPhiFingerEnd2.x - touchPhiFingerStart2.x) < 5 &&
// (Math.abs(touchPhiFingerEnd1.y - touchPhiFingerStart1.y) > 5) &&
// (Math.abs(touchPhiFingerEnd2.y - touchPhiFingerStart2.y) > 5)) {
// state = STATE.TOUCH_ROTATE_PHI;
// }
// dollyStart.copy(dollyEnd);
// dollyDelta.subVectors(dollyEnd, dollyStart);
// touchThetaRotateStart.copy(touchThetaRotateEnd);
// touchPhiFingerStart1.copy(touchPhiFingerEnd1);
// touchPhiFingerStart2.copy(touchPhiFingerEnd2);
// } else if (now - touchStartTime >= 400) {
// state = STATE.TOUCH_DOLLY;
// } else {
// state = STATE.NONE;
// }
// } else if (state === STATE.TOUCH_DOLLY && scope.enableZoom) {
// handleTouchMoveDolly(event);
// handleTouchMoveRotate(event);
// } else if ((state === STATE.TOUCH_ROTATE ||
// state === STATE.TOUCH_ROTATE_THETA || state === STATE.TOUCH_ROTATE_PHI) &&
// scope.enableRotate) {
// if (state === STATE.TOUCH_ROTATE_THETA) {
// handleTouchMoveDolly(event);
// }
// handleTouchMoveRotate(event);
// }
break;
case 1: // one-fingered touch: pan
if ( scope.enablePan === false ) return;
// if ( state !== STATE.TOUCH_PAN ) return; // is this needed?...
if (state !== STATE.TOUCH_PAN) {// 處理突然由兩指變成單指情況
handleTouchStartPan( event );
} else {
handleTouchMovePan( event );
}
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
}
function onTouchEnd( event ) {
if ( scope.enabled === false ) return;
handleTouchEnd( event );
scope.dispatchEvent( endEvent );
state = STATE.NONE;
}
function onContextMenu( event ) {
event.preventDefault();
}
if (INTOUCHDEVICE) {
scope.domElement.addEventListener( 'touchstart', onTouchStart, false );
scope.domElement.addEventListener( 'touchend', onTouchEnd, false );
scope.domElement.addEventListener( 'touchmove',
onTouchMove
, false );
} else {
scope.domElement.addEventListener( 'contextmenu', onContextMenu, false );
scope.domElement.addEventListener( 'mousedown', onMouseDown, false );
scope.domElement.addEventListener( 'wheel', onMouseWheel, false );
window.addEventListener( 'keydown', onKeyDown, false );
}
// force an update at start
this.update();
this.pan = pan;
this.rotate = function(theta, phi) {
if (typeof theta === 'number' && isFinite(theta)) {
sphericalDelta.theta -= theta;
}
if (typeof phi === 'number' && isFinite(phi)) {
sphericalDelta.phi -= phi;
}
scope.update();
};
this.getMinDistanceByZoom = function() {
return getDistanceByPixelMeterRatio(zoomRange[zoomRange.length - 1]);
};
this.getMaxDistanceByZoom = function() {
return getDistanceByPixelMeterRatio(zoomRange[0]);
}
};
OrbitControls = OrbitControls;
OrbitControls.prototype = Object.create( EventDispatcher.prototype );
OrbitControls.prototype.constructor = OrbitControls;
Object.defineProperties( OrbitControls.prototype, {
center: {
get: function () {
console.warn( 'OrbitControls: .center has been renamed to .target' );
return this.target;
}
},
// backward compatibility
noZoom: {
get: function () {
console.warn( 'OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
return ! this.enableZoom;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noZoom has been deprecated. Use .enableZoom instead.' );
this.enableZoom = ! value;
}
},
noRotate: {
get: function () {
console.warn( 'OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
return ! this.enableRotate;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noRotate has been deprecated. Use .enableRotate instead.' );
this.enableRotate = ! value;
}
},
noPan: {
get: function () {
console.warn( 'OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
return ! this.enablePan;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noPan has been deprecated. Use .enablePan instead.' );
this.enablePan = ! value;
}
},
noKeys: {
get: function () {
console.warn( 'OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
return ! this.enableKeys;
},
set: function ( value ) {
console.warn( 'OrbitControls: .noKeys has been deprecated. Use .enableKeys instead.' );
this.enableKeys = ! value;
}
},
staticMoving: {
get: function () {
console.warn( 'OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
return ! this.enableDamping;
},
set: function ( value ) {
console.warn( 'OrbitControls: .staticMoving has been deprecated. Use .enableDamping instead.' );
this.enableDamping = ! value;
}
},
dynamicDampingFactor: {
get: function () {
console.warn( 'OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
return this.dampingFactor;
},
set: function ( value ) {
console.warn( 'OrbitControls: .dynamicDampingFactor has been renamed. Use .dampingFactor instead.' );
this.dampingFactor = value;
}
}
} );
