@needle-tools/three 0.146.10 → 0.153.0

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

@@ -1,67 +0,0 @@
-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 BaseNode {
-
-	constructor() {
-
-		const node = new UniformNode( 0 );
-
-		super( 'Slider', 1, node );
-
-		this.collapse = true;
-
-		const field = new SliderInput( 0, 0, 1 ).onChange( () => {
-
-			node.value = field.getValue();
-
-		} );
-
-		const updateRange = () => {
-
-			const min = minInput.getValue();
-			const max = maxInput.getValue();
-
-			if ( min <= max ) {
-
-				field.setRange( min, max );
-
-			} else {
-
-				maxInput.setValue( min );
-
-			}
-
-		};
-
-		const minInput = new NumberInput().onChange( updateRange );
-		const maxInput = new NumberInput( 1 ).onChange( updateRange );
-
-		const minElement = new LabelElement( 'Min.' ).add( minInput ).setVisible( false );
-		const maxElement = new LabelElement( 'Max.' ).add( maxInput ).setVisible( false );
-
-		const moreElement = new Element().add( new ButtonInput( 'More' ).onClick( () => {
-
-			minElement.setVisible( true );
-			maxElement.setVisible( true );
-			moreElement.setVisible( false );
-
-		} ) ).setSerializable( false );
-
-		this.add( new Element().add( field ) )
-			.add( minElement )
-			.add( maxElement )
-			.add( moreElement );
-
-		this.onBlur( () => {
-
-			minElement.setVisible( false );
-			maxElement.setVisible( false );
-			moreElement.setVisible( true );
-
-		} );
-
-	}
-
-}

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

@@ -1,155 +0,0 @@
-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,28 +0,0 @@
-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 BaseNode {
-
-	constructor() {
-
-		const node = new UniformNode( new Vector2() );
-
-		super( 'Vector 2', 2, node );
-
-		const onUpdate = () => {
-
-			node.value.x = fieldX.getValue();
-			node.value.y = fieldY.getValue();
-
-		};
-
-		const fieldX = new NumberInput().setTagColor( 'red' ).onChange( onUpdate );
-		const fieldY = new NumberInput().setTagColor( 'green' ).onChange( onUpdate );
-
-		this.add( new LabelElement( 'XY' ).add( fieldX ).add( fieldY ) );
-
-	}
-
-}

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

@@ -1,30 +0,0 @@
-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 BaseNode {
-
-	constructor() {
-
-		const node = new UniformNode( new Vector3() );
-
-		super( 'Vector 3', 3, node, 325 );
-
-		const onUpdate = () => {
-
-			node.value.x = fieldX.getValue();
-			node.value.y = fieldY.getValue();
-			node.value.z = fieldZ.getValue();
-
-		};
-
-		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( 'XYZ' ).add( fieldX ).add( fieldY ).add( fieldZ ) );
-
-	}
-
-}

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

@@ -1,37 +0,0 @@
-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 BaseNode {
-
-	constructor() {
-
-		const node = new UniformNode( new Vector4() );
-
-		super( 'Vector 4', 4, node, 350 );
-
-		const onUpdate = () => {
-
-			node.value.x = fieldX.getValue();
-			node.value.y = fieldY.getValue();
-			node.value.z = fieldZ.getValue();
-			node.value.w = fieldW.getValue();
-
-		};
-
-		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( 'XYZW' )
-			.add( fieldX )
-			.add( fieldY )
-			.add( fieldZ )
-			.add( fieldW )
-		);
-
-	}
-
-}

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

@@ -1,84 +0,0 @@
-import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { BaseNode } from '../core/BaseNode.js';
-import { MeshBasicNodeMaterial } from 'three/nodes';
-
-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();
-
-	}
-
-	updateTransparent() {
-
-		const { material, opacity } = this;
-
-		const transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
-		const needsUpdate = transparent !== material.transparent;
-
-		material.transparent = transparent;
-
-		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
-
-		if ( needsUpdate === true ) material.dispose();
-
-	}
-
-}

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

@@ -1,102 +0,0 @@
-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' );
-
-	}
-
-}

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

@@ -1,118 +0,0 @@
-import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
-import { BaseNode } from '../core/BaseNode.js';
-import { MeshStandardNodeMaterial } from 'three/nodes';
-
-export class StandardMaterialEditor extends BaseNode {
-
-	constructor() {
-
-		const material = new MeshStandardNodeMaterial();
-
-		super( 'Standard Material', 1, material );
-
-		this.setWidth( 300 );
-
-		const color = new LabelElement( 'color' ).setInput( 3 );
-		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 ) => {
-
-			material.color.setHex( input.getValue() );
-
-		} ) );
-
-		opacity.add( new SliderInput( material.opacity, 0, 1 ).onChange( ( input ) => {
-
-			material.opacity = input.getValue();
-
-			this.updateTransparent();
-
-		} ) );
-
-		metalness.add( new SliderInput( material.metalness, 0, 1 ).onChange( ( input ) => {
-
-			material.metalness = input.getValue();
-
-		} ) );
-
-		roughness.add( new SliderInput( material.roughness, 0, 1 ).onChange( ( input ) => {
-
-			material.roughness = input.getValue();
-
-		} ) );
-
-		color.onConnect( () => this.update(), true );
-		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( 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;
-
-		this.update();
-
-	}
-
-	update() {
-
-		const { material, color, opacity, emissive, roughness, metalness, normal, position } = this;
-
-		color.setEnabledInputs( ! color.getLinkedObject() );
-		opacity.setEnabledInputs( ! opacity.getLinkedObject() );
-		roughness.setEnabledInputs( ! roughness.getLinkedObject() );
-		metalness.setEnabledInputs( ! metalness.getLinkedObject() );
-
-		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.positionNode = position.getLinkedObject();
-
-		material.dispose();
-
-		this.updateTransparent();
-
-	}
-
-	updateTransparent() {
-
-		const { material, opacity } = this;
-
-		const transparent = opacity.getLinkedObject() || material.opacity < 1 ? true : false;
-		const needsUpdate = transparent !== material.transparent;
-
-		material.transparent = transparent;
-
-		opacity.setIcon( material.transparent ? 'ti ti-layers-intersect' : 'ti ti-layers-subtract' );
-
-		if ( needsUpdate === true ) material.dispose();
-
-	}
-
-}

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

@@ -1,40 +0,0 @@
-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.RADIANS },
-			{ name: 'Radians to Degrees', value: MathNode.DEGREES }
-		], MathNode.RADIANS ).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,35 +0,0 @@
-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 );
-
-export class DotEditor extends BaseNode {
-
-	constructor() {
-
-		const node = new MathNode( MathNode.DOT, NULL_VALUE, NULL_VALUE );
-
-		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.getLinkedObject() || NULL_VALUE;
-
-		} );
-
-		bElement.onConnect( () => {
-
-			node.bNode = bElement.getLinkedObject() || NULL_VALUE;
-
-		} );
-
-		this.add( aElement )
-			.add( bElement );
-
-	}
-
-}