Editor: Added shading mode selector. (#25554)

Author: mrdoob

editor/js/Editor.js

@@ -88,6 +88,7 @@ function Editor() {
 		historyChanged: new Signal(),
 
 		viewportCameraChanged: new Signal(),
+		viewportShadingChanged: new Signal(),
 
 		intersectionsDetected: new Signal(),
 
@@ -122,7 +123,9 @@ function Editor() {
 	this.helpers = {};
 
 	this.cameras = {};
+
 	this.viewportCamera = this.camera;
+	this.viewportShading = 'default';
 
 	this.addCamera( this.camera );
 
@@ -539,6 +542,13 @@ Editor.prototype = {
 
 	},
 
+	setViewportShading: function( value ) {
+
+		this.viewportShading = value;
+		this.signals.viewportShadingChanged.dispatch();
+
+	},
+
 	//
 
 	select: function ( object ) {

editor/js/Viewport.Camera.js

@@ -8,7 +8,7 @@ function ViewportCamera( editor ) {
 
 	const select = new UISelect();
 	select.setPosition( 'absolute' );
-	select.setRight( '10px' );
+	select.setRight( '120px' );
 	select.setTop( '10px' );
 	select.onChange( function () {
 

editor/js/Viewport.Shading.js

@@ -0,0 +1,21 @@
+import { UISelect } from './libs/ui.js';
+
+function ViewportShading( editor ) {
+
+	const select = new UISelect();
+	select.setPosition( 'absolute' );
+	select.setRight( '10px' );
+	select.setTop( '10px' );
+	select.setOptions( { 'default': 'default', 'normals': 'normals', 'wireframe': 'wireframe' } );
+	select.setValue( 'default' );
+	select.onChange( function () {
+
+		editor.setViewportShading( this.getValue() );
+
+	} );
+
+	return select;
+
+}
+
+export { ViewportShading };

editor/js/Viewport.js

@@ -7,7 +7,9 @@ import { UIPanel } from './libs/ui.js';
 import { EditorControls } from './EditorControls.js';
 
 import { ViewportCamera } from './Viewport.Camera.js';
+import { ViewportShading } from './Viewport.Shading.js';
 import { ViewportInfo } from './Viewport.Info.js';
+
 import { ViewHelper } from './Viewport.ViewHelper.js';
 import { VR } from './Viewport.VR.js';
 
@@ -26,6 +28,7 @@ function Viewport( editor ) {
 	container.setPosition( 'absolute' );
 
 	container.add( new ViewportCamera( editor ) );
+	container.add( new ViewportShading( editor ) );
 	container.add( new ViewportInfo( editor ) );
 
 	//
@@ -41,6 +44,7 @@ function Viewport( editor ) {
 	// helpers
 
 	const grid = new THREE.Group();
+	sceneHelpers.add( grid );
 
 	const grid1 = new THREE.GridHelper( 30, 30, 0x888888 );
 	grid1.material.color.setHex( 0x888888 );
@@ -49,7 +53,6 @@ function Viewport( editor ) {
 
 	const grid2 = new THREE.GridHelper( 30, 6, 0x222222 );
 	grid2.material.color.setHex( 0x222222 );
-	grid2.material.depthFunc = THREE.AlwaysDepth;
 	grid2.material.vertexColors = false;
 	grid.add( grid2 );
 
@@ -219,6 +222,8 @@ function Viewport( editor ) {
 
 		// event.preventDefault();
 
+		if ( event.target !== renderer.domElement ) return;
+
 		const array = getMousePosition( container.dom, event.clientX, event.clientY );
 		onDownPosition.fromArray( array );
 
@@ -628,6 +633,30 @@ function Viewport( editor ) {
 
 	} );
 
+	signals.viewportShadingChanged.add( function () {
+
+		const viewportShading = editor.viewportShading;
+
+		switch ( viewportShading ) {
+
+			case 'default':
+				scene.overrideMaterial = null;
+				break;
+
+			case 'normals':
+				scene.overrideMaterial = new THREE.MeshNormalMaterial();
+				break;
+
+			case 'wireframe':
+				scene.overrideMaterial = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true } );
+				break;
+
+		}
+
+		render();
+
+	} );
+
 	signals.exitedVR.add( render );
 
 	//
@@ -714,13 +743,8 @@ function Viewport( editor ) {
 
 		startTime = performance.now();
 
-		// Adding/removing grid to scene so materials with depthWrite false
-		// don't render under the grid.
-
-		scene.add( grid );
 		renderer.setViewport( 0, 0, container.dom.offsetWidth, container.dom.offsetHeight );
 		renderer.render( scene, editor.viewportCamera );
-		scene.remove( grid );
 
 		if ( camera === editor.viewportCamera ) {