super-three 0.133.4 → 0.136.1

package/examples/jsm/node-editor/inputs/ColorEditor.js

@@ -0,0 +1,91 @@
+import { ObjectNode, ColorInput, StringInput, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { ColorNode } from '../../renderers/nodes/Nodes.js';
+
+export class ColorEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new ColorNode();
+
+		super( 'Color', 1, node );
+
+		this.title.setIcon( 'ti ti-palette' );
+
+		const updateFields = ( editing ) => {
+
+			const value = node.value;
+			const hexValue = value.getHex();
+
+			if ( editing !== 'color' ) {
+
+				field.setValue( hexValue, false );
+
+			}
+
+			if ( editing !== 'hex' ) {
+
+				hexField.setValue( '#' + hexValue.toString( 16 ).toUpperCase().padEnd( 6, '0' ), false );
+
+			}
+
+			if ( editing !== 'rgb' ) {
+
+				fieldR.setValue( value.r.toFixed( 3 ), false );
+				fieldG.setValue( value.g.toFixed( 3 ), false );
+				fieldB.setValue( value.b.toFixed( 3 ), false );
+
+			}
+
+		};
+
+		const field = new ColorInput( 0xFFFFFF ).onChange( () => {
+
+			node.value.setHex( field.getValue() );
+
+			updateFields( 'picker' );
+
+		} );
+
+		const hexField = new StringInput().onChange( () => {
+
+			const value = hexField.getValue();
+
+			if ( value.indexOf( '#' ) === 0 ) {
+
+				const hexStr = value.substr( 1 ).padEnd( 6, '0' );
+
+				node.value.setHex( parseInt( hexStr, 16 ) );
+
+				updateFields( 'hex' );
+
+			}
+
+		} );
+
+		hexField.addEventListener( 'blur', () => {
+
+			updateFields();
+
+		} );
+
+		const onChangeRGB = () => {
+
+			node.value.setRGB( fieldR.getValue(), fieldG.getValue(), fieldB.getValue() );
+
+			updateFields( 'rgb' );
+
+		};
+
+		const fieldR = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+		const fieldG = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+		const fieldB = new NumberInput( 1, 0, 1 ).onChange( onChangeRGB );
+
+		this.add( new LabelElement( 'Value' ).add( field ).setSerializable( false ) )
+			.add( new LabelElement( 'Hex' ).add( hexField ).setSerializable( false ) )
+			.add( new LabelElement( 'RGB' ).add( fieldR ).add( fieldG ).add( fieldB ) );
+
+		updateFields();
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/FloatEditor.js

@@ -0,0 +1,24 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { FloatNode } from '../../renderers/nodes/Nodes.js';
+
+export class FloatEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new FloatNode();
+
+		super( 'Float', 1, node, 250 );
+
+		this.title.setIcon( 'ti ti-box-multiple-1' );
+
+		const field = new NumberInput().onChange( () => {
+
+			node.value = field.getValue();
+
+		} );
+
+		this.add( new LabelElement( 'Value' ).add( field ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/SliderEditor.js

@@ -0,0 +1,68 @@
+import { ObjectNode, ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { FloatNode } from '../../renderers/nodes/Nodes.js';
+
+export class SliderEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new FloatNode();
+
+		super( 'Slider', 1, node );
+
+		this.title.setIcon( 'ti ti-adjustments-horizontal' );
+
+		this.collapse = true;
+
+		const field = new SliderInput( 0, 0, 1 ).onChange( () => {
+
+			node.value = field.getValue();
+
+		} );
+
+		const updateRange = () => {
+
+			const min = minInput.getValue();
+			const max = maxInput.getValue();
+
+			if ( min <= max ) {
+
+				field.setRange( min, max );
+
+			} else {
+
+				maxInput.setValue( min );
+
+			}
+
+		};
+
+		const minInput = new NumberInput().onChange( updateRange );
+		const maxInput = new NumberInput( 1 ).onChange( updateRange );
+
+		const minElement = new LabelElement( 'Min.' ).add( minInput ).setVisible( false );
+		const maxElement = new LabelElement( 'Max.' ).add( maxInput ).setVisible( false );
+
+		const moreElement = new Element().add( new ButtonInput( 'More' ).onClick( () => {
+
+			minElement.setVisible( true );
+			maxElement.setVisible( true );
+			moreElement.setVisible( false );
+
+		} ) ).setSerializable( false );
+
+		this.add( new LabelElement( 'Value' ).add( field ) )
+			.add( minElement )
+			.add( maxElement )
+			.add( moreElement );
+
+		this.onBlur( () => {
+
+			minElement.setVisible( false );
+			maxElement.setVisible( false );
+			moreElement.setVisible( true );
+
+		} );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector2Editor.js

@@ -0,0 +1,28 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector2Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector2Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector2Node();
+
+		super( 'Vector 2', 2, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-2' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector3Editor.js

@@ -0,0 +1,30 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector3Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector3Node();
+
+		super( 'Vector 3', 3, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-3' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+			node.value.z = fieldZ.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+		const fieldZ = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ).add( fieldZ ) );
+
+	}
+
+}

package/examples/jsm/node-editor/inputs/Vector4Editor.js

@@ -0,0 +1,37 @@
+import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { Vector4Node } from '../../renderers/nodes/Nodes.js';
+
+export class Vector4Editor extends ObjectNode {
+
+	constructor() {
+
+		const node = new Vector4Node();
+
+		super( 'Vector 4', 4, node );
+
+		this.title.setIcon( 'ti ti-box-multiple-4' );
+
+		const onUpdate = () => {
+
+			node.value.x = fieldX.getValue();
+			node.value.y = fieldY.getValue();
+			node.value.z = fieldZ.getValue();
+			node.value.w = fieldW.getValue();
+
+		};
+
+		const fieldX = new NumberInput().onChange( onUpdate );
+		const fieldY = new NumberInput().onChange( onUpdate );
+		const fieldZ = new NumberInput().onChange( onUpdate );
+		const fieldW = new NumberInput().onChange( onUpdate );
+
+		this.add( new LabelElement( 'Values' )
+			.add( fieldX )
+			.add( fieldY )
+			.add( fieldZ )
+			.add( fieldW )
+		);
+
+	}
+
+}

package/examples/jsm/node-editor/materials/StandardMaterialEditor.js

@@ -0,0 +1,108 @@
+import { ObjectNode, ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { MeshStandardNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import * as THREE from 'three';
+
+export class StandardMaterialEditor extends ObjectNode {
+
+	constructor() {
+
+		const material = new MeshStandardNodeMaterial();
+
+		super( 'Standard Material', 0, material );
+
+		this.title.setStyle( 'blue' );
+
+		this.setWidth( 300 );
+
+		const color = new LabelElement( 'color' ).setInput( 3 );
+		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
+		const metalness = new LabelElement( 'metalness' ).setInput( 1 );
+		const roughness = new LabelElement( 'roughness' ).setInput( 1 );
+
+		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
+
+			material.color.setHex( input.getValue() );
+
+		} ) );
+
+		opacity.add( new SliderInput( material.opacity, 0, 1 ).onChange( ( input ) => {
+
+			material.opacity = input.getValue();
+
+			this.updateTransparent();
+
+		} ) );
+
+		metalness.add( new SliderInput( material.metalness, 0, 1 ).onChange( ( input ) => {
+
+			material.metalness = input.getValue();
+
+		} ) );
+
+		roughness.add( new SliderInput( material.roughness, 0, 1 ).onChange( ( input ) => {
+
+			material.roughness = input.getValue();
+
+		} ) );
+
+		color.onConnect( () => this.update(), true );
+		opacity.onConnect( () => this.update(), true );
+		metalness.onConnect( () => this.update(), true );
+		roughness.onConnect( () => this.update(), true );
+
+		this.add( color )
+			.add( opacity )
+			.add( metalness )
+			.add( roughness );
+
+		this.color = color;
+		this.opacity = opacity;
+		this.metalness = metalness;
+		this.roughness = roughness;
+
+		this.material = material;
+
+		this.update();
+
+	}
+
+	update() {
+
+		const { material, color, opacity, roughness, metalness } = this;
+
+		color.setEnabledInputs( ! color.linkedExtra );
+		opacity.setEnabledInputs( ! opacity.linkedExtra );
+		roughness.setEnabledInputs( ! roughness.linkedExtra );
+		metalness.setEnabledInputs( ! metalness.linkedExtra );
+
+		material.colorNode = color.linkedExtra;
+
+		material.opacityNode = opacity.linkedExtra || null;
+
+		material.metalnessNode = metalness.linkedExtra;
+		material.roughnessNode = roughness.linkedExtra;
+
+		material.dispose();
+
+		this.updateTransparent();
+
+		// TODO: Fix on NodeMaterial System
+		material.customProgramCacheKey = () => {
+
+			return THREE.MathUtils.generateUUID();
+
+		};
+
+	}
+
+	updateTransparent() {
+
+		const { material, opacity } = this;
+
+		material.transparent = opacity.linkedExtra || material.opacity < 1 ? true : false;
+
+		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
+
+	}
+
+}

package/examples/jsm/node-editor/math/DotEditor.js

@@ -0,0 +1,36 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class DotEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.DOT, NULL_VALUE, NULL_VALUE );
+
+		super( 'Dot Product', 1, node );
+
+		this.setWidth( 200 );
+
+		const aElement = new LabelElement( 'A' ).setInput( 3 );
+		const bElement = new LabelElement( 'B' ).setInput( 3 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/InvertEditor.js

@@ -0,0 +1,38 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new FloatNode();
+
+export class InvertEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.INVERT, DEFAULT_VALUE );
+
+		super( 'Invert / Negate', 1, node );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Invert ( 1 - Source )', value: MathNode.INVERT },
+			{ name: 'Negate ( - Source )', value: MathNode.NEGATE }
+		] ).onChange( () => {
+
+			node.method = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const input = new LabelElement( 'Source' ).setInput( 1 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Method' ).add( optionsField ) )
+			.add( input );
+
+	}
+
+}

package/examples/jsm/node-editor/math/LimiterEditor.js

@@ -0,0 +1,48 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class LimiterEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.MAX, NULL_VALUE, NULL_VALUE );
+
+		super( 'Limiter', 1, node, 250 );
+
+		const methodInput = new SelectInput( [
+			{ name: 'Max', value: MathNode.MAX },
+			{ name: 'Min', value: MathNode.MIN }
+		] );
+
+		methodInput.onChange( ( data ) => {
+
+			node.method = data.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const aElement = new LabelElement( 'A' ).setInput( 1 );
+		const bElement = new LabelElement( 'B' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Method' ).add( methodInput ) )
+			.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/NormalizeEditor.js

@@ -0,0 +1,26 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new Vector3Node();
+
+export class NormalizeEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.NORMALIZE, DEFAULT_VALUE );
+
+		super( 'Normalize', 3, node, 200 );
+
+		const input = new LabelElement( 'Source' ).setInput( 3 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+
+		} );
+
+		this.add( input );
+
+	}
+
+}

