@thanhthbm/scene-editor 0.1.0

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

@@ -0,0 +1,121 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UINumber, UIInteger } 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().setPrecision( 3 ).setValue( parameters.width ).onChange( update );
+
+	widthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/width' ) ).setClass( 'Label' ) );
+	widthRow.add( width );
+
+	container.add( widthRow );
+
+	// height
+
+	const heightRow = new UIRow();
+	const height = new UINumber().setPrecision( 3 ).setValue( parameters.height ).onChange( update );
+
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/height' ) ).setClass( 'Label' ) );
+	heightRow.add( height );
+
+	container.add( heightRow );
+
+	// depth
+
+	const depthRow = new UIRow();
+	const depth = new UINumber().setPrecision( 3 ).setValue( parameters.depth ).onChange( update );
+
+	depthRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depth' ) ).setClass( 'Label' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// widthSegments
+
+	const widthSegmentsRow = new UIRow();
+	const widthSegments = new UIInteger( parameters.widthSegments ).setRange( 1, Infinity ).onChange( update );
+
+	widthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/widthseg' ) ).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/box_geometry/heightseg' ) ).setClass( 'Label' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	// depthSegments
+
+	const depthSegmentsRow = new UIRow();
+	const depthSegments = new UIInteger( parameters.depthSegments ).setRange( 1, Infinity ).onChange( update );
+
+	depthSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/box_geometry/depthseg' ) ).setClass( 'Label' ) );
+	depthSegmentsRow.add( depthSegments );
+
+	container.add( depthSegmentsRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		width.setValue( parameters.width );
+		height.setValue( parameters.height );
+		depth.setValue( parameters.depth );
+		widthSegments.setValue( parameters.widthSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		depthSegments.setValue( parameters.depthSegments );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.BoxGeometry(
+			width.getValue(),
+			height.getValue(),
+			depth.getValue(),
+			widthSegments.getValue(),
+			heightSegments.getValue(),
+			depthSegments.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,124 @@
+import { UIRow, UIText, UISpan, UIBreak, UICheckbox } from './libs/ui.js';
+
+function SidebarGeometryBufferGeometry( editor ) {
+
+	const strings = editor.strings;
+
+	const signals = editor.signals;
+
+	const container = new UIRow();
+
+	function update( object ) {
+
+		if ( object === null ) return; // objectSelected.dispatch( null )
+		if ( object === undefined ) return;
+
+		const geometry = object.geometry;
+
+		if ( geometry ) {
+
+			container.clear();
+			container.setDisplay( 'block' );
+
+			// attributes
+
+			const attributesRow = new UIRow();
+
+			const textAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/attributes' ) ).setClass( 'Label' );
+			attributesRow.add( textAttributes );
+
+			const containerAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
+			attributesRow.add( containerAttributes );
+
+			const index = geometry.index;
+
+			if ( index !== null ) {
+
+				containerAttributes.add( new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/index' ) ).setWidth( '70px' ) );
+				containerAttributes.add( new UIText( editor.utils.formatNumber( index.count ) ).setFontSize( '12px' ) );
+				containerAttributes.add( new UIBreak() );
+
+			}
+
+			const attributes = geometry.attributes;
+
+			for ( const name in attributes ) {
+
+				const attribute = attributes[ name ];
+
+				containerAttributes.add( new UIText( name ).setWidth( '70px' ) );
+
+				let info = editor.utils.formatNumber( attribute.count ) + ' (' + attribute.itemSize + ')';
+
+				if ( attribute.isInterleavedBufferAttribute ) {
+
+					info += ' (' + attribute.data.stride + ')';
+
+				}
+
+				containerAttributes.add( new UIText( info ).setFontSize( '12px' ) );
+				containerAttributes.add( new UIBreak() );
+
+			}
+
+			container.add( attributesRow );
+
+			// morph targets
+
+			const morphAttributes = geometry.morphAttributes;
+			const hasMorphTargets = Object.keys( morphAttributes ).length > 0;
+
+			if ( hasMorphTargets === true ) {
+
+				// morph attributes
+
+				const rowMorphAttributes = new UIRow();
+
+				const textMorphAttributes = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphAttributes' ) ).setClass( 'Label' );
+				rowMorphAttributes.add( textMorphAttributes );
+
+				const containerMorphAttributes = new UISpan().setDisplay( 'inline-block' ).setVerticalAlign( 'middle' ).setWidth( '160px' );
+				rowMorphAttributes.add( containerMorphAttributes );
+
+				for ( const name in morphAttributes ) {
+
+					const morphTargets = morphAttributes[ name ];
+
+					containerMorphAttributes.add( new UIText( name ).setWidth( '70px' ) );
+					containerMorphAttributes.add( new UIText( editor.utils.formatNumber( morphTargets.length ) ).setFontSize( '12px' ) );
+					containerMorphAttributes.add( new UIBreak() );
+
+				}
+
+				container.add( rowMorphAttributes );
+
+				// morph relative
+
+				const rowMorphRelative = new UIRow();
+
+				const textMorphRelative = new UIText( strings.getKey( 'sidebar/geometry/buffer_geometry/morphRelative' ) ).setClass( 'Label' );
+				rowMorphRelative.add( textMorphRelative );
+
+				const checkboxMorphRelative = new UICheckbox().setValue( geometry.morphTargetsRelative ).setDisabled( true );
+				rowMorphRelative.add( checkboxMorphRelative );
+
+				container.add( rowMorphRelative );
+
+			}
+
+		} else {
+
+			container.setDisplay( 'none' );
+
+		}
+
+	}
+
+	signals.objectSelected.add( update );
+	signals.geometryChanged.add( update );
+
+	return container;
+
+}
+
+export { SidebarGeometryBufferGeometry };

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

@@ -0,0 +1,109 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UINumber, UIInteger } 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/capsule_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// height
+
+	const heightRow = new UIRow();
+	const height = new UINumber( parameters.height ).onChange( update );
+
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/height' ) ).setClass( 'Label' ) );
+	heightRow.add( height );
+
+	container.add( heightRow );
+
+	// capSegments
+
+	const capSegmentsRow = new UIRow();
+	const capSegments = new UIInteger( parameters.capSegments ).setRange( 1, Infinity ).onChange( update );
+
+	capSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/capseg' ) ).setClass( 'Label' ) );
+	capSegmentsRow.add( capSegments );
+
+	container.add( capSegmentsRow );
+
+	// radialSegments
+
+	const radialSegmentsRow = new UIRow();
+	const radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/radialseg' ) ).setClass( 'Label' ) );
+	radialSegmentsRow.add( radialSegments );
+
+	container.add( radialSegmentsRow );
+
+	// heightSegments
+
+	const heightSegmentsRow = new UIRow();
+	const heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
+
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/capsule_geometry/heightseg' ) ).setClass( 'Label' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		height.setValue( parameters.height );
+		capSegments.setValue( parameters.capSegments );
+		radialSegments.setValue( parameters.radialSegments );
+		heightSegments.setValue( parameters.heightSegments );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.CapsuleGeometry(
+			radius.getValue(),
+			height.getValue(),
+			capSegments.getValue(),
+			radialSegments.getValue(),
+			heightSegments.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

package/src/editor/js/Sidebar.Geometry.CircleGeometry.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;
+
+	// radius
+
+	const radiusRow = new UIRow();
+	const radius = new UINumber( parameters.radius ).onChange( update );
+
+	radiusRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/radius' ) ).setClass( 'Label' ) );
+	radiusRow.add( radius );
+
+	container.add( radiusRow );
+
+	// segments
+
+	const segmentsRow = new UIRow();
+	const segments = new UIInteger( parameters.segments ).setRange( 3, Infinity ).onChange( update );
+
+	segmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/circle_geometry/segments' ) ).setClass( 'Label' ) );
+	segmentsRow.add( segments );
+
+	container.add( segmentsRow );
+
+	// 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/circle_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/circle_geometry/thetalength' ) ).setClass( 'Label' ) );
+	thetaLengthRow.add( thetaLength );
+
+	container.add( thetaLengthRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radius.setValue( parameters.radius );
+		segments.setValue( parameters.segments );
+		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.CircleGeometry(
+			radius.getValue(),
+			segments.getValue(),
+			thetaStart.getValue() * THREE.MathUtils.DEG2RAD,
+			thetaLength.getValue() * THREE.MathUtils.DEG2RAD
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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

@@ -0,0 +1,121 @@
+import * as THREE from 'three';
+
+import { UIDiv, UIRow, UIText, UIInteger, UICheckbox, 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;
+
+	// radiusTop
+
+	const radiusTopRow = new UIRow();
+	const radiusTop = new UINumber( parameters.radiusTop ).onChange( update );
+
+	radiusTopRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiustop' ) ).setClass( 'Label' ) );
+	radiusTopRow.add( radiusTop );
+
+	container.add( radiusTopRow );
+
+	// radiusBottom
+
+	const radiusBottomRow = new UIRow();
+	const radiusBottom = new UINumber( parameters.radiusBottom ).onChange( update );
+
+	radiusBottomRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radiusbottom' ) ).setClass( 'Label' ) );
+	radiusBottomRow.add( radiusBottom );
+
+	container.add( radiusBottomRow );
+
+	// height
+
+	const heightRow = new UIRow();
+	const height = new UINumber( parameters.height ).onChange( update );
+
+	heightRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/height' ) ).setClass( 'Label' ) );
+	heightRow.add( height );
+
+	container.add( heightRow );
+
+	// radialSegments
+
+	const radialSegmentsRow = new UIRow();
+	const radialSegments = new UIInteger( parameters.radialSegments ).setRange( 1, Infinity ).onChange( update );
+
+	radialSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/radialsegments' ) ).setClass( 'Label' ) );
+	radialSegmentsRow.add( radialSegments );
+
+	container.add( radialSegmentsRow );
+
+	// heightSegments
+
+	const heightSegmentsRow = new UIRow();
+	const heightSegments = new UIInteger( parameters.heightSegments ).setRange( 1, Infinity ).onChange( update );
+
+	heightSegmentsRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/heightsegments' ) ).setClass( 'Label' ) );
+	heightSegmentsRow.add( heightSegments );
+
+	container.add( heightSegmentsRow );
+
+	// openEnded
+
+	const openEndedRow = new UIRow();
+	const openEnded = new UICheckbox( parameters.openEnded ).onChange( update );
+
+	openEndedRow.add( new UIText( strings.getKey( 'sidebar/geometry/cylinder_geometry/openended' ) ).setClass( 'Label' ) );
+	openEndedRow.add( openEnded );
+
+	container.add( openEndedRow );
+
+	//
+
+	function refreshUI() {
+
+		const parameters = object.geometry.parameters;
+
+		radiusTop.setValue( parameters.radiusTop );
+		radiusBottom.setValue( parameters.radiusBottom );
+		height.setValue( parameters.height );
+		radialSegments.setValue( parameters.radialSegments );
+		heightSegments.setValue( parameters.heightSegments );
+		openEnded.setValue( parameters.openEnded );
+
+	}
+
+	signals.geometryChanged.add( function ( mesh ) {
+
+		if ( mesh === object ) {
+
+			refreshUI();
+
+		}
+
+	} );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.CylinderGeometry(
+			radiusTop.getValue(),
+			radiusBottom.getValue(),
+			height.getValue(),
+			radialSegments.getValue(),
+			heightSegments.getValue(),
+			openEnded.getValue()
+		) ) );
+
+	}
+
+	return container;
+
+}
+
+export { GeometryParametersPanel };

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