super-three 0.136.1 → 0.137.0

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

@@ -1,15 +1,14 @@
-import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { Vector4Node } from '../../renderers/nodes/Nodes.js';
 
-export class Vector4Editor extends ObjectNode {
+export class Vector4Editor extends BaseNode {
 
 	constructor() {
 
 		const node = new Vector4Node();
 
-		super( 'Vector 4', 4, node );
-
-		this.title.setIcon( 'ti ti-box-multiple-4' );
+		super( 'Vector 4', 4, node, 350 );
 
 		const onUpdate = () => {
 
@@ -20,12 +19,12 @@ export class Vector4Editor extends ObjectNode {
 
 		};
 
-		const fieldX = new NumberInput().onChange( onUpdate );
-		const fieldY = new NumberInput().onChange( onUpdate );
-		const fieldZ = new NumberInput().onChange( onUpdate );
-		const fieldW = new NumberInput().onChange( onUpdate );
+		const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
+		const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
+		const fieldZ = new NumberInput().setTagColor( 'blue' ).onChange( onUpdate );
+		const fieldW = new NumberInput().setTagColor( 'white' ).onChange( onUpdate );
 
-		this.add( new LabelElement( 'Values' )
+		this.add( new LabelElement( 'XYZW' )
 			.add( fieldX )
 			.add( fieldY )
 			.add( fieldZ )

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

@@ -0,0 +1,87 @@
+import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MeshBasicNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import * as THREE from 'three';
+
+export class BasicMaterialEditor extends BaseNode {
+
+	constructor() {
+
+		const material = new MeshBasicNodeMaterial();
+
+		super( 'Basic Material', 1, material );
+
+		this.setWidth( 300 );
+
+		const color = new LabelElement( 'color' ).setInput( 3 );
+		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
+		const position = new LabelElement( 'position' ).setInput( 3 );
+
+		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();
+
+		} ) );
+
+		color.onConnect( () => this.update(), true );
+		opacity.onConnect( () => this.update(), true );
+		position.onConnect( () => this.update(), true );
+
+		this.add( color )
+			.add( opacity )
+			.add( position );
+
+		this.color = color;
+		this.opacity = opacity;
+		this.position = position;
+
+		this.material = material;
+
+		this.update();
+
+	}
+
+	update() {
+
+		const { material, color, opacity, position } = this;
+
+		color.setEnabledInputs( ! color.getLinkedObject() );
+		opacity.setEnabledInputs( ! opacity.getLinkedObject() );
+
+		material.colorNode = color.getLinkedObject();
+		material.opacityNode = opacity.getLinkedObject() || null;
+
+		material.positionNode = position.getLinkedObject() || null;
+
+		material.dispose();
+
+		this.updateTransparent();
+
+		// TODO: Fix on NodeMaterial System
+		material.customProgramCacheKey = () => {
+
+			return THREE.MathUtils.generateUUID();
+
+		};
+
+	}
+
+	updateTransparent() {
+
+		const { material, opacity } = this;
+
+		material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+
+		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
+
+	}
+
+}

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

@@ -0,0 +1,97 @@
+import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { PointsNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import * as THREE from 'three';
+
+export class PointsMaterialEditor extends BaseNode {
+
+	constructor() {
+
+		const material = new PointsNodeMaterial( {
+			depthWrite: false,
+			transparent: true,
+			sizeAttenuation: true,
+			blending: THREE.AdditiveBlending
+		} );
+
+		super( 'Points Material', 1, material );
+
+		this.setWidth( 300 );
+
+		const color = new LabelElement( 'color' ).setInput( 3 );
+		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
+		const size = new LabelElement( 'size' ).setInput( 1 );
+		const position = new LabelElement( 'position' ).setInput( 3 );
+
+		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();
+
+		} ) );
+
+		color.onConnect( () => this.update(), true );
+		opacity.onConnect( () => this.update(), true );
+		size.onConnect(() => this.update(), true );
+		position.onConnect(() => this.update(), true );
+
+		this.add( color )
+			.add( opacity )
+			.add( size )
+			.add( position );
+
+		this.color = color;
+		this.opacity = opacity;
+		this.size = size;
+		this.position = position;
+
+		this.material = material;
+
+		this.update();
+
+	}
+
+	update() {
+
+		const { material, color, opacity, size, position } = this;
+
+		color.setEnabledInputs( ! color.getLinkedObject() );
+		opacity.setEnabledInputs( ! opacity.getLinkedObject() );
+
+		material.colorNode = color.getLinkedObject();
+		material.opacityNode = opacity.getLinkedObject() || null;
+
+		material.sizeNode = size.getLinkedObject() || null;
+		material.positionNode = position.getLinkedObject() || null;
+
+		material.dispose();
+
+		this.updateTransparent();
+
+		// TODO: Fix on NodeMaterial System
+		material.customProgramCacheKey = () => {
+
+			return THREE.MathUtils.generateUUID();
+
+		};
+
+	}
+
+	updateTransparent() {
+
+		const { material, opacity } = this;
+
+		material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
+
+		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
+
+	}
+
+}

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

@@ -1,16 +1,15 @@
-import { ObjectNode, ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { MeshStandardNodeMaterial } from '../../renderers/nodes/Nodes.js';
 import * as THREE from 'three';
 
-export class StandardMaterialEditor extends ObjectNode {
+export class StandardMaterialEditor extends BaseNode {
 
 	constructor() {
 
 		const material = new MeshStandardNodeMaterial();
 
-		super( 'Standard Material', 0, material );
-
-		this.title.setStyle( 'blue' );
+		super( 'Standard Material', 1, material );
 
 		this.setWidth( 300 );
 
@@ -18,6 +17,7 @@ export class StandardMaterialEditor extends ObjectNode {
 		const opacity = new LabelElement( 'opacity' ).setInput( 1 );
 		const metalness = new LabelElement( 'metalness' ).setInput( 1 );
 		const roughness = new LabelElement( 'roughness' ).setInput( 1 );
+		const position = new LabelElement( 'position' ).setInput( 3 );
 
 		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
 
@@ -49,16 +49,19 @@ export class StandardMaterialEditor extends ObjectNode {
 		opacity.onConnect( () => this.update(), true );
 		metalness.onConnect( () => this.update(), true );
 		roughness.onConnect( () => this.update(), true );
+		position.onConnect(() => this.update(), true );
 
 		this.add( color )
 			.add( opacity )
 			.add( metalness )
-			.add( roughness );
+			.add( roughness )
+			.add( position );
 
 		this.color = color;
 		this.opacity = opacity;
 		this.metalness = metalness;
 		this.roughness = roughness;
+		this.position = position;
 
 		this.material = material;
 
@@ -68,19 +71,19 @@ export class StandardMaterialEditor extends ObjectNode {
 
 	update() {
 
-		const { material, color, opacity, roughness, metalness } = this;
-
-		color.setEnabledInputs( ! color.linkedExtra );
-		opacity.setEnabledInputs( ! opacity.linkedExtra );
-		roughness.setEnabledInputs( ! roughness.linkedExtra );
-		metalness.setEnabledInputs( ! metalness.linkedExtra );
+		const { material, color, opacity, roughness, metalness, position } = this;
 
-		material.colorNode = color.linkedExtra;
+		color.setEnabledInputs( ! color.getLinkedObject() );
+		opacity.setEnabledInputs( ! opacity.getLinkedObject() );
+		roughness.setEnabledInputs( ! roughness.getLinkedObject() );
+		metalness.setEnabledInputs( ! metalness.getLinkedObject() );
 
-		material.opacityNode = opacity.linkedExtra || null;
+		material.colorNode = color.getLinkedObject();
+		material.opacityNode = opacity.getLinkedObject() || null;
+		material.metalnessNode = metalness.getLinkedObject();
+		material.roughnessNode = roughness.getLinkedObject();
 
-		material.metalnessNode = metalness.linkedExtra;
-		material.roughnessNode = roughness.linkedExtra;
+		material.positionNode = position.getLinkedObject() || null;
 
 		material.dispose();
 
@@ -99,7 +102,7 @@ export class StandardMaterialEditor extends ObjectNode {
 
 		const { material, opacity } = this;
 
-		material.transparent = opacity.linkedExtra || material.opacity < 1 ? true : false;
+		material.transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
 
 		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
 

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

@@ -0,0 +1,39 @@
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+
+const DEFAULT_VALUE = new Vector3Node();
+
+export class AngleEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.SIN, DEFAULT_VALUE );
+
+		super( 'Angle', 1, node, 175 );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Degrees to Radians', value: MathNode.RAD },
+			{ name: 'Radians to Degrees', value: MathNode.DEG }
+		], MathNode.RAD ).onChange( () => {
+
+			node.method = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const input = new LabelElement( 'A' ).setInput( 1 );
+
+		input.onConnect( () => {
+
+			node.aNode = input.getLinkedObject() || DEFAULT_VALUE;
+
+		} );
+
+		this.add( new Element().add( optionsField ) )
+			.add( input );
+
+	}
+
+}

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

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

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

@@ -1,9 +1,10 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
 const DEFAULT_VALUE = new FloatNode();
 
-export class InvertEditor extends ObjectNode {
+export class InvertEditor extends BaseNode {
 
 	constructor() {
 
@@ -26,7 +27,7 @@ export class InvertEditor extends ObjectNode {
 
 		input.onConnect( () => {
 
-			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+			node.aNode = input.getLinkedObject() || DEFAULT_VALUE;
 
 		} );
 

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

@@ -1,20 +1,21 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
 const NULL_VALUE = new FloatNode();
 
-export class LimiterEditor extends ObjectNode {
+export class LimiterEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new MathNode( MathNode.MAX, NULL_VALUE, NULL_VALUE );
+		const node = new MathNode( MathNode.MIN, NULL_VALUE, NULL_VALUE );
 
-		super( 'Limiter', 1, node, 250 );
+		super( 'Limiter', 1, node, 175 );
 
 		const methodInput = new SelectInput( [
-			{ name: 'Max', value: MathNode.MAX },
-			{ name: 'Min', value: MathNode.MIN }
-		] );
+			{ name: 'Min', value: MathNode.MIN },
+			{ name: 'Max', value: MathNode.MAX }
+		], MathNode.MIN );
 
 		methodInput.onChange( ( data ) => {
 
@@ -29,17 +30,17 @@ export class LimiterEditor extends ObjectNode {
 
 		aElement.onConnect( () => {
 
-			node.aNode = aElement.linkedExtra || NULL_VALUE;
+			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
 
 		} );
 
 		bElement.onConnect( () => {
 
-			node.bNode = bElement.linkedExtra || NULL_VALUE;
+			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		this.add( new LabelElement( 'Method' ).add( methodInput ) )
+		this.add( new Element().add( methodInput ) )
 			.add( aElement )
 			.add( bElement );
 

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

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

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

@@ -1,22 +1,23 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
 const NULL_VALUE = new FloatNode();
 
-export class OperatorEditor extends ObjectNode {
+export class OperatorEditor extends BaseNode {
 
 	constructor() {
 
 		const node = new OperatorNode( '+', NULL_VALUE, NULL_VALUE );
 
-		super( 'Operator', 1, node, 250 );
+		super( 'Operator', 1, node, 150 );
 
 		const opInput = new SelectInput( [
-			{ name: '+ Addition', value: '+' },
-			{ name: '- Subtraction', value: '-' },
-			{ name: '* Multiplication', value: '*' },
-			{ name: '/ Division', value: '/' }
-		] );
+			{ name: 'Addition ( + )', value: '+' },
+			{ name: 'Subtraction ( - )', value: '-' },
+			{ name: 'Multiplication ( * )', value: '*' },
+			{ name: 'Division ( / )', value: '/' }
+		], '+' );
 
 		opInput.onChange( ( data ) => {
 
@@ -31,17 +32,17 @@ export class OperatorEditor extends ObjectNode {
 
 		aElement.onConnect( () => {
 
-			node.aNode = aElement.linkedExtra || NULL_VALUE;
+			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
 
 		} );
 
 		bElement.onConnect( () => {
 
-			node.bNode = bElement.linkedExtra || NULL_VALUE;
+			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		this.add( new LabelElement( 'Operator' ).add( opInput ) )
+		this.add( new Element().add( opInput ) )
 			.add( aElement )
 			.add( bElement );
 

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

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

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

@@ -1,21 +1,26 @@
-import { ObjectNode, SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
 
 const DEFAULT_VALUE = new Vector3Node();
 
-export class TrigonometryEditor extends ObjectNode {
+export class TrigonometryEditor extends BaseNode {
 
 	constructor() {
 
 		const node = new MathNode( MathNode.SIN, DEFAULT_VALUE );
 
-		super( 'Trigonometry', 1, node, 200 );
+		super( 'Trigonometry', 1, node, 175 );
 
 		const optionsField = new SelectInput( [
 			{ name: 'Sin', value: MathNode.SIN },
 			{ name: 'Cos', value: MathNode.COS },
-			{ name: 'Tan', value: MathNode.TAN }
-		] ).onChange( () => {
+			{ name: 'Tan', value: MathNode.TAN },
+
+			{ name: 'asin', value: MathNode.ASIN },
+			{ name: 'acos', value: MathNode.ACOS },
+			{ name: 'atan', value: MathNode.ATAN }
+		], MathNode.SIN ).onChange( () => {
 
 			node.method = optionsField.getValue();
 
@@ -23,11 +28,11 @@ export class TrigonometryEditor extends ObjectNode {
 
 		} );
 
-		const input = new LabelElement( 'Source' ).setInput( 1 );
+		const input = new LabelElement( 'A' ).setInput( 1 );
 
 		input.onConnect( () => {
 
-			node.aNode = input.linkedExtra || DEFAULT_VALUE;
+			node.aNode = input.getLinkedObject() || DEFAULT_VALUE;
 
 		} );
 

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

@@ -1,9 +1,10 @@
-import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { CheckerNode, UVNode } from '../../renderers/nodes/Nodes.js';
 
 const DEFAULT_UV = new UVNode();
 
-export class CheckerEditor extends ObjectNode {
+export class CheckerEditor extends BaseNode {
 
 	constructor() {
 
@@ -15,7 +16,7 @@ export class CheckerEditor extends ObjectNode {
 
 		field.onConnect( () => {
 
-			node.uvNode = field.linkedExtra || DEFAULT_UV;
+			node.uvNode = field.getLinkedObject() || DEFAULT_UV;
 
 		} );