From 6234c7d7903e0b9aa4b0b1fc1e2bc5f75d723df7 Mon Sep 17 00:00:00 2001 From: Mugen87 Date: Sat, 10 Apr 2021 11:15:50 +0200 Subject: [PATCH] ViewHelper: Use class syntax. --- editor/js/Viewport.ViewHelper.js | 414 +++++++++++++++---------------- 1 file changed, 206 insertions(+), 208 deletions(-) diff --git a/editor/js/Viewport.ViewHelper.js b/editor/js/Viewport.ViewHelper.js index 120bda19bb035d..d503ab4b3ae4da 100644 --- a/editor/js/Viewport.ViewHelper.js +++ b/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 };