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.
160 lines
3.9 KiB
160 lines
3.9 KiB
import { NumberInput, StringInput, LabelElement } from '../../libs/flow.module.js';
|
|
import { BaseNode } from '../core/BaseNode.js';
|
|
import { Group, MathUtils, Vector3 } from 'three';
|
|
|
|
export class Object3DEditor extends BaseNode {
|
|
|
|
constructor( object3d = null, name = 'Object 3D' ) {
|
|
|
|
if ( object3d === null ) {
|
|
|
|
object3d = new Group();
|
|
|
|
}
|
|
|
|
super( name, 1, object3d );
|
|
|
|
this.defaultPosition = new Vector3();
|
|
this.defaultRotation = new Vector3();
|
|
this.defaultScale = new Vector3( 100, 100, 100 );
|
|
|
|
this._initTags();
|
|
this._initTransform();
|
|
|
|
this.onValidElement = () => {};
|
|
|
|
}
|
|
|
|
setEditor( editor ) {
|
|
|
|
if ( this.editor ) {
|
|
|
|
this.restoreDefault();
|
|
|
|
}
|
|
|
|
super.setEditor( editor );
|
|
|
|
if ( editor ) {
|
|
|
|
const name = this.nameInput.getValue();
|
|
const object3d = editor.scene.getObjectByName( name );
|
|
|
|
this.value = object3d;
|
|
|
|
this.updateDefault();
|
|
this.restoreDefault();
|
|
this.update();
|
|
|
|
}
|
|
|
|
return this;
|
|
|
|
}
|
|
|
|
get object3d() {
|
|
|
|
return this.value;
|
|
|
|
}
|
|
|
|
_initTags() {
|
|
|
|
this.nameInput = new StringInput( this.object3d.name ).setReadOnly( true )
|
|
.onChange( () => this.object3d.name = this.nameInput.getValue() );
|
|
|
|
this.add( new LabelElement( 'Name' ).add( this.nameInput ) );
|
|
|
|
}
|
|
|
|
_initTransform() {
|
|
|
|
const update = () => this.update();
|
|
|
|
const posX = new NumberInput().setTagColor( 'red' ).onChange( update );
|
|
const posY = new NumberInput().setTagColor( 'green' ).onChange( update );
|
|
const posZ = new NumberInput().setTagColor( 'blue' ).onChange( update );
|
|
|
|
const rotationStep = 1;
|
|
|
|
const rotX = new NumberInput().setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
|
|
const rotY = new NumberInput().setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
|
|
const rotZ = new NumberInput().setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
|
|
|
|
const scaleX = new NumberInput( 100 ).setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
|
|
const scaleY = new NumberInput( 100 ).setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
|
|
const scaleZ = new NumberInput( 100 ).setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
|
|
|
|
this.add( new LabelElement( 'Position' ).add( posX ).add( posY ).add( posZ ) )
|
|
.add( new LabelElement( 'Rotation' ).add( rotX ).add( rotY ).add( rotZ ) )
|
|
.add( new LabelElement( 'Scale' ).add( scaleX ).add( scaleY ).add( scaleZ ) );
|
|
|
|
this.posX = posX;
|
|
this.posY = posY;
|
|
this.posZ = posZ;
|
|
|
|
this.rotX = rotX;
|
|
this.rotY = rotY;
|
|
this.rotZ = rotZ;
|
|
|
|
this.scaleX = scaleX;
|
|
this.scaleY = scaleY;
|
|
this.scaleZ = scaleZ;
|
|
|
|
}
|
|
|
|
update() {
|
|
|
|
const object3d = this.object3d;
|
|
|
|
if ( object3d ) {
|
|
|
|
const { position, rotation, scale } = object3d;
|
|
|
|
position.x = this.posX.getValue();
|
|
position.y = this.posY.getValue();
|
|
position.z = this.posZ.getValue();
|
|
|
|
rotation.x = MathUtils.degToRad( this.rotX.getValue() );
|
|
rotation.y = MathUtils.degToRad( this.rotY.getValue() );
|
|
rotation.z = MathUtils.degToRad( this.rotZ.getValue() );
|
|
|
|
scale.x = this.scaleX.getValue() / 100;
|
|
scale.y = this.scaleY.getValue() / 100;
|
|
scale.z = this.scaleZ.getValue() / 100;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
updateDefault() {
|
|
|
|
const { position, rotation, scale } = this.object3d;
|
|
|
|
this.defaultPosition = position.clone();
|
|
this.defaultRotation = new Vector3( MathUtils.radToDeg( rotation.x ), MathUtils.radToDeg( rotation.y ), MathUtils.radToDeg( rotation.z ) );
|
|
this.defaultScale = scale.clone().multiplyScalar( 100 );
|
|
|
|
}
|
|
|
|
restoreDefault() {
|
|
|
|
const position = this.defaultPosition;
|
|
const rotation = this.defaultRotation;
|
|
const scale = this.defaultScale;
|
|
|
|
this.posX.setValue( position.x );
|
|
this.posY.setValue( position.y );
|
|
this.posZ.setValue( position.z );
|
|
|
|
this.rotX.setValue( rotation.x );
|
|
this.rotY.setValue( rotation.y );
|
|
this.rotZ.setValue( rotation.z );
|
|
|
|
this.scaleX.setValue( scale.x );
|
|
this.scaleY.setValue( scale.y );
|
|
this.scaleZ.setValue( scale.z );
|
|
|
|
}
|
|
|
|
}
|
|
|