super-three 0.136.1 → 0.137.0

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

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

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, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+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 { SelectInput, LabelElement, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { OscNode, FloatNode } from '../../renderers/nodes/Nodes.js';
 
 const NULL_VALUE = new FloatNode();
 
-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/SplitEditor.js

@@ -0,0 +1,39 @@
+import { SelectInput, Element } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
+import { SplitNode, FloatNode } from '../../renderers/nodes/Nodes.js';
+
+const NULL_VALUE = new FloatNode();
+
+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 { NumberInput, LabelElement, Element, ButtonInput } from '../../libs/flow.module.js';
+import { BaseNode } from '../core/BaseNode.js';
 import { TimerNode } from '../../renderers/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

package/examples/jsm/postprocessing/OutlinePass.js

@@ -4,7 +4,6 @@ import {
 	DoubleSide,
 	LinearFilter,
 	Matrix4,
-	MeshBasicMaterial,
 	MeshDepthMaterial,
 	NoBlending,
 	RGBADepthPacking,
@@ -46,8 +45,6 @@ class OutlinePass extends Pass {
 		const resx = Math.round( this.resolution.x / this.downSampleRatio );
 		const resy = Math.round( this.resolution.y / this.downSampleRatio );
 
-		this.maskBufferMaterial = new MeshBasicMaterial( { color: 0xffffff } );
-		this.maskBufferMaterial.side = DoubleSide;
 		this.renderTargetMaskBuffer = new WebGLRenderTarget( this.resolution.x, this.resolution.y, pars );
 		this.renderTargetMaskBuffer.texture.name = 'OutlinePass.mask';
 		this.renderTargetMaskBuffer.texture.generateMipmaps = false;
@@ -129,7 +126,7 @@ class OutlinePass extends Pass {
 
 		function replaceDepthToViewZ( string, camera ) {
 
-			var type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
+			const type = camera.isPerspectiveCamera ? 'perspective' : 'orthographic';
 
 			return string.replace( /DEPTH_TO_VIEW_Z/g, type + 'DepthToViewZ' );
 

package/examples/jsm/renderers/CSS2DRenderer.js

@@ -113,39 +113,44 @@ class CSS2DRenderer {
 
 			if ( object.isCSS2DObject ) {
 
-				object.onBeforeRender( _this, scene, camera );
+				const visible = object.visible && _vector.z >= - 1 && _vector.z <= 1 && object.layers.test( camera.layers );
+				object.element.style.display = visible ? '' : 'none';
 
-				_vector.setFromMatrixPosition( object.matrixWorld );
-				_vector.applyMatrix4( _viewProjectionMatrix );
+				if ( visible ) {
 
-				const element = object.element;
+					object.onBeforeRender( _this, scene, camera );
 
-				if ( /apple/i.test( navigator.vendor ) ) {
+					_vector.setFromMatrixPosition( object.matrixWorld );
+					_vector.applyMatrix4( _viewProjectionMatrix );
 
-					// https://github.com/mrdoob/three.js/issues/21415
-					element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+					const element = object.element;
 
-				} else {
+					if ( /apple/i.test( navigator.vendor ) ) {
 
-					element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
+						// https://github.com/mrdoob/three.js/issues/21415
+						element.style.transform = 'translate(-50%,-50%) translate(' + Math.round( _vector.x * _widthHalf + _widthHalf ) + 'px,' + Math.round( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-				}
+					} else {
 
-				element.style.display = ( object.visible && _vector.z >= - 1 && _vector.z <= 1 ) ? '' : 'none';
+						element.style.transform = 'translate(-50%,-50%) translate(' + ( _vector.x * _widthHalf + _widthHalf ) + 'px,' + ( - _vector.y * _heightHalf + _heightHalf ) + 'px)';
 
-				const objectData = {
-					distanceToCameraSquared: getDistanceToSquared( camera, object )
-				};
+					}
 
-				cache.objects.set( object, objectData );
+					const objectData = {
+						distanceToCameraSquared: getDistanceToSquared( camera, object )
+					};
 
-				if ( element.parentNode !== domElement ) {
+					cache.objects.set( object, objectData );
 
-					domElement.appendChild( element );
+					if ( element.parentNode !== domElement ) {
 
-				}
+						domElement.appendChild( element );
+
+					}
 
-				object.onAfterRender( _this, scene, camera );
+					object.onAfterRender( _this, scene, camera );
+
+				}
 
 			}