super-three 0.137.0 → 0.141.0

package/examples/jsm/node-editor/NodeEditor.js

@@ -16,10 +16,14 @@ import { Vector3Editor } from './inputs/Vector3Editor.js';
 import { Vector4Editor } from './inputs/Vector4Editor.js';
 import { SliderEditor } from './inputs/SliderEditor.js';
 import { ColorEditor } from './inputs/ColorEditor.js';
+import { TextureEditor } from './inputs/TextureEditor.js';
 import { BlendEditor } from './display/BlendEditor.js';
+import { NormalMapEditor } from './display/NormalMapEditor.js';
 import { UVEditor } from './accessors/UVEditor.js';
+import { MatcapUVEditor } from './accessors/MatcapUVEditor.js';
 import { PositionEditor } from './accessors/PositionEditor.js';
 import { NormalEditor } from './accessors/NormalEditor.js';
+import { PreviewEditor } from './utils/PreviewEditor.js';
 import { TimerEditor } from './utils/TimerEditor.js';
 import { OscillatorEditor } from './utils/OscillatorEditor.js';
 import { SplitEditor } from './utils/SplitEditor.js';
@@ -27,6 +31,8 @@ import { JoinEditor } from './utils/JoinEditor.js';
 import { CheckerEditor } from './procedural/CheckerEditor.js';
 import { PointsEditor } from './scene/PointsEditor.js';
 import { MeshEditor } from './scene/MeshEditor.js';
+import { FileEditor } from './core/FileEditor.js';
+import { FileURLEditor } from './core/FileURLEditor.js';
 import { EventDispatcher } from 'three';
 
 Styles.icons.unlink = 'ti ti-unlink';
@@ -65,6 +71,16 @@ export const NodeList = [
 				name: 'Color',
 				icon: 'palette',
 				nodeClass: ColorEditor
+			},
+			{
+				name: 'Texture',
+				icon: 'photo',
+				nodeClass: TextureEditor
+			},
+			{
+				name: 'File URL',
+				icon: 'cloud-download',
+				nodeClass: FileURLEditor
 			}
 		]
 	},
@@ -86,6 +102,11 @@ export const NodeList = [
 				name: 'Normal',
 				icon: 'fold-up',
 				nodeClass: NormalEditor
+			},
+			{
+				name: 'Matcap UV',
+				icon: 'circle',
+				nodeClass: MatcapUVEditor
 			}
 		]
 	},
@@ -97,6 +118,11 @@ export const NodeList = [
 				name: 'Blend',
 				icon: 'layers-subtract',
 				nodeClass: BlendEditor
+			},
+			{
+				name: 'Normal Map',
+				icon: 'chart-line',
+				nodeClass: NormalMapEditor
 			}
 		]
 	},
