@needle-tools/three 0.145.2 → 0.146.1

package/examples/js/controls/DragControls.js

@@ -1,19 +1,12 @@
 ( function () {
 
 	const _plane = new THREE.Plane();
-
 	const _raycaster = new THREE.Raycaster();
-
 	const _pointer = new THREE.Vector2();
-
 	const _offset = new THREE.Vector3();
-
 	const _intersection = new THREE.Vector3();
-
 	const _worldPosition = new THREE.Vector3();
-
 	const _inverseMatrix = new THREE.Matrix4();
-
 	class DragControls extends THREE.EventDispatcher {
 
 		constructor( _objects, _camera, _domElement ) {
@@ -23,18 +16,16 @@
 
 			let _selected = null,
 				_hovered = null;
-			const _intersections = []; //
+			const _intersections = [];
 
-			const scope = this;
+			//
 
+			const scope = this;
 			function activate() {
 
 				_domElement.addEventListener( 'pointermove', onPointerMove );
-
 				_domElement.addEventListener( 'pointerdown', onPointerDown );
-
 				_domElement.addEventListener( 'pointerup', onPointerCancel );
-
 				_domElement.addEventListener( 'pointerleave', onPointerCancel );
 
 			}
@@ -42,13 +33,9 @@
 			function deactivate() {
 
 				_domElement.removeEventListener( 'pointermove', onPointerMove );
-
 				_domElement.removeEventListener( 'pointerdown', onPointerDown );
-
 				_domElement.removeEventListener( 'pointerup', onPointerCancel );
-
 				_domElement.removeEventListener( 'pointerleave', onPointerCancel );
-
 				_domElement.style.cursor = '';
 
 			}
@@ -75,9 +62,7 @@
 
 				if ( scope.enabled === false ) return;
 				updatePointer( event );
-
 				_raycaster.setFromCamera( _pointer, _camera );
-
 				if ( _selected ) {
 
 					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
@@ -92,23 +77,19 @@
 					} );
 					return;
 
-				} // hover support
+				}
 
+				// hover support
 
 				if ( event.pointerType === 'mouse' || event.pointerType === 'pen' ) {
 
 					_intersections.length = 0;
-
 					_raycaster.setFromCamera( _pointer, _camera );
-
 					_raycaster.intersectObjects( _objects, true, _intersections );
-
 					if ( _intersections.length > 0 ) {
 
 						const object = _intersections[ 0 ].object;
-
 						_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( object.matrixWorld ) );
-
 						if ( _hovered !== object && _hovered !== null ) {
 
 							scope.dispatchEvent( {
@@ -155,21 +136,15 @@
 				if ( scope.enabled === false ) return;
 				updatePointer( event );
 				_intersections.length = 0;
-
 				_raycaster.setFromCamera( _pointer, _camera );
-
 				_raycaster.intersectObjects( _objects, true, _intersections );
-
 				if ( _intersections.length > 0 ) {
 
 					_selected = scope.transformGroup === true ? _objects[ 0 ] : _intersections[ 0 ].object;
-
 					_plane.setFromNormalAndCoplanarPoint( _camera.getWorldDirection( _plane.normal ), _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
-
 					if ( _raycaster.ray.intersectPlane( _plane, _intersection ) ) {
 
 						_inverseMatrix.copy( _selected.parent.matrixWorld ).invert();
-
 						_offset.copy( _intersection ).sub( _worldPosition.setFromMatrixPosition( _selected.matrixWorld ) );
 
 					}
@@ -187,7 +162,6 @@
 			function onPointerCancel() {
 
 				if ( scope.enabled === false ) return;
-
 				if ( _selected ) {
 
 					scope.dispatchEvent( {
@@ -205,13 +179,14 @@
 			function updatePointer( event ) {
 
 				const rect = _domElement.getBoundingClientRect();
-
 				_pointer.x = ( event.clientX - rect.left ) / rect.width * 2 - 1;
 				_pointer.y = - ( event.clientY - rect.top ) / rect.height * 2 + 1;
 
 			}
 
-			activate(); // API
+			activate();
+
+			// API
 
 			this.enabled = true;
 			this.transformGroup = false;

package/examples/js/controls/FirstPersonControls.js

@@ -1,17 +1,16 @@
 ( function () {
 
 	const _lookDirection = new THREE.Vector3();
-
 	const _spherical = new THREE.Spherical();
-
 	const _target = new THREE.Vector3();
-
 	class FirstPersonControls {
 
 		constructor( object, domElement ) {
 
 			this.object = object;
-			this.domElement = domElement; // API
+			this.domElement = domElement;
+
+			// API
 
 			this.enabled = true;
 			this.movementSpeed = 1.0;
@@ -26,20 +25,26 @@
 			this.constrainVertical = false;
 			this.verticalMin = 0;
 			this.verticalMax = Math.PI;
-			this.mouseDragOn = false; // internals
+			this.mouseDragOn = false;
+
+			// internals
 
 			this.autoSpeedFactor = 0.0;
-			this.mouseX = 0;
-			this.mouseY = 0;
+			this.pointerX = 0;
+			this.pointerY = 0;
 			this.moveForward = false;
 			this.moveBackward = false;
 			this.moveLeft = false;
 			this.moveRight = false;
 			this.viewHalfX = 0;
-			this.viewHalfY = 0; // private variables
+			this.viewHalfY = 0;
+
+			// private variables
 
 			let lat = 0;
-			let lon = 0; //
+			let lon = 0;
+
+			//
 
 			this.handleResize = function () {
 
@@ -57,7 +62,7 @@
 
 			};
 
-			this.onMouseDown = function ( event ) {
+			this.onPointerDown = function ( event ) {
 
 				if ( this.domElement !== document ) {
 
@@ -72,7 +77,6 @@
 						case 0:
 							this.moveForward = true;
 							break;
-
 						case 2:
 							this.moveBackward = true;
 							break;
@@ -85,7 +89,7 @@
 
 			};
 
-			this.onMouseUp = function ( event ) {
+			this.onPointerUp = function ( event ) {
 
 				if ( this.activeLook ) {
 
@@ -94,7 +98,6 @@
 						case 0:
 							this.moveForward = false;
 							break;
-
 						case 2:
 							this.moveBackward = false;
 							break;
@@ -107,17 +110,17 @@
 
 			};
 
-			this.onMouseMove = function ( event ) {
+			this.onPointerMove = function ( event ) {
 
 				if ( this.domElement === document ) {
 
-					this.mouseX = event.pageX - this.viewHalfX;
-					this.mouseY = event.pageY - this.viewHalfY;
+					this.pointerX = event.pageX - this.viewHalfX;
+					this.pointerY = event.pageY - this.viewHalfY;
 
 				} else {
 
-					this.mouseX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
-					this.mouseY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
+					this.pointerX = event.pageX - this.domElement.offsetLeft - this.viewHalfX;
+					this.pointerY = event.pageY - this.domElement.offsetTop - this.viewHalfY;
 
 				}
 
@@ -131,26 +134,21 @@
 					case 'KeyW':
 						this.moveForward = true;
 						break;
-
 					case 'ArrowLeft':
 					case 'KeyA':
 						this.moveLeft = true;
 						break;
-
 					case 'ArrowDown':
 					case 'KeyS':
 						this.moveBackward = true;
 						break;
-
 					case 'ArrowRight':
 					case 'KeyD':
 						this.moveRight = true;
 						break;
-
 					case 'KeyR':
 						this.moveUp = true;
 						break;
-
 					case 'KeyF':
 						this.moveDown = true;
 						break;
@@ -167,26 +165,21 @@
 					case 'KeyW':
 						this.moveForward = false;
 						break;
-
 					case 'ArrowLeft':
 					case 'KeyA':
 						this.moveLeft = false;
 						break;
-
 					case 'ArrowDown':
 					case 'KeyS':
 						this.moveBackward = false;
 						break;
-
 					case 'ArrowRight':
 					case 'KeyD':
 						this.moveRight = false;
 						break;
-
 					case 'KeyR':
 						this.moveUp = false;
 						break;
-
 					case 'KeyF':
 						this.moveDown = false;
 						break;
@@ -219,7 +212,6 @@
 				return function update( delta ) {
 
 					if ( this.enabled === false ) return;
-
 					if ( this.heightSpeed ) {
 
 						const y = THREE.MathUtils.clamp( this.object.position.y, this.heightMin, this.heightMax );
@@ -240,7 +232,6 @@
 					if ( this.moveUp ) this.object.translateY( actualMoveSpeed );
 					if ( this.moveDown ) this.object.translateY( - actualMoveSpeed );
 					let actualLookSpeed = delta * this.lookSpeed;
-
 					if ( ! this.activeLook ) {
 
 						actualLookSpeed = 0;
@@ -248,19 +239,17 @@
 					}
 
 					let verticalLookRatio = 1;
-
 					if ( this.constrainVertical ) {
 
 						verticalLookRatio = Math.PI / ( this.verticalMax - this.verticalMin );
 
 					}
 
-					lon -= this.mouseX * actualLookSpeed;
-					if ( this.lookVertical ) lat -= this.mouseY * actualLookSpeed * verticalLookRatio;
+					lon -= this.pointerX * actualLookSpeed;
+					if ( this.lookVertical ) lat -= this.pointerY * actualLookSpeed * verticalLookRatio;
 					lat = Math.max( - 85, Math.min( 85, lat ) );
 					let phi = THREE.MathUtils.degToRad( 90 - lat );
 					const theta = THREE.MathUtils.degToRad( lon );
-
 					if ( this.constrainVertical ) {
 
 						phi = THREE.MathUtils.mapLinear( phi, 0, Math.PI, this.verticalMin, this.verticalMax );
@@ -274,43 +263,33 @@
 				};
 
 			}();
-
 			this.dispose = function () {
 
 				this.domElement.removeEventListener( 'contextmenu', contextmenu );
-				this.domElement.removeEventListener( 'mousedown', _onMouseDown );
-				this.domElement.removeEventListener( 'mousemove', _onMouseMove );
-				this.domElement.removeEventListener( 'mouseup', _onMouseUp );
+				this.domElement.removeEventListener( 'pointerdown', _onPointerDown );
+				this.domElement.removeEventListener( 'pointermove', _onPointerMove );
+				this.domElement.removeEventListener( 'pointerup', _onPointerUp );
 				window.removeEventListener( 'keydown', _onKeyDown );
 				window.removeEventListener( 'keyup', _onKeyUp );
 
 			};
 
-			const _onMouseMove = this.onMouseMove.bind( this );
-
-			const _onMouseDown = this.onMouseDown.bind( this );
-
-			const _onMouseUp = this.onMouseUp.bind( this );
-
+			const _onPointerMove = this.onPointerMove.bind( this );
+			const _onPointerDown = this.onPointerDown.bind( this );
+			const _onPointerUp = this.onPointerUp.bind( this );
 			const _onKeyDown = this.onKeyDown.bind( this );
-
 			const _onKeyUp = this.onKeyUp.bind( this );
-
 			this.domElement.addEventListener( 'contextmenu', contextmenu );
-			this.domElement.addEventListener( 'mousemove', _onMouseMove );
-			this.domElement.addEventListener( 'mousedown', _onMouseDown );
-			this.domElement.addEventListener( 'mouseup', _onMouseUp );
+			this.domElement.addEventListener( 'pointerdown', _onPointerDown );
+			this.domElement.addEventListener( 'pointermove', _onPointerMove );
+			this.domElement.addEventListener( 'pointerup', _onPointerUp );
 			window.addEventListener( 'keydown', _onKeyDown );
 			window.addEventListener( 'keyup', _onKeyUp );
-
 			function setOrientation( controls ) {
 
 				const quaternion = controls.object.quaternion;
-
 				_lookDirection.set( 0, 0, - 1 ).applyQuaternion( quaternion );
-
 				_spherical.setFromVector3( _lookDirection );
-
 				lat = 90 - THREE.MathUtils.radToDeg( _spherical.phi );
 				lon = THREE.MathUtils.radToDeg( _spherical.theta );
 
@@ -322,7 +301,6 @@
 		}
 
 	}
-
 	function contextmenu( event ) {
 
 		event.preventDefault();

package/examples/js/controls/FlyControls.js

@@ -3,19 +3,23 @@
 	const _changeEvent = {
 		type: 'change'
 	};
-
 	class FlyControls extends THREE.EventDispatcher {
 
 		constructor( object, domElement ) {
 
 			super();
 			this.object = object;
-			this.domElement = domElement; // API
+			this.domElement = domElement;
+
+			// API
 
 			this.movementSpeed = 1.0;
 			this.rollSpeed = 0.005;
 			this.dragToLook = false;
-			this.autoForward = false; // disable default target object behavior
+			this.autoForward = false;
+
+			// disable default target object behavior
+
 			// internals
 
 			const scope = this;
@@ -23,7 +27,7 @@
 			const lastQuaternion = new THREE.Quaternion();
 			const lastPosition = new THREE.Vector3();
 			this.tmpQuaternion = new THREE.Quaternion();
-			this.mouseStatus = 0;
+			this.status = 0;
 			this.moveState = {
 				up: 0,
 				down: 0,
@@ -40,7 +44,6 @@
 			};
 			this.moveVector = new THREE.Vector3( 0, 0, 0 );
 			this.rotationVector = new THREE.Vector3( 0, 0, 0 );
-
 			this.keydown = function ( event ) {
 
 				if ( event.altKey ) {
@@ -55,51 +58,39 @@
 					case 'ShiftRight':
 						this.movementSpeedMultiplier = .1;
 						break;
-
 					case 'KeyW':
 						this.moveState.forward = 1;
 						break;
-
 					case 'KeyS':
 						this.moveState.back = 1;
 						break;
-
 					case 'KeyA':
 						this.moveState.left = 1;
 						break;
-
 					case 'KeyD':
 						this.moveState.right = 1;
 						break;
-
 					case 'KeyR':
 						this.moveState.up = 1;
 						break;
-
 					case 'KeyF':
 						this.moveState.down = 1;
 						break;
-
 					case 'ArrowUp':
 						this.moveState.pitchUp = 1;
 						break;
-
 					case 'ArrowDown':
 						this.moveState.pitchDown = 1;
 						break;
-
 					case 'ArrowLeft':
 						this.moveState.yawLeft = 1;
 						break;
-
 					case 'ArrowRight':
 						this.moveState.yawRight = 1;
 						break;
-
 					case 'KeyQ':
 						this.moveState.rollLeft = 1;
 						break;
-
 					case 'KeyE':
 						this.moveState.rollRight = 1;
 						break;
@@ -119,51 +110,39 @@
 					case 'ShiftRight':
 						this.movementSpeedMultiplier = 1;
 						break;
-
 					case 'KeyW':
 						this.moveState.forward = 0;
 						break;
-
 					case 'KeyS':
 						this.moveState.back = 0;
 						break;
-
 					case 'KeyA':
 						this.moveState.left = 0;
 						break;
-
 					case 'KeyD':
 						this.moveState.right = 0;
 						break;
-
 					case 'KeyR':
 						this.moveState.up = 0;
 						break;
-
 					case 'KeyF':
 						this.moveState.down = 0;
 						break;
-
 					case 'ArrowUp':
 						this.moveState.pitchUp = 0;
 						break;
-
 					case 'ArrowDown':
 						this.moveState.pitchDown = 0;
 						break;
-
 					case 'ArrowLeft':
 						this.moveState.yawLeft = 0;
 						break;
-
 					case 'ArrowRight':
 						this.moveState.yawRight = 0;
 						break;
-
 					case 'KeyQ':
 						this.moveState.rollLeft = 0;
 						break;
-
 					case 'KeyE':
 						this.moveState.rollRight = 0;
 						break;
@@ -175,11 +154,11 @@
 
 			};
 
-			this.mousedown = function ( event ) {
+			this.pointerdown = function ( event ) {
 
 				if ( this.dragToLook ) {
 
-					this.mouseStatus ++;
+					this.status ++;
 
 				} else {
 
@@ -188,7 +167,6 @@
 						case 0:
 							this.moveState.forward = 1;
 							break;
-
 						case 2:
 							this.moveState.back = 1;
 							break;
@@ -201,9 +179,9 @@
 
 			};
 
-			this.mousemove = function ( event ) {
+			this.pointermove = function ( event ) {
 
-				if ( ! this.dragToLook || this.mouseStatus > 0 ) {
+				if ( ! this.dragToLook || this.status > 0 ) {
 
 					const container = this.getContainerDimensions();
 					const halfWidth = container.size[ 0 ] / 2;
@@ -216,11 +194,11 @@
 
 			};
 
-			this.mouseup = function ( event ) {
+			this.pointerup = function ( event ) {
 
 				if ( this.dragToLook ) {
 
-					this.mouseStatus --;
+					this.status --;
 					this.moveState.yawLeft = this.moveState.pitchDown = 0;
 
 				} else {
@@ -230,7 +208,6 @@
 						case 0:
 							this.moveState.forward = 0;
 							break;
-
 						case 2:
 							this.moveState.back = 0;
 							break;
@@ -254,7 +231,6 @@
 				scope.object.translateZ( scope.moveVector.z * moveMult );
 				scope.tmpQuaternion.set( scope.rotationVector.x * rotMult, scope.rotationVector.y * rotMult, scope.rotationVector.z * rotMult, 1 ).normalize();
 				scope.object.quaternion.multiply( scope.tmpQuaternion );
-
 				if ( lastPosition.distanceToSquared( scope.object.position ) > EPS || 8 * ( 1 - lastQuaternion.dot( scope.object.quaternion ) ) > EPS ) {
 
 					scope.dispatchEvent( _changeEvent );
@@ -270,7 +246,9 @@
 				const forward = this.moveState.forward || this.autoForward && ! this.moveState.back ? 1 : 0;
 				this.moveVector.x = - this.moveState.left + this.moveState.right;
 				this.moveVector.y = - this.moveState.down + this.moveState.up;
-				this.moveVector.z = - forward + this.moveState.back; //console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
+				this.moveVector.z = - forward + this.moveState.back;
+
+				//console.log( 'move:', [ this.moveVector.x, this.moveVector.y, this.moveVector.z ] );
 
 			};
 
@@ -278,7 +256,9 @@
 
 				this.rotationVector.x = - this.moveState.pitchDown + this.moveState.pitchUp;
 				this.rotationVector.y = - this.moveState.yawRight + this.moveState.yawLeft;
-				this.rotationVector.z = - this.moveState.rollRight + this.moveState.rollLeft; //console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
+				this.rotationVector.z = - this.moveState.rollRight + this.moveState.rollLeft;
+
+				//console.log( 'rotate:', [ this.rotationVector.x, this.rotationVector.y, this.rotationVector.z ] );
 
 			};
 
@@ -305,28 +285,23 @@
 			this.dispose = function () {
 
 				this.domElement.removeEventListener( 'contextmenu', contextmenu );
-				this.domElement.removeEventListener( 'mousedown', _mousedown );
-				this.domElement.removeEventListener( 'mousemove', _mousemove );
-				this.domElement.removeEventListener( 'mouseup', _mouseup );
+				this.domElement.removeEventListener( 'pointerdown', _pointerdown );
+				this.domElement.removeEventListener( 'pointermove', _pointermove );
+				this.domElement.removeEventListener( 'pointerup', _pointerup );
 				window.removeEventListener( 'keydown', _keydown );
 				window.removeEventListener( 'keyup', _keyup );
 
 			};
 
-			const _mousemove = this.mousemove.bind( this );
-
-			const _mousedown = this.mousedown.bind( this );
-
-			const _mouseup = this.mouseup.bind( this );
-
+			const _pointermove = this.pointermove.bind( this );
+			const _pointerdown = this.pointerdown.bind( this );
+			const _pointerup = this.pointerup.bind( this );
 			const _keydown = this.keydown.bind( this );
-
 			const _keyup = this.keyup.bind( this );
-
 			this.domElement.addEventListener( 'contextmenu', contextmenu );
-			this.domElement.addEventListener( 'mousemove', _mousemove );
-			this.domElement.addEventListener( 'mousedown', _mousedown );
-			this.domElement.addEventListener( 'mouseup', _mouseup );
+			this.domElement.addEventListener( 'pointerdown', _pointerdown );
+			this.domElement.addEventListener( 'pointermove', _pointermove );
+			this.domElement.addEventListener( 'pointerup', _pointerup );
 			window.addEventListener( 'keydown', _keydown );
 			window.addEventListener( 'keyup', _keyup );
 			this.updateMovementVector();
@@ -335,7 +310,6 @@
 		}
 
 	}
-
 	function contextmenu( event ) {
 
 		event.preventDefault();