You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
91 lines
1.8 KiB
91 lines
1.8 KiB
2 years ago
|
import { UIColor, UINumber, UIRow, UIText } from './libs/ui.js';
|
||
|
|
import { SetMaterialColorCommand } from './commands/SetMaterialColorCommand.js';
|
||
|
|
import { SetMaterialValueCommand } from './commands/SetMaterialValueCommand.js';
|
||
|
|
|
||
|
|
function SidebarMaterialColorProperty( editor, property, name ) {
|
||
|
|
|
||
|
|
const signals = editor.signals;
|
||
|
|
|
||
|
|
const container = new UIRow();
|
||
|
|
container.add( new UIText( name ).setWidth( '90px' ) );
|
||
|
|
|
||
|
|
const color = new UIColor().onInput( onChange );
|
||
|
|
container.add( color );
|
||
|
|
|
||
|
|
let intensity;
|
||
|
|
|
||
|
|
if ( property === 'emissive' ) {
|
||
|
|
|
||
|
|
intensity = new UINumber().setWidth( '30px' ).onChange( onChange );
|
||
|
|
container.add( intensity );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
let object = null;
|
||
|
|
let material = null;
|
||
|
|
|
||
|
|
function onChange() {
|
||
|
|
|
||
|
|
if ( material[ property ].getHex() !== color.getHexValue() ) {
|
||
|
|
|
||
|
|
editor.execute( new SetMaterialColorCommand( editor, object, property, color.getHexValue(), 0 /* TODO: currentMaterialSlot */ ) );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
if ( intensity !== undefined ) {
|
||
|
|
|
||
|
|
if ( material[ `${ property }Intensity` ] !== intensity.getValue() ) {
|
||
|
|
|
||
|
|
editor.execute( new SetMaterialValueCommand( editor, object, `${ property }Intensity`, intensity.getValue(), /* TODO: currentMaterialSlot*/ 0 ) );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
function update() {
|
||
|
|
|
||
|
|
if ( object === null ) return;
|
||
|
|
if ( object.material === undefined ) return;
|
||
|
|
|
||
|
|
material = object.material;
|
||
|
|
|
||
|
|
if ( property in material ) {
|
||
|
|
|
||
|
|
color.setHexValue( material[ property ].getHexString() );
|
||
|
|
|
||
|
|
if ( intensity !== undefined ) {
|
||
|
|
|
||
|
|
intensity.setValue( material[ `${ property }Intensity` ] );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
container.setDisplay( '' );
|
||
|
|
|
||
|
|
} else {
|
||
|
|
|
||
|
|
container.setDisplay( 'none' );
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
//
|
||
|
|
|
||
|
|
signals.objectSelected.add( function ( selected ) {
|
||
|
|
|
||
|
|
object = selected;
|
||
|
|
|
||
|
|
update();
|
||
|
|
|
||
|
|
} );
|
||
|
|
|
||
|
|
signals.materialChanged.add( update );
|
||
|
|
|
||
|
|
return container;
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
export { SidebarMaterialColorProperty };
|