super-three 0.136.0 → 0.141.0

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

@@ -0,0 +1,160 @@
+import { NumberInput, StringInput, LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { Group, MathUtils, Vector3 } from 'three';
+
+export class Object3DEditor extends BaseNode {
+
+	constructor( object3d = null, name = 'Object 3D' ) {
+
+		if ( object3d === null ) {
+
+			object3d = new Group();
+
+		}
+
+		super( name, 1, object3d );
+
+		this.defaultPosition = new Vector3();
+		this.defaultRotation = new Vector3();
+		this.defaultScale = new Vector3( 100, 100, 100 );
+
+		this._initTags();
+		this._initTransform();
+
+		this.onValidElement = () => {};
+
+	}
+
+	setEditor( editor ) {
+
+		if ( this.editor ) {
+
+			this.restoreDefault();
+
+		}
+
+		super.setEditor( editor );
+
+		if ( editor ) {
+
+			const name = this.nameInput.getValue();
+			const object3d = editor.scene.getObjectByName( name );
+
+			this.value = object3d;
+
+			this.updateDefault();
+			this.restoreDefault();
+			this.update();
+
+		}
+
+		return this;
+
+	}
+
+	get object3d() {
+
+		return this.value;
+
+	}
+
+	_initTags() {
+
+		this.nameInput = new StringInput( this.object3d.name ).setReadOnly( true )
+			.onChange( () => this.object3d.name = this.nameInput.getValue() );
+
+		this.add( new LabelElement( 'Name' ).add( this.nameInput ) );
+
+	}
+
+	_initTransform() {
+
+		const update = () => this.update();
+
+		const posX = new NumberInput().setTagColor( 'red' ).onChange( update );
+		const posY = new NumberInput().setTagColor( 'green' ).onChange( update );
+		const posZ = new NumberInput().setTagColor( 'blue' ).onChange( update );
+
+		const rotationStep = 1;
+
+		const rotX = new NumberInput().setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
+		const rotY = new NumberInput().setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
+		const rotZ = new NumberInput().setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
+
+		const scaleX = new NumberInput( 100 ).setTagColor( 'red' ).setStep( rotationStep ).onChange( update );
+		const scaleY = new NumberInput( 100 ).setTagColor( 'green' ).setStep( rotationStep ).onChange( update );
+		const scaleZ = new NumberInput( 100 ).setTagColor( 'blue' ).setStep( rotationStep ).onChange( update );
+
+		this.add( new LabelElement( 'Position' ).add( posX ).add( posY ).add( posZ ) )
+			.add( new LabelElement( 'Rotation' ).add( rotX ).add( rotY ).add( rotZ ) )
+			.add( new LabelElement( 'Scale' ).add( scaleX ).add( scaleY ).add( scaleZ ) );
+
+		this.posX = posX;
+		this.posY = posY;
+		this.posZ = posZ;
+
+		this.rotX = rotX;
+		this.rotY = rotY;
+		this.rotZ = rotZ;
+
+		this.scaleX = scaleX;
+		this.scaleY = scaleY;
+		this.scaleZ = scaleZ;
+
+	}
+
+	update() {
+
+		const object3d = this.object3d;
+
+		if ( object3d ) {
+
+			const { position, rotation, scale } = object3d;
+
+			position.x = this.posX.getValue();
+			position.y = this.posY.getValue();
+			position.z = this.posZ.getValue();
+
+			rotation.x = MathUtils.degToRad( this.rotX.getValue() );
+			rotation.y = MathUtils.degToRad( this.rotY.getValue() );
+			rotation.z = MathUtils.degToRad( this.rotZ.getValue() );
+
+			scale.x = this.scaleX.getValue() / 100;
+			scale.y = this.scaleY.getValue() / 100;
+			scale.z = this.scaleZ.getValue() / 100;
+
+		}
+
+	}
+
+	updateDefault() {
+
+		const { position, rotation, scale } = this.object3d;
+
+		this.defaultPosition = position.clone();
+		this.defaultRotation = new Vector3( MathUtils.radToDeg( rotation.x ), MathUtils.radToDeg( rotation.y ), MathUtils.radToDeg( rotation.z ) );
+		this.defaultScale = scale.clone().multiplyScalar( 100 );
+
+	}
+
+	restoreDefault() {
+
+		const position = this.defaultPosition;
+		const rotation = this.defaultRotation;
+		const scale = this.defaultScale;
+
+		this.posX.setValue( position.x );
+		this.posY.setValue( position.y );
+		this.posZ.setValue( position.z );
+
+		this.rotX.setValue( rotation.x );
+		this.rotY.setValue( rotation.y );
+		this.rotZ.setValue( rotation.z );
+
+		this.scaleX.setValue( scale.x );
+		this.scaleY.setValue( scale.y );
+		this.scaleZ.setValue( scale.z );
+
+	}
+
+}

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

@@ -0,0 +1,99 @@
+import { LabelElement } from '../../libs/flow.module.js';
+import { Object3DEditor } from './Object3DEditor.js';
+import { Points } from 'three';
+
+export class PointsEditor extends Object3DEditor {
+
+	constructor( points = null ) {
+
+		if ( points === null ) {
+
+			points = new Points();
+
+		}
+
+		super( points, 'Points' );
+
+		this.material = null;
+
+		this.defaultMaterial = null;
+
+		this._initMaterial();
+
+		this.updateDefault();
+		this.restoreDefault();
+		this.update();
+
+	}
+
+	get points() {
+
+		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 points = this.points;
+
+		if ( points ) {
+
+			points.material = this.material || this.defaultMaterial;
+
+		}
+
+	}
+
+	updateDefault() {
+
+		super.updateDefault();
+
+		this.defaultMaterial = this.points.material;
+
+	}
+
+	restoreDefault() {
+
+		super.restoreDefault();
+
+		this.points.material = this.defaultMaterial;
+
+	}
+
+}

package/examples/jsm/node-editor/utils/JoinEditor.js

@@ -0,0 +1,58 @@
+import { LabelElement } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { JoinNode, UniformNode } from 'three-nodes/Nodes.js';
+
+const NULL_VALUE = new UniformNode( 0 );
+
+export class JoinEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new JoinNode();
+
+		super( 'Join', 1, node, 175 );
+
+		const update = () => {
+
+			const values = [
+				xElement.getLinkedObject(),
+				yElement.getLinkedObject(),
+				zElement.getLinkedObject(),
+				wElement.getLinkedObject()
+			];
+
+			let length = 1;
+
+			if ( values[ 3 ] !== null ) length = 4;
+			else if ( values[ 2 ] !== null ) length = 3;
+			else if ( values[ 1 ] !== null ) length = 2;
+
+			const nodes = [];
+
+			for ( let i = 0; i < length; i ++ ) {
+
+				nodes.push( values[ i ] || NULL_VALUE );
+
+			}
+
+			node.nodes = nodes;
+
+			this.invalidate();
+
+		};
+
+		const xElement = new LabelElement( 'X | R' ).setInput( 1 ).onConnect( update );
+		const yElement = new LabelElement( 'Y | G' ).setInput( 1 ).onConnect( update );
+		const zElement = new LabelElement( 'Z | B' ).setInput( 1 ).onConnect( update );
+		const wElement = new LabelElement( 'W | A' ).setInput( 1 ).onConnect( update );
+
+		this.add( xElement )
+			.add( yElement )
+			.add( zElement )
+			.add( wElement );
+
+		update();
+
+	}
+
+}

