@thanhthbm/scene-editor 0.1.0

package/src/editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -0,0 +1,196 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, UIButton, UINumber } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+	const signals = editor.signals;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters;
+	const options = parameters.options;
+	options.curveSegments = options.curveSegments != undefined ? options.curveSegments : 12;
+	options.steps = options.steps != undefined ? options.steps : 1;
+	options.depth = options.depth != undefined ? options.depth : 1;
+	const bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 0.2;
+	options.bevelThickness = bevelThickness;
+	options.bevelSize = options.bevelSize !== undefined ? options.bevelSize : bevelThickness - 0.1;
+	options.bevelOffset = options.bevelOffset !== undefined ? options.bevelOffset : 0;
+	options.bevelSegments = options.bevelSegments !== undefined ? options.bevelSegments : 3;
+
+
+	// curveSegments
+
+	const curveSegmentsRow = new UIRow();
+	const curveSegments = new UIInteger( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setClass( 'Label' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// steps
+
+	const stepsRow = new UIRow();
+	const steps = new UIInteger( options.steps ).onChange( update ).setRange( 1, Infinity );
+
+	stepsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setClass( 'Label' ) );
+	stepsRow.add( steps );
+
+	container.add( stepsRow );
+
+	// depth
+
+	const depthRow = new UIRow();
+	const depth = new UINumber( options.depth ).onChange( update ).setRange( 1, Infinity );
+
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setClass( 'Label' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// enabled
+
+	const enabledRow = new UIRow();
+	const enabled = new UICheckbox( options.bevelEnabled ).onChange( update );
+
+	enabledRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setClass( 'Label' ) );
+	enabledRow.add( enabled );
+
+	container.add( enabledRow );
+
+	// thickness
+
+	const thicknessRow = new UIRow();
+	const thickness = new UINumber( options.bevelThickness ).onChange( update );
+
+	thicknessRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setClass( 'Label' ) );
+	thicknessRow.add( thickness );
+
+	container.add( thicknessRow );
+
+	// size
+
+	const sizeRow = new UIRow();
+	const size = new UINumber( options.bevelSize ).onChange( update );
+
+	sizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setClass( 'Label' ) );
+	sizeRow.add( size );
+
+	container.add( sizeRow );
+
+	// offset
+
+	const offsetRow = new UIRow();
+	const offset = new UINumber( options.bevelOffset ).onChange( update );
+
+	offsetRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setClass( 'Label' ) );
+	offsetRow.add( offset );
+
+	container.add( offsetRow );
+
+	// segments
+
+	const segmentsRow = new UIRow();
+	const segments = new UIInteger( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
+
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setClass( 'Label' ) );
+	segmentsRow.add( segments );
+
+	container.add( segmentsRow );
+
+	updateBevelRow( options.bevelEnabled );
+
+	const button = new UIButton( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setClass( 'Label' ).setMarginLeft( '120px' );
+	container.add( button );
+
+	//
+
+	function updateBevelRow( enabled ) {
+
+		if ( enabled === true ) {
+
+			thicknessRow.setDisplay( '' );
+			sizeRow.setDisplay( '' );
+			offsetRow.setDisplay( '' );
+			segmentsRow.setDisplay( '' );
+
+		} else {
+
+			thicknessRow.setDisplay( 'none' );
+			sizeRow.setDisplay( 'none' );
+			offsetRow.setDisplay( 'none' );
+			segmentsRow.setDisplay( 'none' );
+
+		}
+
+	}
+
+	function refreshUI() {
+
+		const options = object.geometry.parameters.options;
+
+		curveSegments.setValue( options.curveSegments );
+		steps.setValue( options.steps );
+		depth.setValue( options.depth );
+		enabled.setValue( options.bevelEnabled );
+		thickness.setValue( options.bevelThickness );
+		size.setValue( options.bevelSize );
+		offset.setValue( options.bevelOffset );
+		segments.setValue( options.bevelSegments );
+
+		updateBevelRow( options.bevelEnabled );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		updateBevelRow( enabled.getValue() );
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeGeometry(
+			parameters.shapes,
+			{
+				curveSegments: curveSegments.getValue(),
+				steps: steps.getValue(),
+				depth: depth.getValue(),
+				bevelEnabled: enabled.getValue(),
+				bevelThickness: thickness !== undefined ? thickness.getValue() : options.bevelThickness,
+				bevelSize: size !== undefined ? size.getValue() : options.bevelSize,
+				bevelOffset: offset !== undefined ? offset.getValue() : options.bevelOffset,
+				bevelSegments: segments !== undefined ? segments.getValue() : options.bevelSegments
+			}
+		) ) );
+
+	}
+
+	function toShape() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeGeometry(
+			parameters.shapes,
+			options.curveSegments
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -0,0 +1,73 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+	const signals = editor.signals;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters;
+
+	// radius
+
+	const radiusRow = new UIRow();
+	const radius = new UINumber( parameters.radius ).onChange( update );
+
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// detail
+
+	const detailRow = new UIRow();
+	const detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
+
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/icosahedron_geometry/detail' ) ).setClass( 'Label' ) );
+	detailRow.add( detail );
+
+	container.add( detailRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.IcosahedronGeometry(
+			radius.getValue(),
+			detail.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -0,0 +1,98 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+import { UIPoints2 } from './libs/ui.three.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+	const signals = editor.signals;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters;
+
+	// segments
+
+	const segmentsRow = new UIRow();
+	const segments = new UIInteger( parameters.segments ).onChange( update );
+
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/segments' ) ).setClass( 'Label' ) );
+	segmentsRow.add( segments );
+
+	container.add( segmentsRow );
+
+	// phiStart
+
+	const phiStartRow = new UIRow();
+	const phiStart = new UINumber( parameters.phiStart * THREE.MathUtils.RAD2DEG ).onChange( update );
+
+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/phistart' ) ).setClass( 'Label' ) );
+	phiStartRow.add( phiStart );
+
+	container.add( phiStartRow );
+
+	// phiLength
+
+	const phiLengthRow = new UIRow();
+	const phiLength = new UINumber( parameters.phiLength * THREE.MathUtils.RAD2DEG ).onChange( update );
+
+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/philength' ) ).setClass( 'Label' ) );
+	phiLengthRow.add( phiLength );
+
+	container.add( phiLengthRow );
+
+	// points
+
+	const pointsRow = new UIRow();
+	pointsRow.add( new UIText( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setClass( 'Label' ) );
+
+	const points = new UIPoints2().setValue( parameters.points ).onChange( update );
+	pointsRow.add( points );
+
+	container.add( pointsRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		points.setValue( parameters.points, false );
+		segments.setValue( parameters.segments );
+		phiStart.setValue( parameters.phiStart * THREE.MathUtils.RAD2DEG );
+		phiLength.setValue( parameters.phiLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.LatheGeometry(
+			points.getValue(),
+			segments.getValue(),
+			phiStart.getValue() * THREE.MathUtils.DEG2RAD,
+			phiLength.getValue() * THREE.MathUtils.DEG2RAD
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.Modifiers.js

@@ -0,0 +1,73 @@
+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;
+
+	const signals = editor.signals;
+
+	const container = new UIDiv().setMarginLeft( '120px' );
+
+	const geometry = object.geometry;
+
+	// Compute Vertex Normals
+
+	const computeVertexNormalsButton = new UIButton( strings.getKey( 'sidebar/geometry/compute_vertex_normals' ) );
+	computeVertexNormalsButton.onClick( function () {
+
+		geometry.computeVertexNormals();
+
+		signals.geometryChanged.dispatch( object );
+
+	} );
+
+	const computeVertexNormalsRow = new UIRow();
+	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
+
+	const centerButton = new UIButton( strings.getKey( 'sidebar/geometry/center' ) );
+	centerButton.onClick( function () {
+
+		geometry.center();
+
+		signals.geometryChanged.dispatch( object );
+
+	} );
+
+	const centerRow = new UIRow();
+	centerRow.add( centerButton );
+	container.add( centerRow );
+
+	//
+
+	return container;
+
+}
+
+export { SidebarGeometryModifiers };

package/src/editor/js/Sidebar.Geometry.OctahedronGeometry.js

@@ -0,0 +1,74 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+
+	const signals = editor.signals;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters;
+
+	// radius
+
+	const radiusRow = new UIRow();
+	const radius = new UINumber( parameters.radius ).onChange( update );
+
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// detail
+
+	const detailRow = new UIRow();
+	const detail = new UIInteger( parameters.detail ).setRange( 0, Infinity ).onChange( update );
+
+	detailRow.add( new UIText( strings.getKey( 'sidebar/geometry/octahedron_geometry/detail' ) ).setClass( 'Label' ) );
+	detailRow.add( detail );
+
+	container.add( detailRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		detail.setValue( parameters.detail );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.OctahedronGeometry(
+			radius.getValue(),
+			detail.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -0,0 +1,97 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UINumber } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+	const signals = editor.signals;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters;
+
+	// width
+
+	const widthRow = new UIRow();
+	const width = new UINumber( parameters.width ).onChange( update );
+
+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/width' ) ).setClass( 'Label' ) );
+	widthRow.add( width );
+
+	container.add( widthRow );
+
+	// height
+
+	const heightRow = new UIRow();
+	const height = new UINumber( parameters.height ).onChange( update );
+
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/height' ) ).setClass( 'Label' ) );
+	heightRow.add( height );
+
+	container.add( heightRow );
+
+	// widthSegments
+
+	const widthSegmentsRow = new UIRow();
+	const widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
+
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/widthsegments' ) ).setClass( 'Label' ) );
+	widthSegmentsRow.add( widthSegments );
+
+	container.add( widthSegmentsRow );
+
+	// heightSegments
+
+	const heightSegmentsRow = new UIRow();
+	const heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
+
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/plane_geometry/heightsegments' ) ).setClass( 'Label' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		width.setValue( parameters.width );
+		height.setValue( parameters.height );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.PlaneGeometry(
+			width.getValue(),
+			height.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };