ViewHelper: Use class syntax. (#21631)

editor/js/Viewport.ViewHelper.js

@@ -2,317 +2,315 @@ import { UIPanel } from './libs/ui.js';
 
 import * as THREE from '../../build/three.module.js';
 
-function ViewHelper( editorCamera, container ) {
+class ViewHelper extends THREE.Object3D {
 
-	THREE.Object3D.call( this );
+	constructor( editorCamera, container ) {
 
-	this.animating = false;
-	this.controls = null;
+		super();
 
-	var panel = new UIPanel();
-	panel.setId( 'viewHelper' );
-	panel.setPosition( 'absolute' );
-	panel.setRight( '0px' );
-	panel.setBottom( '0px' );
-	panel.setHeight( '128px' );
-	panel.setWidth( '128px' );
+		this.animating = false;
+		this.controls = null;
 
-	var scope = this;
+		const panel = new UIPanel();
+		panel.setId( 'viewHelper' );
+		panel.setPosition( 'absolute' );
+		panel.setRight( '0px' );
+		panel.setBottom( '0px' );
+		panel.setHeight( '128px' );
+		panel.setWidth( '128px' );
 
-	panel.dom.addEventListener( 'mouseup', function ( event ) {
+		const scope = this;
 
-		event.stopPropagation();
+		panel.dom.addEventListener( 'mouseup', function ( event ) {
 
-		scope.handleClick( event );
+			event.stopPropagation();
 
-	} );
+			scope.handleClick( event );
 
-	panel.dom.addEventListener( 'mousedown', function ( event ) {
+		} );
 
-		event.stopPropagation();
+		panel.dom.addEventListener( 'mousedown', function ( event ) {
 
-	} );
+			event.stopPropagation();
 
-	container.add( panel );
+		} );
 
-	var color1 = new THREE.Color( '#ff3653' );
-	var color2 = new THREE.Color( '#8adb00' );
-	var color3 = new THREE.Color( '#2c8fff' );
+		container.add( panel );
 
-	var interactiveObjects = [];
-	var raycaster = new THREE.Raycaster();
-	var mouse = new THREE.Vector2();
-	var dummy = new THREE.Object3D();
+		const color1 = new THREE.Color( '#ff3653' );
+		const color2 = new THREE.Color( '#8adb00' );
+		const color3 = new THREE.Color( '#2c8fff' );
 
-	var camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
-	camera.position.set( 0, 0, 2 );
+		const interactiveObjects = [];
+		const raycaster = new THREE.Raycaster();
+		const mouse = new THREE.Vector2();
+		const dummy = new THREE.Object3D();
 
-	var geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+		const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+		camera.position.set( 0, 0, 2 );
 
-	var xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
-	var yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
-	var zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
+		const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
 
-	yAxis.rotation.z = Math.PI / 2;
-	zAxis.rotation.y = - Math.PI / 2;
+		const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
+		const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
+		const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
 
-	this.add( xAxis );
-	this.add( zAxis );
-	this.add( yAxis );
+		yAxis.rotation.z = Math.PI / 2;
+		zAxis.rotation.y = - Math.PI / 2;
 
-	var posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
-	posXAxisHelper.userData.type = 'posX';
-	var posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
-	posYAxisHelper.userData.type = 'posY';
-	var posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
-	posZAxisHelper.userData.type = 'posZ';
-	var negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
-	negXAxisHelper.userData.type = 'negX';
-	var negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
-	negYAxisHelper.userData.type = 'negY';
-	var negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
-	negZAxisHelper.userData.type = 'negZ';
+		this.add( xAxis );
+		this.add( zAxis );
+		this.add( yAxis );
 
-	posXAxisHelper.position.x = 1;
-	posYAxisHelper.position.y = 1;
-	posZAxisHelper.position.z = 1;
-	negXAxisHelper.position.x = - 1;
-	negXAxisHelper.scale.setScalar( 0.8 );
-	negYAxisHelper.position.y = - 1;
-	negYAxisHelper.scale.setScalar( 0.8 );
-	negZAxisHelper.position.z = - 1;
-	negZAxisHelper.scale.setScalar( 0.8 );
+		const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
+		posXAxisHelper.userData.type = 'posX';
+		const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
+		posYAxisHelper.userData.type = 'posY';
+		const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
+		posZAxisHelper.userData.type = 'posZ';
+		const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
+		negXAxisHelper.userData.type = 'negX';
+		const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
+		negYAxisHelper.userData.type = 'negY';
+		const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
+		negZAxisHelper.userData.type = 'negZ';
 
-	this.add( posXAxisHelper );
-	this.add( posYAxisHelper );
-	this.add( posZAxisHelper );
-	this.add( negXAxisHelper );
-	this.add( negYAxisHelper );
-	this.add( negZAxisHelper );
+		posXAxisHelper.position.x = 1;
+		posYAxisHelper.position.y = 1;
+		posZAxisHelper.position.z = 1;
+		negXAxisHelper.position.x = - 1;
+		negXAxisHelper.scale.setScalar( 0.8 );
+		negYAxisHelper.position.y = - 1;
+		negYAxisHelper.scale.setScalar( 0.8 );
+		negZAxisHelper.position.z = - 1;
+		negZAxisHelper.scale.setScalar( 0.8 );
 
-	interactiveObjects.push( posXAxisHelper );
-	interactiveObjects.push( posYAxisHelper );
-	interactiveObjects.push( posZAxisHelper );
-	interactiveObjects.push( negXAxisHelper );
-	interactiveObjects.push( negYAxisHelper );
-	interactiveObjects.push( negZAxisHelper );
+		this.add( posXAxisHelper );
+		this.add( posYAxisHelper );
+		this.add( posZAxisHelper );
+		this.add( negXAxisHelper );
+		this.add( negYAxisHelper );
+		this.add( negZAxisHelper );
 
-	var point = new THREE.Vector3();
-	var dim = 128;
-	var turnRate = 2 * Math.PI; // turn rate in angles per second
+		interactiveObjects.push( posXAxisHelper );
+		interactiveObjects.push( posYAxisHelper );
+		interactiveObjects.push( posZAxisHelper );
+		interactiveObjects.push( negXAxisHelper );
+		interactiveObjects.push( negYAxisHelper );
+		interactiveObjects.push( negZAxisHelper );
 
-	this.render = function ( renderer ) {
+		const point = new THREE.Vector3();
+		const dim = 128;
+		const turnRate = 2 * Math.PI; // turn rate in angles per second
 
-		this.quaternion.copy( editorCamera.quaternion ).invert();
-		this.updateMatrixWorld();
+		this.render = function ( renderer ) {
 
-		point.set( 0, 0, 1 );
-		point.applyQuaternion( editorCamera.quaternion );
+			this.quaternion.copy( editorCamera.quaternion ).invert();
+			this.updateMatrixWorld();
 
-		if ( point.x >= 0 ) {
+			point.set( 0, 0, 1 );
+			point.applyQuaternion( editorCamera.quaternion );
 
-			posXAxisHelper.material.opacity = 1;
-			negXAxisHelper.material.opacity = 0.5;
+			if ( point.x >= 0 ) {
 
-		} else {
+				posXAxisHelper.material.opacity = 1;
+				negXAxisHelper.material.opacity = 0.5;
 
-			posXAxisHelper.material.opacity = 0.5;
-			negXAxisHelper.material.opacity = 1;
+			} else {
 
-		}
+				posXAxisHelper.material.opacity = 0.5;
+				negXAxisHelper.material.opacity = 1;
 
-		if ( point.y >= 0 ) {
+			}
 
-			posYAxisHelper.material.opacity = 1;
-			negYAxisHelper.material.opacity = 0.5;
+			if ( point.y >= 0 ) {
 
-		} else {
+				posYAxisHelper.material.opacity = 1;
+				negYAxisHelper.material.opacity = 0.5;
 
-			posYAxisHelper.material.opacity = 0.5;
-			negYAxisHelper.material.opacity = 1;
+			} else {
 
-		}
+				posYAxisHelper.material.opacity = 0.5;
+				negYAxisHelper.material.opacity = 1;
 
-		if ( point.z >= 0 ) {
+			}
 
-			posZAxisHelper.material.opacity = 1;
-			negZAxisHelper.material.opacity = 0.5;
+			if ( point.z >= 0 ) {
 
-		} else {
+				posZAxisHelper.material.opacity = 1;
+				negZAxisHelper.material.opacity = 0.5;
 
-			posZAxisHelper.material.opacity = 0.5;
-			negZAxisHelper.material.opacity = 1;
+			} else {
 
-		}
+				posZAxisHelper.material.opacity = 0.5;
+				negZAxisHelper.material.opacity = 1;
 
-		//
+			}
 
-		var x = container.dom.offsetWidth - dim;
+			//
 
-		renderer.clearDepth();
-		renderer.setViewport( x, 0, dim, dim );
-		renderer.render( this, camera );
+			const x = container.dom.offsetWidth - dim;
 
-	};
+			renderer.clearDepth();
+			renderer.setViewport( x, 0, dim, dim );
+			renderer.render( this, camera );
 
-	var targetPosition = new THREE.Vector3();
-	var targetQuaternion = new THREE.Quaternion();
+		};
 
-	var q1 = new THREE.Quaternion();
-	var q2 = new THREE.Quaternion();
-	var radius = 0;
+		const targetPosition = new THREE.Vector3();
+		const targetQuaternion = new THREE.Quaternion();
 
-	this.handleClick = function ( event ) {
+		const q1 = new THREE.Quaternion();
+		const q2 = new THREE.Quaternion();
+		let radius = 0;
 
-		if ( this.animating === true ) return false;
+		this.handleClick = function ( event ) {
 
-		var rect = container.dom.getBoundingClientRect();
-		var offsetX = rect.left + ( container.dom.offsetWidth - dim );
-		var offsetY = rect.top + ( container.dom.offsetHeight - dim );
-		mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
-		mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
+			if ( this.animating === true ) return false;
 
-		raycaster.setFromCamera( mouse, camera );
+			const rect = container.dom.getBoundingClientRect();
+			const offsetX = rect.left + ( container.dom.offsetWidth - dim );
+			const offsetY = rect.top + ( container.dom.offsetHeight - dim );
+			mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
+			mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
 
-		var intersects = raycaster.intersectObjects( interactiveObjects );
+			raycaster.setFromCamera( mouse, camera );
 
-		if ( intersects.length > 0 ) {
+			const intersects = raycaster.intersectObjects( interactiveObjects );
 
-			var intersection = intersects[ 0 ];
-			var object = intersection.object;
+			if ( intersects.length > 0 ) {
 
-			prepareAnimationData( object, this.controls.center );
+				const intersection = intersects[ 0 ];
+				const object = intersection.object;
 
-			this.animating = true;
+				prepareAnimationData( object, this.controls.center );
 
-			return true;
+				this.animating = true;
 
-		} else {
+				return true;
 
-			return false;
+			} else {
 
-		}
+				return false;
 
-	};
+			}
 
-	this.update = function ( delta ) {
+		};
 
-		var step = delta * turnRate;
-		var focusPoint = this.controls.center;
+		this.update = function ( delta ) {
 
-		// animate position by doing a slerp and then scaling the position on the unit sphere
+			const step = delta * turnRate;
+			const focusPoint = this.controls.center;
 
-		q1.rotateTowards( q2, step );
-		editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
+			// animate position by doing a slerp and then scaling the position on the unit sphere
 
-		// animate orientation
+			q1.rotateTowards( q2, step );
+			editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
 
-		editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+			// animate orientation
 
-		if ( q1.angleTo( q2 ) === 0 ) {
+			editorCamera.quaternion.rotateTowards( targetQuaternion, step );
 
-			this.animating = false;
+			if ( q1.angleTo( q2 ) === 0 ) {
 
-		}
+				this.animating = false;
 
-	};
+			}
 
-	function prepareAnimationData( object, focusPoint ) {
+		};
 
-		switch ( object.userData.type ) {
+		function prepareAnimationData( object, focusPoint ) {
 
-			case 'posX':
-				targetPosition.set( 1, 0, 0 );
-				targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
-				break;
+			switch ( object.userData.type ) {
 
-			case 'posY':
-				targetPosition.set( 0, 1, 0 );
-				targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
-				break;
+				case 'posX':
+					targetPosition.set( 1, 0, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
+					break;
 
-			case 'posZ':
-				targetPosition.set( 0, 0, 1 );
-				targetQuaternion.setFromEuler( new THREE.Euler() );
-				break;
+				case 'posY':
+					targetPosition.set( 0, 1, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
+					break;
 
-			case 'negX':
-				targetPosition.set( - 1, 0, 0 );
-				targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
-				break;
+				case 'posZ':
+					targetPosition.set( 0, 0, 1 );
+					targetQuaternion.setFromEuler( new THREE.Euler() );
+					break;
 
-			case 'negY':
-				targetPosition.set( 0, - 1, 0 );
-				targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
-				break;
+				case 'negX':
+					targetPosition.set( - 1, 0, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
+					break;
 
-			case 'negZ':
-				targetPosition.set( 0, 0, - 1 );
-				targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
-				break;
+				case 'negY':
+					targetPosition.set( 0, - 1, 0 );
+					targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
+					break;
 
-			default:
-				console.error( 'ViewHelper: Invalid axis.' );
+				case 'negZ':
+					targetPosition.set( 0, 0, - 1 );
+					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
+					break;
 
-		}
+				default:
+					console.error( 'ViewHelper: Invalid axis.' );
 
-		//
+			}
 
-		radius = editorCamera.position.distanceTo( focusPoint );
-		targetPosition.multiplyScalar( radius ).add( focusPoint );
+			//
 
-		dummy.position.copy( focusPoint );
+			radius = editorCamera.position.distanceTo( focusPoint );
+			targetPosition.multiplyScalar( radius ).add( focusPoint );
 
-		dummy.lookAt( editorCamera.position );
-		q1.copy( dummy.quaternion );
+			dummy.position.copy( focusPoint );
 
-		dummy.lookAt( targetPosition );
-		q2.copy( dummy.quaternion );
+			dummy.lookAt( editorCamera.position );
+			q1.copy( dummy.quaternion );
 
-	}
+			dummy.lookAt( targetPosition );
+			q2.copy( dummy.quaternion );
 
-	function getAxisMaterial( color ) {
+		}
 
-		return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
+		function getAxisMaterial( color ) {
 
-	}
+			return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
 
-	function getSpriteMaterial( color, text = null ) {
-
-		var canvas = document.createElement( 'canvas' );
-		canvas.width = 64;
-		canvas.height = 64;
+		}
 
-		var context = canvas.getContext( '2d' );
-		context.beginPath();
-		context.arc( 32, 32, 16, 0, 2 * Math.PI );
-		context.closePath();
-		context.fillStyle = color.getStyle();
-		context.fill();
+		function getSpriteMaterial( color, text = null ) {
 
-		if ( text !== null ) {
+			const canvas = document.createElement( 'canvas' );
+			canvas.width = 64;
+			canvas.height = 64;
 
-			context.font = '24px Arial';
-			context.textAlign = 'center';
-			context.fillStyle = '#000000';
-			context.fillText( text, 32, 41 );
+			const context = canvas.getContext( '2d' );
+			context.beginPath();
+			context.arc( 32, 32, 16, 0, 2 * Math.PI );
+			context.closePath();
+			context.fillStyle = color.getStyle();
+			context.fill();
 
-		}
+			if ( text !== null ) {
 
-		var texture = new THREE.CanvasTexture( canvas );
+				context.font = '24px Arial';
+				context.textAlign = 'center';
+				context.fillStyle = '#000000';
+				context.fillText( text, 32, 41 );
 
-		return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
+			}
 
-	}
+			const texture = new THREE.CanvasTexture( canvas );
 
-}
+			return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
 
-ViewHelper.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), {
+		}
 
-	constructor: ViewHelper,
+	}
 
-	isViewHelper: true
+}
 
-} );
+ViewHelper.prototype.isViewHelper = true;
 
 export { ViewHelper };