@@ -113,7 +139,7 @@ export const NodeList = [
 				name: 'Invert',
 				icon: 'flip-vertical',
 				tip: 'Negate',
-				nodeClass: OperatorEditor
+				nodeClass: InvertEditor
 			},
 			{
 				name: 'Limiter',
@@ -165,6 +191,11 @@ export const NodeList = [
 		name: 'Utils',
 		icon: 'apps',
 		children: [
+			{
+				name: 'Preview',
+				icon: 'square-check',
+				nodeClass: PreviewEditor
+			},
 			{
 				name: 'Timer',
 				icon: 'clock',
@@ -241,15 +272,19 @@ export const ClassLib = {
 	Vector4Editor,
 	SliderEditor,
 	ColorEditor,
+	TextureEditor,
 	BlendEditor,
+	NormalMapEditor,
 	UVEditor,
+	MatcapUVEditor,
 	PositionEditor,
 	NormalEditor,
 	TimerEditor,
 	OscillatorEditor,
 	SplitEditor,
 	JoinEditor,
-	CheckerEditor
+	CheckerEditor,
+	FileURLEditor
 };
 
 export class NodeEditor extends EventDispatcher {
@@ -271,6 +306,7 @@ export class NodeEditor extends EventDispatcher {
 		this.nodesContext = null;
 		this.examplesContext = null;
 
+		this._initUpload();
 		this._initTips();
 		this._initMenu();
 		this._initSearch();
@@ -333,11 +369,13 @@ export class NodeEditor extends EventDispatcher {
 
 	loadJSON( json ) {
 
-		this.canvas.clear();
+		const canvas = this.canvas;
+
+		canvas.clear();
 
-		this.canvas.deserialize( json );
+		canvas.deserialize( json );
 
-		for ( const node of this.canvas.nodes ) {
+		for ( const node of canvas.nodes ) {
 
 			this.add( node );
 
@@ -347,6 +385,36 @@ export class NodeEditor extends EventDispatcher {
 
 	}
 
+	_initUpload() {
+
+		const canvas = this.canvas;
+
+		canvas.onDrop( () => {
+
+			for ( const item of canvas.droppedItems ) {
+
+				if ( /^image\//.test( item.type ) === true ) {
+
+					const { relativeClientX, relativeClientY } = canvas;
+
+					const file = item.getAsFile();
+					const fileEditor = new FileEditor( file );
+
+					fileEditor.setPosition(
+						relativeClientX - ( fileEditor.getWidth() / 2 ),
+						relativeClientY - 20
+					);
+
+					this.add( fileEditor );
+
+				}
+
+			}
+
+		} );
+
+	}
+
 	_initTips() {
 
 		this.tips = new Tips();
@@ -473,6 +541,7 @@ export class NodeEditor extends EventDispatcher {
 		addExample( basicContext, 'Animate UV' );
 		addExample( basicContext, 'Fake top light' );
 		addExample( basicContext, 'Oscillator color' );
+		addExample( basicContext, 'Matcap' );
 
 		addExample( advancedContext, 'Rim' );
 
@@ -622,8 +691,8 @@ export class NodeEditor extends EventDispatcher {
 			if ( isContext ) {
 
 				node.setPosition(
-					contextPosition.x,
-					contextPosition.y
+					Math.round( contextPosition.x ),
+					Math.round( contextPosition.y )
 				);
 
 			} else {
@@ -648,8 +717,8 @@ export class NodeEditor extends EventDispatcher {
 
 			const { relativeClientX, relativeClientY } = this.canvas;
 
-			contextPosition.x = relativeClientX;
-			contextPosition.y = relativeClientY;
+			contextPosition.x = Math.round( relativeClientX );
+			contextPosition.y = Math.round( relativeClientY );
 
 		} );
 

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

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

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

@@ -1,6 +1,6 @@
 import { SelectInput, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { NormalNode } from '../../renderers/nodes/Nodes.js';
+import { NormalNode } from 'three-nodes/Nodes.js';
 
 export class NormalEditor extends BaseNode {
 

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

@@ -1,6 +1,6 @@
 import { SelectInput, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { PositionNode } from '../../renderers/nodes/Nodes.js';
+import { PositionNode } from 'three-nodes/Nodes.js';
 
 export class PositionEditor extends BaseNode {
 

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

@@ -1,6 +1,6 @@
 import { SelectInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { UVNode } from '../../renderers/nodes/Nodes.js';
+import { UVNode } from 'three-nodes/Nodes.js';
 
 export class UVEditor extends BaseNode {
 

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

@@ -1,5 +1,17 @@
 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 ) {
@@ -18,17 +30,7 @@ export class BaseNode extends ObjectNode {
 
 		this.value = value;
 
-		this.onValidElement = ( inputElement, outputElement ) => {
-
-			const outputObject = outputElement.getObject();
-
-			if ( ! outputObject || ! outputObject.isNode ) {
-
-				return false;
-
-			}
-
-		};
+		this.onValidElement = onNodeValidElement;
 
 	}
 
@@ -68,6 +70,10 @@ export class BaseNode extends ObjectNode {
 
 			return 'orange';
 
+		} else if ( value.isDataFile === true ) {
+
+			return 'aqua';
+
 		}
 
 	}

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

@@ -1,9 +1,9 @@
 import { LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MathNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { MathNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
-const ONE_VALUE = new FloatNode( 1 );
+const NULL_VALUE = new UniformNode( 0 );
+const ONE_VALUE = new UniformNode( 1 );
 
 export class BlendEditor extends BaseNode {
 

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/Nodes.js';
+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/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/inputs/ColorEditor.js

@@ -1,12 +1,13 @@
 import { ColorInput, StringInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { ColorNode } from '../../renderers/nodes/Nodes.js';
+import { Color } from 'three';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class ColorEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new ColorNode();
+		const node = new UniformNode( new Color() );
 
 		super( 'Color', 3, node );
 
@@ -36,9 +37,9 @@ export class ColorEditor extends BaseNode {
 
 			}
 
-			fieldR.setTagColor( `#${hexString.substr( 0, 2 )}0000` );
-			fieldG.setTagColor( `#00${hexString.substr( 2, 2 )}00` );
-			fieldB.setTagColor( `#0000${hexString.substr( 4, 2 )}` );
+			fieldR.setTagColor( `#${hexString.slice( 0, 2 )}0000` );
+			fieldG.setTagColor( `#00${hexString.slice( 2, 4 )}00` );
+			fieldB.setTagColor( `#0000${hexString.slice( 4, 6 )}` );
 
 		};
 
@@ -56,7 +57,7 @@ export class ColorEditor extends BaseNode {
 
 			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 ) );
 

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

@@ -1,12 +1,12 @@
 import { NumberInput, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { FloatNode } from '../../renderers/nodes/Nodes.js';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class FloatEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new FloatNode();
+		const node = new UniformNode( 0 );
 
 		super( 'Float', 1, node, 150 );
 

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

@@ -1,12 +1,12 @@
 import { ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { FloatNode } from '../../renderers/nodes/Nodes.js';
+import { UniformNode } from 'three-nodes/Nodes.js';
 
 export class SliderEditor extends BaseNode {
 
 	constructor() {
 
-		const node = new FloatNode();
+		const node = new UniformNode( 0 );
 
 		super( 'Slider', 1, node );
 

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/Nodes.js';
+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();
+
+		}
+
+	}
+
+}