super-three 0.136.1 → 0.144.0

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

@@ -1,20 +1,21 @@
-import { ObjectNode, ColorInput, StringInput, NumberInput, LabelElement } from '../../libs/flow.module.js';
-import { ColorNode } from '../../renderers/nodes/Nodes.js';
+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 ObjectNode {
+export class ColorEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new ColorNode();
+		const node = new UniformNode( new Color() );
 
-		super( 'Color', 1, node );
-
-		this.title.setIcon( 'ti ti-palette' );
+		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' ) {
 
@@ -24,7 +25,7 @@ export class ColorEditor extends ObjectNode {
 
 			if ( editing !== 'hex' ) {
 
-				hexField.setValue( '#' + hexValue.toString( 16 ).toUpperCase().padEnd( 6, '0' ), false );
+				hexField.setValue( '#' + hexString, false );
 
 			}
 
@@ -36,6 +37,10 @@ export class ColorEditor extends ObjectNode {
 
 			}
 
+			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( () => {
@@ -52,7 +57,7 @@ export class ColorEditor extends ObjectNode {
 
 			if ( value.indexOf( '#' ) === 0 ) {
 
-				const hexStr = value.substr( 1 ).padEnd( 6, '0' );
+				const hexStr = value.slice( 1 ).padEnd( 6, '0' );
 
 				node.value.setHex( parseInt( hexStr, 16 ) );
 
@@ -76,11 +81,11 @@ export class ColorEditor extends ObjectNode {
 
 		};
 
-		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 );
+		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 LabelElement( 'Value' ).add( field ).setSerializable( false ) )
+		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 ) );
 

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

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

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

@@ -1,16 +1,15 @@
-import { ObjectNode, ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
-import { FloatNode } from '../../renderers/nodes/Nodes.js';
+import { ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { UniformNode } from 'three/nodes';
 
-export class SliderEditor extends ObjectNode {
+export class SliderEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new FloatNode();
+		const node = new UniformNode( 0 );
 
 		super( 'Slider', 1, node );
 
-		this.title.setIcon( 'ti ti-adjustments-horizontal' );
-
 		this.collapse = true;
 
 		const field = new SliderInput( 0, 0, 1 ).onChange( () => {
@@ -50,7 +49,7 @@ export class SliderEditor extends ObjectNode {
 
 		} ) ).setSerializable( false );
 
-		this.add( new LabelElement( 'Value' ).add( field ) )
+		this.add( new Element().add( field ) )
 			.add( minElement )
 			.add( maxElement )
 			.add( moreElement );

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

@@ -0,0 +1,155 @@
+import { LabelElement, ToggleInput, SelectInput } from '../../libs/flow.module.js';
+import { BaseNode, onNodeValidElement } from '../core/BaseNode.js';
+import { TextureNode, UVNode } from 'three/nodes';
+import { Texture, TextureLoader, RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping } from 'three';
+
+const fileTexture = new WeakMap();
+const fileURL = new WeakMap();
+const textureLoader = new TextureLoader();
+const defaultTexture = new Texture();
+const defaultUV = new UVNode();
+
+const getTexture = ( file ) => {
+
+	let texture = fileTexture.get( file );
+
+	if ( texture === undefined || file.getURL() !== fileURL.get( file ) ) {
+
+		const url = file.getURL();
+
+		if ( texture !== undefined ) {
+
+			texture.dispose();
+
+		}
+
+		texture = textureLoader.load( url );
+
+		fileTexture.set( file, texture );
+		fileURL.set( file, url );
+
+	}
+
+	return texture;
+
+};
+
+export class TextureEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new TextureNode( defaultTexture );
+
+		super( 'Texture', 4, node, 250 );
+
+		this.texture = null;
+
+		this._initFile();
+		this._initParams();
+
+		this.onValidElement = () => {};
+
+	}
+
+	_initFile() {
+
+		const fileElement = new LabelElement( 'File' ).setInputColor( 'aqua' ).setInput( 1 );
+
+		fileElement.onValid( ( source, target, stage ) => {
+
+			const object = target.getObject();
+
+			if ( object && object.isDataFile !== true ) {
+
+				if ( stage === 'dragged' ) {
+
+					const name = target.node.getName();
+
+					this.editor.tips.error( `"${name}" is not a File.` );
+
+				}
+
+				return false;
+
+			}
+
+		} ).onConnect( () => {
+
+			const file = fileElement.getLinkedObject();
+			const node = this.value;
+
+			this.texture = file ? getTexture( file ) : null;
+
+			node.value = this.texture || defaultTexture;
+
+			this.update();
+
+		}, true );
+
+		this.add( fileElement );
+
+	}
+
+	_initParams() {
+
+		const uvField = new LabelElement( 'UV' ).setInput( 2 );
+
+		uvField.onValid( onNodeValidElement ).onConnect( () => {
+
+			const node = this.value;
+
+			node.uvNode = uvField.getLinkedObject() || defaultUV;
+
+		} );
+
+		this.wrapSInput = new SelectInput( [
+			{ name: 'Repeat Wrapping', value: RepeatWrapping },
+			{ name: 'Clamp To Edge Wrapping', value: ClampToEdgeWrapping },
+			{ name: 'Mirrored Repeat Wrapping', value: MirroredRepeatWrapping }
+		], RepeatWrapping ).onChange( () => {
+
+			this.update();
+
+		} );
+
+		this.wrapTInput = new SelectInput( [
+			{ name: 'Repeat Wrapping', value: RepeatWrapping },
+			{ name: 'Clamp To Edge Wrapping', value: ClampToEdgeWrapping },
+			{ name: 'Mirrored Repeat Wrapping', value: MirroredRepeatWrapping }
+		], RepeatWrapping ).onChange( () => {
+
+			this.update();
+
+		} );
+
+		this.flipYInput = new ToggleInput( false ).onChange( () => {
+
+			this.update();
+
+		} );
+
+		this.add( uvField )
+			.add( new LabelElement( 'Wrap S' ).add( this.wrapSInput ) )
+			.add( new LabelElement( 'Wrap T' ).add( this.wrapTInput ) )
+			.add( new LabelElement( 'Flip Y' ).add( this.flipYInput ) );
+
+	}
+
+	update() {
+
+		const texture = this.texture;
+
+		if ( texture ) {
+
+			texture.wrapS = Number( this.wrapSInput.getValue() );
+			texture.wrapT = Number( this.wrapTInput.getValue() );
+			texture.flipY = this.flipYInput.getValue();
+			texture.dispose();
+
+			this.invalidate();
+
+		}
+
+	}
+
+}

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

@@ -1,16 +1,16 @@
-import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
-import { Vector2Node } from '../../renderers/nodes/Nodes.js';
+import { NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector2 } from 'three';
+import { UniformNode } from 'three/nodes';
 
-export class Vector2Editor extends ObjectNode {
+export class Vector2Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector2Node();
+		const node = new UniformNode( new Vector2() );
 
 		super( 'Vector 2', 2, node );
 
-		this.title.setIcon( 'ti ti-box-multiple-2' );
-
 		const onUpdate = () => {
 
 			node.value.x = fieldX.getValue();
@@ -18,10 +18,10 @@ export class Vector2Editor extends ObjectNode {
 
 		};
 
-		const fieldX = new NumberInput().onChange( onUpdate );
-		const fieldY = new NumberInput().onChange( onUpdate );
+		const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
+		const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
 
-		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ) );
+		this.add( new LabelElement( 'XY' ).add( fieldX ).add( fieldY ) );
 
 	}
 

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

@@ -1,15 +1,15 @@
-import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
-import { Vector3Node } from '../../renderers/nodes/Nodes.js';
+import { NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector3 } from 'three';
+import { UniformNode } from 'three/nodes';
 
-export class Vector3Editor extends ObjectNode {
+export class Vector3Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector3Node();
+		const node = new UniformNode( new Vector3() );
 
-		super( 'Vector 3', 3, node );
-
-		this.title.setIcon( 'ti ti-box-multiple-3' );
+		super( 'Vector 3', 3, node, 325 );
 
 		const onUpdate = () => {
 
@@ -19,11 +19,11 @@ export class Vector3Editor extends ObjectNode {
 
 		};
 
-		const fieldX = new NumberInput().onChange( onUpdate );
-		const fieldY = new NumberInput().onChange( onUpdate );
-		const fieldZ = 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 );
 
-		this.add( new LabelElement( 'Values' ).add( fieldX ).add( fieldY ).add( fieldZ ) );
+		this.add( new LabelElement( 'XYZ' ).add( fieldX ).add( fieldY ).add( fieldZ ) );
 
 	}
 

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

@@ -1,15 +1,15 @@
-import { ObjectNode, NumberInput, LabelElement } from '../../libs/flow.module.js';
-import { Vector4Node } from '../../renderers/nodes/Nodes.js';
+import { NumberInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Vector4 } from 'three';
+import { UniformNode } from 'three/nodes';
 
-export class Vector4Editor extends ObjectNode {
+export class Vector4Editor extends BaseNode {
 
 	constructor() {
 
-		const node = new Vector4Node();
+		const node = new UniformNode( new Vector4() );
 
-		super( 'Vector 4', 4, node );
-
-		this.title.setIcon( 'ti ti-box-multiple-4' );
+		super( 'Vector 4', 4, node, 350 );
 
 		const onUpdate = () => {
 
@@ -20,12 +20,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( 1 ).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 'three/nodes';
+import { MathUtils } 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 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,102 @@
+import { ColorInput, ToggleInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { PointsNodeMaterial } from 'three/nodes';
+import * as THREE from 'three';
+
+export class PointsMaterialEditor extends BaseNode {
+
+	constructor() {
+
+		const material = new PointsNodeMaterial();
+
+		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 );
+		const sizeAttenuation = new LabelElement( 'Size Attenuation' );
+
+		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();
+
+		} ) );
+
+		sizeAttenuation.add( new ToggleInput( material.sizeAttenuation ).onClick( ( input ) => {
+
+			material.sizeAttenuation = input.getValue();
+			material.dispose();
+
+		} ) );
+
+		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 )
+			.add( sizeAttenuation );
+
+		this.color = color;
+		this.opacity = opacity;
+		this.size = size;
+		this.position = position;
+		this.sizeAttenuation = sizeAttenuation;
+
+		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' );
+
+	}
+
+}