123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855 |
- import * as THREE from 'three';
- import { KTX2Loader } from 'three/addons/loaders/KTX2Loader.js';
- import { RGBELoader } from 'three/addons/loaders/RGBELoader.js';
- import { TGALoader } from 'three/addons/loaders/TGALoader.js';
- import { FullScreenQuad } from 'three/addons/postprocessing/Pass.js';
- import { UISpan, UIDiv, UIRow, UIButton, UICheckbox, UIText, UINumber } from './ui.js';
- import { MoveObjectCommand } from '../commands/MoveObjectCommand.js';
- const cache = new Map();
- class UITexture extends UISpan {
- constructor( editor ) {
- super();
- const scope = this;
- const form = document.createElement( 'form' );
- const input = document.createElement( 'input' );
- input.type = 'file';
- input.addEventListener( 'change', function ( event ) {
- loadFile( event.target.files[ 0 ] );
- } );
- form.appendChild( input );
- const canvas = document.createElement( 'canvas' );
- canvas.width = 32;
- canvas.height = 16;
- canvas.style.cursor = 'pointer';
- canvas.style.marginRight = '5px';
- canvas.style.border = '1px solid #888';
- canvas.addEventListener( 'click', function () {
- input.click();
- } );
- canvas.addEventListener( 'drop', function ( event ) {
- event.preventDefault();
- event.stopPropagation();
- loadFile( event.dataTransfer.files[ 0 ] );
- } );
- this.dom.appendChild( canvas );
- function loadFile( file ) {
- const extension = file.name.split( '.' ).pop().toLowerCase();
- const reader = new FileReader();
- const hash = `${file.lastModified}_${file.size}_${file.name}`;
- if ( cache.has( hash ) ) {
- const texture = cache.get( hash );
- scope.setValue( texture );
- if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
- } else if ( extension === 'hdr' || extension === 'pic' ) {
- reader.addEventListener( 'load', function ( event ) {
- // assuming RGBE/Radiance HDR image format
- const loader = new RGBELoader();
- loader.load( event.target.result, function ( hdrTexture ) {
- hdrTexture.sourceFile = file.name;
- cache.set( hash, hdrTexture );
- scope.setValue( hdrTexture );
- if ( scope.onChangeCallback ) scope.onChangeCallback( hdrTexture );
- } );
- } );
- reader.readAsDataURL( file );
- } else if ( extension === 'tga' ) {
- reader.addEventListener( 'load', function ( event ) {
- const loader = new TGALoader();
- loader.load( event.target.result, function ( texture ) {
- texture.colorSpace = THREE.SRGBColorSpace;
- texture.sourceFile = file.name;
- cache.set( hash, texture );
- scope.setValue( texture );
- if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
- } );
- }, false );
- reader.readAsDataURL( file );
- } else if ( extension === 'ktx2' ) {
- reader.addEventListener( 'load', function ( event ) {
- const arrayBuffer = event.target.result;
- const blobURL = URL.createObjectURL( new Blob( [ arrayBuffer ] ) );
- const ktx2Loader = new KTX2Loader();
- ktx2Loader.setTranscoderPath( '../../examples/jsm/libs/basis/' );
- editor.signals.rendererDetectKTX2Support.dispatch( ktx2Loader );
- ktx2Loader.load( blobURL, function ( texture ) {
- texture.colorSpace = THREE.SRGBColorSpace;
- texture.sourceFile = file.name;
- texture.needsUpdate = true;
- cache.set( hash, texture );
- scope.setValue( texture );
- if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
- ktx2Loader.dispose();
- } );
- } );
- reader.readAsArrayBuffer( file );
- } else if ( file.type.match( 'image.*' ) ) {
- reader.addEventListener( 'load', function ( event ) {
- const image = document.createElement( 'img' );
- image.addEventListener( 'load', function () {
- const texture = new THREE.Texture( this );
- texture.sourceFile = file.name;
- texture.needsUpdate = true;
- cache.set( hash, texture );
- scope.setValue( texture );
- if ( scope.onChangeCallback ) scope.onChangeCallback( texture );
- }, false );
- image.src = event.target.result;
- }, false );
- reader.readAsDataURL( file );
- }
- form.reset();
- }
- this.texture = null;
- this.onChangeCallback = null;
- }
- getValue() {
- return this.texture;
- }
- setValue( texture ) {
- const canvas = this.dom.children[ 0 ];
- const context = canvas.getContext( '2d' );
- // Seems like context can be null if the canvas is not visible
- if ( context ) {
- // Always clear the context before set new texture, because new texture may has transparency
- context.clearRect( 0, 0, canvas.width, canvas.height );
- }
- if ( texture !== null ) {
- const image = texture.image;
- if ( image !== undefined && image !== null && image.width > 0 ) {
- canvas.title = texture.sourceFile;
- const scale = canvas.width / image.width;
- if ( texture.isDataTexture || texture.isCompressedTexture ) {
- const canvas2 = renderToCanvas( texture );
- context.drawImage( canvas2, 0, 0, image.width * scale, image.height * scale );
- } else {
- context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
- }
- } else {
- canvas.title = texture.sourceFile + ' (error)';
- }
- } else {
- canvas.title = 'empty';
- }
- this.texture = texture;
- }
- setColorSpace( colorSpace ) {
- const texture = this.getValue();
- if ( texture !== null ) {
- texture.colorSpace = colorSpace;
- }
- return this;
- }
- onChange( callback ) {
- this.onChangeCallback = callback;
- return this;
- }
- }
- class UIOutliner extends UIDiv {
- constructor( editor ) {
- super();
- this.dom.className = 'Outliner';
- this.dom.tabIndex = 0; // keyup event is ignored without setting tabIndex
- const scope = this;
- // hack
- this.scene = editor.scene;
- // Prevent native scroll behavior
- this.dom.addEventListener( 'keydown', function ( event ) {
- switch ( event.code ) {
- case 'ArrowUp':
- case 'ArrowDown':
- event.preventDefault();
- event.stopPropagation();
- break;
- }
- } );
- // Keybindings to support arrow navigation
- this.dom.addEventListener( 'keyup', function ( event ) {
- switch ( event.code ) {
- case 'ArrowUp':
- scope.selectIndex( scope.selectedIndex - 1 );
- break;
- case 'ArrowDown':
- scope.selectIndex( scope.selectedIndex + 1 );
- break;
- }
- } );
- this.editor = editor;
- this.options = [];
- this.selectedIndex = - 1;
- this.selectedValue = null;
- }
- selectIndex( index ) {
- if ( index >= 0 && index < this.options.length ) {
- this.setValue( this.options[ index ].value );
- const changeEvent = new Event( 'change', { bubbles: true, cancelable: true } );
- this.dom.dispatchEvent( changeEvent );
- }
- }
- setOptions( options ) {
- const scope = this;
- while ( scope.dom.children.length > 0 ) {
- scope.dom.removeChild( scope.dom.firstChild );
- }
- function onClick() {
- scope.setValue( this.value );
- const changeEvent = new Event( 'change', { bubbles: true, cancelable: true } );
- scope.dom.dispatchEvent( changeEvent );
- }
- // Drag
- let currentDrag;
- function onDrag() {
- currentDrag = this;
- }
- function onDragStart( event ) {
- event.dataTransfer.setData( 'text', 'foo' );
- }
- function onDragOver( event ) {
- if ( this === currentDrag ) return;
- const area = event.offsetY / this.clientHeight;
- if ( area < 0.25 ) {
- this.className = 'option dragTop';
- } else if ( area > 0.75 ) {
- this.className = 'option dragBottom';
- } else {
- this.className = 'option drag';
- }
- }
- function onDragLeave() {
- if ( this === currentDrag ) return;
- this.className = 'option';
- }
- function onDrop( event ) {
- if ( this === currentDrag || currentDrag === undefined ) return;
- this.className = 'option';
- const scene = scope.scene;
- const object = scene.getObjectById( currentDrag.value );
- const area = event.offsetY / this.clientHeight;
- if ( area < 0.25 ) {
- const nextObject = scene.getObjectById( this.value );
- moveObject( object, nextObject.parent, nextObject );
- } else if ( area > 0.75 ) {
- let nextObject, parent;
- if ( this.nextSibling !== null ) {
- nextObject = scene.getObjectById( this.nextSibling.value );
- parent = nextObject.parent;
- } else {
- // end of list (no next object)
- nextObject = null;
- parent = scene.getObjectById( this.value ).parent;
- }
- moveObject( object, parent, nextObject );
- } else {
- const parentObject = scene.getObjectById( this.value );
- moveObject( object, parentObject );
- }
- }
- function moveObject( object, newParent, nextObject ) {
- if ( nextObject === null ) nextObject = undefined;
- let newParentIsChild = false;
- object.traverse( function ( child ) {
- if ( child === newParent ) newParentIsChild = true;
- } );
- if ( newParentIsChild ) return;
- const editor = scope.editor;
- editor.execute( new MoveObjectCommand( editor, object, newParent, nextObject ) );
- const changeEvent = new Event( 'change', { bubbles: true, cancelable: true } );
- scope.dom.dispatchEvent( changeEvent );
- }
- //
- scope.options = [];
- for ( let i = 0; i < options.length; i ++ ) {
- const div = options[ i ];
- div.className = 'option';
- scope.dom.appendChild( div );
- scope.options.push( div );
- div.addEventListener( 'click', onClick );
- if ( div.draggable === true ) {
- div.addEventListener( 'drag', onDrag );
- div.addEventListener( 'dragstart', onDragStart ); // Firefox needs this
- div.addEventListener( 'dragover', onDragOver );
- div.addEventListener( 'dragleave', onDragLeave );
- div.addEventListener( 'drop', onDrop );
- }
- }
- return scope;
- }
- getValue() {
- return this.selectedValue;
- }
- setValue( value ) {
- for ( let i = 0; i < this.options.length; i ++ ) {
- const element = this.options[ i ];
- if ( element.value === value ) {
- element.classList.add( 'active' );
- // scroll into view
- const y = element.offsetTop - this.dom.offsetTop;
- const bottomY = y + element.offsetHeight;
- const minScroll = bottomY - this.dom.offsetHeight;
- if ( this.dom.scrollTop > y ) {
- this.dom.scrollTop = y;
- } else if ( this.dom.scrollTop < minScroll ) {
- this.dom.scrollTop = minScroll;
- }
- this.selectedIndex = i;
- } else {
- element.classList.remove( 'active' );
- }
- }
- this.selectedValue = value;
- return this;
- }
- }
- class UIPoints extends UISpan {
- constructor() {
- super();
- this.dom.style.display = 'inline-block';
- this.pointsList = new UIDiv();
- this.add( this.pointsList );
- this.pointsUI = [];
- this.lastPointIdx = 0;
- this.onChangeCallback = null;
- this.update = () => { // bind lexical this
- if ( this.onChangeCallback !== null ) {
- this.onChangeCallback();
- }
- };
- }
- onChange( callback ) {
- this.onChangeCallback = callback;
- return this;
- }
- clear() {
- for ( let i = this.pointsUI.length - 1; i >= 0; -- i ) {
- this.deletePointRow( i, false );
- }
- this.lastPointIdx = 0;
- }
- deletePointRow( idx, needsUpdate = true ) {
- if ( ! this.pointsUI[ idx ] ) return;
- this.pointsList.remove( this.pointsUI[ idx ].row );
- this.pointsUI.splice( idx, 1 );
- if ( needsUpdate === true ) {
- this.update();
- }
- this.lastPointIdx --;
- }
- }
- class UIPoints2 extends UIPoints {
- constructor() {
- super();
- const row = new UIRow();
- this.add( row );
- const addPointButton = new UIButton( '+' );
- addPointButton.onClick( () => {
- if ( this.pointsUI.length === 0 ) {
- this.pointsList.add( this.createPointRow( 0, 0 ) );
- } else {
- const point = this.pointsUI[ this.pointsUI.length - 1 ];
- this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue() ) );
- }
- this.update();
- } );
- row.add( addPointButton );
- }
- getValue() {
- const points = [];
- let count = 0;
- for ( let i = 0; i < this.pointsUI.length; i ++ ) {
- const pointUI = this.pointsUI[ i ];
- if ( ! pointUI ) continue;
- points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
- ++ count;
- pointUI.lbl.setValue( count );
- }
- return points;
- }
- setValue( points, needsUpdate = true ) {
- this.clear();
- for ( let i = 0; i < points.length; i ++ ) {
- const point = points[ i ];
- this.pointsList.add( this.createPointRow( point.x, point.y ) );
- }
- if ( needsUpdate === true ) this.update();
- return this;
- }
- createPointRow( x, y ) {
- const pointRow = new UIDiv();
- const lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
- const txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
- const txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
- const scope = this;
- const btn = new UIButton( '-' ).onClick( function () {
- if ( scope.isEditing ) return;
- const idx = scope.pointsList.getIndexOfChild( pointRow );
- scope.deletePointRow( idx );
- } );
- this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
- ++ this.lastPointIdx;
- pointRow.add( lbl, txtX, txtY, btn );
- return pointRow;
- }
- }
- class UIPoints3 extends UIPoints {
- constructor() {
- super();
- const row = new UIRow();
- this.add( row );
- const addPointButton = new UIButton( '+' );
- addPointButton.onClick( () => {
- if ( this.pointsUI.length === 0 ) {
- this.pointsList.add( this.createPointRow( 0, 0, 0 ) );
- } else {
- const point = this.pointsUI[ this.pointsUI.length - 1 ];
- this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
- }
- this.update();
- } );
- row.add( addPointButton );
- }
- getValue() {
- const points = [];
- let count = 0;
- for ( let i = 0; i < this.pointsUI.length; i ++ ) {
- const pointUI = this.pointsUI[ i ];
- if ( ! pointUI ) continue;
- points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
- ++ count;
- pointUI.lbl.setValue( count );
- }
- return points;
- }
- setValue( points, needsUpdate = true ) {
- this.clear();
- for ( let i = 0; i < points.length; i ++ ) {
- const point = points[ i ];
- this.pointsList.add( this.createPointRow( point.x, point.y, point.z ) );
- }
- if ( needsUpdate === true ) this.update();
- return this;
- }
- createPointRow( x, y, z ) {
- const pointRow = new UIDiv();
- const lbl = new UIText( this.lastPointIdx + 1 ).setWidth( '20px' );
- const txtX = new UINumber( x ).setWidth( '30px' ).onChange( this.update );
- const txtY = new UINumber( y ).setWidth( '30px' ).onChange( this.update );
- const txtZ = new UINumber( z ).setWidth( '30px' ).onChange( this.update );
- const scope = this;
- const btn = new UIButton( '-' ).onClick( function () {
- if ( scope.isEditing ) return;
- const idx = scope.pointsList.getIndexOfChild( pointRow );
- scope.deletePointRow( idx );
- } );
- this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
- ++ this.lastPointIdx;
- pointRow.add( lbl, txtX, txtY, txtZ, btn );
- return pointRow;
- }
- }
- class UIBoolean extends UISpan {
- constructor( boolean, text ) {
- super();
- this.setMarginRight( '4px' );
- this.checkbox = new UICheckbox( boolean );
- this.text = new UIText( text ).setMarginLeft( '3px' );
- this.add( this.checkbox );
- this.add( this.text );
- }
- getValue() {
- return this.checkbox.getValue();
- }
- setValue( value ) {
- return this.checkbox.setValue( value );
- }
- }
- let renderer, fsQuad;
- function renderToCanvas( texture ) {
- if ( renderer === undefined ) {
- renderer = new THREE.WebGLRenderer();
- }
- if ( fsQuad === undefined ) {
- fsQuad = new FullScreenQuad( new THREE.MeshBasicMaterial() );
- }
- const image = texture.image;
- renderer.setSize( image.width, image.height, false );
- fsQuad.material.map = texture;
- fsQuad.render( renderer );
- return renderer.domElement;
- }
- export { UITexture, UIOutliner, UIPoints, UIPoints2, UIPoints3, UIBoolean };
|