Skip to content

T
three.js

Ablesons / three.js
与 Fork 源项目一致

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

体验新版 GitCode，发现更多精彩内容 >>

未验证 提交 ea504f08 编写于 作者: G Guilherme Avila
浏览文件
操作

OrbitControls: refactoring

上级 c411c0b7
展开全部 隐藏空白更改
内联 并排
Showing with 789 addition and 2532 deletion
examples/js/controls/MapControls.js 已删除 100644 → 0
浏览文件 @ c411c0b7
此差异已折叠。
examples/js/controls/OrbitControls.js
浏览文件 @ ea504f08
......@@ -4,6 +4,7 @@
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
* @author ScieCode / http://github.com/sciecode
*/
// This set of controls performs orbiting, dollying (zooming), and panning.
......@@ -75,7 +76,10 @@ THREE.OrbitControls = function ( object, domElement ) {
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { LEFT: THREE.MOUSE.LEFT, MIDDLE: THREE.MOUSE.MIDDLE, RIGHT: THREE.MOUSE.RIGHT };
this.mouseButtons = { LEFT: THREE.MOUSE.ROTATE, MIDDLE: THREE.MOUSE.DOLLY, RIGHT: THREE.MOUSE.PAN };
// Touch fingers
this.touches = { ONE: THREE.TOUCH.ROTATE, TWO: THREE.TOUCH.DOLLY_PAN };
// for reset
this.target0 = this.target.clone();
......@@ -250,7 +254,16 @@ THREE.OrbitControls = function ( object, domElement ) {
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY_PAN: 4 };
var STATE = {
NONE: - 1,
ROTATE: 0,
DOLLY: 1,
PAN: 2,
TOUCH_ROTATE: 3,
TOUCH_PAN: 4,
TOUCH_DOLLY_PAN: 5,
TOUCH_DOLLY_ROTATE: 6
};
var state = STATE.NONE;
......@@ -581,26 +594,34 @@ THREE.OrbitControls = function ( object, domElement ) {
//console.log( 'handleTouchStartRotate' );
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
if ( event.touches.length == 1 ) {
}
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
function handleTouchStartDollyPan( event ) {
}
//console.log( 'handleTouchStartDollyPan' );
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
rotateStart.set( x, y );
}
if ( scope.enableZoom ) {
}
function handleTouchStartPan( event ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
//console.log( 'handleTouchStartPan' );
var distance = Math.sqrt( dx * dx + dy * dy );
if ( event.touches.length == 1 ) {
dollyStart.set( 0, distance );
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
if ( scope.enablePan ) {
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
......@@ -611,11 +632,57 @@ THREE.OrbitControls = function ( object, domElement ) {
}
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 );
}
function handleTouchStartDollyPan( event ) {
//console.log( 'handleTouchStartDollyPan' );
if ( scope.enableZoom ) handleTouchStartDolly( event );
if ( scope.enablePan ) handleTouchStartPan( event );
}
function handleTouchStartDollyRotate( event ) {
//console.log( 'handleTouchStartDollyRotate' );
if ( scope.enableZoom ) handleTouchStartDolly( event );
if ( scope.enableRotate ) handleTouchStartRotate( event );
}
function handleTouchMoveRotate( event ) {
//console.log( 'handleTouchMoveRotate' );
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
if ( event.touches.length == 1 ) {
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
rotateEnd.set( x, y );
}
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
......@@ -627,47 +694,71 @@ THREE.OrbitControls = function ( object, domElement ) {
rotateStart.copy( rotateEnd );
scope.update();
}
function handleTouchMovePan( event ) {
//console.log( 'handleTouchMoveRotate' );
if ( event.touches.length == 1 ) {
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
panEnd.set( x, y );
}
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
}
function handleTouchMoveDollyPan( event ) {
function handleTouchMoveDolly( event ) {
//console.log( 'handleTouchMoveDollyPan' );
//console.log( 'handleTouchMoveRotate' );
if ( scope.enableZoom ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
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 );
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyEnd.set( 0, distance );
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
dollyIn( dollyDelta.y );
dollyIn( dollyDelta.y );
dollyStart.copy( dollyEnd );
dollyStart.copy( dollyEnd );
}
}
function handleTouchMoveDollyPan( event ) {
if ( scope.enablePan ) {
//console.log( 'handleTouchMoveDollyPan' );
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
if ( scope.enableZoom ) handleTouchMoveDolly( event );
panEnd.set( x, y );
if ( scope.enablePan ) handleTouchMovePan( event );
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
}
pan( panDelta.x, panDelta.y );
function handleTouchMoveDollyRotate( event ) {
panStart.copy( panEnd );
//console.log( 'handleTouchMoveDollyPan' );
}
if ( scope.enableZoom ) handleTouchMoveDolly( event );
scope.update();
if ( scope.enableRotate ) handleTouchMoveRotate( event );
}
......@@ -696,45 +787,115 @@ THREE.OrbitControls = function ( object, domElement ) {
switch ( event.button ) {
case scope.mouseButtons.LEFT:
case 0:
switch ( scope.mouseButtons.LEFT ) {
case THREE.MOUSE.ROTATE:
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
} else {
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
}
if ( scope.enablePan === false ) return;
break;
handleMouseDownPan( event );
case THREE.MOUSE.PAN:
state = STATE.PAN;
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
} else {
if ( scope.enableRotate === false ) return;
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
handleMouseDownRotate( event );
state = STATE.ROTATE;
state = STATE.ROTATE;
} else {
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
}
break;
default:
state = STATE.NONE;
}
break;
case scope.mouseButtons.MIDDLE:
if ( scope.enableZoom === false ) return;
case 1:
switch ( scope.mouseButtons.MIDDLE ) {
case THREE.MOUSE.DOLLY:
if ( scope.enableZoom === false ) return;
handleMouseDownDolly( event );
handleMouseDownDolly( event );
state = STATE.DOLLY;
state = STATE.DOLLY;
break;
default:
state = STATE.NONE;
}
break;
case scope.mouseButtons.RIGHT:
case 2:
if ( scope.enablePan === false ) return;
switch ( scope.mouseButtons.RIGHT ) {
case THREE.MOUSE.ROTATE:
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
break;
case THREE.MOUSE.PAN:
handleMouseDownPan( event );
if ( scope.enablePan === false ) return;
state = STATE.PAN;
handleMouseDownPan( event );
state = STATE.PAN;
break;
default:
state = STATE.NONE;
}
break;
......@@ -833,23 +994,67 @@ THREE.OrbitControls = function ( object, domElement ) {
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
case 1:
if ( scope.enableRotate === false ) return;
switch ( scope.touches.ONE ) {
case TOUCH.ROTATE:
if ( scope.enableRotate === false ) return;
handleTouchStartRotate( event );
state = STATE.TOUCH_ROTATE;
break;
handleTouchStartRotate( event );
case TOUCH.PAN:
state = STATE.TOUCH_ROTATE;
if ( scope.enablePan === false ) return;
handleTouchStartPan( event );
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
break;
case 2: // two-fingered touch: dolly-pan
case 2:
switch ( scope.touches.TWO ) {
case TOUCH.DOLLY_PAN:
if ( scope.enableZoom === false && scope.enablePan === false ) return;
handleTouchStartDollyPan( event );
if ( scope.enableZoom === false && scope.enablePan === false ) return;
state = STATE.TOUCH_DOLLY_PAN;
handleTouchStartDollyPan( event );
break;
state = STATE.TOUCH_DOLLY_PAN;
case TOUCH.DOLLY_ROTATE:
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
handleTouchStartDollyRotate( event );
state = STATE.TOUCH_DOLLY_ROTATE;
break;
default:
state = STATE.NONE;
}
break;
......@@ -876,21 +1081,71 @@ THREE.OrbitControls = function ( object, domElement ) {
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
case 1:
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?
switch ( scope.touches.ONE ) {
case TOUCH.ROTATE:
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return;
handleTouchMoveRotate( event );
handleTouchMoveRotate( event );
scope.update();
break;
case TOUCH.PAN:
if ( scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_PAN ) return;
handleTouchMovePan( event );
scope.update();
break;
default:
state = STATE.NONE;
}
break;
case 2: // two-fingered touch: dolly-pan
case 2:
switch ( scope.touches.TWO ) {
if ( scope.enableZoom === false && scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_DOLLY_PAN ) return; // is this needed?
case TOUCH.DOLLY_PAN:
handleTouchMoveDollyPan( event );
if ( scope.enableZoom === false && scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_DOLLY_PAN ) return;
handleTouchMoveDollyPan( event );
scope.update();
break;
case TOUCH.DOLLY_ROTATE:
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_DOLLY_ROTATE ) return;
handleTouchMoveDollyRotate( event );
scope.update();
break;
default:
state = STATE.NONE;
}
break;
......@@ -1068,3 +1323,26 @@ Object.defineProperties( THREE.OrbitControls.prototype, {
}
} );
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
// This is very similar to OrbitControls, another set of touch behavior
//
// Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - left mouse, or arrow keys / touch: one-finger move
THREE.MapControls = function ( object, domElement ) {
THREE.OrbitControls.call( this, object, domElement );
this.mouseButtons.LEFT = THREE.MOUSE.PAN;
this.mouseButtons.RIGHT = THREE.MOUSE.ROTATE;
this.touches.ONE = THREE.TOUCH.PAN;
this.touches.TWO = THREE.TOUCH.DOLLY_ROTATE;
}
THREE.MapControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.MapControls.prototype.constructor = THREE.MapControls;
examples/jsm/controls/MapControls.d.ts 已删除 100644 → 0
浏览文件 @ c411c0b7
import {
Camera,
EventDispatcher,
MOUSE,
Object3D,
Vector3
} from '../../../src/Three';
export class MapControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement | HTMLDocument;
// API
enabled: boolean;
target: Vector3;
enableZoom: boolean;
zoomSpeed: number;
minDistance: number;
maxDistance: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
keyPanSpeed: number;
maxZoom: number;
minZoom: number;
panSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableKeys: boolean;
screenSpacePanning: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number };
mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE };
enableDamping: boolean;
dampingFactor: number;
target0: Vector3;
position0: Vector3;
zoom0: number;
rotateLeft(angle?: number): void;
rotateUp(angle?: number): void;
panLeft(distance?: number): void;
panUp(distance?: number): void;
pan(deltaX: number, deltaY: number): void;
dollyIn(dollyScale: number): void;
dollyOut(dollyScale: number): void;
saveState(): void;
update(): boolean;
reset(): void;
dispose(): void;
getPolarAngle(): number;
getAzimuthalAngle(): number;
}
examples/jsm/controls/MapControls.js 已删除 100644 → 0
浏览文件 @ c411c0b7
此差异已折叠。
examples/jsm/controls/OrbitControls.d.ts
浏览文件 @ ea504f08
import { Camera, MOUSE, Object3D, Vector3 } from '../../../src/Three';
import { Camera, MOUSE, Object3D, TOUCH, Vector3 } from '../../../src/Three';
export class MapControls {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement | HTMLDocument;
// API
enabled: boolean;
target: Vector3;
// deprecated
center: Vector3;
minDistance: number;
maxDistance: number;
minZoom: number;
maxZoom: number;
minPolarAngle: number;
maxPolarAngle: number;
minAzimuthAngle: number;
maxAzimuthAngle: number;
enableDamping: boolean;
dampingFactor: number;
enableZoom: boolean;
zoomSpeed: number;
enableRotate: boolean;
rotateSpeed: number;
enablePan: boolean;
panSpeed: number;
screenSpacePanning: boolean;
keyPanSpeed: number;
autoRotate: boolean;
autoRotateSpeed: number;
enableKeys: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE; };
touches: { ONE: TOUCH; TWO: TOUCH };
rotateLeft(angle?: number): void;
rotateUp(angle?: number): void;
panLeft(distance?: number): void;
panUp(distance?: number): void;
pan(deltaX: number, deltaY: number): void;
dollyIn(dollyScale: number): void;
dollyOut(dollyScale: number): void;
update(): void;
reset(): void;
dispose(): void;
getPolarAngle(): number;
getAzimuthalAngle(): number;
// EventDispatcher mixins
addEventListener(type: string, listener: (event: any) => void): void;
hasEventListener(type: string, listener: (event: any) => void): boolean;
removeEventListener(type: string, listener: (event: any) => void): void;
dispatchEvent(event: { type: string; target: any; }): void;
}
export class OrbitControls {
constructor(object: Camera, domElement?: HTMLElement);
......@@ -44,7 +125,8 @@ export class OrbitControls {
enableKeys: boolean;
keys: { LEFT: number; UP: number; RIGHT: number; BOTTOM: number; };
mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE; };
mouseButtons: { LEFT: MOUSE; MIDDLE: MOUSE; RIGHT: MOUSE; };
touches: { ONE: TOUCH; TWO: TOUCH };
rotateLeft(angle?: number): void;
......
examples/jsm/controls/OrbitControls.js
浏览文件 @ ea504f08
......@@ -4,6 +4,7 @@
* @author alteredq / http://alteredqualia.com/
* @author WestLangley / http://github.com/WestLangley
* @author erich666 / http://erichaines.com
* @author ScieCode / http://github.com/sciecode
*/
import {
......@@ -11,6 +12,7 @@ import {
MOUSE,
Quaternion,
Spherical,
TOUCH,
Vector2,
Vector3
} from "../../../build/three.module.js";
......@@ -84,7 +86,10 @@ var OrbitControls = function ( object, domElement ) {
this.keys = { LEFT: 37, UP: 38, RIGHT: 39, BOTTOM: 40 };
// Mouse buttons
this.mouseButtons = { LEFT: MOUSE.LEFT, MIDDLE: MOUSE.MIDDLE, RIGHT: MOUSE.RIGHT };
this.mouseButtons = { LEFT: MOUSE.ROTATE, MIDDLE: MOUSE.DOLLY, RIGHT: MOUSE.PAN };
// Touch fingers
this.touches = { ONE: TOUCH.ROTATE, TWO: TOUCH.DOLLY_PAN };
// for reset
this.target0 = this.target.clone();
......@@ -259,7 +264,16 @@ var OrbitControls = function ( object, domElement ) {
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
var STATE = { NONE: - 1, ROTATE: 0, DOLLY: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_DOLLY_PAN: 4 };
var STATE = {
NONE: - 1,
ROTATE: 0,
DOLLY: 1,
PAN: 2,
TOUCH_ROTATE: 3,
TOUCH_PAN: 4,
TOUCH_DOLLY_PAN: 5,
TOUCH_DOLLY_ROTATE: 6
};
var state = STATE.NONE;
......@@ -590,26 +604,34 @@ var OrbitControls = function ( object, domElement ) {
//console.log( 'handleTouchStartRotate' );
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
if ( event.touches.length == 1 ) {
}
rotateStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
function handleTouchStartDollyPan( event ) {
}
//console.log( 'handleTouchStartDollyPan' );
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
rotateStart.set( x, y );
}
if ( scope.enableZoom ) {
}
function handleTouchStartPan( event ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
//console.log( 'handleTouchStartPan' );
var distance = Math.sqrt( dx * dx + dy * dy );
if ( event.touches.length == 1 ) {
dollyStart.set( 0, distance );
panStart.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
if ( scope.enablePan ) {
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
......@@ -620,11 +642,57 @@ var OrbitControls = function ( object, domElement ) {
}
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 );
}
function handleTouchStartDollyPan( event ) {
//console.log( 'handleTouchStartDollyPan' );
if ( scope.enableZoom ) handleTouchStartDolly( event );
if ( scope.enablePan ) handleTouchStartPan( event );
}
function handleTouchStartDollyRotate( event ) {
//console.log( 'handleTouchStartDollyRotate' );
if ( scope.enableZoom ) handleTouchStartDolly( event );
if ( scope.enableRotate ) handleTouchStartRotate( event );
}
function handleTouchMoveRotate( event ) {
//console.log( 'handleTouchMoveRotate' );
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
if ( event.touches.length == 1 ) {
rotateEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
rotateEnd.set( x, y );
}
rotateDelta.subVectors( rotateEnd, rotateStart ).multiplyScalar( scope.rotateSpeed );
......@@ -636,47 +704,71 @@ var OrbitControls = function ( object, domElement ) {
rotateStart.copy( rotateEnd );
scope.update();
}
function handleTouchMovePan( event ) {
//console.log( 'handleTouchMoveRotate' );
if ( event.touches.length == 1 ) {
panEnd.set( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY );
}
else {
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
panEnd.set( x, y );
}
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
pan( panDelta.x, panDelta.y );
panStart.copy( panEnd );
}
function handleTouchMoveDollyPan( event ) {
function handleTouchMoveDolly( event ) {
//console.log( 'handleTouchMoveDollyPan' );
//console.log( 'handleTouchMoveRotate' );
if ( scope.enableZoom ) {
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
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 );
var distance = Math.sqrt( dx * dx + dy * dy );
dollyEnd.set( 0, distance );
dollyEnd.set( 0, distance );
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
dollyDelta.set( 0, Math.pow( dollyEnd.y / dollyStart.y, scope.zoomSpeed ) );
dollyIn( dollyDelta.y );
dollyIn( dollyDelta.y );
dollyStart.copy( dollyEnd );
dollyStart.copy( dollyEnd );
}
}
function handleTouchMoveDollyPan( event ) {
if ( scope.enablePan ) {
//console.log( 'handleTouchMoveDollyPan' );
var x = 0.5 * ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX );
var y = 0.5 * ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY );
if ( scope.enableZoom ) handleTouchMoveDolly( event );
panEnd.set( x, y );
if ( scope.enablePan ) handleTouchMovePan( event );
panDelta.subVectors( panEnd, panStart ).multiplyScalar( scope.panSpeed );
}
pan( panDelta.x, panDelta.y );
function handleTouchMoveDollyRotate( event ) {
panStart.copy( panEnd );
//console.log( 'handleTouchMoveDollyPan' );
}
if ( scope.enableZoom ) handleTouchMoveDolly( event );
scope.update();
if ( scope.enableRotate ) handleTouchMoveRotate( event );
}
......@@ -705,45 +797,115 @@ var OrbitControls = function ( object, domElement ) {
switch ( event.button ) {
case scope.mouseButtons.LEFT:
case 0:
switch ( scope.mouseButtons.LEFT ) {
case MOUSE.ROTATE:
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
} else {
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
}
if ( scope.enablePan === false ) return;
break;
handleMouseDownPan( event );
case MOUSE.PAN:
state = STATE.PAN;
if ( event.ctrlKey || event.metaKey || event.shiftKey ) {
} else {
if ( scope.enableRotate === false ) return;
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
handleMouseDownRotate( event );
state = STATE.ROTATE;
state = STATE.ROTATE;
} else {
if ( scope.enablePan === false ) return;
handleMouseDownPan( event );
state = STATE.PAN;
}
break;
default:
state = STATE.NONE;
}
break;
case scope.mouseButtons.MIDDLE:
if ( scope.enableZoom === false ) return;
case 1:
switch ( scope.mouseButtons.MIDDLE ) {
case MOUSE.DOLLY:
if ( scope.enableZoom === false ) return;
handleMouseDownDolly( event );
handleMouseDownDolly( event );
state = STATE.DOLLY;
state = STATE.DOLLY;
break;
default:
state = STATE.NONE;
}
break;
case scope.mouseButtons.RIGHT:
case 2:
if ( scope.enablePan === false ) return;
switch ( scope.mouseButtons.RIGHT ) {
case MOUSE.ROTATE:
if ( scope.enableRotate === false ) return;
handleMouseDownRotate( event );
state = STATE.ROTATE;
break;
case MOUSE.PAN:
handleMouseDownPan( event );
if ( scope.enablePan === false ) return;
state = STATE.PAN;
handleMouseDownPan( event );
state = STATE.PAN;
break;
default:
state = STATE.NONE;
}
break;
......@@ -842,23 +1004,67 @@ var OrbitControls = function ( object, domElement ) {
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
case 1:
if ( scope.enableRotate === false ) return;
switch ( scope.touches.ONE ) {
case TOUCH.ROTATE:
if ( scope.enableRotate === false ) return;
handleTouchStartRotate( event );
state = STATE.TOUCH_ROTATE;
break;
handleTouchStartRotate( event );
case TOUCH.PAN:
state = STATE.TOUCH_ROTATE;
if ( scope.enablePan === false ) return;
handleTouchStartPan( event );
state = STATE.TOUCH_PAN;
break;
default:
state = STATE.NONE;
}
break;
case 2: // two-fingered touch: dolly-pan
case 2:
switch ( scope.touches.TWO ) {
case TOUCH.DOLLY_PAN:
if ( scope.enableZoom === false && scope.enablePan === false ) return;
handleTouchStartDollyPan( event );
if ( scope.enableZoom === false && scope.enablePan === false ) return;
state = STATE.TOUCH_DOLLY_PAN;
handleTouchStartDollyPan( event );
break;
state = STATE.TOUCH_DOLLY_PAN;
case TOUCH.DOLLY_ROTATE:
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
handleTouchStartDollyRotate( event );
state = STATE.TOUCH_DOLLY_ROTATE;
break;
default:
state = STATE.NONE;
}
break;
......@@ -885,21 +1091,71 @@ var OrbitControls = function ( object, domElement ) {
switch ( event.touches.length ) {
case 1: // one-fingered touch: rotate
case 1:
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return; // is this needed?
switch ( scope.touches.ONE ) {
case TOUCH.ROTATE:
if ( scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_ROTATE ) return;
handleTouchMoveRotate( event );
handleTouchMoveRotate( event );
scope.update();
break;
case TOUCH.PAN:
if ( scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_PAN ) return;
handleTouchMovePan( event );
scope.update();
break;
default:
state = STATE.NONE;
}
break;
case 2: // two-fingered touch: dolly-pan
case 2:
switch ( scope.touches.TWO ) {
if ( scope.enableZoom === false && scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_DOLLY_PAN ) return; // is this needed?
case TOUCH.DOLLY_PAN:
handleTouchMoveDollyPan( event );
if ( scope.enableZoom === false && scope.enablePan === false ) return;
if ( state !== STATE.TOUCH_DOLLY_PAN ) return;
handleTouchMoveDollyPan( event );
scope.update();
break;
case TOUCH.DOLLY_ROTATE:
if ( scope.enableZoom === false && scope.enableRotate === false ) return;
if ( state !== STATE.TOUCH_DOLLY_ROTATE ) return;
handleTouchMoveDollyRotate( event );
scope.update();
break;
default:
state = STATE.NONE;
}
break;
......@@ -1078,4 +1334,27 @@ Object.defineProperties( OrbitControls.prototype, {
} );
export { OrbitControls };
// This set of controls performs orbiting, dollying (zooming), and panning.
// Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).
// This is very similar to OrbitControls, another set of touch behavior
//
// Orbit - right mouse, or left mouse + ctrl/meta/shiftKey / touch: two-finger rotate
// Zoom - middle mouse, or mousewheel / touch: two-finger spread or squish
// Pan - left mouse, or arrow keys / touch: one-finger move
var MapControls = function ( object, domElement ) {
OrbitControls.call( this, object, domElement );
this.mouseButtons.LEFT = MOUSE.PAN;
this.mouseButtons.RIGHT = MOUSE.ROTATE;
this.touches.ONE = TOUCH.PAN;
this.touches.TWO = TOUCH.DOLLY_ROTATE;
}
MapControls.prototype = Object.create( EventDispatcher.prototype );
MapControls.prototype.constructor = MapControls;
export { OrbitControls, MapControls };
examples/misc_controls_map.html
浏览文件 @ ea504f08
......@@ -28,7 +28,7 @@
import { GUI } from './jsm/libs/dat.gui.module.js';
import { MapControls } from './jsm/controls/MapControls.js';
import { MapControls } from './jsm/controls/OrbitControls.js';
var camera, controls, scene, renderer;
......
src/constants.d.ts
浏览文件 @ ea504f08
......@@ -5,6 +5,16 @@ export enum MOUSE {
LEFT,
MIDDLE,
RIGHT,
ROTATE,
DOLLY,
PAN,
}
export enum TOUCH {
ROTATE,
PAN,
DOLLY_PAN,
DOLLY_ROTATE,
}
// GL STATE CONSTANTS
......
src/constants.js
浏览文件 @ ea504f08
export var REVISION = '106';
export var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2 };
export var MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
export var TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
export var CullFaceNone = 0;
export var CullFaceBack = 1;
export var CullFaceFront = 2;
......
utils/modularize.js
浏览文件 @ ea504f08
......@@ -24,7 +24,6 @@ var files = [
{ path: 'controls/FirstPersonControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/FlyControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/OrbitControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/MapControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/OrthographicTrackballControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/PointerLockControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/TrackballControls.js', dependencies: [], ignoreList: [] },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或