Editor: Add compute tangents option. (#27461)

editor/js/Sidebar.Geometry.Modifiers.js

@@ -1,5 +1,8 @@
 import { UIDiv, UIButton, UIRow } from './libs/ui.js';
 
+import { computeMikkTSpaceTangents } from 'three/addons/utils/BufferGeometryUtils.js';
+import * as MikkTSpace from 'three/addons/libs/mikktspace.module.js';
+
 function SidebarGeometryModifiers( editor, object ) {
 
 	const strings = editor.strings;
@@ -25,6 +28,26 @@ function SidebarGeometryModifiers( editor, object ) {
 	computeVertexNormalsRow.add( computeVertexNormalsButton );
 	container.add( computeVertexNormalsRow );
 
+	// Compute Vertex Tangents
+
+	if ( geometry.hasAttribute( 'position' ) && geometry.hasAttribute( 'normal' ) && geometry.hasAttribute( 'uv' ) ) {
+
+		const computeVertexTangentsButton = new UIButton( strings.getKey( 'sidebar/geometry/compute_vertex_tangents' ) );
+		computeVertexTangentsButton.onClick( async function () {
+
+			await MikkTSpace.ready;
+
+			computeMikkTSpaceTangents( geometry, MikkTSpace );
+
+			signals.geometryChanged.dispatch( object );
+
+		} );
+
+		const computeVertexTangentsRow = new UIRow();
+		computeVertexTangentsRow.add( computeVertexTangentsButton );
+		container.add( computeVertexTangentsRow );
+
+	}
 
 	// Center Geometry
 

editor/js/Strings.js

@@ -133,6 +133,7 @@ function Strings( config ) {
 			'sidebar/geometry/bounds': 'Bounds',
 			'sidebar/geometry/show_vertex_normals': 'Show Vertex Normals',
 			'sidebar/geometry/compute_vertex_normals': 'Compute Vertex Normals',
+			'sidebar/geometry/compute_vertex_tangents': 'Compute Tangents',
 			'sidebar/geometry/center': 'Center',
 
 			'sidebar/geometry/box_geometry/width': 'Width',
@@ -483,6 +484,7 @@ function Strings( config ) {
 			'sidebar/geometry/bounds': 'Limites',
 			'sidebar/geometry/show_vertex_normals': 'Afficher normales',
 			'sidebar/geometry/compute_vertex_normals': 'Compute Vertex Normals',
+			'sidebar/geometry/compute_vertex_tangents': 'Compute Tangents',
 			'sidebar/geometry/center': 'Center',
 
 			'sidebar/geometry/box_geometry/width': 'Largeur',
@@ -831,6 +833,7 @@ function Strings( config ) {
 			'sidebar/geometry/bounds': '界限',
 			'sidebar/geometry/show_vertex_normals': '显示顶点法线',
 			'sidebar/geometry/compute_vertex_normals': '计算顶点法线',
+			'sidebar/geometry/compute_vertex_tangents': 'Compute Tangents',
 			'sidebar/geometry/center': '居中',
 
 			'sidebar/geometry/box_geometry/width': '宽度',

editor/sw.js

@@ -26,6 +26,8 @@ const assets = [
 
 	'../examples/jsm/libs/meshopt_decoder.module.js',
 
+	'../examples/jsm/libs/mikktspace.module.js',
+
 	'../examples/jsm/libs/motion-controllers.module.js',
 
 	'../examples/jsm/libs/rhino3dm/rhino3dm.wasm',
@@ -73,6 +75,8 @@ const assets = [
 
 	'../examples/jsm/helpers/VertexNormalsHelper.js',
 
+	'../examples/jsm/utils/BufferGeometryUtils.js',
+
 	'../examples/jsm/webxr/VRButton.js',
 	'../examples/jsm/webxr/XRControllerModelFactory.js',