@thanhthbm/scene-editor 0.1.0

package/src/editor/js/TextureParametersDialog.js

@@ -0,0 +1,293 @@
+import * as THREE from 'three';
+
+import { UIButton, UICheckbox, UIDiv, UINumber, UIRow, UISelect, UIText } from './libs/ui.js';
+import { renderToCanvas } from './libs/ui.three.js';
+
+class TextureParametersDialog {
+
+	constructor( editor, texture ) {
+
+		this.editor = editor;
+
+		this.strings = editor.strings;
+		this.texture = texture;
+
+		const dom = new UIDiv();
+		dom.setClass( 'Dialog' );
+		this.dom = dom.dom;
+
+		const background = new UIDiv();
+		background.setClass( 'Dialog-background' );
+		background.dom.addEventListener( 'click', () => this.cancel() );
+		dom.add( background );
+
+		const content = new UIDiv();
+		content.setClass( 'Dialog-content TextureParametersDialog-content' );
+		dom.add( content );
+
+		// Title
+
+		const titleBar = new UIDiv();
+		titleBar.setClass( 'Dialog-title' );
+		titleBar.setTextContent( this.strings.getKey( 'dialog/texture/title' ) );
+		content.add( titleBar );
+
+		// Body (split into preview + form)
+
+		const body = new UIDiv();
+		body.setClass( 'Dialog-body TextureParametersDialog-body' );
+		content.add( body );
+
+		const split = new UIDiv();
+		split.setClass( 'TextureParametersDialog-split' );
+		body.add( split );
+
+		// Preview
+
+		const previewWrapper = new UIDiv();
+		previewWrapper.setClass( 'TextureParametersDialog-preview' );
+		split.add( previewWrapper );
+
+		previewWrapper.add( createGroupHeading( this.strings.getKey( 'dialog/texture/group/preview' ) ) );
+
+		const previewCanvas = document.createElement( 'canvas' );
+		previewCanvas.width = 400;
+		previewCanvas.height = 400;
+		previewWrapper.dom.appendChild( previewCanvas );
+
+		this.previewCanvas = previewCanvas;
+		this.previewContext = previewCanvas.getContext( '2d' );
+		this.previewTexture = texture.clone();
+
+		const updatePreview = () => this.updatePreview();
+
+		// Form
+
+		const form = new UIDiv();
+		form.setClass( 'TextureParametersDialog-form' );
+		split.add( form );
+
+		// Mapping group
+
+		form.add( createGroupHeading( this.strings.getKey( 'dialog/texture/group/mapping' ) ) );
+
+		this.mapping = new UISelect().setOptions( {
+			[ THREE.UVMapping ]: 'UV',
+			[ THREE.EquirectangularReflectionMapping ]: 'Equirectangular Reflection',
+			[ THREE.EquirectangularRefractionMapping ]: 'Equirectangular Refraction',
+			[ THREE.CubeReflectionMapping ]: 'Cube Reflection',
+			[ THREE.CubeRefractionMapping ]: 'Cube Refraction',
+			[ THREE.CubeUVReflectionMapping ]: 'CubeUV Reflection'
+		} ).setValue( texture.mapping ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/mapping' ), this.mapping ) );
+
+		const wrapOptions = {
+			[ THREE.RepeatWrapping ]: 'Repeat',
+			[ THREE.ClampToEdgeWrapping ]: 'Clamp To Edge',
+			[ THREE.MirroredRepeatWrapping ]: 'Mirrored Repeat'
+		};
+
+		this.wrapS = new UISelect().setOptions( wrapOptions ).setValue( texture.wrapS ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/wrapS' ), this.wrapS ) );
+
+		this.wrapT = new UISelect().setOptions( wrapOptions ).setValue( texture.wrapT ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/wrapT' ), this.wrapT ) );
+
+		// Filtering group
+
+		form.add( createGroupHeading( this.strings.getKey( 'dialog/texture/group/filtering' ) ) );
+
+		this.minFilter = new UISelect().setOptions( {
+			[ THREE.NearestFilter ]: 'Nearest',
+			[ THREE.NearestMipmapNearestFilter ]: 'Nearest Mipmap Nearest',
+			[ THREE.NearestMipmapLinearFilter ]: 'Nearest Mipmap Linear',
+			[ THREE.LinearFilter ]: 'Linear',
+			[ THREE.LinearMipmapNearestFilter ]: 'Linear Mipmap Nearest',
+			[ THREE.LinearMipmapLinearFilter ]: 'Linear Mipmap Linear'
+		} ).setValue( texture.minFilter ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/minFilter' ), this.minFilter ) );
+
+		this.magFilter = new UISelect().setOptions( {
+			[ THREE.NearestFilter ]: 'Nearest',
+			[ THREE.LinearFilter ]: 'Linear'
+		} ).setValue( texture.magFilter ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/magFilter' ), this.magFilter ) );
+
+		this.anisotropy = new UINumber( texture.anisotropy ).setPrecision( 0 ).setRange( 1, 16 ).setNudge( 1 ).setStep( 1 ).setWidth( '60px' ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/anisotropy' ), this.anisotropy ) );
+
+		// Transform group
+
+		form.add( createGroupHeading( this.strings.getKey( 'dialog/texture/group/transform' ) ) );
+
+		this.offsetX = new UINumber( texture.offset.x ).setWidth( '60px' ).onChange( updatePreview );
+		this.offsetY = new UINumber( texture.offset.y ).setWidth( '60px' ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/offset' ), this.offsetX, this.offsetY ) );
+
+		this.repeatX = new UINumber( texture.repeat.x ).setWidth( '60px' ).onChange( updatePreview );
+		this.repeatY = new UINumber( texture.repeat.y ).setWidth( '60px' ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/repeat' ), this.repeatX, this.repeatY ) );
+
+		this.centerX = new UINumber( texture.center.x ).setWidth( '60px' ).onChange( updatePreview );
+		this.centerY = new UINumber( texture.center.y ).setWidth( '60px' ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/center' ), this.centerX, this.centerY ) );
+
+		this.rotation = new UINumber( texture.rotation * THREE.MathUtils.RAD2DEG ).setStep( 10 ).setNudge( 0.1 ).setUnit( '°' ).setWidth( '60px' ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/rotation' ), this.rotation ) );
+
+		// Color group
+
+		form.add( createGroupHeading( this.strings.getKey( 'dialog/texture/group/color' ) ) );
+
+		this.premultiplyAlpha = new UICheckbox( texture.premultiplyAlpha ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/premultiplyAlpha' ), this.premultiplyAlpha ) );
+
+		this.colorSpace = new UISelect().setOptions( {
+			[ THREE.NoColorSpace ]: 'No Color Space',
+			[ THREE.SRGBColorSpace ]: 'sRGB',
+			[ THREE.LinearSRGBColorSpace ]: 'Linear sRGB'
+		} ).setValue( texture.colorSpace ).onChange( updatePreview );
+		form.add( createRow( this.strings.getKey( 'dialog/texture/colorSpace' ), this.colorSpace ) );
+
+		updatePreview();
+
+		// Buttons
+
+		const buttonsRow = new UIDiv();
+		buttonsRow.setClass( 'Dialog-buttons' );
+		body.add( buttonsRow );
+
+		const okButton = new UIButton( this.strings.getKey( 'dialog/ok' ) );
+		okButton.setWidth( '80px' );
+		okButton.onClick( () => this.confirm() );
+		buttonsRow.add( okButton );
+
+		const cancelButton = new UIButton( this.strings.getKey( 'dialog/cancel' ) );
+		cancelButton.setWidth( '80px' );
+		cancelButton.setMarginLeft( '8px' );
+		cancelButton.onClick( () => this.cancel() );
+		buttonsRow.add( cancelButton );
+
+		// Promise handlers
+
+		this.resolve = null;
+		this.reject = null;
+
+	}
+
+	show() {
+
+		document.body.appendChild( this.dom );
+
+		return new Promise( ( resolve, reject ) => {
+
+			this.resolve = resolve;
+			this.reject = reject;
+
+		} );
+
+	}
+
+	getCurrentParameters() {
+
+		return {
+			mapping: parseInt( this.mapping.getValue() ),
+			wrapS: parseInt( this.wrapS.getValue() ),
+			wrapT: parseInt( this.wrapT.getValue() ),
+			magFilter: parseInt( this.magFilter.getValue() ),
+			minFilter: parseInt( this.minFilter.getValue() ),
+			anisotropy: this.anisotropy.getValue(),
+			offset: { x: this.offsetX.getValue(), y: this.offsetY.getValue() },
+			repeat: { x: this.repeatX.getValue(), y: this.repeatY.getValue() },
+			center: { x: this.centerX.getValue(), y: this.centerY.getValue() },
+			rotation: this.rotation.getValue() * THREE.MathUtils.DEG2RAD,
+			premultiplyAlpha: this.premultiplyAlpha.getValue(),
+			colorSpace: this.colorSpace.getValue()
+		};
+
+	}
+
+	updatePreview() {
+
+		applyParameters( this.previewTexture, this.getCurrentParameters() );
+
+		const rendered = renderToCanvas( this.previewTexture );
+
+		const canvas = this.previewCanvas;
+		const context = this.previewContext;
+		context.clearRect( 0, 0, canvas.width, canvas.height );
+
+		if ( rendered.width === 0 || rendered.height === 0 ) return;
+
+		const scale = Math.min( canvas.width / rendered.width, canvas.height / rendered.height );
+		const w = rendered.width * scale;
+		const h = rendered.height * scale;
+		context.drawImage( rendered, ( canvas.width - w ) / 2, ( canvas.height - h ) / 2, w, h );
+
+	}
+
+	confirm() {
+
+		const result = this.getCurrentParameters();
+
+		this.previewTexture.dispose();
+		this.dom.remove();
+
+		if ( this.resolve ) this.resolve( result );
+
+	}
+
+	cancel() {
+
+		this.previewTexture.dispose();
+		this.dom.remove();
+
+		if ( this.reject ) this.reject( new Error( 'Texture parameters edit cancelled' ) );
+
+	}
+
+}
+
+function createRow( label, ...inputs ) {
+
+	const row = new UIRow();
+	row.add( new UIText( label ).setClass( 'Label' ) );
+
+	for ( const input of inputs ) {
+
+		row.add( input );
+
+	}
+
+	return row;
+
+}
+
+function createGroupHeading( label ) {
+
+	const heading = new UIText( label );
+	heading.setClass( 'TextureParametersDialog-groupHeading' );
+	heading.setStyle( 'display', [ 'block' ] );
+	return heading;
+
+}
+
+function applyParameters( texture, p ) {
+
+	texture.mapping = p.mapping;
+	texture.wrapS = p.wrapS;
+	texture.wrapT = p.wrapT;
+	texture.magFilter = p.magFilter;
+	texture.minFilter = p.minFilter;
+	texture.anisotropy = p.anisotropy;
+	texture.offset.set( p.offset.x, p.offset.y );
+	texture.repeat.set( p.repeat.x, p.repeat.y );
+	texture.center.set( p.center.x, p.center.y );
+	texture.rotation = p.rotation;
+	texture.premultiplyAlpha = p.premultiplyAlpha;
+	texture.colorSpace = p.colorSpace;
+	texture.needsUpdate = true;
+
+}
+
+export { TextureParametersDialog };

package/src/editor/js/Toolbar.js

@@ -0,0 +1,75 @@
+import { UIPanel, UIButton } from './libs/ui.js';
+
+function Toolbar( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'toolbar' );
+
+	// translate / rotate / scale
+
+	const translateIcon = document.createElement( 'img' );
+	translateIcon.title = strings.getKey( 'toolbar/translate' );
+	translateIcon.src = 'images/translate.svg';
+
+	const translate = new UIButton();
+	translate.dom.className = 'Button selected';
+	translate.dom.appendChild( translateIcon );
+	translate.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'translate' );
+
+	} );
+	container.add( translate );
+
+	const rotateIcon = document.createElement( 'img' );
+	rotateIcon.title = strings.getKey( 'toolbar/rotate' );
+	rotateIcon.src = 'images/rotate.svg';
+
+	const rotate = new UIButton();
+	rotate.dom.appendChild( rotateIcon );
+	rotate.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'rotate' );
+
+	} );
+	container.add( rotate );
+
+	const scaleIcon = document.createElement( 'img' );
+	scaleIcon.title = strings.getKey( 'toolbar/scale' );
+	scaleIcon.src = 'images/scale.svg';
+
+	const scale = new UIButton();
+	scale.dom.appendChild( scaleIcon );
+	scale.onClick( function () {
+
+		signals.transformModeChanged.dispatch( 'scale' );
+
+	} );
+	container.add( scale );
+
+	//
+
+	signals.transformModeChanged.add( function ( mode ) {
+
+		translate.dom.classList.remove( 'selected' );
+		rotate.dom.classList.remove( 'selected' );
+		scale.dom.classList.remove( 'selected' );
+
+		switch ( mode ) {
+
+			case 'translate': translate.dom.classList.add( 'selected' ); break;
+			case 'rotate': rotate.dom.classList.add( 'selected' ); break;
+			case 'scale': scale.dom.classList.add( 'selected' ); break;
+
+		}
+
+	} );
+
+	return container;
+
+}
+
+export { Toolbar };

package/src/editor/js/Viewport.Controls.js

@@ -0,0 +1,98 @@
+import { UIPanel, UISelect } from './libs/ui.js';
+
+function ViewportControls( editor ) {
+
+	const signals = editor.signals;
+
+	const container = new UIPanel();
+	container.setPosition( 'absolute' );
+	container.setRight( '10px' );
+	container.setTop( '10px' );
+
+	// camera
+
+	const cameraSelect = new UISelect();
+	cameraSelect.setMarginRight( '10px' );
+	cameraSelect.onChange( function () {
+
+		editor.setViewportCamera( this.getValue() );
+
+	} );
+	container.add( cameraSelect );
+
+	signals.cameraAdded.add( update );
+	signals.cameraRemoved.add( update );
+	signals.objectChanged.add( function ( object ) {
+
+		if ( object.isCamera ) {
+
+			updateCameraList();
+
+		}
+
+	} );
+
+	// shading
+
+	const shadingSelect = new UISelect();
+	shadingSelect.setOptions( { 'realistic': 'realistic', 'solid': 'solid', 'normals': 'normals', 'wireframe': 'wireframe' } );
+	shadingSelect.setValue( 'solid' );
+	shadingSelect.onChange( function () {
+
+		editor.setViewportShading( this.getValue() );
+
+	} );
+	container.add( shadingSelect );
+
+	signals.editorCleared.add( function () {
+
+		editor.setViewportCamera( editor.camera.uuid );
+
+		shadingSelect.setValue( 'solid' );
+		editor.setViewportShading( shadingSelect.getValue() );
+
+	} );
+
+	signals.cameraResetted.add( update );
+
+	update();
+
+	//
+
+	function updateCameraList() {
+
+		const options = {};
+
+		const cameras = editor.cameras;
+
+		for ( const key in cameras ) {
+
+			const camera = cameras[ key ];
+			options[ camera.uuid ] = camera.name;
+
+		}
+
+		cameraSelect.setOptions( options );
+
+		const selectedCamera = ( editor.viewportCamera.uuid in options )
+			? editor.viewportCamera
+			: editor.camera;
+
+		cameraSelect.setValue( selectedCamera.uuid );
+
+		return selectedCamera;
+
+	}
+
+	function update() {
+
+		const selectedCamera = updateCameraList();
+		editor.setViewportCamera( selectedCamera.uuid );
+
+	}
+
+	return container;
+
+}
+
+export { ViewportControls };

package/src/editor/js/Viewport.Info.js

@@ -0,0 +1,144 @@
+import { UIPanel, UIBreak, UIText } from './libs/ui.js';
+
+function ViewportInfo( editor ) {
+
+	const signals = editor.signals;
+	const strings = editor.strings;
+
+	const container = new UIPanel();
+	container.setId( 'info' );
+	container.setPosition( 'absolute' );
+	container.setLeft( '10px' );
+	container.setBottom( '50px' );
+	container.setFontSize( '12px' );
+	container.setColor( '#fff' );
+	container.setTextTransform( 'lowercase' );
+
+	const objectsText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const verticesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const trianglesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const frametimeText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' );
+	const samplesText = new UIText( '0' ).setTextAlign( 'right' ).setWidth( '60px' ).setMarginRight( '6px' ).setHidden( true );
+
+	const objectsUnitText = new UIText( strings.getKey( 'viewport/info/objects' ) );
+	const verticesUnitText = new UIText( strings.getKey( 'viewport/info/vertices' ) );
+	const trianglesUnitText = new UIText( strings.getKey( 'viewport/info/triangles' ) );
+	const samplesUnitText = new UIText( strings.getKey( 'viewport/info/samples' ) ).setHidden( true );
+
+	container.add( objectsText, objectsUnitText, new UIBreak() );
+	container.add( verticesText, verticesUnitText, new UIBreak() );
+	container.add( trianglesText, trianglesUnitText, new UIBreak() );
+	container.add( frametimeText, new UIText( strings.getKey( 'viewport/info/rendertime' ) ), new UIBreak() );
+	container.add( samplesText, samplesUnitText, new UIBreak() );
+
+	signals.objectAdded.add( update );
+	signals.objectRemoved.add( update );
+	signals.objectChanged.add( update );
+	signals.geometryChanged.add( update );
+	signals.sceneRendered.add( updateFrametime );
+
+	//
+
+	const pluralRules = new Intl.PluralRules( editor.config.getKey( 'language' ) );
+
+	//
+
+	function update() {
+
+		const scene = editor.scene;
+
+		let objects = 0, vertices = 0, triangles = 0;
+
+		for ( let i = 0, l = scene.children.length; i < l; i ++ ) {
+
+			const object = scene.children[ i ];
+
+			object.traverseVisible( function ( object ) {
+
+				objects ++;
+
+				if ( object.isMesh || object.isPoints ) {
+
+					const geometry = object.geometry;
+					const positionAttribute = geometry.attributes.position;
+
+					// update counts only if vertex data are defined
+
+					if ( positionAttribute !== undefined && positionAttribute !== null ) {
+
+						vertices += positionAttribute.count;
+
+					}
+
+					if ( object.isMesh ) {
+
+						if ( geometry.index !== null ) {
+
+							triangles += geometry.index.count / 3;
+
+						} else if ( positionAttribute !== undefined && positionAttribute !== null ) {
+
+							triangles += positionAttribute.count / 3;
+
+						}
+
+					}
+
+				}
+
+			} );
+
+		}
+
+		objectsText.setValue( editor.utils.formatNumber( objects ) );
+		verticesText.setValue( editor.utils.formatNumber( vertices ) );
+		trianglesText.setValue( editor.utils.formatNumber( triangles ) );
+
+		const pluralRules = new Intl.PluralRules( editor.config.getKey( 'language' ) );
+
+		const objectsStringKey = ( pluralRules.select( objects ) === 'one' ) ? 'viewport/info/object' : 'viewport/info/objects';
+		objectsUnitText.setValue( strings.getKey( objectsStringKey ) );
+
+		const verticesStringKey = ( pluralRules.select( vertices ) === 'one' ) ? 'viewport/info/vertex' : 'viewport/info/vertices';
+		verticesUnitText.setValue( strings.getKey( verticesStringKey ) );
+
+		const trianglesStringKey = ( pluralRules.select( triangles ) === 'one' ) ? 'viewport/info/triangle' : 'viewport/info/triangles';
+		trianglesUnitText.setValue( strings.getKey( trianglesStringKey ) );
+
+	}
+
+	function updateFrametime( frametime ) {
+
+		frametimeText.setValue( Number( frametime ).toFixed( 2 ) );
+
+	}
+
+	//
+
+	editor.signals.pathTracerUpdated.add( function ( samples ) {
+
+		samples = Math.floor( samples );
+
+		samplesText.setValue( samples );
+
+		const samplesStringKey = ( pluralRules.select( samples ) === 'one' ) ? 'viewport/info/sample' : 'viewport/info/samples';
+		samplesUnitText.setValue( strings.getKey( samplesStringKey ) );
+
+	} );
+
+	editor.signals.viewportShadingChanged.add( function () {
+
+		const isRealisticShading = ( editor.viewportShading === 'realistic' );
+
+		samplesText.setHidden( ! isRealisticShading );
+		samplesUnitText.setHidden( ! isRealisticShading );
+
+		container.setBottom( isRealisticShading ? '62px' : '50px' );
+
+	} );
+
+	return container;
+
+}
+
+export { ViewportInfo };

package/src/editor/js/Viewport.Pathtracer.js

@@ -0,0 +1,27 @@
+class ViewportPathtracer {
+
+	constructor( renderer ) {}
+
+	init( scene, camera ) {}
+
+	reset() {}
+
+	setSize( width, height ) {}
+
+	setBackground( background, blurriness ) {}
+
+	setEnvironment( environment ) {}
+
+	updateMaterials() {}
+
+	update() {}
+
+	getSamples() {
+
+		return 0;
+
+	}
+
+}
+
+export { ViewportPathtracer };

package/src/editor/js/Viewport.ViewHelper.js

@@ -0,0 +1,41 @@
+import { UIPanel } from './libs/ui.js';
+
+import { ViewHelper as ViewHelperBase } from 'three/addons/helpers/ViewHelper.js';
+
+class ViewHelper extends ViewHelperBase {
+
+	constructor( editorCamera, container ) {
+
+		super( editorCamera, container.dom );
+
+		this.location.top = 30;
+
+		const panel = new UIPanel();
+		panel.setId( 'viewHelper' );
+		panel.setPosition( 'absolute' );
+		panel.setRight( '0px' );
+		panel.setTop( '30px' );
+		panel.setHeight( '128px' );
+		panel.setWidth( '128px' );
+
+		panel.dom.addEventListener( 'pointerup', ( event ) => {
+
+			event.stopPropagation();
+
+			this.handleClick( event );
+
+		} );
+
+		panel.dom.addEventListener( 'pointerdown', function ( event ) {
+
+			event.stopPropagation();
+
+		} );
+
+		container.add( panel );
+
+	}
+
+}
+
+export { ViewHelper };

package/src/editor/js/Viewport.XR.js

@@ -0,0 +1,7 @@
+function XR( editor, controls ) {
+
+	// WebXR module is optional and not bundled in this library build.
+
+}
+
+export { XR };