Object3DEditor.js 3.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160
  1. import { NumberInput, StringInput, LabelElement } from '../../libs/flow.module.js';
  2. import { BaseNode } from '../core/BaseNode.js';
  3. import { Group, MathUtils, Vector3 } from 'three';
  4. export class Object3DEditor extends BaseNode {
  5. constructor( object3d = null, name = 'Object 3D' ) {
  6. if ( object3d === null ) {
  7. object3d = new Group();
  8. }
  9. super( name, 1, object3d );
  10. this.defaultPosition = new Vector3();
  11. this.defaultRotation = new Vector3();
  12. this.defaultScale = new Vector3( 100, 100, 100 );
  13. this._initTags();
  14. this._initTransform();
  15. this.onValidElement = () => {};
  16. }
  17. setEditor( editor ) {
  18. if ( this.editor ) {
  19. this.restoreDefault();
  20. }
  21. super.setEditor( editor );
  22. if ( editor ) {
  23. const name = this.nameInput.getValue();
  24. const object3d = editor.scene.getObjectByName( name );
  25. this.value = object3d;
  26. this.updateDefault();
  27. this.restoreDefault();
  28. this.update();
  29. }
  30. return this;
  31. }
  32. get object3d() {
  33. return this.value;
  34. }
  35. _initTags() {
  36. this.nameInput = new StringInput( this.object3d.name ).setReadOnly( true )
  37. .onChange( () => this.object3d.name = this.nameInput.getValue() );
  38. this.add( new LabelElement( 'Name' ).add( this.nameInput ) );
  39. }
  40. _initTransform() {
  41. const update = () => this.update();
  42. const posX = new NumberInput().setTagColor( 'red' ).onChange( update );
  43. const posY = new NumberInput().setTagColor( 'green' ).onChange( update );
  44. const posZ = new NumberInput().setTagColor( 'blue' ).onChange( update );
  45. const rotationStep = 1;
  46. const rotX = new NumberInput().setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
  47. const rotY = new NumberInput().setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
  48. const rotZ = new NumberInput().setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
  49. const scaleX = new NumberInput( 100 ).setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
  50. const scaleY = new NumberInput( 100 ).setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
  51. const scaleZ = new NumberInput( 100 ).setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
  52. this.add( new LabelElement( 'Position' ).add( posX ).add( posY ).add( posZ ) )
  53. .add( new LabelElement( 'Rotation' ).add( rotX ).add( rotY ).add( rotZ ) )
  54. .add( new LabelElement( 'Scale' ).add( scaleX ).add( scaleY ).add( scaleZ ) );
  55. this.posX = posX;
  56. this.posY = posY;
  57. this.posZ = posZ;
  58. this.rotX = rotX;
  59. this.rotY = rotY;
  60. this.rotZ = rotZ;
  61. this.scaleX = scaleX;
  62. this.scaleY = scaleY;
  63. this.scaleZ = scaleZ;
  64. }
  65. update() {
  66. const object3d = this.object3d;
  67. if ( object3d ) {
  68. const { position, rotation, scale } = object3d;
  69. position.x = this.posX.getValue();
  70. position.y = this.posY.getValue();
  71. position.z = this.posZ.getValue();
  72. rotation.x = MathUtils.degToRad( this.rotX.getValue() );
  73. rotation.y = MathUtils.degToRad( this.rotY.getValue() );
  74. rotation.z = MathUtils.degToRad( this.rotZ.getValue() );
  75. scale.x = this.scaleX.getValue() / 100;
  76. scale.y = this.scaleY.getValue() / 100;
  77. scale.z = this.scaleZ.getValue() / 100;
  78. }
  79. }
  80. updateDefault() {
  81. const { position, rotation, scale } = this.object3d;
  82. this.defaultPosition = position.clone();
  83. this.defaultRotation = new Vector3( MathUtils.radToDeg( rotation.x ), MathUtils.radToDeg( rotation.y ), MathUtils.radToDeg( rotation.z ) );
  84. this.defaultScale = scale.clone().multiplyScalar( 100 );
  85. }
  86. restoreDefault() {
  87. const position = this.defaultPosition;
  88. const rotation = this.defaultRotation;
  89. const scale = this.defaultScale;
  90. this.posX.setValue( position.x );
  91. this.posY.setValue( position.y );
  92. this.posZ.setValue( position.z );
  93. this.rotX.setValue( rotation.x );
  94. this.rotY.setValue( rotation.y );
  95. this.rotZ.setValue( rotation.z );
  96. this.scaleX.setValue( scale.x );
  97. this.scaleY.setValue( scale.y );
  98. this.scaleZ.setValue( scale.z );
  99. }
  100. }