首頁 探索 說明
登入
javascript
/
three.js
镜像来自 https://github.com/tazdij/three.js.git
2
0
複刻 0
檔案 問題管理 0 Wiki
瀏覽代碼

TrackballControls: Add support for OrthographicCamera.

Mugen87 5 年之前
父節點
74c506980f
當前提交
8ab5280bfc
共有 14 個文件被更改，包括 202 次插入 和 1898 次删除
分割檢視 顯示文件統計
  1. 0 187
      docs/examples/en/controls/OrthographicTrackballControls.html
  2. 3 6
      docs/examples/en/controls/TrackballControls.html
  3. 0 187
      docs/examples/zh/controls/OrthographicTrackballControls.html
  4. 3 6
      docs/examples/zh/controls/TrackballControls.html
  5. 0 2
      docs/list.js
  6. 0 1
      examples/files.js
  7. 0 644
      examples/js/controls/OrthographicTrackballControls.js
  8. 71 7
      examples/js/controls/TrackballControls.js
  9. 0 29
      examples/jsm/controls/OrthographicTrackballControls.d.ts
  10. 0 653
      examples/jsm/controls/OrthographicTrackballControls.js
  11. 71 7
      examples/jsm/controls/TrackballControls.js
  12. 54 20
      examples/misc_controls_trackball.html
  13. 0 148
      examples/misc_controls_trackball_orthographic.html
  14. 0 1
      utils/modularize.js

+ 0 - 187
docs/examples/en/controls/OrthographicTrackballControls.html
查看文件 

@@ -1,187 +0,0 @@
 
-<!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>

+ 3 - 6
docs/examples/en/controls/TrackballControls.html
查看文件 

@@ -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>

+ 0 - 187
docs/examples/zh/controls/OrthographicTrackballControls.html
查看文件 

@@ -1,187 +0,0 @@
 
-<!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>

+ 3 - 6
docs/examples/zh/controls/TrackballControls.html
查看文件 

@@ -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>

+ 0 - 2
docs/list.js
查看文件 

@@ -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"

+ 0 - 1
examples/files.js
查看文件 

@@ -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",

+ 0 - 644
examples/js/controls/OrthographicTrackballControls.js
查看文件 

@@ -1,644 +0,0 @@
 
-/**
 
- * @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;

+ 71 - 7
examples/js/controls/TrackballControls.js
查看文件 

@@ -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;
 
 
 	};

+ 0 - 29
examples/jsm/controls/OrthographicTrackballControls.d.ts
查看文件 

@@ -1,29 +0,0 @@
 
-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;
 
-
 
-}

+ 0 - 653
examples/jsm/controls/OrthographicTrackballControls.js
查看文件 

@@ -1,653 +0,0 @@
 
-/**
 
- * @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 };

+ 71 - 7
examples/jsm/controls/TrackballControls.js
查看文件 

@@ -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;
 
 
 	};

+ 54 - 20
examples/misc_controls_trackball.html
查看文件 

@@ -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 );
 
 
 			}

+ 0 - 148
examples/misc_controls_trackball_orthographic.html
查看文件 

@@ -1,148 +0,0 @@
 
-<!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>

+ 0 - 1
utils/modularize.js
查看文件 

@@ -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: [] },