@needle-tools/three 0.145.0

package/examples/jsm/node-editor/accessors/MatcapUVEditor.js

@@ -0,0 +1,14 @@
+import { BaseNode } from '../core/BaseNode.js';
+import { MatcapUVNode } from 'three/nodes';
+
+export class MatcapUVEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new MatcapUVNode();
+
+		super( 'Matcap UV', 2, node, 200 );
+
+	}
+
+}

package/examples/jsm/node-editor/accessors/NormalEditor.js

@@ -0,0 +1,30 @@
+import { SelectInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { NormalNode } from 'three/nodes';
+
+export class NormalEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new NormalNode();
+
+		super( 'Normal', 3, node, 200 );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Local', value: NormalNode.LOCAL },
+			{ name: 'World', value: NormalNode.WORLD },
+			{ name: 'View', value: NormalNode.VIEW },
+			{ name: 'Geometry', value: NormalNode.GEOMETRY }
+		], NormalNode.LOCAL ).onChange( () => {
+
+			node.scope = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		this.add( new Element().add( optionsField ) );
+
+	}
+
+}

package/examples/jsm/node-editor/accessors/PositionEditor.js

@@ -0,0 +1,30 @@
+import { SelectInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { PositionNode } from 'three/nodes';
+
+export class PositionEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new PositionNode();
+
+		super( 'Position', 3, node, 200 );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Local', value: PositionNode.LOCAL },
+			{ name: 'World', value: PositionNode.WORLD },
+			{ name: 'View', value: PositionNode.VIEW },
+			{ name: 'View Direction', value: PositionNode.VIEW_DIRECTION }
+		], PositionNode.LOCAL ).onChange( () => {
+
+			node.scope = optionsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		this.add( new Element().add( optionsField ) );
+
+	}
+
+}

package/examples/jsm/node-editor/accessors/UVEditor.js

@@ -0,0 +1,25 @@
+import { SelectInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { UVNode } from 'three/nodes';
+
+export class UVEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new UVNode();
+
+		super( 'UV', 2, node, 200 );
+
+		const optionsField = new SelectInput( [ '1', '2' ], 0 ).onChange( () => {
+
+			node.index = Number( optionsField.getValue() );
+
+			this.invalidate();
+
+		} );
+
+		this.add( new LabelElement( 'Channel' ).add( optionsField ) );
+
+	}
+
+}

package/examples/jsm/node-editor/core/BaseNode.js

@@ -0,0 +1,96 @@
+import { ObjectNode } from '../../libs/flow.module.js';
+
+export const onNodeValidElement = ( inputElement, outputElement ) => {
+
+	const outputObject = outputElement.getObject();
+
+	if ( ! outputObject || ! outputObject.isNode ) {
+
+		return false;
+
+	}
+
+};
+
+export class BaseNode extends ObjectNode {
+
+	constructor( name, inputLength, value = null, width = 300 ) {
+
+		const getObjectCallback = ( /*output = null*/ ) => {
+
+			return this.value;
+
+		};
+
+		super( name, inputLength, getObjectCallback, width );
+
+		this.setOutputColor( this.getColorValueFromValue( value ) );
+
+		this.editor = null;
+
+		this.value = value;
+
+		this.onValidElement = onNodeValidElement;
+
+	}
+
+	getColor() {
+
+		return ( this.getColorValueFromValue( this.value ) || '#777777' ) + 'BB';
+
+	}
+
+	serialize( data ) {
+
+		super.serialize( data );
+
+		delete data.width;
+
+	}
+
+	deserialize( data ) {
+
+		delete data.width;
+
+		super.deserialize( data );
+
+	}
+
+	setEditor( value ) {
+
+		this.editor = value;
+
+		return this;
+
+	}
+
+	getColorValueFromValue( value ) {
+
+		if ( ! value ) return;
+
+		if ( value.isMaterial === true ) {
+
+			//return 'forestgreen';
+			return '#228b22';
+
+		} else if ( value.isObject3D === true ) {
+
+			return '#ffa500';
+
+		} else if ( value.isDataFile === true ) {
+
+			return '#00ffff';
+
+		}
+
+	}
+
+	add( element ) {
+
+		element.onValid( ( source, target ) => this.onValidElement( source, target ) );
+
+		return super.add( element );
+
+	}
+
+}

package/examples/jsm/node-editor/core/DataFile.js

@@ -0,0 +1,59 @@
+export class DataFile {
+
+	constructor( value ) {
+
+		this.isDataFile = true;
+
+		this.value = value;
+		this.url = null;
+
+	}
+
+	setValue( value ) {
+
+		this.value = value;
+		this.url = null;
+
+	}
+
+	isURL( uri ) {
+
+		const pattern = new RegExp( '^((ft|htt)ps?:\\/\\/)?' + // protocol
+			'((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|' + // domain name and extension
+			'((\\d{1,3}\\.){3}\\d{1,3}))' + // OR ip (v4) address
+			'(\\:\\d+)?' + // port
+			'(\\/[-a-z\\d%@_.~+&:]*)*' + // path
+			'(\\?[;&a-z\\d%@_.,~+&:=-]*)?' + // query string
+			'(\\#[-a-z\\d_]*)?$', 'i' ); // fragment locator
+
+		return pattern.test( uri );
+
+	}
+
+	getURL() {
+
+		let url = this.url;
+
+		if ( url === null ) {
+
+			const value = this.value;
+
+			if ( value instanceof File ) {
+
+				url = URL.createObjectURL( value );
+
+			} else {
+
+				url = value;
+
+			}
+
+			this.url = this.isURL( url ) ? url : null;
+
+		}
+
+		return url;
+
+	}
+
+}

package/examples/jsm/node-editor/core/FileEditor.js

@@ -0,0 +1,20 @@
+import { StringInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from './BaseNode.js';
+import { DataFile } from './DataFile.js';
+
+export class FileEditor extends BaseNode {
+
+	constructor( file ) {
+
+		const dataFile = new DataFile( file );
+
+		super( 'File', 1, dataFile, 250 );
+
+		this.file = file;
+		this.nameInput = new StringInput( file.name ).setReadOnly( true );
+
+		this.add( new Element().add( this.nameInput ) );
+
+	}
+
+}

package/examples/jsm/node-editor/core/FileURLEditor.js

@@ -0,0 +1,29 @@
+import { StringInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from './BaseNode.js';
+import { DataFile } from './DataFile.js';
+
+export class FileURLEditor extends BaseNode {
+
+	constructor() {
+
+		const dataFile = new DataFile();
+
+		super( 'File URL', 1, dataFile, 250 );
+
+		const urlInput = new StringInput().onChange( () => {
+
+			if ( urlInput.getValue() !== dataFile.getURL() ) {
+
+				dataFile.setValue( urlInput.getValue() );
+
+				this.invalidate();
+
+			}
+
+		} );
+
+		this.add( new Element().add( urlInput ) );
+
+	}
+
+}

package/examples/jsm/node-editor/display/BlendEditor.js

@@ -0,0 +1,44 @@
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MathNode, UniformNode } from 'three/nodes';
+
+const NULL_VALUE = new UniformNode( 0 );
+const ONE_VALUE = new UniformNode( 1 );
+
+export class BlendEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new MathNode( MathNode.MIX, NULL_VALUE, NULL_VALUE, ONE_VALUE );
+
+		super( 'Blend', 3, node, 200 );
+
+		const aElement = new LabelElement( 'Base' ).setInput( 3 );
+		const bElement = new LabelElement( 'Blend' ).setInput( 3 );
+		const cElement = new LabelElement( 'Opacity' ).setInput( 1 );
+
+		aElement.onConnect( () => {
+
+			node.aNode = aElement.getLinkedObject() || NULL_VALUE;
+
+		} );
+
+		bElement.onConnect( () => {
+
+			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
+
+		} );
+
+		cElement.onConnect( () => {
+
+			node.cNode = cElement.getLinkedObject() || ONE_VALUE;
+
+		} );
+
+		this.add( aElement )
+			.add( bElement )
+			.add( cElement );
+
+	}
+
+}

package/examples/jsm/node-editor/display/NormalMapEditor.js

@@ -0,0 +1,49 @@
+import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { NormalMapNode, ConstNode } from 'three/nodes';
+import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from 'three';
+
+const nullValue = new ConstNode( 0 );
+
+export class NormalMapEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new NormalMapNode( nullValue );
+
+		super( 'Normal Map', 3, node, 175 );
+
+		const source = new LabelElement( 'Source' ).setInput( 3 ).onConnect( () => {
+
+			node.node = source.getLinkedObject() || nullValue;
+
+			this.invalidate();
+
+		} );
+
+		const scale = new LabelElement( 'Scale' ).setInput( 3 ).onConnect( () => {
+
+			node.scaleNode = scale.getLinkedObject();
+
+			this.invalidate();
+
+		} );
+
+		const optionsField = new SelectInput( [
+			{ name: 'Tangent Space', value: TangentSpaceNormalMap },
+			{ name: 'Object Space', value: ObjectSpaceNormalMap }
+		], TangentSpaceNormalMap ).onChange( () => {
+
+			node.normalMapType = Number( optionsField.getValue() );
+
+			this.invalidate();
+
+		} );
+
+		this.add( new Element().add( optionsField ) )
+			.add( source )
+			.add( scale );
+
+	}
+
+}

package/examples/jsm/node-editor/examples/animate-uv.json

