Merge pull request #19769 from Mugen87/dev43

Editor: Add view helper.

editor/js/Viewport.Camera.js

@@ -13,7 +13,7 @@ function ViewportCamera( editor ) {
 	var cameraSelect = new UISelect();
 	cameraSelect.setPosition( 'absolute' );
 	cameraSelect.setRight( '10px' );
-	cameraSelect.setTop( '10px' );
+	cameraSelect.setBottom( '10px' );
 	cameraSelect.onChange( function () {
 
 		editor.setViewportCamera( this.getValue() );

editor/js/Viewport.ViewHelper.js

@@ -0,0 +1,138 @@
+/**
+ * @author Mugen87 / https://github.com/Mugen87
+ */
+
+import * as THREE from '../../build/three.module.js';
+
+function ViewHelper() {
+
+	THREE.Object3D.call( this );
+
+	var camera = new THREE.OrthographicCamera( - 2, 2, 2, - 2, 0, 4 );
+	camera.position.set( 0, 0, 2 );
+
+	var axesHelper = new THREE.AxesHelper();
+	this.add( axesHelper );
+
+	var posXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000', 'X' ), toneMapped: false } ) );
+	var posYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00', 'Y' ), toneMapped: false } ) );
+	var posZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff', 'Z' ), toneMapped: false } ) );
+	var negXAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#ff0000' ), toneMapped: false } ) );
+	var negYAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#00ff00' ), toneMapped: false } ) );
+	var negZAxisHelper = new THREE.Sprite( new THREE.SpriteMaterial( { map: generateTexture( '#0000ff' ), toneMapped: false } ) );
+
+	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 );
+
+	axesHelper.add( posXAxisHelper );
+	axesHelper.add( posYAxisHelper );
+	axesHelper.add( posZAxisHelper );
+	axesHelper.add( negXAxisHelper );
+	axesHelper.add( negYAxisHelper );
+	axesHelper.add( negZAxisHelper );
+
+	var point = new THREE.Vector3();
+	var dim = 128;
+
+	this.render = function ( renderer, editorCamera, container ) {
+
+		this.quaternion.copy( editorCamera.quaternion ).inverse();
+		this.updateMatrixWorld();
+
+		point.set( 0, 0, 1 );
+		point.applyQuaternion( editorCamera.quaternion );
+
+		if ( point.x >= 0 ) {
+
+			posXAxisHelper.material.opacity = 1;
+			negXAxisHelper.material.opacity = 0.5;
+
+		} else {
+
+			posXAxisHelper.material.opacity = 0.5;
+			negXAxisHelper.material.opacity = 1;
+
+		}
+
+		if ( point.y >= 0 ) {
+
+			posYAxisHelper.material.opacity = 1;
+			negYAxisHelper.material.opacity = 0.5;
+
+		} else {
+
+			posYAxisHelper.material.opacity = 0.5;
+			negYAxisHelper.material.opacity = 1;
+
+		}
+
+		if ( point.z >= 0 ) {
+
+			posZAxisHelper.material.opacity = 1;
+			negZAxisHelper.material.opacity = 0.5;
+
+		} else {
+
+			posZAxisHelper.material.opacity = 0.5;
+			negZAxisHelper.material.opacity = 1;
+
+		}
+
+		//
+
+		var x = container.dom.offsetWidth - dim;
+		var y = container.dom.offsetHeight - dim;
+
+		renderer.clearDepth();
+		renderer.setScissorTest( true );
+		renderer.setScissor( x, y, dim, dim );
+		renderer.setViewport( x, y, dim, dim );
+		renderer.render( this, camera );
+		renderer.setScissorTest( false );
+
+	};
+
+	function generateTexture( 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;
+		context.fill();
+
+		if ( text !== null ) {
+
+			context.font = '24px Arial';
+			context.textAlign = 'center';
+			context.fillStyle = '#000000';
+			context.fillText( text, 32, 41 );
+
+		}
+
+		return new THREE.CanvasTexture( canvas );
+
+	}
+
+}
+
+ViewHelper.prototype = Object.assign( Object.create( THREE.Object3D.prototype ), {
+
+	constructor: ViewHelper,
+
+	isViewHelper: true
+
+} );
+
+export { ViewHelper };

editor/js/Viewport.js

@@ -12,6 +12,7 @@ import { EditorControls } from './EditorControls.js';
 
 import { ViewportCamera } from './Viewport.Camera.js';
 import { ViewportInfo } from './Viewport.Info.js';
+import { ViewHelper } from './Viewport.ViewHelper.js';
 
 import { SetPositionCommand } from './commands/SetPositionCommand.js';
 import { SetRotationCommand } from './commands/SetRotationCommand.js';
@@ -58,6 +59,10 @@ function Viewport( editor ) {
 
 	//
 
+	var viewHelper = new ViewHelper();
+
+	//
+
 	var box = new THREE.Box3();
 
 	var selectionBox = new THREE.BoxHelper();
@@ -714,6 +719,7 @@ function Viewport( editor ) {
 		// don't render under the grid.
 
 		scene.add( grid );
+		renderer.setViewport( 0, 0, container.dom.offsetWidth, container.dom.offsetHeight );
 		renderer.render( scene, camera );
 		scene.remove( grid );
 
@@ -721,6 +727,7 @@ function Viewport( editor ) {
 
 			renderer.autoClear = false;
 			renderer.render( sceneHelpers, camera );
+			viewHelper.render( renderer, camera, container );
 			renderer.autoClear = true;
 
 		}

editor/sw.js

@@ -159,6 +159,7 @@ const assets = [
 	'./js/Viewport.js',
 	'./js/Viewport.Camera.js',
 	'./js/Viewport.Info.js',
+	'./js/Viewport.ViewHelper.js',
 
 	'./js/Command.js',
 	'./js/commands/AddObjectCommand.js',