Editor: Added Show Vertex Normals button in Sidebar.Geometry.

mrdoob · Apr 13, 2020 · 4d943ef · 4d943ef
1 parent d1c50fc
commit 4d943ef
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 25 deletions.
diff --git a/editor/js/Editor.js b/editor/js/Editor.js
@@ -401,45 +401,47 @@ Editor.prototype = {
 		var geometry = new THREE.SphereBufferGeometry( 2, 4, 2 );
 		var material = new THREE.MeshBasicMaterial( { color: 0xff0000, visible: false } );
 
-		return function ( object ) {
+		return function ( object, helper ) {
 
-			var helper;
+			if ( helper === undefined ) {
 
-			if ( object.isCamera ) {
+				if ( object.isCamera ) {
 
-				helper = new THREE.CameraHelper( object );
+					helper = new THREE.CameraHelper( object );
 
-			} else if ( object.isPointLight ) {
+				} else if ( object.isPointLight ) {
 
-				helper = new THREE.PointLightHelper( object, 1 );
+					helper = new THREE.PointLightHelper( object, 1 );
 
-			} else if ( object.isDirectionalLight ) {
+				} else if ( object.isDirectionalLight ) {
 
-				helper = new THREE.DirectionalLightHelper( object, 1 );
+					helper = new THREE.DirectionalLightHelper( object, 1 );
 
-			} else if ( object.isSpotLight ) {
+				} else if ( object.isSpotLight ) {
 
-				helper = new THREE.SpotLightHelper( object, 1 );
+					helper = new THREE.SpotLightHelper( object, 1 );
 
-			} else if ( object.isHemisphereLight ) {
+				} else if ( object.isHemisphereLight ) {
 
-				helper = new THREE.HemisphereLightHelper( object, 1 );
+					helper = new THREE.HemisphereLightHelper( object, 1 );
 
-			} else if ( object.isSkinnedMesh ) {
+				} else if ( object.isSkinnedMesh ) {
 
-				helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
+					helper = new THREE.SkeletonHelper( object.skeleton.bones[ 0 ] );
 
-			} else {
+				} else {
 
-				// no helper for this object type
-				return;
+					// no helper for this object type
+					return;
 
-			}
+				}
+
+				var picker = new THREE.Mesh( geometry, material );
+				picker.name = 'picker';
+				picker.userData.object = object;
+				helper.add( picker );
 
-			var picker = new THREE.Mesh( geometry, material );
-			picker.name = 'picker';
-			picker.userData.object = object;
-			helper.add( picker );
+			}
 
 			this.sceneHelpers.add( helper );
 			this.helpers[ object.id ] = helper;

diff --git a/editor/js/Sidebar.Geometry.js b/editor/js/Sidebar.Geometry.js
@@ -30,6 +30,8 @@ import { SidebarGeometryTorusGeometry } from './Sidebar.Geometry.TorusGeometry.j
 import { SidebarGeometryTorusKnotGeometry } from './Sidebar.Geometry.TorusKnotGeometry.js';
 import { SidebarGeometryTubeGeometry } from './Sidebar.Geometry.TubeGeometry.js';
 
+import { VertexNormalsHelper } from '../../examples/jsm/helpers/VertexNormalsHelper.js';
+
 var geometryUIClasses = {
 	'BoxBufferGeometry': SidebarGeometryBoxGeometry,
 	'CircleBufferGeometry': SidebarGeometryCircleGeometry,
@@ -198,7 +200,31 @@ var SidebarGeometry = function ( editor ) {
 	container.add( new UIText( strings.getKey( 'sidebar/geometry/bounds' ) ).setWidth( '90px' ) );
 	container.add( geometryBoundingSphere );
 
-	//
+	// Helpers
+
+	var helpersRow = new UIRow().setMarginTop( '16px' ).setPaddingLeft( '90px' );
+	container.add( helpersRow );
+
+	var vertexNormalsButton = new UIButton( 'Show Vertex Normals' );
+	vertexNormalsButton.onClick( function () {
+
+		var object = editor.selected;
+
+		if ( editor.helpers[ object.id ] === undefined ) {
+
+			var helper = new VertexNormalsHelper( object );
+			editor.addHelper( object, helper );
+
+		} else {
+
+			editor.removeHelper( object );
+
+		}
+
+		signals.sceneGraphChanged.dispatch();
+
+	} );
+	helpersRow.add( vertexNormalsButton );
 
 	function build() {
 

diff --git a/editor/js/Viewport.js b/editor/js/Viewport.js
@@ -457,13 +457,25 @@ var Viewport = function ( editor ) {
 
 	signals.helperAdded.add( function ( object ) {
 
-		objects.push( object.getObjectByName( 'picker' ) );
+		var picker = object.getObjectByName( 'picker' );
+
+		if ( picker !== undefined ) {
+
+			objects.push( picker );
+
+		}
 
 	} );
 
 	signals.helperRemoved.add( function ( object ) {
 
-		objects.splice( objects.indexOf( object.getObjectByName( 'picker' ) ), 1 );
+		var picker = object.getObjectByName( 'picker' );
+
+		if ( picker !== undefined ) {
+
+			objects.splice( objects.indexOf( picker ), 1 );
+
+		}
 
 	} );