@@ -0,0 +1 @@
+{"objects":{"733":{"x":1718,"y":136,"width":300,"elements":[734,736,737,738,739],"id":733,"type":"StandardMaterialEditor"},"734":{"outputLength":1,"style":"blue","title":"Standard Material","id":734,"type":"TitleElement"},"736":{"inputLength":3,"inputs":[740],"links":[809],"label":"Color","id":736,"type":"LabelElement"},"737":{"inputLength":1,"inputs":[741],"label":"Opacity","icon":"ti ti-layers-subtract","id":737,"type":"LabelElement"},"738":{"inputLength":1,"inputs":[743],"label":"Metalness","id":738,"type":"LabelElement"},"739":{"inputLength":1,"inputs":[745],"label":"Roughness","id":739,"type":"LabelElement"},"740":{"value":16777215,"id":740,"type":"ColorInput"},"741":{"min":0,"max":1,"value":1,"id":741,"type":"SliderInput"},"743":{"min":0,"max":1,"value":0,"id":743,"type":"SliderInput"},"745":{"min":0,"max":1,"value":1,"id":745,"type":"SliderInput"},"752":{"x":155,"y":230,"width":250,"elements":[753,759,760,757],"id":752,"type":"TimerEditor"},"753":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":753,"type":"TitleElement"},"755":{"value":0.218,"id":755,"type":"NumberInput"},"756":{"value":0.04,"id":756,"type":"NumberInput"},"757":{"inputs":[758],"id":757,"type":"Element"},"758":{"value":"Reset","id":758,"type":"ButtonInput"},"759":{"inputs":[755],"id":759,"type":"Element"},"760":{"inputs":[756],"label":"Scale","id":760,"type":"LabelElement"},"768":{"x":202,"y":79,"width":250,"elements":[769,772],"id":768,"type":"UVEditor"},"769":{"outputLength":2,"style":"red","title":"UV","id":769,"type":"TitleElement"},"771":{"options":["1","2"],"value":"0","id":771,"type":"SelectInput"},"772":{"inputs":[771],"label":"Channel","id":772,"type":"LabelElement"},"776":{"x":612,"y":102,"width":250,"elements":[777,782,780,781],"id":776,"type":"OperatorEditor"},"777":{"outputLength":1,"title":"Operator","id":777,"type":"TitleElement"},"779":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"+","id":779,"type":"SelectInput"},"780":{"inputLength":3,"links":[769],"label":"A","id":780,"type":"LabelElement"},"781":{"inputLength":3,"links":[753],"label":"B","id":781,"type":"LabelElement"},"782":{"inputs":[779],"id":782,"type":"Element"},"788":{"x":1047,"y":158,"width":250,"elements":[789,794,792,793],"id":788,"type":"OperatorEditor"},"789":{"outputLength":1,"title":"Operator","id":789,"type":"TitleElement"},"791":{"options":[{"name":"+ Addition","value":"+"},{"name":"- Subtraction","value":"-"},{"name":"* Multiplication","value":"*"},{"name":"/ Division","value":"/"}],"value":"*","id":791,"type":"SelectInput"},"792":{"inputLength":3,"links":[777],"label":"A","id":792,"type":"LabelElement"},"793":{"inputLength":3,"links":[801],"label":"B","id":793,"type":"LabelElement"},"794":{"inputs":[791],"id":794,"type":"Element"},"800":{"x":601,"y":345,"width":250,"elements":[801,804],"id":800,"type":"FloatEditor"},"801":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":801,"type":"TitleElement"},"803":{"value":24.12,"id":803,"type":"NumberInput"},"804":{"inputs":[803],"id":804,"type":"Element"},"808":{"x":1402,"y":14,"width":200,"elements":[809,811],"id":808,"type":"CheckerEditor"},"809":{"outputLength":1,"title":"Checker","id":809,"type":"TitleElement"},"811":{"inputLength":2,"links":[789],"label":"UV","id":811,"type":"LabelElement"},"837":{"x":2160,"y":128,"width":300,"elements":[838,841,851,852,853,854],"id":837,"type":"MeshEditor"},"838":{"outputLength":1,"title":"Mesh","id":838,"type":"TitleElement"},"840":{"value":"Stanford_Bunny","id":840,"type":"StringInput"},"841":{"inputs":[840],"label":"Name","id":841,"type":"LabelElement"},"842":{"value":0,"id":842,"type":"NumberInput"},"843":{"value":0,"id":843,"type":"NumberInput"},"844":{"value":10,"id":844,"type":"NumberInput"},"845":{"value":0,"id":845,"type":"NumberInput"},"846":{"value":0,"id":846,"type":"NumberInput"},"847":{"value":0,"id":847,"type":"NumberInput"},"848":{"value":100,"id":848,"type":"NumberInput"},"849":{"value":100,"id":849,"type":"NumberInput"},"850":{"value":100,"id":850,"type":"NumberInput"},"851":{"inputs":[842,843,844],"label":"Position","id":851,"type":"LabelElement"},"852":{"inputs":[845,846,847],"label":"Rotation","id":852,"type":"LabelElement"},"853":{"inputs":[848,849,850],"label":"Scale","id":853,"type":"LabelElement"},"854":{"inputLength":1,"links":[734],"label":"Material","id":854,"type":"LabelElement"}},"nodes":[733,752,768,776,788,800,808,837],"id":2,"type":"Canvas"}

