Examples: Clean up. (#25200)

examples/jsm/helpers/ViewHelper.js

@@ -1,10 +1,26 @@
-import * as THREE from 'three';
-
-const vpTemp = new THREE.Vector4();
-
-class ViewHelper extends THREE.Object3D {
-
-	constructor( editorCamera, dom ) {
+import {
+	BoxGeometry,
+	CanvasTexture,
+	Color,
+	Euler,
+	Mesh,
+	MeshBasicMaterial,
+	Object3D,
+	OrthographicCamera,
+	Quaternion,
+	Raycaster,
+	Sprite,
+	SpriteMaterial,
+	Vector2,
+	Vector3,
+	Vector4
+} from 'three';
+
+const vpTemp = new Vector4();
+
+class ViewHelper extends Object3D {
+
+	constructor( camera, domElement ) {
 
 		super();
 
@@ -13,23 +29,23 @@ class ViewHelper extends THREE.Object3D {
 		this.animating = false;
 		this.controls = null;
 
-		const color1 = new THREE.Color( '#ff3653' );
-		const color2 = new THREE.Color( '#8adb00' );
-		const color3 = new THREE.Color( '#2c8fff' );
+		const color1 = new Color( '#ff3653' );
+		const color2 = new Color( '#8adb00' );
+		const color3 = new Color( '#2c8fff' );
 
 		const interactiveObjects = [];
-		const raycaster = new THREE.Raycaster();
-		const mouse = new THREE.Vector2();
-		const dummy = new THREE.Object3D();
+		const raycaster = new Raycaster();
+		const mouse = new Vector2();
+		const dummy = new Object3D();
 
-		const camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
-		camera.position.set( 0, 0, 2 );
+		const orthoCamera = new OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+		orthoCamera.position.set( 0, 0, 2 );
 
-		const geometry = new THREE.BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
+		const geometry = new BoxGeometry( 0.8, 0.05, 0.05 ).translate( 0.4, 0, 0 );
 
-		const xAxis = new THREE.Mesh( geometry, getAxisMaterial( color1 ) );
-		const yAxis = new THREE.Mesh( geometry, getAxisMaterial( color2 ) );
-		const zAxis = new THREE.Mesh( geometry, getAxisMaterial( color3 ) );
+		const xAxis = new Mesh( geometry, getAxisMaterial( color1 ) );
+		const yAxis = new Mesh( geometry, getAxisMaterial( color2 ) );
+		const zAxis = new Mesh( geometry, getAxisMaterial( color3 ) );
 
 		yAxis.rotation.z = Math.PI / 2;
 		zAxis.rotation.y = - Math.PI / 2;
@@ -38,17 +54,17 @@ class ViewHelper extends THREE.Object3D {
 		this.add( zAxis );
 		this.add( yAxis );
 
-		const posXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1, 'X' ) );
+		const posXAxisHelper = new Sprite( getSpriteMaterial( color1, 'X' ) );
 		posXAxisHelper.userData.type = 'posX';
-		const posYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2, 'Y' ) );
+		const posYAxisHelper = new Sprite( getSpriteMaterial( color2, 'Y' ) );
 		posYAxisHelper.userData.type = 'posY';
-		const posZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3, 'Z' ) );
+		const posZAxisHelper = new Sprite( getSpriteMaterial( color3, 'Z' ) );
 		posZAxisHelper.userData.type = 'posZ';
-		const negXAxisHelper = new THREE.Sprite( getSpriteMaterial( color1 ) );
+		const negXAxisHelper = new Sprite( getSpriteMaterial( color1 ) );
 		negXAxisHelper.userData.type = 'negX';
-		const negYAxisHelper = new THREE.Sprite( getSpriteMaterial( color2 ) );
+		const negYAxisHelper = new Sprite( getSpriteMaterial( color2 ) );
 		negYAxisHelper.userData.type = 'negY';
-		const negZAxisHelper = new THREE.Sprite( getSpriteMaterial( color3 ) );
+		const negZAxisHelper = new Sprite( getSpriteMaterial( color3 ) );
 		negZAxisHelper.userData.type = 'negZ';
 
 		posXAxisHelper.position.x = 1;
@@ -75,17 +91,17 @@ class ViewHelper extends THREE.Object3D {
 		interactiveObjects.push( negYAxisHelper );
 		interactiveObjects.push( negZAxisHelper );
 
-		const point = new THREE.Vector3();
+		const point = new Vector3();
 		const dim = 128;
 		const turnRate = 2 * Math.PI; // turn rate in angles per second
 
 		this.render = function ( renderer ) {
 
-			this.quaternion.copy( editorCamera.quaternion ).invert();
+			this.quaternion.copy( camera.quaternion ).invert();
 			this.updateMatrixWorld();
 
 			point.set( 0, 0, 1 );
-			point.applyQuaternion( editorCamera.quaternion );
+			point.applyQuaternion( camera.quaternion );
 
 			if ( point.x >= 0 ) {
 
@@ -125,37 +141,37 @@ class ViewHelper extends THREE.Object3D {
 
 			//
 
-			const x = dom.offsetWidth - dim;
+			const x = domElement.offsetWidth - dim;
 
 			renderer.clearDepth();
 
 			renderer.getViewport( vpTemp );
 			renderer.setViewport( x, 0, dim, dim );
 
-			renderer.render( this, camera );
+			renderer.render( this, orthoCamera );
 
 			renderer.setViewport( vpTemp.x, vpTemp.y, vpTemp.z, vpTemp.w );
 
 		};
 
-		const targetPosition = new THREE.Vector3();
-		const targetQuaternion = new THREE.Quaternion();
+		const targetPosition = new Vector3();
+		const targetQuaternion = new Quaternion();
 
-		const q1 = new THREE.Quaternion();
-		const q2 = new THREE.Quaternion();
+		const q1 = new Quaternion();
+		const q2 = new Quaternion();
 		let radius = 0;
 
 		this.handleClick = function ( event ) {
 
 			if ( this.animating === true ) return false;
 
-			const rect = dom.getBoundingClientRect();
-			const offsetX = rect.left + ( dom.offsetWidth - dim );
-			const offsetY = rect.top + ( dom.offsetHeight - dim );
+			const rect = domElement.getBoundingClientRect();
+			const offsetX = rect.left + ( domElement.offsetWidth - dim );
+			const offsetY = rect.top + ( domElement.offsetHeight - dim );
 			mouse.x = ( ( event.clientX - offsetX ) / ( rect.width - offsetX ) ) * 2 - 1;
 			mouse.y = - ( ( event.clientY - offsetY ) / ( rect.bottom - offsetY ) ) * 2 + 1;
 
-			raycaster.setFromCamera( mouse, camera );
+			raycaster.setFromCamera( mouse, orthoCamera );
 
 			const intersects = raycaster.intersectObjects( interactiveObjects );
 
@@ -186,11 +202,11 @@ class ViewHelper extends THREE.Object3D {
 			// animate position by doing a slerp and then scaling the position on the unit sphere
 
 			q1.rotateTowards( q2, step );
-			editorCamera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
+			camera.position.set( 0, 0, 1 ).applyQuaternion( q1 ).multiplyScalar( radius ).add( focusPoint );
 
 			// animate orientation
 
-			editorCamera.quaternion.rotateTowards( targetQuaternion, step );
+			camera.quaternion.rotateTowards( targetQuaternion, step );
 
 			if ( q1.angleTo( q2 ) === 0 ) {
 
@@ -230,32 +246,32 @@ class ViewHelper extends THREE.Object3D {
 
 				case 'posX':
 					targetPosition.set( 1, 0, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI * 0.5, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, Math.PI * 0.5, 0 ) );
 					break;
 
 				case 'posY':
 					targetPosition.set( 0, 1, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( - Math.PI * 0.5, 0, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( - Math.PI * 0.5, 0, 0 ) );
 					break;
 
 				case 'posZ':
 					targetPosition.set( 0, 0, 1 );
-					targetQuaternion.setFromEuler( new THREE.Euler() );
+					targetQuaternion.setFromEuler( new Euler() );
 					break;
 
 				case 'negX':
 					targetPosition.set( - 1, 0, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, - Math.PI * 0.5, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, - Math.PI * 0.5, 0 ) );
 					break;
 
 				case 'negY':
 					targetPosition.set( 0, - 1, 0 );
-					targetQuaternion.setFromEuler( new THREE.Euler( Math.PI * 0.5, 0, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( Math.PI * 0.5, 0, 0 ) );
 					break;
 
 				case 'negZ':
 					targetPosition.set( 0, 0, - 1 );
-					targetQuaternion.setFromEuler( new THREE.Euler( 0, Math.PI, 0 ) );
+					targetQuaternion.setFromEuler( new Euler( 0, Math.PI, 0 ) );
 					break;
 
 				default:
@@ -265,12 +281,12 @@ class ViewHelper extends THREE.Object3D {
 
 			//
 
-			radius = editorCamera.position.distanceTo( focusPoint );
+			radius = camera.position.distanceTo( focusPoint );
 			targetPosition.multiplyScalar( radius ).add( focusPoint );
 
 			dummy.position.copy( focusPoint );
 
-			dummy.lookAt( editorCamera.position );
+			dummy.lookAt( camera.position );
 			q1.copy( dummy.quaternion );
 
 			dummy.lookAt( targetPosition );
@@ -280,7 +296,7 @@ class ViewHelper extends THREE.Object3D {
 
 		function getAxisMaterial( color ) {
 
-			return new THREE.MeshBasicMaterial( { color: color, toneMapped: false } );
+			return new MeshBasicMaterial( { color: color, toneMapped: false } );
 
 		}
 
@@ -306,9 +322,9 @@ class ViewHelper extends THREE.Object3D {
 
 			}
 
-			const texture = new THREE.CanvasTexture( canvas );
+			const texture = new CanvasTexture( canvas );
 
-			return new THREE.SpriteMaterial( { map: texture, toneMapped: false } );
+			return new SpriteMaterial( { map: texture, toneMapped: false } );
 
 		}