package/examples/jsm/node-editor/math/OperatorEditor.js

@@ -0,0 +1,50 @@
+import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class OperatorEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new OperatorNode( '+', NULL_VALUE, NULL_VALUE );
+
+		super( 'Operator', 1, node, 250 );
+
+		const opInput = new SelectInput( [
+			{ name: '+ Addition', value: '+' },
+			{ name: '- Subtraction', value: '-' },
+			{ name: '* Multiplication', value: '*' },
+			{ name: '/ Division', value: '/' }
+		] );
+
+		opInput.onChange( ( data ) => {
+
+			node.op = data.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const aElement = new LabelElement( 'A' ).setInput( 3 );
+		const bElement = new LabelElement( 'B' ).setInput( 3 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( new LabelElement( 'Operator' ).add( opInput ) )
+			.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/PowerEditor.js

@@ -0,0 +1,34 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+export class PowerEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.POW, NULL_VALUE, NULL_VALUE );
+
+		super( 'Power', 1, node, 200 );
+
+		const aElement = new LabelElement( 'A' ).setInput( 1 );
+		const bElement = new LabelElement( 'B' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.linkedExtra || NULL_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement );
+
+	}
+
+}

package/examples/jsm/node-editor/math/TrigonometryEditor.js

@@ -0,0 +1,39 @@
+import { ObjectNode, SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new Vector3Node();
+
+export class TrigonometryEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.SIN, DEFAULT_VALUE );
+
+		super( 'Trigonometry', 1, node, 200 );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Sin', value: MathNode.SIN },
+			{ name: 'Cos', value: MathNode.COS },
+			{ name: 'Tan', value: MathNode.TAN }
+		] ).onChange( () => {
+
+			node.method = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const input = new LabelElement( 'Source' ).setInput( 1 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+
+		} );
+
+		this.add( new Element().add( optionsField ) )
+			.add( input );
+
+	}
+
+}

package/examples/jsm/node-editor/procedural/CheckerEditor.js

@@ -0,0 +1,26 @@
+import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { CheckerNode, UVNode } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_UV = new UVNode();
+
+export class CheckerEditor extends ObjectNode {
+
+	constructor() {
+
+		const node = new CheckerNode( DEFAULT_UV );
+
+		super( 'Checker', 1, node, 200 );
+
+		const field = new LabelElement( 'UV' ).setInput( 2 );
+
+		field.onConnect( () => {
+
+			node.uvNode = field.linkedExtra || DEFAULT_UV;
+
+		} );
+
+		this.add( field );
+
+	}
+
+}