Skip to content

T
three.js

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

从无法访问的项目Fork

通知 2
Star 0
Fork 0
T
three.js

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

未验证 提交 bd61540e 编写于 作者: M Mr.doob 提交者： GitHub
浏览文件
操作

Merge pull request #17500 from Mugen87/dev26 

TrackballControls: Add support for OrthographicCamera.
上级 89e516ba 8ab5280b
隐藏空白更改
内联 并排
Showing with 202 addition and 1898 deletion
docs/examples/en/controls/OrthographicTrackballControls.html 已删除 100644 → 0
浏览文件 @ 89e516ba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:EventDispatcher] &rarr;
<h1>[name]</h1>
<p class="desc">
<p>
This class is a special version of [page:TrackballControls] which supports orthographic cameras.
</p>
</p>
<h2>Example</h2>
<p>[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:OrthographicCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:OrthographicCamera camera]: The orthographic camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction (e.g. touch) was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</p>
<h2>Properties</h2>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
not set up new event listeners. Default is the whole document.
</p>
<h3>[property:Number dynamicDampingFactor]</h3>
<p>
Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:Array keys]</h3>
<p>
This array holds keycodes for controlling interactions.
<ul>
<li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
</ul>
Default is *65, 83, 68* which represents A, S, D.
</p>
<h3>[property:Boolean noPan]</h3>
<p>
Whether or not panning is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRoll]</h3>
<p>
Whether or not rolling is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRotate]</h3>
<p>
Whether or not rotation is disabled. Default is *false*.
</p>
<h3>[property:Boolean noZoom]</h3>
<p>
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:OrthographicCamera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Number panSpeed]</h3>
<p>
The zoom speed. Default is *0.3*.
</p>
<h3>[property:Number rotateSpeed]</h3>
<p>
The rotation speed. Default is *1.0*.
</p>
<h3>[property:Object screen]</h3>
<p>
Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
<ul>
<li>left: Represents the offset in pixels to the screen's left boundary.</li>
<li>top: Represents the offset in pixels to the screen's top boundary.</li>
<li>width: Represents the screen width in pixels.</li>
<li>height: Represents the screen height in pixels.</li>
</ul>
</p>
<h3>[property:Boolean staticMoving]</h3>
<p>
Whether or not damping is disabled. Default is *false*.
</p>
<h3>[property:Number zoomSpeed]</h3>
<p>
The zoom speed. Default is *1.2*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:null panCamera] ()</h3>
<p>
Performs panning if necessary. Called by [page:.update update]().
</p>
<h3>[method:null reset] ()</h3>
<p>
Resets the controls to its initial state.
</p>
<h3>[method:null rotateCamera] ()</h3>
<p>
Rotates the camera if necessary. Called by [page:.update update]().
</p>
<h3>[method:null update] ()</h3>
<p>
Updates the controls. Usually called in the animation loop.
</p>
<h3>[method:null zoomCamera] ()</h3>
<p>
Performs zooming if necessary. Called by [page:.update update]().
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js]
</p>
</body>
</html>
docs/examples/en/controls/TrackballControls.html
浏览文件 @ bd61540e
......@@ -17,9 +17,6 @@
[name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector.
That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up".
</p>
<p>
Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera.
</p>
</p>
<h2>Example</h2>
......@@ -28,10 +25,10 @@
<h2>Constructor</h2>
<h3>[name]( [param:PerspectiveCamera camera], [param:HTMLDOMElement domElement] )</h3>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
......@@ -124,7 +121,7 @@
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:PerspectiveCamera object]</h3>
<h3>[property:Camera object]</h3>
<p>
The camera being controlled.
</p>
......
docs/examples/zh/controls/OrthographicTrackballControls.html 已删除 100644 → 0
浏览文件 @ 89e516ba
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<base href="../../../" />
<script src="list.js"></script>
<script src="page.js"></script>
<link type="text/css" rel="stylesheet" href="page.css" />
</head>
<body>
[page:EventDispatcher] &rarr;
<h1>[name]</h1>
<p class="desc">
<p>
This class is a special version of [page:TrackballControls] which supports orthographic cameras.
</p>
</p>
<h2>Example</h2>
<p>[example:misc_controls_trackball_orthographic misc / controls / trackball / orthographic ]</p>
<h2>Constructor</h2>
<h3>[name]( [param:OrthographicCamera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:OrthographicCamera camera]: The orthographic camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
</p>
<p>
Creates a new instance of [name].
</p>
</p>
<h2>Events</h2>
<h3>change</h3>
<p>
Fires when the camera has been transformed by the controls.
</p>
<h3>start</h3>
<p>
Fires when an interaction (e.g. touch) was initiated.
</p>
<h3>end</h3>
<p>
Fires when an interaction has finished.
</p>
<h2>Properties</h2>
<h3>[property:HTMLDOMElement domElement]</h3>
<p>
The HTMLDOMElement used to listen for mouse / touch events. This must be passed in the constructor; changing it here will
not set up new event listeners. Default is the whole document.
</p>
<h3>[property:Number dynamicDampingFactor]</h3>
<p>
Defines the intensity of damping. Only considered if [page:.staticMoving staticMoving] is set to *false*. Default is *0.2*.
</p>
<h3>[property:Boolean enabled]</h3>
<p>
Whether or not the controls are enabled.
</p>
<h3>[property:Array keys]</h3>
<p>
This array holds keycodes for controlling interactions.
<ul>
<li>When the first defined key is pressed, all mouse interactions (left, middle, right) performs orbiting.</li>
<li>When the second defined key is pressed, all mouse interactions (left, middle, right) performs zooming.</li>
<li>When the third defined key is pressed, all mouse interactions (left, middle, right) performs panning.</li>
</ul>
Default is *65, 83, 68* which represents A, S, D.
</p>
<h3>[property:Boolean noPan]</h3>
<p>
Whether or not panning is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRoll]</h3>
<p>
Whether or not rolling is disabled. Default is *false*.
</p>
<h3>[property:Boolean noRotate]</h3>
<p>
Whether or not rotation is disabled. Default is *false*.
</p>
<h3>[property:Boolean noZoom]</h3>
<p>
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:OrthographicCamera object]</h3>
<p>
The camera being controlled.
</p>
<h3>[property:Number panSpeed]</h3>
<p>
The zoom speed. Default is *0.3*.
</p>
<h3>[property:Number rotateSpeed]</h3>
<p>
The rotation speed. Default is *1.0*.
</p>
<h3>[property:Object screen]</h3>
<p>
Represents the properties of the screen. Automatically set when [page:.handleResize handleResize]() is called.
<ul>
<li>left: Represents the offset in pixels to the screen's left boundary.</li>
<li>top: Represents the offset in pixels to the screen's top boundary.</li>
<li>width: Represents the screen width in pixels.</li>
<li>height: Represents the screen height in pixels.</li>
</ul>
</p>
<h3>[property:Boolean staticMoving]</h3>
<p>
Whether or not damping is disabled. Default is *false*.
</p>
<h3>[property:Number zoomSpeed]</h3>
<p>
The zoom speed. Default is *1.2*.
</p>
<h2>Methods</h2>
<h3>[method:null dispose] ()</h3>
<p>
Should be called if the controls is no longer required.
</p>
<h3>[method:null handleResize] ()</h3>
<p>
Should be called if the application window is resized.
</p>
<h3>[method:null panCamera] ()</h3>
<p>
Performs panning if necessary. Called by [page:.update update]().
</p>
<h3>[method:null reset] ()</h3>
<p>
Resets the controls to its initial state.
</p>
<h3>[method:null rotateCamera] ()</h3>
<p>
Rotates the camera if necessary. Called by [page:.update update]().
</p>
<h3>[method:null update] ()</h3>
<p>
Updates the controls. Usually called in the animation loop.
</p>
<h3>[method:null zoomCamera] ()</h3>
<p>
Performs zooming if necessary. Called by [page:.update update]().
</p>
<h2>Source</h2>
<p>
[link:https://github.com/mrdoob/three.js/blob/master/examples/js/controls/TrackballControls.js examples/js/controls/TrackballControls.js]
</p>
</body>
</html>
docs/examples/zh/controls/TrackballControls.html
浏览文件 @ bd61540e
......@@ -17,9 +17,6 @@
[name] is similar to [page:OrbitControls]. However, it does not maintain a constant camera [page:Object3D.up up] vector.
That means if the camera orbits over the “north” and “south” poles, it does not flip to stay "right side up".
</p>
<p>
Notice that [name] can only be used with a perspective camera. Use [page:OrthographicTrackballControls] when working with an orthographic camera.
</p>
</p>
<h2>Example</h2>
......@@ -28,10 +25,10 @@
<h2>Constructor</h2>
<h3>[name]( [param:PerspectiveCamera camera], [param:HTMLDOMElement domElement] )</h3>
<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
<p>
<p>
[page:PerspectiveCamera camera]: The perspective camera of the rendered scene.
[page:Camera camera]: The camera of the rendered scene.
</p>
<p>
[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
......@@ -124,7 +121,7 @@
Whether or not zooming is disabled. Default is *false*.
</p>
<h3>[property:PerspectiveCamera object]</h3>
<h3>[property:Camera object]</h3>
<p>
The camera being controlled.
</p>
......
docs/list.js
浏览文件 @ bd61540e
......@@ -359,7 +359,6 @@ var list = {
"FirstPersonControls": "examples/en/controls/FirstPersonControls",
"FlyControls": "examples/en/controls/FlyControls",
"OrbitControls": "examples/en/controls/OrbitControls",
"OrthographicTrackballControls": "examples/en/controls/OrthographicTrackballControls",
"PointerLockControls": "examples/en/controls/PointerLockControls",
"TrackballControls": "examples/en/controls/TrackballControls",
"TransformControls": "examples/en/controls/TransformControls"
......@@ -802,7 +801,6 @@ var list = {
"FirstPersonControls": "examples/zh/controls/FirstPersonControls",
"FlyControls": "examples/zh/controls/FlyControls",
"OrbitControls": "examples/zh/controls/OrbitControls",
"OrthographicTrackballControls": "examples/zh/controls/OrthographicTrackballControls",
"PointerLockControls": "examples/zh/controls/PointerLockControls",
"TrackballControls": "examples/zh/controls/TrackballControls",
"TransformControls": "examples/zh/controls/TransformControls"
......
examples/files.js
浏览文件 @ bd61540e
......@@ -364,7 +364,6 @@ var files = {
"misc_controls_orbit",
"misc_controls_pointerlock",
"misc_controls_trackball",
"misc_controls_trackball_orthographic",
"misc_controls_transform",
"misc_exporter_collada",
"misc_exporter_draco",
......
examples/js/controls/OrthographicTrackballControls.js 已删除 100644 → 0
浏览文件 @ 89e516ba
/**
* @author Eberhard Graether / http://egraether.com/
* @author Mark Lundin / http://mark-lundin.com
* @author Patrick Fuller / http://patrick-fuller.com
* @author Max Smolens / https://github.com/msmolens
*/
THREE.OrthographicTrackballControls = function ( object, domElement ) {
var _this = this;
var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
// API
this.enabled = true;
this.screen = { left: 0, top: 0, width: 0, height: 0 };
this.rotateSpeed = 1.0;
this.zoomSpeed = 1.2;
this.noRotate = false;
this.noZoom = false;
this.noPan = false;
this.noRoll = false;
this.staticMoving = false;
this.dynamicDampingFactor = 0.2;
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
// internals
this.radius = 0;
this.target = new THREE.Vector3();
var EPS = 0.000001;
var _changed = true;
var _state = STATE.NONE,
_prevState = STATE.NONE,
_eye = new THREE.Vector3(),
_rotateStart = new THREE.Vector3(),
_rotateEnd = new THREE.Vector3(),
_zoomStart = new THREE.Vector2(),
_zoomEnd = new THREE.Vector2(),
_touchZoomDistanceStart = 0,
_touchZoomDistanceEnd = 0,
_panStart = new THREE.Vector2(),
_panEnd = new THREE.Vector2();
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.up0 = this.object.up.clone();
this.left0 = this.object.left;
this.right0 = this.object.right;
this.top0 = this.object.top;
this.bottom0 = this.object.bottom;
// events
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
// methods
this.handleResize = function () {
if ( this.domElement === document ) {
this.screen.left = 0;
this.screen.top = 0;
this.screen.width = window.innerWidth;
this.screen.height = window.innerHeight;
} else {
var box = this.domElement.getBoundingClientRect();
// adjustments come from similar code in the jquery offset() function
var d = this.domElement.ownerDocument.documentElement;
this.screen.left = box.left + window.pageXOffset - d.clientLeft;
this.screen.top = box.top + window.pageYOffset - d.clientTop;
this.screen.width = box.width;
this.screen.height = box.height;
}
this.radius = 0.5 * Math.min( this.screen.width, this.screen.height );
this.left0 = this.object.left;
this.right0 = this.object.right;
this.top0 = this.object.top;
this.bottom0 = this.object.bottom;
};
var getMouseOnScreen = ( function () {
var vector = new THREE.Vector2();
return function getMouseOnScreen( pageX, pageY ) {
vector.set(
( pageX - _this.screen.left ) / _this.screen.width,
( pageY - _this.screen.top ) / _this.screen.height
);
return vector;
};
}() );
var getMouseProjectionOnBall = ( function () {
var vector = new THREE.Vector3();
var objectUp = new THREE.Vector3();
var mouseOnBall = new THREE.Vector3();
return function getMouseProjectionOnBall( pageX, pageY ) {
mouseOnBall.set(
( pageX - _this.screen.width * 0.5 - _this.screen.left ) / _this.radius,
( _this.screen.height * 0.5 + _this.screen.top - pageY ) / _this.radius,
0.0
);
var length = mouseOnBall.length();
if ( _this.noRoll ) {
if ( length < Math.SQRT1_2 ) {
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
} else {
mouseOnBall.z = .5 / length;
}
} else if ( length > 1.0 ) {
mouseOnBall.normalize();
} else {
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
}
_eye.copy( _this.object.position ).sub( _this.target );
vector.copy( _this.object.up ).setLength( mouseOnBall.y );
vector.add( objectUp.copy( _this.object.up ).cross( _eye ).setLength( mouseOnBall.x ) );
vector.add( _eye.setLength( mouseOnBall.z ) );
return vector;
};
}() );
this.rotateCamera = ( function () {
var axis = new THREE.Vector3(),
quaternion = new THREE.Quaternion();
return function rotateCamera() {
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
if ( angle ) {
axis.crossVectors( _rotateStart, _rotateEnd ).normalize();
angle *= _this.rotateSpeed;
quaternion.setFromAxisAngle( axis, - angle );
_eye.applyQuaternion( quaternion );
_this.object.up.applyQuaternion( quaternion );
_rotateEnd.applyQuaternion( quaternion );
if ( _this.staticMoving ) {
_rotateStart.copy( _rotateEnd );
} else {
quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
_rotateStart.applyQuaternion( quaternion );
}
_changed = true;
}
};
}() );
this.zoomCamera = function () {
if ( _state === STATE.TOUCH_ZOOM_PAN ) {
var factor = _touchZoomDistanceEnd / _touchZoomDistanceStart;
_touchZoomDistanceStart = _touchZoomDistanceEnd;
_this.object.zoom *= factor;
_changed = true;
} else {
var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
if ( Math.abs( factor - 1.0 ) > EPS && factor > 0.0 ) {
_this.object.zoom /= factor;
if ( _this.staticMoving ) {
_zoomStart.copy( _zoomEnd );
} else {
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
}
_changed = true;
}
}
};
this.panCamera = ( function () {
var mouseChange = new THREE.Vector2(),
objectUp = new THREE.Vector3(),
pan = new THREE.Vector3();
return function panCamera() {
mouseChange.copy( _panEnd ).sub( _panStart );
if ( mouseChange.lengthSq() > EPS ) {
// Scale movement to keep clicked/dragged position under cursor
var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom;
var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom;
mouseChange.x *= scale_x;
mouseChange.y *= scale_y;
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
_this.object.position.add( pan );
_this.target.add( pan );
if ( _this.staticMoving ) {
_panStart.copy( _panEnd );
} else {
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
}
_changed = true;
}
};
}() );
this.update = function () {
_eye.subVectors( _this.object.position, _this.target );
if ( ! _this.noRotate ) {
_this.rotateCamera();
}
if ( ! _this.noZoom ) {
_this.zoomCamera();
if ( _changed ) {
_this.object.updateProjectionMatrix();
}
}
if ( ! _this.noPan ) {
_this.panCamera();
}
_this.object.position.addVectors( _this.target, _eye );
_this.object.lookAt( _this.target );
if ( _changed ) {
_this.dispatchEvent( changeEvent );
_changed = false;
}
};
this.reset = function () {
_state = STATE.NONE;
_prevState = STATE.NONE;
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_eye.subVectors( _this.object.position, _this.target );
_this.object.left = _this.left0;
_this.object.right = _this.right0;
_this.object.top = _this.top0;
_this.object.bottom = _this.bottom0;
_this.object.lookAt( _this.target );
_this.dispatchEvent( changeEvent );
_changed = false;
};
// listeners
function keydown( event ) {
if ( _this.enabled === false ) return;
window.removeEventListener( 'keydown', keydown );
_prevState = _state;
if ( _state !== STATE.NONE ) {
return;
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
_state = STATE.ROTATE;
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
_state = STATE.ZOOM;
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
_state = STATE.PAN;
}
}
function keyup() {
if ( _this.enabled === false ) return;
_state = _prevState;
window.addEventListener( 'keydown', keydown, false );
}
function mousedown( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.NONE ) {
_state = event.button;
}
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_rotateStart.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
_rotateEnd.copy( _rotateStart );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_zoomEnd.copy( _zoomStart );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_panEnd.copy( _panStart );
}
document.addEventListener( 'mousemove', mousemove, false );
document.addEventListener( 'mouseup', mouseup, false );
_this.dispatchEvent( startEvent );
}
function mousemove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_rotateEnd.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
}
}
function mouseup( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
_state = STATE.NONE;
document.removeEventListener( 'mousemove', mousemove );
document.removeEventListener( 'mouseup', mouseup );
_this.dispatchEvent( endEvent );
}
function mousewheel( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.deltaMode ) {
case 2:
// Zoom in pages
_zoomStart.y -= event.deltaY * 0.025;
break;
case 1:
// Zoom in lines
_zoomStart.y -= event.deltaY * 0.01;
break;
default:
// undefined, 0, assume pixels
_zoomStart.y -= event.deltaY * 0.00025;
break;
}
_this.dispatchEvent( startEvent );
_this.dispatchEvent( endEvent );
}
function touchstart( event ) {
if ( _this.enabled === false ) return;
switch ( event.touches.length ) {
case 1:
_state = STATE.TOUCH_ROTATE;
_rotateStart.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_rotateEnd.copy( _rotateStart );
break;
case 2:
_state = STATE.TOUCH_ZOOM_PAN;
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panStart.copy( getMouseOnScreen( x, y ) );
_panEnd.copy( _panStart );
break;
default:
_state = STATE.NONE;
}
_this.dispatchEvent( startEvent );
}
function touchmove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
case 1:
_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
break;
case 2:
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panEnd.copy( getMouseOnScreen( x, y ) );
break;
default:
_state = STATE.NONE;
}
}
function touchend( event ) {
if ( _this.enabled === false ) return;
switch ( event.touches.length ) {
case 1:
_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_rotateStart.copy( _rotateEnd );
break;
case 2:
_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panEnd.copy( getMouseOnScreen( x, y ) );
_panStart.copy( _panEnd );
break;
}
_state = STATE.NONE;
_this.dispatchEvent( endEvent );
}
function contextmenu( event ) {
event.preventDefault();
}
this.dispose = function () {
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
this.domElement.removeEventListener( 'mousedown', mousedown, false );
this.domElement.removeEventListener( 'wheel', mousewheel, false );
this.domElement.removeEventListener( 'touchstart', touchstart, false );
this.domElement.removeEventListener( 'touchend', touchend, false );
this.domElement.removeEventListener( 'touchmove', touchmove, false );
document.removeEventListener( 'mousemove', mousemove, false );
document.removeEventListener( 'mouseup', mouseup, false );
window.removeEventListener( 'keydown', keydown, false );
window.removeEventListener( 'keyup', keyup, false );
};
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
this.domElement.addEventListener( 'mousedown', mousedown, false );
this.domElement.addEventListener( 'wheel', mousewheel, false );
this.domElement.addEventListener( 'touchstart', touchstart, false );
this.domElement.addEventListener( 'touchend', touchend, false );
this.domElement.addEventListener( 'touchmove', touchmove, false );
window.addEventListener( 'keydown', keydown, false );
window.addEventListener( 'keyup', keyup, false );
this.handleResize();
// force an update at start
this.update();
};
THREE.OrthographicTrackballControls.prototype = Object.create( THREE.EventDispatcher.prototype );
THREE.OrthographicTrackballControls.prototype.constructor = THREE.OrthographicTrackballControls;
examples/js/controls/TrackballControls.js
浏览文件 @ bd61540e
......@@ -44,6 +44,7 @@ THREE.TrackballControls = function ( object, domElement ) {
var EPS = 0.000001;
var lastPosition = new THREE.Vector3();
var lastZoom = 1;
var _state = STATE.NONE,
_keyState = STATE.NONE,
......@@ -70,6 +71,7 @@ THREE.TrackballControls = function ( object, domElement ) {
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.up0 = this.object.up.clone();
this.zoom0 = this.object.zoom;
// events
......@@ -201,7 +203,21 @@ THREE.TrackballControls = function ( object, domElement ) {
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
_touchZoomDistanceStart = _touchZoomDistanceEnd;
_eye.multiplyScalar( factor );
if ( _this.object.isPerspectiveCamera ) {
_eye.multiplyScalar( factor );
} else if ( _this.object.isOrthographicCamera ) {
_this.object.zoom *= factor;
_this.object.updateProjectionMatrix();
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
} else {
......@@ -209,7 +225,20 @@ THREE.TrackballControls = function ( object, domElement ) {
if ( factor !== 1.0 && factor > 0.0 ) {
_eye.multiplyScalar( factor );
if ( _this.object.isPerspectiveCamera ) {
_eye.multiplyScalar( factor );
} else if ( _this.object.isOrthographicCamera ) {
_this.object.zoom /= factor;
_this.object.updateProjectionMatrix();
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
}
......@@ -239,6 +268,16 @@ THREE.TrackballControls = function ( object, domElement ) {
if ( mouseChange.lengthSq() ) {
if ( _this.object.isOrthographicCamera ) {
var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom / _this.domElement.clientWidth;
var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom / _this.domElement.clientWidth;
mouseChange.x *= scale_x;
mouseChange.y *= scale_y;
}
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
......@@ -309,15 +348,36 @@ THREE.TrackballControls = function ( object, domElement ) {
_this.object.position.addVectors( _this.target, _eye );
_this.checkDistances();
if ( _this.object.isPerspectiveCamera ) {
_this.object.lookAt( _this.target );
_this.checkDistances();
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
_this.object.lookAt( _this.target );
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
}
_this.dispatchEvent( changeEvent );
} else if ( _this.object.isOrthographicCamera ) {
lastPosition.copy( _this.object.position );
_this.object.lookAt( _this.target );
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS || lastZoom !== _this.object.zoom ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
lastZoom = _this.object.zoom;
}
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
......@@ -331,6 +391,9 @@ THREE.TrackballControls = function ( object, domElement ) {
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_this.object.zoom = _this.zoom0;
_this.object.updateProjectionMatrix();
_eye.subVectors( _this.object.position, _this.target );
......@@ -339,6 +402,7 @@ THREE.TrackballControls = function ( object, domElement ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
lastZoom = _this.object.zoom;
};
......
examples/jsm/controls/OrthographicTrackballControls.d.ts 已删除 100644 → 0
浏览文件 @ 89e516ba
import { Camera, EventDispatcher } from '../../../src/Three';
export class OrthographicTrackballControls extends EventDispatcher {
constructor(object: Camera, domElement?: HTMLElement);
object: Camera;
domElement: HTMLElement;
enabled: boolean;
screen: {left: number; top: number; width: number; height: number};
rotateSpeed: number;
zoomSpeed: number;
noRotate: boolean;
noZoom: boolean;
noPan: boolean;
noRoll: boolean;
staticMoving: boolean;
dynamicDampingFactor: number;
keys: number[];
handleResize(): void;
rotateCamera(): void;
zoomCamera(): void;
panCamera(): void;
update(): void;
reset(): void;
dispose(): void;
}
examples/jsm/controls/OrthographicTrackballControls.js 已删除 100644 → 0
浏览文件 @ 89e516ba
/**
* @author Eberhard Graether / http://egraether.com/
* @author Mark Lundin / http://mark-lundin.com
* @author Patrick Fuller / http://patrick-fuller.com
* @author Max Smolens / https://github.com/msmolens
*/
import {
EventDispatcher,
Quaternion,
Vector2,
Vector3
} from "../../../build/three.module.js";
var OrthographicTrackballControls = function ( object, domElement ) {
var _this = this;
var STATE = { NONE: - 1, ROTATE: 0, ZOOM: 1, PAN: 2, TOUCH_ROTATE: 3, TOUCH_ZOOM_PAN: 4 };
this.object = object;
this.domElement = ( domElement !== undefined ) ? domElement : document;
// API
this.enabled = true;
this.screen = { left: 0, top: 0, width: 0, height: 0 };
this.rotateSpeed = 1.0;
this.zoomSpeed = 1.2;
this.noRotate = false;
this.noZoom = false;
this.noPan = false;
this.noRoll = false;
this.staticMoving = false;
this.dynamicDampingFactor = 0.2;
this.keys = [ 65 /*A*/, 83 /*S*/, 68 /*D*/ ];
// internals
this.radius = 0;
this.target = new Vector3();
var EPS = 0.000001;
var _changed = true;
var _state = STATE.NONE,
_prevState = STATE.NONE,
_eye = new Vector3(),
_rotateStart = new Vector3(),
_rotateEnd = new Vector3(),
_zoomStart = new Vector2(),
_zoomEnd = new Vector2(),
_touchZoomDistanceStart = 0,
_touchZoomDistanceEnd = 0,
_panStart = new Vector2(),
_panEnd = new Vector2();
// for reset
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.up0 = this.object.up.clone();
this.left0 = this.object.left;
this.right0 = this.object.right;
this.top0 = this.object.top;
this.bottom0 = this.object.bottom;
// events
var changeEvent = { type: 'change' };
var startEvent = { type: 'start' };
var endEvent = { type: 'end' };
// methods
this.handleResize = function () {
if ( this.domElement === document ) {
this.screen.left = 0;
this.screen.top = 0;
this.screen.width = window.innerWidth;
this.screen.height = window.innerHeight;
} else {
var box = this.domElement.getBoundingClientRect();
// adjustments come from similar code in the jquery offset() function
var d = this.domElement.ownerDocument.documentElement;
this.screen.left = box.left + window.pageXOffset - d.clientLeft;
this.screen.top = box.top + window.pageYOffset - d.clientTop;
this.screen.width = box.width;
this.screen.height = box.height;
}
this.radius = 0.5 * Math.min( this.screen.width, this.screen.height );
this.left0 = this.object.left;
this.right0 = this.object.right;
this.top0 = this.object.top;
this.bottom0 = this.object.bottom;
};
var getMouseOnScreen = ( function () {
var vector = new Vector2();
return function getMouseOnScreen( pageX, pageY ) {
vector.set(
( pageX - _this.screen.left ) / _this.screen.width,
( pageY - _this.screen.top ) / _this.screen.height
);
return vector;
};
}() );
var getMouseProjectionOnBall = ( function () {
var vector = new Vector3();
var objectUp = new Vector3();
var mouseOnBall = new Vector3();
return function getMouseProjectionOnBall( pageX, pageY ) {
mouseOnBall.set(
( pageX - _this.screen.width * 0.5 - _this.screen.left ) / _this.radius,
( _this.screen.height * 0.5 + _this.screen.top - pageY ) / _this.radius,
0.0
);
var length = mouseOnBall.length();
if ( _this.noRoll ) {
if ( length < Math.SQRT1_2 ) {
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
} else {
mouseOnBall.z = .5 / length;
}
} else if ( length > 1.0 ) {
mouseOnBall.normalize();
} else {
mouseOnBall.z = Math.sqrt( 1.0 - length * length );
}
_eye.copy( _this.object.position ).sub( _this.target );
vector.copy( _this.object.up ).setLength( mouseOnBall.y );
vector.add( objectUp.copy( _this.object.up ).cross( _eye ).setLength( mouseOnBall.x ) );
vector.add( _eye.setLength( mouseOnBall.z ) );
return vector;
};
}() );
this.rotateCamera = ( function () {
var axis = new Vector3(),
quaternion = new Quaternion();
return function rotateCamera() {
var angle = Math.acos( _rotateStart.dot( _rotateEnd ) / _rotateStart.length() / _rotateEnd.length() );
if ( angle ) {
axis.crossVectors( _rotateStart, _rotateEnd ).normalize();
angle *= _this.rotateSpeed;
quaternion.setFromAxisAngle( axis, - angle );
_eye.applyQuaternion( quaternion );
_this.object.up.applyQuaternion( quaternion );
_rotateEnd.applyQuaternion( quaternion );
if ( _this.staticMoving ) {
_rotateStart.copy( _rotateEnd );
} else {
quaternion.setFromAxisAngle( axis, angle * ( _this.dynamicDampingFactor - 1.0 ) );
_rotateStart.applyQuaternion( quaternion );
}
_changed = true;
}
};
}() );
this.zoomCamera = function () {
if ( _state === STATE.TOUCH_ZOOM_PAN ) {
var factor = _touchZoomDistanceEnd / _touchZoomDistanceStart;
_touchZoomDistanceStart = _touchZoomDistanceEnd;
_this.object.zoom *= factor;
_changed = true;
} else {
var factor = 1.0 + ( _zoomEnd.y - _zoomStart.y ) * _this.zoomSpeed;
if ( Math.abs( factor - 1.0 ) > EPS && factor > 0.0 ) {
_this.object.zoom /= factor;
if ( _this.staticMoving ) {
_zoomStart.copy( _zoomEnd );
} else {
_zoomStart.y += ( _zoomEnd.y - _zoomStart.y ) * this.dynamicDampingFactor;
}
_changed = true;
}
}
};
this.panCamera = ( function () {
var mouseChange = new Vector2(),
objectUp = new Vector3(),
pan = new Vector3();
return function panCamera() {
mouseChange.copy( _panEnd ).sub( _panStart );
if ( mouseChange.lengthSq() > EPS ) {
// Scale movement to keep clicked/dragged position under cursor
var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom;
var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom;
mouseChange.x *= scale_x;
mouseChange.y *= scale_y;
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
pan.add( objectUp.copy( _this.object.up ).setLength( mouseChange.y ) );
_this.object.position.add( pan );
_this.target.add( pan );
if ( _this.staticMoving ) {
_panStart.copy( _panEnd );
} else {
_panStart.add( mouseChange.subVectors( _panEnd, _panStart ).multiplyScalar( _this.dynamicDampingFactor ) );
}
_changed = true;
}
};
}() );
this.update = function () {
_eye.subVectors( _this.object.position, _this.target );
if ( ! _this.noRotate ) {
_this.rotateCamera();
}
if ( ! _this.noZoom ) {
_this.zoomCamera();
if ( _changed ) {
_this.object.updateProjectionMatrix();
}
}
if ( ! _this.noPan ) {
_this.panCamera();
}
_this.object.position.addVectors( _this.target, _eye );
_this.object.lookAt( _this.target );
if ( _changed ) {
_this.dispatchEvent( changeEvent );
_changed = false;
}
};
this.reset = function () {
_state = STATE.NONE;
_prevState = STATE.NONE;
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_eye.subVectors( _this.object.position, _this.target );
_this.object.left = _this.left0;
_this.object.right = _this.right0;
_this.object.top = _this.top0;
_this.object.bottom = _this.bottom0;
_this.object.lookAt( _this.target );
_this.dispatchEvent( changeEvent );
_changed = false;
};
// listeners
function keydown( event ) {
if ( _this.enabled === false ) return;
window.removeEventListener( 'keydown', keydown );
_prevState = _state;
if ( _state !== STATE.NONE ) {
return;
} else if ( event.keyCode === _this.keys[ STATE.ROTATE ] && ! _this.noRotate ) {
_state = STATE.ROTATE;
} else if ( event.keyCode === _this.keys[ STATE.ZOOM ] && ! _this.noZoom ) {
_state = STATE.ZOOM;
} else if ( event.keyCode === _this.keys[ STATE.PAN ] && ! _this.noPan ) {
_state = STATE.PAN;
}
}
function keyup() {
if ( _this.enabled === false ) return;
_state = _prevState;
window.addEventListener( 'keydown', keydown, false );
}
function mousedown( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.NONE ) {
_state = event.button;
}
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_rotateStart.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
_rotateEnd.copy( _rotateStart );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_zoomEnd.copy( _zoomStart );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panStart.copy( getMouseOnScreen( event.pageX, event.pageY ) );
_panEnd.copy( _panStart );
}
document.addEventListener( 'mousemove', mousemove, false );
document.addEventListener( 'mouseup', mouseup, false );
_this.dispatchEvent( startEvent );
}
function mousemove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
if ( _state === STATE.ROTATE && ! _this.noRotate ) {
_rotateEnd.copy( getMouseProjectionOnBall( event.pageX, event.pageY ) );
} else if ( _state === STATE.ZOOM && ! _this.noZoom ) {
_zoomEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
} else if ( _state === STATE.PAN && ! _this.noPan ) {
_panEnd.copy( getMouseOnScreen( event.pageX, event.pageY ) );
}
}
function mouseup( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
_state = STATE.NONE;
document.removeEventListener( 'mousemove', mousemove );
document.removeEventListener( 'mouseup', mouseup );
_this.dispatchEvent( endEvent );
}
function mousewheel( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.deltaMode ) {
case 2:
// Zoom in pages
_zoomStart.y -= event.deltaY * 0.025;
break;
case 1:
// Zoom in lines
_zoomStart.y -= event.deltaY * 0.01;
break;
default:
// undefined, 0, assume pixels
_zoomStart.y -= event.deltaY * 0.00025;
break;
}
_this.dispatchEvent( startEvent );
_this.dispatchEvent( endEvent );
}
function touchstart( event ) {
if ( _this.enabled === false ) return;
switch ( event.touches.length ) {
case 1:
_state = STATE.TOUCH_ROTATE;
_rotateStart.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_rotateEnd.copy( _rotateStart );
break;
case 2:
_state = STATE.TOUCH_ZOOM_PAN;
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = _touchZoomDistanceStart = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panStart.copy( getMouseOnScreen( x, y ) );
_panEnd.copy( _panStart );
break;
default:
_state = STATE.NONE;
}
_this.dispatchEvent( startEvent );
}
function touchmove( event ) {
if ( _this.enabled === false ) return;
event.preventDefault();
event.stopPropagation();
switch ( event.touches.length ) {
case 1:
_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
break;
case 2:
var dx = event.touches[ 0 ].pageX - event.touches[ 1 ].pageX;
var dy = event.touches[ 0 ].pageY - event.touches[ 1 ].pageY;
_touchZoomDistanceEnd = Math.sqrt( dx * dx + dy * dy );
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panEnd.copy( getMouseOnScreen( x, y ) );
break;
default:
_state = STATE.NONE;
}
}
function touchend( event ) {
if ( _this.enabled === false ) return;
switch ( event.touches.length ) {
case 1:
_rotateEnd.copy( getMouseProjectionOnBall( event.touches[ 0 ].pageX, event.touches[ 0 ].pageY ) );
_rotateStart.copy( _rotateEnd );
break;
case 2:
_touchZoomDistanceStart = _touchZoomDistanceEnd = 0;
var x = ( event.touches[ 0 ].pageX + event.touches[ 1 ].pageX ) / 2;
var y = ( event.touches[ 0 ].pageY + event.touches[ 1 ].pageY ) / 2;
_panEnd.copy( getMouseOnScreen( x, y ) );
_panStart.copy( _panEnd );
break;
}
_state = STATE.NONE;
_this.dispatchEvent( endEvent );
}
function contextmenu( event ) {
event.preventDefault();
}
this.dispose = function () {
this.domElement.removeEventListener( 'contextmenu', contextmenu, false );
this.domElement.removeEventListener( 'mousedown', mousedown, false );
this.domElement.removeEventListener( 'wheel', mousewheel, false );
this.domElement.removeEventListener( 'touchstart', touchstart, false );
this.domElement.removeEventListener( 'touchend', touchend, false );
this.domElement.removeEventListener( 'touchmove', touchmove, false );
document.removeEventListener( 'mousemove', mousemove, false );
document.removeEventListener( 'mouseup', mouseup, false );
window.removeEventListener( 'keydown', keydown, false );
window.removeEventListener( 'keyup', keyup, false );
};
this.domElement.addEventListener( 'contextmenu', contextmenu, false );
this.domElement.addEventListener( 'mousedown', mousedown, false );
this.domElement.addEventListener( 'wheel', mousewheel, false );
this.domElement.addEventListener( 'touchstart', touchstart, false );
this.domElement.addEventListener( 'touchend', touchend, false );
this.domElement.addEventListener( 'touchmove', touchmove, false );
window.addEventListener( 'keydown', keydown, false );
window.addEventListener( 'keyup', keyup, false );
this.handleResize();
// force an update at start
this.update();
};
OrthographicTrackballControls.prototype = Object.create( EventDispatcher.prototype );
OrthographicTrackballControls.prototype.constructor = OrthographicTrackballControls;
export { OrthographicTrackballControls };
examples/jsm/controls/TrackballControls.js
浏览文件 @ bd61540e
......@@ -52,6 +52,7 @@ var TrackballControls = function ( object, domElement ) {
var EPS = 0.000001;
var lastPosition = new Vector3();
var lastZoom = 1;
var _state = STATE.NONE,
_keyState = STATE.NONE,
......@@ -78,6 +79,7 @@ var TrackballControls = function ( object, domElement ) {
this.target0 = this.target.clone();
this.position0 = this.object.position.clone();
this.up0 = this.object.up.clone();
this.zoom0 = this.object.zoom;
// events
......@@ -209,7 +211,21 @@ var TrackballControls = function ( object, domElement ) {
factor = _touchZoomDistanceStart / _touchZoomDistanceEnd;
_touchZoomDistanceStart = _touchZoomDistanceEnd;
_eye.multiplyScalar( factor );
if ( _this.object.isPerspectiveCamera ) {
_eye.multiplyScalar( factor );
} else if ( _this.object.isOrthographicCamera ) {
_this.object.zoom *= factor;
_this.object.updateProjectionMatrix();
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
} else {
......@@ -217,7 +233,20 @@ var TrackballControls = function ( object, domElement ) {
if ( factor !== 1.0 && factor > 0.0 ) {
_eye.multiplyScalar( factor );
if ( _this.object.isPerspectiveCamera ) {
_eye.multiplyScalar( factor );
} else if ( _this.object.isOrthographicCamera ) {
_this.object.zoom /= factor;
_this.object.updateProjectionMatrix();
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
}
......@@ -247,6 +276,16 @@ var TrackballControls = function ( object, domElement ) {
if ( mouseChange.lengthSq() ) {
if ( _this.object.isOrthographicCamera ) {
var scale_x = ( _this.object.right - _this.object.left ) / _this.object.zoom / _this.domElement.clientWidth;
var scale_y = ( _this.object.top - _this.object.bottom ) / _this.object.zoom / _this.domElement.clientWidth;
mouseChange.x *= scale_x;
mouseChange.y *= scale_y;
}
mouseChange.multiplyScalar( _eye.length() * _this.panSpeed );
pan.copy( _eye ).cross( _this.object.up ).setLength( mouseChange.x );
......@@ -317,15 +356,36 @@ var TrackballControls = function ( object, domElement ) {
_this.object.position.addVectors( _this.target, _eye );
_this.checkDistances();
if ( _this.object.isPerspectiveCamera ) {
_this.object.lookAt( _this.target );
_this.checkDistances();
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
_this.object.lookAt( _this.target );
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
}
_this.dispatchEvent( changeEvent );
} else if ( _this.object.isOrthographicCamera ) {
lastPosition.copy( _this.object.position );
_this.object.lookAt( _this.target );
if ( lastPosition.distanceToSquared( _this.object.position ) > EPS || lastZoom !== _this.object.zoom ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
lastZoom = _this.object.zoom;
}
} else {
console.warn( 'THREE.TrackballControls: Unsupported camera type' );
}
......@@ -339,6 +399,9 @@ var TrackballControls = function ( object, domElement ) {
_this.target.copy( _this.target0 );
_this.object.position.copy( _this.position0 );
_this.object.up.copy( _this.up0 );
_this.object.zoom = _this.zoom0;
_this.object.updateProjectionMatrix();
_eye.subVectors( _this.object.position, _this.target );
......@@ -347,6 +410,7 @@ var TrackballControls = function ( object, domElement ) {
_this.dispatchEvent( changeEvent );
lastPosition.copy( _this.object.position );
lastZoom = _this.object.zoom;
};
......
examples/misc_controls_trackball.html
浏览文件 @ bd61540e
......@@ -27,19 +27,30 @@
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { GUI } from './jsm/libs/dat.gui.module.js';
import { TrackballControls } from './jsm/controls/TrackballControls.js';
var perspectiveCamera, orthographicCamera, controls, scene, renderer, stats;
var camera, controls, scene, renderer, stats;
var params = {
orthographicCamera: false
};
var frustumSize = 400;
init();
animate();
function init() {
camera = new THREE.PerspectiveCamera( 60, window.innerWidth / window.innerHeight, 1, 1000 );
camera.position.z = 500;
var aspect = window.innerWidth / window.innerHeight;
perspectiveCamera = new THREE.PerspectiveCamera( 60, aspect, 1, 1000 );
perspectiveCamera.position.z = 500;
orthographicCamera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
orthographicCamera.position.z = 500;
// world
......@@ -62,7 +73,6 @@
}
// lights
var light = new THREE.DirectionalLight( 0xffffff );
......@@ -76,7 +86,6 @@
var light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
......@@ -84,38 +93,61 @@
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new TrackballControls( camera, renderer.domElement );
stats = new Stats();
document.body.appendChild( stats.dom );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
//
controls.noZoom = false;
controls.noPan = false;
var gui = new GUI();
gui.add( params, 'orthographicCamera' ).name( 'use orthographic' ).onChange( function ( value ) {
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.dispose();
controls.keys = [ 65, 83, 68 ];
createControls( value ? orthographicCamera : perspectiveCamera );
controls.addEventListener( 'change', render );
render();
stats = new Stats();
document.body.appendChild( stats.dom );
} );
//
window.addEventListener( 'resize', onWindowResize, false );
//
createControls( perspectiveCamera );
render();
}
function createControls( camera ) {
controls = new TrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.panSpeed = 0.8;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
}
function onWindowResize() {
camera.aspect = window.innerWidth / window.innerHeight;
camera.updateProjectionMatrix();
var aspect = window.innerWidth / window.innerHeight;
perspectiveCamera.aspect = aspect;
perspectiveCamera.updateProjectionMatrix();
orthographicCamera.left = - frustumSize * aspect / 2;
orthographicCamera.right = frustumSize * aspect / 2;
orthographicCamera.top = frustumSize / 2;
orthographicCamera.bottom = - frustumSize / 2;
orthographicCamera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
......@@ -137,6 +169,8 @@
function render() {
var camera = ( params.orthographicCamera ) ? orthographicCamera : perspectiveCamera;
renderer.render( scene, camera );
}
......
examples/misc_controls_trackball_orthographic.html 已删除 100644 → 0
浏览文件 @ 89e516ba
<!DOCTYPE html>
<html lang="en">
<head>
<title>three.js webgl - orthographic trackball controls</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link type="text/css" rel="stylesheet" href="main.css">
<style>
body {
background-color: #ccc;
color: #000;
}
a {
color: #f00;
}
</style>
</head>
<body>
<div id="info">
<a href="https://threejs.org" target="_blank" rel="noopener">three.js</a> - orthographic trackball controls<br />
MOVE mouse &amp; press LEFT: rotate, MIDDLE: zoom, RIGHT: pan
</div>
<script type="module">
import * as THREE from '../build/three.module.js';
import Stats from './jsm/libs/stats.module.js';
import { OrthographicTrackballControls } from './jsm/controls/OrthographicTrackballControls.js';
var camera, controls, scene, renderer, stats;
init();
animate();
function init() {
camera = new THREE.OrthographicCamera( window.innerWidth / - 2, window.innerWidth / 2, window.innerHeight / 2, window.innerHeight / - 2, 1, 2000 );
camera.position.z = 1000;
// world
scene = new THREE.Scene();
scene.background = new THREE.Color( 0xcccccc );
scene.fog = new THREE.FogExp2( 0xcccccc, 0.001 );
var geometry = new THREE.CylinderBufferGeometry( 0, 10, 30, 4, 1 );
var material = new THREE.MeshPhongMaterial( { color: 0xffffff, flatShading: true } );
for ( var i = 0; i < 500; i ++ ) {
var mesh = new THREE.Mesh( geometry, material );
mesh.position.x = ( Math.random() - 0.5 ) * 1000;
mesh.position.y = ( Math.random() - 0.5 ) * 1000;
mesh.position.z = ( Math.random() - 0.5 ) * 1000;
mesh.updateMatrix();
mesh.matrixAutoUpdate = false;
scene.add( mesh );
}
// lights
var light = new THREE.DirectionalLight( 0xffffff );
light.position.set( 1, 1, 1 );
scene.add( light );
var light = new THREE.DirectionalLight( 0x002288 );
light.position.set( - 1, - 1, - 1 );
scene.add( light );
var light = new THREE.AmbientLight( 0x222222 );
scene.add( light );
// renderer
renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setPixelRatio( window.devicePixelRatio );
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
controls = new OrthographicTrackballControls( camera, renderer.domElement );
controls.rotateSpeed = 1.0;
controls.zoomSpeed = 1.2;
controls.noZoom = false;
controls.noPan = false;
controls.staticMoving = true;
controls.dynamicDampingFactor = 0.3;
controls.keys = [ 65, 83, 68 ];
controls.addEventListener( 'change', render );
stats = new Stats();
document.body.appendChild( stats.dom );
//
window.addEventListener( 'resize', onWindowResize, false );
//
render();
}
function onWindowResize() {
camera.left = window.innerWidth / - 2;
camera.right = window.innerWidth / 2;
camera.top = window.innerHeight / 2;
camera.bottom = window.innerHeight / - 2;
camera.updateProjectionMatrix();
renderer.setSize( window.innerWidth, window.innerHeight );
controls.handleResize();
render();
}
function animate() {
requestAnimationFrame( animate );
controls.update();
stats.update();
}
function render() {
renderer.render( scene, camera );
}
</script>
</body>
</html>
utils/modularize.js
浏览文件 @ bd61540e
......@@ -23,7 +23,6 @@ var files = [
{ path: 'controls/FirstPersonControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/FlyControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/OrbitControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/OrthographicTrackballControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/PointerLockControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/TrackballControls.js', dependencies: [], ignoreList: [] },
{ path: 'controls/TransformControls.js', dependencies: [], ignoreList: [] },
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或