Bladeren bron

PointerLockControls: Derive from `Controls`. (#29085)

* PointerLockControls: Derive from `Controls`.

* PointerLockControls: Clean up.

* PointerLockControls: More clean up.
Michael Herzog 1 jaar geleden
bovenliggende
commit
b984ed811d

+ 117 - 0
docs/examples/en/controls/Controls.html

@@ -0,0 +1,117 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<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">
+			Abstract base class for controls.
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Object3D object], [param:HTMLDOMElement domElement] )</h3>
+		
+		<p>
+		[page:Object3D object]: The object the controls should manage (usually the camera).
+		</p>
+		<p>
+		[page:HTMLDOMElement domElement]: The HTML element used for event listeners (optional).
+		</p>
+		<p>
+			Creates a new instance of [name].
+		</p>
+		
+		<h2>Properties</h2>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			The HTML element used for event listeners. If not provided via the constructor, [page:.connect]() must be called after `domElement` has been set.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			When set to `false`, the controls will not respond to user input. Default is `true`.
+		</p>
+
+		<h3>[property:Object keys]</h3>
+		<p>
+			This object defines the keyboard input of the controls.
+			Default is `{}`.
+		</p>
+
+		<h3>[property:Object mouseButtons]</h3>
+		<p>
+			This object defines what type of actions are assigned to the available mouse buttons.
+			It depends on the control implementation what kind of mouse buttons and actions are supported.
+			Default is `{ LEFT: null, MIDDLE: null, RIGHT: null }`.
+		</p>
+		<p>
+			Possible buttons are: `LEFT`, `MIDDLE`, `RIGHT`.
+		</p>
+		<p>
+			Possible actions are defined in the [page:Core Constants] page.
+		</p>
+
+		<h3>[property:Object3D object]</h3>
+		<p>
+			The 3D object that is managed by the controls.
+		</p>
+
+		<h3>[property:Integer state]</h3>
+		<p>
+			The internal state of the controls. Default is `-1` (`NONE`).
+		</p>
+
+		<h3>[property:Object touches]</h3>
+		<p>
+			This object defines what type of actions are assigned to what kind of touch interaction.
+			It depends on the control implementation what kind of touch interaction and actions are supported.
+			Default is `{ ONE: null, TWO: null }`.
+		</p>
+		<p>
+			Possible buttons are: `ONE`, `TWO`.
+		</p>
+		<p>
+			Possible actions are defined in the [page:Core Constants] page.
+		</p>
+
+		<h2>Methods</h2>
+
+		<p>See the base [page:EventDispatcher] class for common methods.</p>
+
+		<h3>[method:undefined connect] ()</h3>
+		<p>
+			Connects the controls to the DOM. This method has so called "side effects" since it adds the module's event listeners to the DOM.
+		</p>
+
+		<h3>[method:undefined disconnect] ()</h3>
+		<p>
+			Disconnects the controls from the DOM. 
+		</p>
+
+		<h3>[method:undefined dispose] ()</h3>
+		<p>
+			Call this method if you no longer want use to the controls. It frees all internal resources and removes all event listeners.
+		</p>
+
+		<h3>[method:undefined update] ()</h3>
+		<p>
+			Controls should implement this method if they have to update their internal state per simulation step.
+		</p>
+
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/Controls.js examples/jsm/controls/Controls.js]
+		</p>
+	</body>
+</html>

+ 3 - 18
docs/examples/en/controls/PointerLockControls.html

@@ -7,7 +7,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		[page:EventDispatcher] &rarr;
+		[page:Controls] &rarr;
 
 		<h1>[name]</h1>
 
@@ -85,12 +85,7 @@
 
 		<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.
-		</p>
-
+		<p>See the base [page:Controls] class for common properties.</p>
 
 		<h3>[property:Boolean isLocked]</h3>
 		<p>
@@ -114,17 +109,7 @@
 
 		<h2>Methods</h2>
 
-		<p>See the base [page:EventDispatcher] class for common methods.</p>
-
-		<h3>[method:undefined connect] ()</h3>
-		<p>
-			Adds the event listeners of the controls.
-		</p>
-
-		<h3>[method:undefined disconnect] ()</h3>
-		<p>
-			Removes the event listeners of the controls.
-		</p>
+		<p>See the base [page:Controls] class for common methods.</p>
 
 		<h3>[method:Vector3 getDirection] ( [param:Vector3 target] )</h3>
 		<p>

+ 1 - 0
docs/list.json