package/examples/jsm/node-editor/utils/OscillatorEditor.js

@@ -1,22 +1,23 @@
-import { ObjectNode, SelectInput, LabelElement } from '../../libs/flow.module.js';
-import { OscNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+import { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { OscNode, UniformNode } from 'three-nodes/Nodes.js';
 
-const NULL_VALUE = new FloatNode();
+const NULL_VALUE = new UniformNode( 0 );
 
-export class OscillatorEditor extends ObjectNode {
+export class OscillatorEditor extends BaseNode {
 
 	constructor() {
 
 		const node = new OscNode( OscNode.SINE, NULL_VALUE );
 
-		super( 'Oscillator', 1, node, 250 );
+		super( 'Oscillator', 1, node, 175 );
 
 		const methodInput = new SelectInput( [
 			{ name: 'Sine', value: OscNode.SINE },
 			{ name: 'Square', value: OscNode.SQUARE },
 			{ name: 'Triangle', value: OscNode.TRIANGLE },
 			{ name: 'Sawtooth', value: OscNode.SAWTOOTH }
-		] );
+		], OscNode.SINE );
 
 		methodInput.onChange( () => {
 
@@ -30,11 +31,11 @@ export class OscillatorEditor extends ObjectNode {
 
 		timeElement.onConnect( () => {
 
-			node.timeNode = timeElement.linkedExtra || NULL_VALUE;
+			node.timeNode = timeElement.getLinkedObject() || NULL_VALUE;
 
 		} );
 
-		this.add( new LabelElement( 'Method' ).add( methodInput ) )
+		this.add( new Element().add( methodInput ) )
 			.add( timeElement );
 
 	}

package/examples/jsm/node-editor/utils/PreviewEditor.js

@@ -0,0 +1,166 @@
+import { OrbitControls } from 'three-addons/controls/OrbitControls.js';
+import { ViewHelper } from 'three-addons/helpers/ViewHelper.js';
+import { Element, LabelElement, SelectInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { MeshBasicNodeMaterial, ConstNode } from 'three-nodes/Nodes.js';
+import { WebGLRenderer, PerspectiveCamera, Scene, Mesh, DoubleSide, SphereGeometry, BoxGeometry, PlaneGeometry, TorusKnotGeometry } from 'three';
+
+const nullValue = new ConstNode( 0 );
+
+const sceneDict = {};
+
+const getScene = ( name ) => {
+
+	let scene = sceneDict[ name ];
+
+	if ( scene === undefined ) {
+
+		scene = new Scene();
+
+		if ( name === 'box' ) {
+
+			const box = new Mesh( new BoxGeometry( 1.3, 1.3, 1.3 ) );
+			scene.add( box );
+
+		} else if ( name === 'sphere' ) {
+
+			const sphere = new Mesh( new SphereGeometry( 1, 32, 16 ) );
+			scene.add( sphere );
+
+		} else if ( name === 'plane' || name === 'sprite' ) {
+
+			const plane = new Mesh( new PlaneGeometry( 2, 2 ) );
+			scene.add( plane );
+
+
+		} else if ( name === 'torus' ) {
+
+			const torus = new Mesh( new TorusKnotGeometry( .7, .1, 100, 16 ) );
+			scene.add( torus );
+
+		}
+
+		sceneDict[ name ] = scene;
+
+	}
+
+	return scene;
+
+};
+
+export class PreviewEditor extends BaseNode {
+
+	constructor() {
+
+		const width = 300;
+		const height = 300;
+
+		super( 'Preview', 0, null, height );
+
+		const material = new MeshBasicNodeMaterial();
+		material.colorNode = nullValue;
+		material.side = DoubleSide;
+		material.transparent = true;
+
+		const previewElement = new Element();
+		previewElement.dom.style[ 'padding-top' ] = 0;
+		previewElement.dom.style[ 'padding-bottom' ] = 0;
+
+		const sceneInput = new SelectInput( [
+			{ name: 'Box', value: 'box' },
+			{ name: 'Sphere', value: 'sphere' },
+			{ name: 'Plane', value: 'plane' },
+			{ name: 'Sprite', value: 'sprite' },
+			{ name: 'Torus', value: 'torus' }
+		], 'box' );
+
+		const inputElement = new LabelElement( 'Input' ).setInput( 4 ).onConnect( () => {
+
+			material.colorNode = inputElement.getLinkedObject() || nullValue;
+			material.dispose();
+
+		}, true );
+
+		const canvas = document.createElement( 'canvas' );
+		canvas.style.position = 'absolute';
+		previewElement.dom.append( canvas );
+		previewElement.setHeight( height );
+
+		const renderer = new WebGLRenderer( {
+			canvas,
+			alpha: true
+		} );
+
+		renderer.autoClear = false;
+		renderer.setSize( width, height, true );
+		renderer.setPixelRatio( window.devicePixelRatio );
+
+		const camera = new PerspectiveCamera( 45, width / height, 0.1, 100 );
+		camera.aspect = width / height;
+		camera.updateProjectionMatrix();
+		camera.position.set( - 2, 2, 2 );
+		camera.lookAt( 0, 0, 0 );
+
+		const controls = new OrbitControls( camera, previewElement.dom );
+		controls.enableKeys = false;
+		controls.update();
+
+		const viewHelper = new ViewHelper( camera, previewElement.dom );
+
+		this.sceneInput = sceneInput;
+		this.viewHelper = viewHelper;
+		this.material = material;
+		this.camera = camera;
+		this.renderer = renderer;
+
+		this.add( inputElement )
+			.add( new LabelElement( 'Object' ).add( sceneInput ) )
+			.add( previewElement );
+
+	}
+
+	setEditor( editor ) {
+
+		super.setEditor( editor );
+
+		this.updateAnimationRequest();
+
+	}
+
+	updateAnimationRequest() {
+
+		if ( this.editor !== null ) {
+
+			requestAnimationFrame( () => this.update() );
+
+		}
+
+	}
+
+	update() {
+
+		const { viewHelper, material, renderer, camera, sceneInput } = this;
+
+		this.updateAnimationRequest();
+
+		const sceneName = sceneInput.getValue();
+
+		const scene = getScene( sceneName );
+		const mesh = scene.children[ 0 ];
+
+		mesh.material = material;
+
+		if ( sceneName === 'sprite' ) {
+
+			mesh.lookAt( camera.position );
+
+		}
+
+		renderer.clear();
+		renderer.render( scene, camera );
+
+		viewHelper.render( renderer );
+
+	}
+
+}

package/examples/jsm/node-editor/utils/SplitEditor.js

@@ -0,0 +1,39 @@
+import { SelectInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { SplitNode, UniformNode } from 'three-nodes/Nodes.js';
+
+const NULL_VALUE = new UniformNode( 0 );
+
+export class SplitEditor extends BaseNode {
+
+	constructor() {
+
+		const node = new SplitNode( NULL_VALUE, 'x' );
+
+		super( 'Split', 1, node, 175 );
+
+		const componentsField = new SelectInput( [
+			{ name: 'X | R', value: 'x' },
+			{ name: 'Y | G', value: 'y' },
+			{ name: 'Z | B', value: 'z' },
+			{ name: 'W | A', value: 'w' }
+		], node.components ).onChange( () => {
+
+			node.components = componentsField.getValue();
+
+			this.invalidate();
+
+		} );
+
+		const componentsElement = new Element().add( componentsField ).setInput( 1 )
+			.onConnect( () => {
+
+				node.node = componentsElement.getLinkedObject() || NULL_VALUE;
+
+			} );
+
+		this.add( componentsElement );
+
+	}
+
+}

package/examples/jsm/node-editor/utils/TimerEditor.js

@@ -1,13 +1,14 @@
-import { ObjectNode, NumberInput, LabelElement, Element, ButtonInput } from '../../libs/flow.module.js';
-import { TimerNode } from '../../renderers/nodes/Nodes.js';
+import { NumberInput, LabelElement, Element, ButtonInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { TimerNode } from 'three-nodes/Nodes.js';
 
-export class TimerEditor extends ObjectNode {
+export class TimerEditor extends BaseNode {
 
 	constructor() {
 
 		const node = new TimerNode();
 
-		super( 'Timer', 1, node, 250 );
+		super( 'Timer', 1, node, 200 );
 
 		this.title.setIcon( 'ti ti-clock' );
 
@@ -37,8 +38,8 @@ export class TimerEditor extends ObjectNode {
 
 		} ) ).setSerializable( false );
 
-		this.add( new LabelElement( 'Value' ).add( field ).setSerializable( false ) )
-			.add( new LabelElement( 'Scale' ).add( scaleField ) )
+		this.add( new Element().add( field ).setSerializable( false ) )
+			.add( new LabelElement( 'Speed' ).add( scaleField ) )
 			.add( moreElement );
 
 		// extends node