package/examples/jsm/node-editor/examples/fake-top-light.json

@@ -0,0 +1 @@
+{"objects":{"389":{"x":885,"y":119,"width":300,"elements":[390,392,393,394,395],"id":389,"type":"StandardMaterialEditor"},"390":{"outputLength":1,"style":"blue","title":"Standard Material","id":390,"type":"TitleElement"},"392":{"inputLength":3,"inputs":[396],"links":[421],"label":"Color","id":392,"type":"LabelElement"},"393":{"inputLength":1,"inputs":[397],"label":"Opacity","icon":"ti ti-layers-subtract","id":393,"type":"LabelElement"},"394":{"inputLength":1,"inputs":[399],"label":"Metalness","id":394,"type":"LabelElement"},"395":{"inputLength":1,"inputs":[401],"label":"Roughness","id":395,"type":"LabelElement"},"396":{"value":16777215,"id":396,"type":"ColorInput"},"397":{"min":0,"max":1,"value":1,"id":397,"type":"SliderInput"},"399":{"min":0,"max":1,"value":0,"id":399,"type":"SliderInput"},"401":{"min":0,"max":1,"value":1,"id":401,"type":"SliderInput"},"408":{"x":73,"y":296,"width":325,"elements":[409,414],"id":408,"type":"Vector3Editor"},"409":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":409,"type":"TitleElement"},"411":{"value":0,"id":411,"type":"NumberInput"},"412":{"value":1,"id":412,"type":"NumberInput"},"413":{"value":0,"id":413,"type":"NumberInput"},"414":{"inputs":[411,412,413],"label":"Values","id":414,"type":"LabelElement"},"420":{"x":541,"y":199,"width":200,"elements":[421,423,424],"id":420,"type":"DotEditor"},"421":{"outputLength":1,"title":"Dot Product","id":421,"type":"TitleElement"},"423":{"inputLength":3,"links":[429],"label":"A","id":423,"type":"LabelElement"},"424":{"inputLength":3,"links":[409],"label":"B","id":424,"type":"LabelElement"},"428":{"x":106,"y":158,"width":250,"elements":[429,432],"id":428,"type":"NormalEditor"},"429":{"outputLength":3,"style":"red","title":"Normal","id":429,"type":"TitleElement"},"431":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"world","id":431,"type":"SelectInput"},"432":{"inputs":[431],"id":432,"type":"Element"},"473":{"x":1314,"y":113,"width":300,"elements":[474,477,487,488,489,490],"id":473,"type":"MeshEditor"},"474":{"outputLength":1,"title":"Mesh","id":474,"type":"TitleElement"},"476":{"value":"Stanford_Bunny","id":476,"type":"StringInput"},"477":{"inputs":[476],"label":"Name","id":477,"type":"LabelElement"},"478":{"value":0,"id":478,"type":"NumberInput"},"479":{"value":0,"id":479,"type":"NumberInput"},"480":{"value":10,"id":480,"type":"NumberInput"},"481":{"value":0,"id":481,"type":"NumberInput"},"482":{"value":0,"id":482,"type":"NumberInput"},"483":{"value":0,"id":483,"type":"NumberInput"},"484":{"value":100,"id":484,"type":"NumberInput"},"485":{"value":100,"id":485,"type":"NumberInput"},"486":{"value":100,"id":486,"type":"NumberInput"},"487":{"inputs":[478,479,480],"label":"Position","id":487,"type":"LabelElement"},"488":{"inputs":[481,482,483],"label":"Rotation","id":488,"type":"LabelElement"},"489":{"inputs":[484,485,486],"label":"Scale","id":489,"type":"LabelElement"},"490":{"inputLength":1,"links":[390],"label":"Material","id":490,"type":"LabelElement"}},"nodes":[389,408,420,428,473],"id":2,"type":"Canvas"}

package/examples/jsm/node-editor/examples/matcap.json

@@ -0,0 +1 @@
+{"objects":{"71":{"x":1464,"y":295,"elements":[72,75,85,86,87,88],"id":71,"type":"MeshEditor"},"72":{"outputLength":1,"title":"Mesh","id":72,"type":"TitleElement"},"74":{"value":"Stanford_Bunny","id":74,"type":"StringInput"},"75":{"inputs":[74],"id":75,"type":"LabelElement"},"76":{"value":0,"id":76,"type":"NumberInput"},"77":{"value":0,"id":77,"type":"NumberInput"},"78":{"value":10,"id":78,"type":"NumberInput"},"79":{"value":0,"id":79,"type":"NumberInput"},"80":{"value":0,"id":80,"type":"NumberInput"},"81":{"value":0,"id":81,"type":"NumberInput"},"82":{"value":100,"id":82,"type":"NumberInput"},"83":{"value":100,"id":83,"type":"NumberInput"},"84":{"value":100,"id":84,"type":"NumberInput"},"85":{"inputs":[76,77,78],"id":85,"type":"LabelElement"},"86":{"inputs":[79,80,81],"id":86,"type":"LabelElement"},"87":{"inputs":[82,83,84],"id":87,"type":"LabelElement"},"88":{"inputLength":1,"links":[138],"id":88,"type":"LabelElement"},"105":{"x":214,"y":261,"elements":[106,109],"id":105,"type":"FileURLEditor"},"106":{"outputLength":1,"title":"File URL","id":106,"type":"TitleElement"},"108":{"value":"https://threejs.org/examples/textures/matcaps/matcap-porcelain-white.jpg","id":108,"type":"StringInput"},"109":{"inputs":[108],"id":109,"type":"Element"},"113":{"x":632,"y":300,"elements":[114,116,117,121,122,123],"id":113,"type":"TextureEditor"},"114":{"outputLength":4,"title":"Texture","id":114,"type":"TitleElement"},"116":{"inputLength":1,"links":[106],"id":116,"type":"LabelElement"},"117":{"inputLength":2,"links":[134],"id":117,"type":"LabelElement"},"118":{"options":[{"name":"Repeat Wrapping","value":1000},{"name":"Clamp To Edge Wrapping","value":1001},{"name":"Mirrored Repeat Wrapping","value":1002}],"value":"1000","id":118,"type":"SelectInput"},"119":{"options":[{"name":"Repeat Wrapping","value":1000},{"name":"Clamp To Edge Wrapping","value":1001},{"name":"Mirrored Repeat Wrapping","value":1002}],"value":"1000","id":119,"type":"SelectInput"},"120":{"value":true,"id":120,"type":"ToggleInput"},"121":{"inputs":[118],"id":121,"type":"LabelElement"},"122":{"inputs":[119],"id":122,"type":"LabelElement"},"123":{"inputs":[120],"id":123,"type":"LabelElement"},"133":{"x":236,"y":401,"elements":[134],"id":133,"type":"MatcapUVEditor"},"134":{"outputLength":2,"title":"Matcap UV","id":134,"type":"TitleElement"},"137":{"x":1023,"y":334,"elements":[138,140,141,142],"id":137,"type":"BasicMaterialEditor"},"138":{"outputLength":1,"title":"Basic Material","id":138,"type":"TitleElement"},"140":{"inputLength":3,"inputs":[143],"links":[114],"id":140,"type":"LabelElement"},"141":{"inputLength":1,"inputs":[144],"id":141,"type":"LabelElement"},"142":{"inputLength":3,"id":142,"type":"LabelElement"},"143":{"value":16777215,"id":143,"type":"ColorInput"},"144":{"min":0,"max":1,"value":1,"id":144,"type":"SliderInput"}},"nodes":[71,105,113,133,137],"id":2,"type":"Canvas"}

package/examples/jsm/node-editor/examples/oscillator-color.json

@@ -0,0 +1 @@
+{"objects":{"247":{"x":1602,"y":-3,"width":300,"elements":[248,250,251,252,253],"id":247,"type":"StandardMaterialEditor"},"248":{"outputLength":1,"style":"blue","title":"Standard Material","id":248,"type":"TitleElement"},"250":{"inputLength":3,"inputs":[254],"links":[293],"label":"Color","id":250,"type":"LabelElement"},"251":{"inputLength":1,"inputs":[255],"label":"Opacity","icon":"ti ti-layers-subtract","id":251,"type":"LabelElement"},"252":{"inputLength":1,"inputs":[257],"label":"Metalness","id":252,"type":"LabelElement"},"253":{"inputLength":1,"inputs":[259],"label":"Roughness","id":253,"type":"LabelElement"},"254":{"value":16777215,"id":254,"type":"ColorInput"},"255":{"min":0,"max":1,"value":1,"id":255,"type":"SliderInput"},"257":{"min":0,"max":1,"value":0,"id":257,"type":"SliderInput"},"259":{"min":0,"max":1,"value":1,"id":259,"type":"SliderInput"},"266":{"x":123,"y":207,"width":250,"elements":[267,273,274,271],"id":266,"type":"TimerEditor"},"267":{"outputLength":1,"title":"Timer","icon":"ti ti-clock","id":267,"type":"TitleElement"},"269":{"value":1.985,"id":269,"type":"NumberInput"},"270":{"value":0.37,"id":270,"type":"NumberInput"},"271":{"inputs":[272],"id":271,"type":"Element"},"272":{"value":"Reset","id":272,"type":"ButtonInput"},"273":{"inputs":[269],"id":273,"type":"Element"},"274":{"inputs":[270],"label":"Scale","id":274,"type":"LabelElement"},"282":{"x":485,"y":94,"width":250,"elements":[283,287,286],"id":282,"type":"OscillatorEditor"},"283":{"outputLength":1,"title":"Oscillator","id":283,"type":"TitleElement"},"285":{"options":[{"name":"Sine","value":"sine"},{"name":"Square","value":"square"},{"name":"Triangle","value":"triangle"},{"name":"Sawtooth","value":"sawtooth"}],"value":"sine","id":285,"type":"SelectInput"},"286":{"inputLength":1,"links":[267],"label":"Time","id":286,"type":"LabelElement"},"287":{"inputs":[285],"id":287,"type":"Element"},"292":{"x":1208,"y":66,"width":200,"elements":[293,295,296,297],"id":292,"type":"BlendEditor"},"293":{"outputLength":3,"title":"Blend","id":293,"type":"TitleElement"},"295":{"inputLength":3,"links":[303],"label":"Base","id":295,"type":"LabelElement"},"296":{"inputLength":3,"links":[323],"label":"Blend","id":296,"type":"LabelElement"},"297":{"inputLength":1,"links":[283],"label":"Opacity","id":297,"type":"LabelElement"},"302":{"x":797,"y":-55,"width":300,"elements":[303,310,311,312],"id":302,"type":"ColorEditor"},"303":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":303,"type":"TitleElement"},"305":{"value":16580865,"id":305,"type":"ColorInput"},"306":{"value":"#FD0101","id":306,"type":"StringInput"},"307":{"min":0,"max":1,"step":0.01,"value":0.996,"id":307,"type":"NumberInput"},"308":{"min":0,"max":1,"step":0.01,"value":0.004,"id":308,"type":"NumberInput"},"309":{"min":0,"max":1,"step":0.01,"value":0.004,"id":309,"type":"NumberInput"},"310":{"inputs":[305],"id":310,"type":"Element"},"311":{"inputs":[306],"label":"Hex","id":311,"type":"LabelElement"},"312":{"inputs":[307,308,309],"label":"RGB","id":312,"type":"LabelElement"},"322":{"x":810,"y":220,"width":300,"elements":[323,330,331,332],"id":322,"type":"ColorEditor"},"323":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":323,"type":"TitleElement"},"325":{"value":19455,"id":325,"type":"ColorInput"},"326":{"value":"#004BFF","id":326,"type":"StringInput"},"327":{"min":0,"max":1,"step":0.01,"value":0,"id":327,"type":"NumberInput"},"328":{"min":0,"max":1,"step":0.01,"value":0.298,"id":328,"type":"NumberInput"},"329":{"min":0,"max":1,"step":0.01,"value":1,"id":329,"type":"NumberInput"},"330":{"inputs":[325],"id":330,"type":"Element"},"331":{"inputs":[326],"label":"Hex","id":331,"type":"LabelElement"},"332":{"inputs":[327,328,329],"label":"RGB","id":332,"type":"LabelElement"},"371":{"x":2064,"y":-17,"width":300,"elements":[372,375,385,386,387,388],"id":371,"type":"MeshEditor"},"372":{"outputLength":1,"title":"Mesh","id":372,"type":"TitleElement"},"374":{"value":"Stanford_Bunny","id":374,"type":"StringInput"},"375":{"inputs":[374],"label":"Name","id":375,"type":"LabelElement"},"376":{"value":0,"id":376,"type":"NumberInput"},"377":{"value":0,"id":377,"type":"NumberInput"},"378":{"value":10,"id":378,"type":"NumberInput"},"379":{"value":0,"id":379,"type":"NumberInput"},"380":{"value":0,"id":380,"type":"NumberInput"},"381":{"value":0,"id":381,"type":"NumberInput"},"382":{"value":100,"id":382,"type":"NumberInput"},"383":{"value":100,"id":383,"type":"NumberInput"},"384":{"value":100,"id":384,"type":"NumberInput"},"385":{"inputs":[376,377,378],"label":"Position","id":385,"type":"LabelElement"},"386":{"inputs":[379,380,381],"label":"Rotation","id":386,"type":"LabelElement"},"387":{"inputs":[382,383,384],"label":"Scale","id":387,"type":"LabelElement"},"388":{"inputLength":1,"links":[248],"label":"Material","id":388,"type":"LabelElement"}},"nodes":[247,266,282,292,302,322,371],"id":2,"type":"Canvas"}

package/examples/jsm/node-editor/examples/rim.json

@@ -0,0 +1 @@
+{"objects":{"61":{"x":1873,"y":248,"width":300,"elements":[62,64,65,66,67],"id":61,"type":"StandardMaterialEditor"},"62":{"outputLength":1,"style":"blue","title":"Standard Material","id":62,"type":"TitleElement"},"64":{"inputLength":3,"inputs":[68],"links":[119],"label":"Color","id":64,"type":"LabelElement"},"65":{"inputLength":1,"inputs":[69],"label":"Opacity","icon":"ti ti-layers-subtract","id":65,"type":"LabelElement"},"66":{"inputLength":1,"inputs":[71],"label":"Metalness","id":66,"type":"LabelElement"},"67":{"inputLength":1,"inputs":[73],"links":[185],"label":"Roughness","id":67,"type":"LabelElement"},"68":{"value":16777215,"id":68,"type":"ColorInput"},"69":{"min":0,"max":1,"value":1,"id":69,"type":"SliderInput"},"71":{"min":0,"max":1,"value":0,"id":71,"type":"SliderInput"},"73":{"min":0,"max":1,"value":1,"id":73,"type":"SliderInput"},"80":{"x":506,"y":328,"width":200,"elements":[81,83,84],"id":80,"type":"DotEditor"},"81":{"outputLength":1,"title":"Dot Product","id":81,"type":"TitleElement"},"83":{"inputLength":3,"links":[101],"label":"A","id":83,"type":"LabelElement"},"84":{"inputLength":3,"links":[89],"label":"B","id":84,"type":"LabelElement"},"88":{"x":33,"y":453,"width":300,"elements":[89,94],"id":88,"type":"Vector3Editor"},"89":{"outputLength":3,"title":"Vector 3","icon":"ti ti-box-multiple-3","id":89,"type":"TitleElement"},"91":{"value":0,"id":91,"type":"NumberInput"},"92":{"value":0,"id":92,"type":"NumberInput"},"93":{"value":1,"id":93,"type":"NumberInput"},"94":{"inputs":[91,92,93],"label":"Values","id":94,"type":"LabelElement"},"100":{"x":75,"y":278,"width":250,"elements":[101,104],"id":100,"type":"NormalEditor"},"101":{"outputLength":3,"style":"red","title":"Normal","id":101,"type":"TitleElement"},"103":{"options":[{"name":"Local","value":"local"},{"name":"World","value":"world"},{"name":"View","value":"view"}],"value":"view","id":103,"type":"SelectInput"},"104":{"inputs":[103],"id":104,"type":"Element"},"108":{"x":846,"y":353,"width":300,"elements":[109,113,112],"id":108,"type":"InvertEditor"},"109":{"outputLength":1,"title":"Invert / Negate","id":109,"type":"TitleElement"},"111":{"options":[{"name":"Invert ( 1 - Source )","value":"invert"},{"name":"Negate ( - Source )","value":"negate"}],"value":"invert","id":111,"type":"SelectInput"},"112":{"inputLength":1,"links":[81],"label":"Source","id":112,"type":"LabelElement"},"113":{"inputs":[111],"label":"Method","id":113,"type":"LabelElement"},"118":{"x":1459,"y":146,"width":300,"elements":[119,121,122,123],"id":118,"type":"BlendEditor"},"119":{"outputLength":3,"title":"Blend","id":119,"type":"TitleElement"},"121":{"inputLength":3,"links":[129],"label":"Base","id":121,"type":"LabelElement"},"122":{"inputLength":3,"links":[149],"label":"Blend","id":122,"type":"LabelElement"},"123":{"inputLength":1,"links":[169],"label":"Opacity","id":123,"type":"LabelElement"},"128":{"x":846,"y":17,"width":300,"elements":[129,136,137,138],"id":128,"type":"ColorEditor"},"129":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":129,"type":"TitleElement"},"131":{"value":5058,"id":131,"type":"ColorInput"},"132":{"value":"#0013C2","id":132,"type":"StringInput"},"133":{"min":0,"max":1,"step":0.01,"value":0,"id":133,"type":"NumberInput"},"134":{"min":0,"max":1,"step":0.01,"value":0.075,"id":134,"type":"NumberInput"},"135":{"min":0,"max":1,"step":0.01,"value":0.761,"id":135,"type":"NumberInput"},"136":{"inputs":[131],"id":136,"type":"Element"},"137":{"inputs":[132],"label":"Hex","id":137,"type":"LabelElement"},"138":{"inputs":[133,134,135],"label":"RGB","id":138,"type":"LabelElement"},"148":{"x":844,"y":189,"width":300,"elements":[149,156,157,158],"id":148,"type":"ColorEditor"},"149":{"outputLength":1,"title":"Color","icon":"ti ti-palette","id":149,"type":"TitleElement"},"151":{"value":16711680,"id":151,"type":"ColorInput"},"152":{"value":"#FF0000","id":152,"type":"StringInput"},"153":{"min":0,"max":1,"step":0.01,"value":1,"id":153,"type":"NumberInput"},"154":{"min":0,"max":1,"step":0.01,"value":0,"id":154,"type":"NumberInput"},"155":{"min":0,"max":1,"step":0.01,"value":0,"id":155,"type":"NumberInput"},"156":{"inputs":[151],"id":156,"type":"Element"},"157":{"inputs":[152],"label":"Hex","id":157,"type":"LabelElement"},"158":{"inputs":[153,154,155],"label":"RGB","id":158,"type":"LabelElement"},"168":{"x":1241,"y":361,"width":200,"elements":[169,171,172],"id":168,"type":"PowerEditor"},"169":{"outputLength":1,"title":"Power","id":169,"type":"TitleElement"},"171":{"inputLength":1,"links":[109],"label":"A","id":171,"type":"LabelElement"},"172":{"inputLength":1,"links":[177],"label":"B","id":172,"type":"LabelElement"},"176":{"x":852,"y":503,"width":250,"elements":[177,180],"id":176,"type":"FloatEditor"},"177":{"outputLength":1,"title":"Float","icon":"ti ti-box-multiple-1","id":177,"type":"TitleElement"},"179":{"value":1.32,"id":179,"type":"NumberInput"},"180":{"inputs":[179],"id":180,"type":"Element"},"184":{"x":1482,"y":449,"width":300,"elements":[185,195,191,192,193],"id":184,"type":"SliderEditor"},"185":{"outputLength":1,"title":"Slider","icon":"ti ti-adjustments-horizontal","id":185,"type":"TitleElement"},"187":{"min":0,"max":1,"value":1,"id":187,"type":"SliderInput"},"189":{"value":0,"id":189,"type":"NumberInput"},"190":{"value":1,"id":190,"type":"NumberInput"},"191":{"inputs":[189],"label":"Min.","id":191,"type":"LabelElement"},"192":{"inputs":[190],"label":"Max.","id":192,"type":"LabelElement"},"193":{"inputs":[194],"id":193,"type":"Element"},"194":{"value":"More","id":194,"type":"ButtonInput"},"195":{"inputs":[187],"id":195,"type":"Element"},"229":{"x":2313,"y":230,"width":300,"elements":[230,233,243,244,245,246],"id":229,"type":"MeshEditor"},"230":{"outputLength":1,"title":"Mesh","id":230,"type":"TitleElement"},"232":{"value":"Stanford_Bunny","id":232,"type":"StringInput"},"233":{"inputs":[232],"label":"Name","id":233,"type":"LabelElement"},"234":{"value":0,"id":234,"type":"NumberInput"},"235":{"value":0,"id":235,"type":"NumberInput"},"236":{"value":10,"id":236,"type":"NumberInput"},"237":{"value":0,"id":237,"type":"NumberInput"},"238":{"value":0,"id":238,"type":"NumberInput"},"239":{"value":0,"id":239,"type":"NumberInput"},"240":{"value":100,"id":240,"type":"NumberInput"},"241":{"value":100,"id":241,"type":"NumberInput"},"242":{"value":100,"id":242,"type":"NumberInput"},"243":{"inputs":[234,235,236],"label":"Position","id":243,"type":"LabelElement"},"244":{"inputs":[237,238,239],"label":"Rotation","id":244,"type":"LabelElement"},"245":{"inputs":[240,241,242],"label":"Scale","id":245,"type":"LabelElement"},"246":{"inputLength":1,"links":[62],"label":"Material","id":246,"type":"LabelElement"}},"nodes":[61,80,88,100,108,118,128,148,168,176,184,229],"id":2,"type":"Canvas"}

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

@@ -0,0 +1,96 @@
+import { ColorInput, StringInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Color } from 'three';
+import { UniformNode } from 'three/nodes';
+
+export class ColorEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new UniformNode( new Color() );
+
+		super( 'Color', 3, node );
+
+		const updateFields = ( editing ) => {
+
+			const value = node.value;
+			const hexValue = value.getHex();
+			const hexString = hexValue.toString( 16 ).toUpperCase().padStart( 6, '0' );
+
+			if ( editing !== 'color' ) {
+
+				field.setValue( hexValue, false );
+
+			}
+
+			if ( editing !== 'hex' ) {
+
+				hexField.setValue( '#' + hexString, 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 );
+
+			}
+
+			fieldR.setTagColor( `#${hexString.slice( 0, 2 )}0000` );
+			fieldG.setTagColor( `#00${hexString.slice( 2, 4 )}00` );
+			fieldB.setTagColor( `#0000${hexString.slice( 4, 6 )}` );
+
+		};
+
+		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.slice( 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 ).setTagColor( 'red' ).onChange( onChangeRGB );
+		const fieldG = new NumberInput( 1, 0, 1 ).setTagColor( 'green' ).onChange( onChangeRGB );
+		const fieldB = new NumberInput( 1, 0, 1 ).setTagColor( 'blue' ).onChange( onChangeRGB );
+
+		this.add( new Element().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,23 @@
+import { NumberInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { UniformNode } from 'three/nodes';
+
+export class FloatEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new UniformNode( 0 );
+
+		super( 'Float', 1, node, 150 );
+
+		const field = new NumberInput().setTagColor( 'red' ).onChange( () => {
+
+			node.value = field.getValue();
+
+		} );
+
+		this.add( new Element().add( field ) );
+
+	}
+
+}