@@ -331,6 +331,7 @@
 
 			"Controls": {
 				"ArcballControls": "examples/en/controls/ArcballControls",
+				"Controls": "examples/en/controls/Controls",
 				"DragControls": "examples/en/controls/DragControls",
 				"FirstPersonControls": "examples/en/controls/FirstPersonControls",
 				"FlyControls": "examples/en/controls/FlyControls",

+ 24 - 15
examples/jsm/controls/PointerLockControls.js

@@ -1,8 +1,8 @@
 import {
 	Euler,
-	EventDispatcher,
 	Vector3
 } from 'three';
+import { Controls } from './Controls.js';
 
 const _euler = new Euler( 0, 0, 0, 'YXZ' );
 const _vector = new Vector3();
@@ -13,14 +13,11 @@ const _unlockEvent = { type: 'unlock' };
 
 const _PI_2 = Math.PI / 2;
 
-class PointerLockControls extends EventDispatcher {
+class PointerLockControls extends Controls {
 
-	constructor( camera, domElement ) {
+	constructor( camera, domElement = null ) {
 
-		super();
-
-		this.camera = camera;
-		this.domElement = domElement;
+		super( camera, domElement );
 
 		this.isLocked = false;
 
@@ -31,11 +28,17 @@ class PointerLockControls extends EventDispatcher {
 
 		this.pointerSpeed = 1.0;
 
+		// event listeners
+
 		this._onMouseMove = onMouseMove.bind( this );
 		this._onPointerlockChange = onPointerlockChange.bind( this );
 		this._onPointerlockError = onPointerlockError.bind( this );
 
-		this.connect();
+		if ( this.domElement !== null ) {
+
+			this.connect();
+
+		}
 
 	}
 
@@ -61,24 +64,28 @@ class PointerLockControls extends EventDispatcher {
 
 	}
 
-	getObject() { // retaining this method for backward compatibility
+	getObject() {
 
-		return this.camera;
+		console.warn( 'THREE.PointerLockControls: getObject() has been deprecated. Use controls.object instead.' ); // @deprecated r169
+
+		return this.object;
 
 	}
 
 	getDirection( v ) {
 
-		return v.set( 0, 0, - 1 ).applyQuaternion( this.camera.quaternion );
+		return v.set( 0, 0, - 1 ).applyQuaternion( this.object.quaternion );
 
 	}
 
 	moveForward( distance ) {
 
+		if ( this.enabled === false ) return;
+
 		// move forward parallel to the xz-plane
 		// assumes camera.up is y-up
 
-		const camera = this.camera;
+		const camera = this.object;
 
 		_vector.setFromMatrixColumn( camera.matrix, 0 );
 
@@ -90,7 +97,9 @@ class PointerLockControls extends EventDispatcher {
 
 	moveRight( distance ) {
 
-		const camera = this.camera;
+		if ( this.enabled === false ) return;
+
+		const camera = this.object;
 
 		_vector.setFromMatrixColumn( camera.matrix, 0 );
 
@@ -116,12 +125,12 @@ class PointerLockControls extends EventDispatcher {
 
 function onMouseMove( event ) {
 
-	if ( this.isLocked === false ) return;
+	if ( this.enabled === false || this.isLocked === false ) return;
 
 	const movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
 	const movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;
 
-	const camera = this.camera;
+	const camera = this.object;
 	_euler.setFromQuaternion( camera.quaternion );
 
 	_euler.y -= movementX * 0.002 * this.pointerSpeed;

+ 5 - 5
examples/misc_controls_pointerlock.html

@@ -115,7 +115,7 @@
 
 				} );
 
-				scene.add( controls.getObject() );
+				scene.add( controls.object );
 
 				const onKeyDown = function ( event ) {
 
@@ -283,7 +283,7 @@
 
 				if ( controls.isLocked === true ) {
 
-					raycaster.ray.origin.copy( controls.getObject().position );
+					raycaster.ray.origin.copy( controls.object.position );
 					raycaster.ray.origin.y -= 10;
 
 					const intersections = raycaster.intersectObjects( objects, false );
@@ -314,12 +314,12 @@
 					controls.moveRight( - velocity.x * delta );
 					controls.moveForward( - velocity.z * delta );
 
-					controls.getObject().position.y += ( velocity.y * delta ); // new behavior
+					controls.object.position.y += ( velocity.y * delta ); // new behavior
 
-					if ( controls.getObject().position.y < 10 ) {
+					if ( controls.object.position.y < 10 ) {
 
 						velocity.y = 0;
-						controls.getObject().position.y = 10;
+						controls.object.position.y = 10;
 
 						canJump = true;
 

粤ICP备19079148号