@thanhthbm/scene-editor 0.1.0

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

@@ -0,0 +1,121 @@
+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;
+
+	// innerRadius
+
+	const innerRadiusRow = new UIRow();
+	const innerRadius = new UINumber( parameters.innerRadius ).onChange( update );
+
+	innerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/innerRadius' ) ).setClass( 'Label' ) );
+	innerRadiusRow.add( innerRadius );
+
+	container.add( innerRadiusRow );
+
+	// outerRadius
+
+	const outerRadiusRow = new UIRow();
+	const outerRadius = new UINumber( parameters.outerRadius ).onChange( update );
+
+	outerRadiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/outerRadius' ) ).setClass( 'Label' ) );
+	outerRadiusRow.add( outerRadius );
+
+	container.add( outerRadiusRow );
+
+	// thetaSegments
+
+	const thetaSegmentsRow = new UIRow();
+	const thetaSegments = new UIInteger( parameters.thetaSegments ).setRange( 3, Infinity ).onChange( update );
+
+	thetaSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetaSegments' ) ).setClass( 'Label' ) );
+	thetaSegmentsRow.add( thetaSegments );
+
+	container.add( thetaSegmentsRow );
+
+	// phiSegments
+
+	const phiSegmentsRow = new UIRow();
+	const phiSegments = new UIInteger( parameters.phiSegments ).setRange( 3, Infinity ).onChange( update );
+
+	phiSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/phiSegments' ) ).setClass( 'Label' ) );
+	phiSegmentsRow.add( phiSegments );
+
+	container.add( phiSegmentsRow );
+
+	// thetaStart
+
+	const thetaStartRow = new UIRow();
+	const thetaStart = new UINumber( parameters.thetaStart * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetastart' ) ).setClass( 'Label' ) );
+	thetaStartRow.add( thetaStart );
+
+	container.add( thetaStartRow );
+
+	// thetaLength
+
+	const thetaLengthRow = new UIRow();
+	const thetaLength = new UINumber( parameters.thetaLength * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/ring_geometry/thetalength' ) ).setClass( 'Label' ) );
+	thetaLengthRow.add( thetaLength );
+
+	container.add( thetaLengthRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		innerRadius.setValue( parameters.innerRadius );
+		outerRadius.setValue( parameters.outerRadius );
+		thetaSegments.setValue( parameters.thetaSegments );
+		phiSegments.setValue( parameters.phiSegments );
+		thetaStart.setValue( parameters.thetaStart * THREE.MathUtils.RAD2DEG );
+		thetaLength.setValue( parameters.thetaLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.RingGeometry(
+			innerRadius.getValue(),
+			outerRadius.getValue(),
+			thetaSegments.getValue(),
+			phiSegments.getValue(),
+			thetaStart.getValue() * THREE.MathUtils.DEG2RAD,
+			thetaLength.getValue() * THREE.MathUtils.DEG2RAD
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,76 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UIButton } 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;
+
+	// curveSegments
+
+	const curveSegmentsRow = new UIRow();
+	const curveSegments = new UIInteger( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setClass( 'Label' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// to extrude
+	const button = new UIButton( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setClass( 'Label' ).setMarginLeft( '120px' );
+	container.add( button );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		curveSegments.setValue( parameters.curveSegments );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function changeShape() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeGeometry(
+			parameters.shapes,
+			curveSegments.getValue()
+		) ) );
+
+	}
+
+	function toExtrude() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeGeometry(
+			parameters.shapes, {
+				curveSegments: curveSegments.getValue()
+			}
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,133 @@
+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/sphere_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// widthSegments
+
+	const widthSegmentsRow = new UIRow();
+	const widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
+
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_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/sphere_geometry/heightsegments' ) ).setClass( 'Label' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	// phiStart
+
+	const phiStartRow = new UIRow();
+	const phiStart = new UINumber( parameters.phiStart * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	phiStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/phistart' ) ).setClass( 'Label' ) );
+	phiStartRow.add( phiStart );
+
+	container.add( phiStartRow );
+
+	// phiLength
+
+	const phiLengthRow = new UIRow();
+	const phiLength = new UINumber( parameters.phiLength * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	phiLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/philength' ) ).setClass( 'Label' ) );
+	phiLengthRow.add( phiLength );
+
+	container.add( phiLengthRow );
+
+	// thetaStart
+
+	const thetaStartRow = new UIRow();
+	const thetaStart = new UINumber( parameters.thetaStart * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	thetaStartRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetastart' ) ).setClass( 'Label' ) );
+	thetaStartRow.add( thetaStart );
+
+	container.add( thetaStartRow );
+
+	// thetaLength
+
+	const thetaLengthRow = new UIRow();
+	const thetaLength = new UINumber( parameters.thetaLength * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	thetaLengthRow.add( new UIText( strings.getKey( 'sidebar/geometry/sphere_geometry/thetalength' ) ).setClass( 'Label' ) );
+	thetaLengthRow.add( thetaLength );
+
+	container.add( thetaLengthRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		phiStart.setValue( parameters.phiStart * THREE.MathUtils.RAD2DEG );
+		phiLength.setValue( parameters.phiLength * THREE.MathUtils.RAD2DEG );
+		thetaStart.setValue( parameters.thetaStart * THREE.MathUtils.RAD2DEG );
+		thetaLength.setValue( parameters.thetaLength * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.SphereGeometry(
+			radius.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue(),
+			phiStart.getValue() * THREE.MathUtils.DEG2RAD,
+			phiLength.getValue() * THREE.MathUtils.DEG2RAD,
+			thetaStart.getValue() * THREE.MathUtils.DEG2RAD,
+			thetaLength.getValue() * THREE.MathUtils.DEG2RAD
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.TetrahedronGeometry.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/tetrahedron_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/tetrahedron_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.TetrahedronGeometry(
+			radius.getValue(),
+			detail.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,136 @@
+import { TextGeometry } from 'three/addons/geometries/TextGeometry.js';
+
+import { UIDiv, UIRow, UIText, UINumber, UIInteger, UIInput, UICheckbox } from './libs/ui.js';
+
+import { SetGeometryCommand } from './commands/SetGeometryCommand.js';
+
+function GeometryParametersPanel( editor, object ) {
+
+	const strings = editor.strings;
+
+	const container = new UIDiv();
+
+	const geometry = object.geometry;
+	const parameters = geometry.parameters.options;
+
+	// text
+
+	const textRow = new UIRow();
+	const text = new UIInput().setValue( parameters.text ).onChange( update );
+
+	textRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/text' ) ).setClass( 'Label' ) );
+	textRow.add( text );
+
+	container.add( textRow );
+
+	// size
+
+	const sizeRow = new UIRow();
+	const size = new UINumber().setPrecision( 3 ).setValue( parameters.size ).onChange( update );
+
+	sizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/size' ) ).setClass( 'Label' ) );
+	sizeRow.add( size );
+
+	container.add( sizeRow );
+
+	// depth
+
+	const depthRow = new UIRow();
+	const depth = new UINumber().setPrecision( 3 ).setValue( parameters.depth ).onChange( update );
+
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/depth' ) ).setClass( 'Label' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// curveSegments
+
+	const curveSegmentsRow = new UIRow();
+	const curveSegments = new UIInteger( parameters.curveSegments ).setRange( 1, Infinity ).onChange( update );
+
+	curveSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/curveseg' ) ).setClass( 'Label' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// bevelEnabled
+
+	const bevelEnabledRow = new UIRow();
+	const bevelEnabled = new UICheckbox( parameters.bevelEnabled ).onChange( update );
+
+	bevelEnabledRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelenabled' ) ).setClass( 'Label' ) );
+	bevelEnabledRow.add( bevelEnabled );
+
+	container.add( bevelEnabledRow );
+
+	// bevelThickness
+
+	const bevelThicknessRow = new UIRow();
+	const bevelThickness = new UINumber( parameters.bevelThickness ).setPrecision( 3 ).setRange( 0, Infinity ).onChange( update );
+
+	bevelThicknessRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelthickness' ) ).setClass( 'Label' ) );
+	bevelThicknessRow.add( bevelThickness );
+
+	container.add( bevelThicknessRow );
+
+	// bevelSize
+
+	const bevelSizeRow = new UIRow();
+	const bevelSize = new UINumber( parameters.bevelSize ).setRange( 0, Infinity ).onChange( update );
+
+	bevelSizeRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelsize' ) ).setClass( 'Label' ) );
+	bevelSizeRow.add( bevelSize );
+
+	container.add( bevelSizeRow );
+
+	// bevelOffset
+
+	const bevelOffsetRow = new UIRow();
+	const bevelOffset = new UINumber( parameters.bevelOffset ).setRange( 0, Infinity ).onChange( update );
+
+	bevelOffsetRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelOffset' ) ).setClass( 'Label' ) );
+	bevelOffsetRow.add( bevelOffset );
+
+	container.add( bevelOffsetRow );
+
+
+	// bevelSegments
+
+	const bevelSegmentsRow = new UIRow();
+	const bevelSegments = new UIInteger( parameters.bevelSegments ).setRange( 0, Infinity ).onChange( update );
+
+	bevelSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/text_geometry/bevelseg' ) ).setClass( 'Label' ) );
+	bevelSegmentsRow.add( bevelSegments );
+
+	container.add( bevelSegmentsRow );
+
+	function update() {
+
+		const options = {
+
+			text: text.getValue(),
+			font: parameters.font,
+
+			size: size.getValue(),
+			depth: depth.getValue(),
+			curveSegments: curveSegments.getValue(),
+
+			bevelEnabled: bevelEnabled.getValue(),
+			bevelThickness: bevelThickness.getValue(),
+			bevelSize: bevelSize.getValue(),
+			bevelOffset: bevelOffset.getValue(),
+			bevelSegments: bevelSegments.getValue()
+
+		};
+
+		const geometry = new TextGeometry( options.text, options );
+
+		editor.execute( new SetGeometryCommand( editor, object, geometry ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,109 @@
+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/torus_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// tube
+
+	const tubeRow = new UIRow();
+	const tube = new UINumber( parameters.tube ).onChange( update );
+
+	tubeRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tube' ) ).setClass( 'Label' ) );
+	tubeRow.add( tube );
+
+	container.add( tubeRow );
+
+	// radialSegments
+
+	const radialSegmentsRow = new UIRow();
+	const radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/radialsegments' ) ).setClass( 'Label' ) );
+	radialSegmentsRow.add( radialSegments );
+
+	container.add( radialSegmentsRow );
+
+	// tubularSegments
+
+	const tubularSegmentsRow = new UIRow();
+	const tubularSegments = new UIInteger( parameters.tubularSegments ).setRange( 1, Infinity ).onChange( update );
+
+	tubularSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/tubularsegments' ) ).setClass( 'Label' ) );
+	tubularSegmentsRow.add( tubularSegments );
+
+	container.add( tubularSegmentsRow );
+
+	// arc
+
+	const arcRow = new UIRow();
+	const arc = new UINumber( parameters.arc * THREE.MathUtils.RAD2DEG ).setUnit( '°' ).setStep( 10 ).onChange( update );
+
+	arcRow.add( new UIText( strings.getKey( 'sidebar/geometry/torus_geometry/arc' ) ).setClass( 'Label' ) );
+	arcRow.add( arc );
+
+	container.add( arcRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		tube.setValue( parameters.tube );
+		radialSegments.setValue( parameters.radialSegments );
+		tubularSegments.setValue( parameters.tubularSegments );
+		arc.setValue( parameters.arc * THREE.MathUtils.RAD2DEG );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.TorusGeometry(
+			radius.getValue(),
+			tube.getValue(),
+			radialSegments.getValue(),
+			tubularSegments.getValue(),
+			arc.getValue() * THREE.MathUtils.DEG2RAD
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };