123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- 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 );
- }
- }
|