PointsMaterialEditor.js 2.3 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697
  1. import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
  2. import { BaseNode } from '../core/BaseNode.js';
  3. import { PointsNodeMaterial } from '../../renderers/nodes/Nodes.js';
  4. import * as THREE from 'three';
  5. export class PointsMaterialEditor extends BaseNode {
  6. constructor() {
  7. const material = new PointsNodeMaterial( {
  8. depthWrite: false,
  9. transparent: true,
  10. sizeAttenuation: true,
  11. blending: THREE.AdditiveBlending
  12. } );
  13. super( 'Points Material', 1, material );
  14. this.setWidth( 300 );
  15. const color = new LabelElement( 'color' ).setInput( 3 );
  16. const opacity = new LabelElement( 'opacity' ).setInput( 1 );
  17. const size = new LabelElement( 'size' ).setInput( 1 );
  18. const position = new LabelElement( 'position' ).setInput( 3 );
  19. color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
  20. material.color.setHex( input.getValue() );
  21. } ) );
  22. opacity.add( new SliderInput( material.opacity, 0, 1 ).onChange( ( input ) => {
  23. material.opacity = input.getValue();
  24. this.updateTransparent();
  25. } ) );
  26. color.onConnect( () => this.update(), true );
  27. opacity.onConnect( () => this.update(), true );
  28. size.onConnect(() => this.update(), true );
  29. position.onConnect(() => this.update(), true );
  30. this.add( color )
  31. .add( opacity )
  32. .add( size )
  33. .add( position );
  34. this.color = color;
  35. this.opacity = opacity;
  36. this.size = size;
  37. this.position = position;
  38. this.material = material;
  39. this.update();
  40. }
  41. update() {
  42. const { material, color, opacity, size, position } = this;
  43. color.setEnabledInputs( ! color.getLinkedObject() );
  44. opacity.setEnabledInputs( ! opacity.getLinkedObject() );
  45. material.colorNode = color.getLinkedObject();
  46. material.opacityNode = opacity.getLinkedObject() || null;
  47. material.sizeNode = size.getLinkedObject() || null;
  48. material.positionNode = position.getLinkedObject() || null;
  49. material.dispose();
  50. this.updateTransparent();
  51. // TODO: Fix on NodeMaterial System
  52. material.customProgramCacheKey = () => {
  53. return THREE.MathUtils.generateUUID();
  54. };
  55. }
  56. updateTransparent() {
  57. const { material, opacity } = this;
  58. material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
  59. opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
  60. }
  61. }