super-three 0.136.1 → 0.144.0

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

@@ -1,16 +1,15 @@
-import { ObjectNode, ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { MeshStandardNodeMaterial } from '../../renderers/nodes/Nodes.js';
+import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MeshStandardNodeMaterial } from 'three/nodes';
 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,9 @@ 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 emissive = new LabelElement( 'emissive' ).setInput( 3 );
+		const normal = new LabelElement( 'normal' ).setInput( 3 );
+		const position = new LabelElement( 'position' ).setInput( 3 );
 
 		color.add( new ColorInput( material.color.getHex() ).onChange( ( input ) => {
 
@@ -49,16 +51,25 @@ export class StandardMaterialEditor extends ObjectNode {
 		opacity.onConnect( () => this.update(), true );
 		metalness.onConnect( () => this.update(), true );
 		roughness.onConnect( () => this.update(), true );
+		emissive.onConnect( () => this.update(), true );
+		normal.onConnect( () => this.update(), true );
+		position.onConnect( () => this.update(), true );
 
 		this.add( color )
 			.add( opacity )
 			.add( metalness )
-			.add( roughness );
+			.add( roughness )
+			.add( emissive )
+			.add( normal )
+			.add( position );
 
 		this.color = color;
 		this.opacity = opacity;
 		this.metalness = metalness;
 		this.roughness = roughness;
+		this.emissive = emissive;
+		this.normal = normal;
+		this.position = position;
 
 		this.material = material;
 
@@ -68,19 +79,21 @@ 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, emissive, roughness, metalness, normal, 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();
+		material.metalnessNode = metalness.getLinkedObject();
+		material.roughnessNode = roughness.getLinkedObject();
+		material.emissiveNode = emissive.getLinkedObject();
+		material.normalNode = normal.getLinkedObject();
 
-		material.metalnessNode = metalness.linkedExtra;
-		material.roughnessNode = roughness.linkedExtra;
+		material.positionNode = position.getLinkedObject();
 
 		material.dispose();
 
@@ -99,7 +112,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,40 @@
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three/nodes';
+
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
+
+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 { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, UniformNode } from 'three/nodes';
 
-const NULL_VALUE = new FloatNode();
+const NULL_VALUE = new UniformNode( 0 );
 
-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,20 +1,21 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, UniformNode } from 'three/nodes';
 
-const DEFAULT_VALUE = new FloatNode();
+const DEFAULT_VALUE = new UniformNode( 0 );
 
-export class InvertEditor extends ObjectNode {
+export class InvertEditor extends BaseNode {
 
 	constructor() {
 
 		const node = new MathNode( MathNode.INVERT, DEFAULT_VALUE );
 
-		super( 'Invert / Negate', 1, node );
+		super( 'Invert / Negate', 1, node, 175 );
 
 		const optionsField = new SelectInput( [
 			{ name: 'Invert ( 1 - Source )', value: MathNode.INVERT },
 			{ name: 'Negate ( - Source )', value: MathNode.NEGATE }
-		] ).onChange( () => {
+		], MathNode.INVERT ).onChange( () => {
 
 			node.method = optionsField.getValue();
 
@@ -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,24 +1,28 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { SelectInput, LabelElement, Element, NumberInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, UniformNode } from 'three/nodes';
 
-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 NULL_VALUE = new UniformNode( 0 );
+
+		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: 'Min', value: MathNode.MIN },
 			{ name: 'Max', value: MathNode.MAX },
-			{ name: 'Min', value: MathNode.MIN }
-		] );
+			// { name: 'Clamp', value: MathNode.CLAMP }
+			{ name: 'Saturate', value: MathNode.SATURATE }
+		], MathNode.MIN );
 
 		methodInput.onChange( ( data ) => {
 
 			node.method = data.getValue();
+			bElement.setVisible( data.getValue() !== MathNode.SATURATE );
 
 			this.invalidate();
 
@@ -27,19 +31,29 @@ export class LimiterEditor extends ObjectNode {
 		const aElement = new LabelElement( 'A' ).setInput( 1 );
 		const bElement = new LabelElement( 'B' ).setInput( 1 );
 
-		aElement.onConnect( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
 
-			node.aNode = aElement.linkedExtra || NULL_VALUE;
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.linkedExtra || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.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,23 @@
-import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
-import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three/nodes';
 
-const DEFAULT_VALUE = new Vector3Node();
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
 
-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 { OperatorNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { Element, LabelElement, NumberInput, SelectInput } from '../../libs/flow.module.js';
+import { UniformNode, OperatorNode } from 'three/nodes';
+import { BaseNode } from '../core/BaseNode.js';
 
-const NULL_VALUE = new FloatNode();
-
-export class OperatorEditor extends ObjectNode {
+export class OperatorEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new UniformNode( 0 );
+
 		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 ) => {
 
@@ -29,19 +30,31 @@ export class OperatorEditor extends ObjectNode {
 		const aElement = new LabelElement( 'A' ).setInput( 3 );
 		const bElement = new LabelElement( 'B' ).setInput( 3 );
 
-		aElement.onConnect( () => {
 
-			node.aNode = aElement.linkedExtra || NULL_VALUE;
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
 
-			node.bNode = bElement.linkedExtra || NULL_VALUE;
+		} ) ).onConnect( ( elmt ) => {
+
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.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,38 @@
-import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { LabelElement, NumberInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, UniformNode } from 'three/nodes';
 
-const NULL_VALUE = new FloatNode();
-
-export class PowerEditor extends ObjectNode {
+export class PowerEditor extends BaseNode {
 
 	constructor() {
 
+		const NULL_VALUE = new UniformNode( 0 );
 		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( () => {
+		aElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.aNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.aNode = aElement.linkedExtra || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.aNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		bElement.onConnect( () => {
+		bElement.add( new NumberInput().onChange( ( field ) => {
+
+			node.bNode.value = field.getValue();
+
+		} ) ).onConnect( ( elmt ) => {
 
-			node.bNode = bElement.linkedExtra || NULL_VALUE;
+			elmt.setEnabledInputs( ! elmt.getLinkedObject() );
+			node.bNode = elmt.getLinkedObject() || NULL_VALUE;
 
 		} );
 

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

@@ -1,21 +1,27 @@
-import { ObjectNode, SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
-import { MathNode, Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector3 } from 'three';
+import { MathNode, UniformNode } from 'three/nodes';
 
-const DEFAULT_VALUE = new Vector3Node();
+const DEFAULT_VALUE = new UniformNode( new Vector3() );
 
-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 +29,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,13 +1,14 @@
-import { ObjectNode, LabelElement } from '../../libs/flow.module.js';
-import { CheckerNode, UVNode } from '../../renderers/nodes/Nodes.js';
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { CheckerNode, UVNode } from 'three/nodes';
 
-const DEFAULT_UV = new UVNode();
+const defaultUV = new UVNode();
 
-export class CheckerEditor extends ObjectNode {
+export class CheckerEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new CheckerNode( DEFAULT_UV );
+		const node = new CheckerNode( defaultUV );
 
 		super( 'Checker', 1, node, 200 );
 
@@ -15,7 +16,7 @@ export class CheckerEditor extends ObjectNode {
 
 		field.onConnect( () => {
 
-			node.uvNode = field.linkedExtra || DEFAULT_UV;
+			node.uvNode = field.getLinkedObject() || defaultUV;
 
 		} );
 

package/examples/jsm/node-editor/scene/MeshEditor.js

@@ -0,0 +1,99 @@
+import { LabelElement } from '../../libs/flow.module.js';
+import { Object3DEditor } from './Object3DEditor.js';
+import { Mesh } from 'three';
+
+export class MeshEditor extends Object3DEditor {
+
+	constructor( mesh = null ) {
+
+		if ( mesh === null ) {
+
+			mesh = new Mesh();
+
+		}
+
+		super( mesh, 'Mesh' );
+
+		this.material = null;
+
+		this.defaultMaterial = null;
+
+		this._initMaterial();
+
+		this.updateDefault();
+		this.restoreDefault();
+		this.update();
+
+	}
+
+	get mesh() {
+
+		return this.value;
+
+	}
+
+	_initMaterial() {
+
+		const materialElement = new LabelElement( 'Material' ).setInputColor( 'forestgreen' ).setInput( 1 );
+
+		materialElement.onValid( ( source, target, stage ) => {
+
+			const object = target.getObject();
+
+			if ( object && object.isMaterial !== true ) {
+
+				if ( stage === 'dragged' ) {
+
+					const name = target.node.getName();
+
+					this.editor.tips.error( `"${name}" is not a Material.` );
+
+				}
+
+				return false;
+
+			}
+
+		} ).onConnect( () => {
+
+			this.material = materialElement.getLinkedObject() || this.defaultMaterial;
+
+			this.update();
+
+		} );
+
+		this.add( materialElement );
+
+	}
+
+	update() {
+
+		super.update();
+
+		const mesh = this.mesh;
+
+		if ( mesh ) {
+
+			mesh.material = this.material || this.defaultMaterial;
+
+		}
+
+	}
+
+	updateDefault() {
+
+		super.updateDefault();
+
+		this.defaultMaterial = this.mesh.material;
+
+	}
+
+	restoreDefault() {
+
+		super.restoreDefault();
+
+		this.mesh.material = this.defaultMaterial;
+
+	}
+
+}