super-three 0.141.0 → 0.147.0

package/examples/jsm/misc/VolumeSlice.js

@@ -16,96 +16,94 @@ import {
  * @param   {string}       [axis='z']      For now only 'x', 'y' or 'z' but later it will change to a normal vector
  * @see Volume
  */
-function VolumeSlice( volume, index, axis ) {
+class VolumeSlice {
 
-	const slice = this;
-	/**
-	 * @member {Volume} volume The associated volume
-	 */
-	this.volume = volume;
-	/**
-	 * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
-	 */
-	index = index || 0;
-	Object.defineProperty( this, 'index', {
-		get: function () {
-
-			return index;
-
-		},
-		set: function ( value ) {
-
-			index = value;
-			slice.geometryNeedsUpdate = true;
-			return index;
-
-		}
-	} );
-	/**
-	 * @member {String} axis The normal axis
-	 */
-	this.axis = axis || 'z';
-
-	/**
-	 * @member {HTMLCanvasElement} canvas The final canvas used for the texture
-	 */
-	/**
-	 * @member {CanvasRenderingContext2D} ctx Context of the canvas
-	 */
-	this.canvas = document.createElement( 'canvas' );
-	/**
-	 * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
-	 */
-	/**
-	 * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
-	 */
-	this.canvasBuffer = document.createElement( 'canvas' );
-	this.updateGeometry();
+	constructor( volume, index, axis ) {
 
+		const slice = this;
+		/**
+		 * @member {Volume} volume The associated volume
+		 */
+		this.volume = volume;
+		/**
+		 * @member {Number} index The index of the slice, if changed, will automatically call updateGeometry at the next repaint
+		 */
+		index = index || 0;
+		Object.defineProperty( this, 'index', {
+			get: function () {
 
-	const canvasMap = new Texture( this.canvas );
-	canvasMap.minFilter = LinearFilter;
-	canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
-	const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
-	/**
-	 * @member {Mesh} mesh The mesh ready to get used in the scene
-	 */
-	this.mesh = new Mesh( this.geometry, material );
-	this.mesh.matrixAutoUpdate = false;
-	/**
-	 * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
-	 */
-	this.geometryNeedsUpdate = true;
-	this.repaint();
+				return index;
 
-	/**
-	 * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
-	 */
+			},
+			set: function ( value ) {
 
-	/**
-	 * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
-	 */
+				index = value;
+				slice.geometryNeedsUpdate = true;
+				return index;
 
-	/**
-	 * @member {Function} sliceAccess Function that allow the slice to access right data
-	 * @see Volume.extractPerpendicularPlane
-	 * @param {Number} i The first coordinate
-	 * @param {Number} j The second coordinate
-	 * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
-	 */
-
-
-}
+			}
+		} );
+		/**
+		 * @member {String} axis The normal axis
+		 */
+		this.axis = axis || 'z';
+
+		/**
+		 * @member {HTMLCanvasElement} canvas The final canvas used for the texture
+		 */
+		/**
+		 * @member {CanvasRenderingContext2D} ctx Context of the canvas
+		 */
+		this.canvas = document.createElement( 'canvas' );
+		/**
+		 * @member {HTMLCanvasElement} canvasBuffer The intermediary canvas used to paint the data
+		 */
+		/**
+		 * @member {CanvasRenderingContext2D} ctxBuffer Context of the canvas buffer
+		 */
+		this.canvasBuffer = document.createElement( 'canvas' );
+		this.updateGeometry();
+
+
+		const canvasMap = new Texture( this.canvas );
+		canvasMap.minFilter = LinearFilter;
+		canvasMap.wrapS = canvasMap.wrapT = ClampToEdgeWrapping;
+		const material = new MeshBasicMaterial( { map: canvasMap, side: DoubleSide, transparent: true } );
+		/**
+		 * @member {Mesh} mesh The mesh ready to get used in the scene
+		 */
+		this.mesh = new Mesh( this.geometry, material );
+		this.mesh.matrixAutoUpdate = false;
+		/**
+		 * @member {Boolean} geometryNeedsUpdate If set to true, updateGeometry will be triggered at the next repaint
+		 */
+		this.geometryNeedsUpdate = true;
+		this.repaint();
+
+		/**
+		 * @member {Number} iLength Width of slice in the original coordinate system, corresponds to the width of the buffer canvas
+		 */
+
+		/**
+		 * @member {Number} jLength Height of slice in the original coordinate system, corresponds to the height of the buffer canvas
+		 */
+
+		/**
+		 * @member {Function} sliceAccess Function that allow the slice to access right data
+		 * @see Volume.extractPerpendicularPlane
+		 * @param {Number} i The first coordinate
+		 * @param {Number} j The second coordinate
+		 * @returns {Number} the index corresponding to the voxel in volume.data of the given position in the slice
+		 */
 
-VolumeSlice.prototype = {
 
-	constructor: VolumeSlice,
+	}
 
 	/**
 	 * @member {Function} repaint Refresh the texture and the geometry if geometryNeedsUpdate is set to true
 	 * @memberof VolumeSlice
 	 */
-	repaint: function () {
+	repaint() {
 
 		if ( this.geometryNeedsUpdate ) {
 
@@ -185,14 +183,14 @@ VolumeSlice.prototype = {
 
 		this.mesh.material.map.needsUpdate = true;
 
-	},
+	}
 
 	/**
 	 * @member {Function} Refresh the geometry according to axis and index
 	 * @see Volume.extractPerpendicularPlane
 	 * @memberof VolumeSlice
 	 */
-	updateGeometry: function () {
+	updateGeometry() {
 
 		const extracted = this.volume.extractPerpendicularPlane( this.axis, this.index );
 		this.sliceAccess = extracted.sliceAccess;
@@ -224,6 +222,6 @@ VolumeSlice.prototype = {
 
 	}
 
-};
+}
 
 export { VolumeSlice };

package/examples/jsm/modifiers/SimplifyModifier.js

@@ -342,7 +342,7 @@ function collapse( vertices, faces, u, v ) { // u and v are pointers to vertices
 	// delete triangles on edge uv:
 	for ( let i = u.faces.length - 1; i >= 0; i -- ) {
 
-		if ( u.faces[ i ].hasVertex( v ) ) {
+		if ( u.faces[ i ] && u.faces[ i ].hasVertex( v ) ) {
 
 			removeFace( u.faces[ i ], faces );
 

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

@@ -45,6 +45,7 @@ export const NodeList = [
 			{
 				name: 'Slider',
 				icon: 'adjustments-horizontal',
+				tags: 'number',
 				nodeClass: SliderEditor
 			},
 			{
@@ -117,6 +118,7 @@ export const NodeList = [
 			{
 				name: 'Blend',
 				icon: 'layers-subtract',
+				tags: 'mix',
 				nodeClass: BlendEditor
 			},
 			{
@@ -133,6 +135,7 @@ export const NodeList = [
 			{
 				name: 'Operator',
 				icon: 'math-symbols',
+				tags: 'addition, subtration, multiplication, division',
 				nodeClass: OperatorEditor
 			},
 			{
@@ -161,12 +164,14 @@ export const NodeList = [
 				name: 'Trigonometry',
 				icon: 'wave-sine',
 				tip: 'Sin / Cos / Tan / ...',
+				tags: 'sin, cos, tan, asin, acos, atan, sine, cosine, tangent, arcsine, arccosine, arctangent',
 				nodeClass: TrigonometryEditor
 			},
 			{
 				name: 'Angle',
 				icon: 'angle',
 				tip: 'Degress / Radians',
+				tags: 'degress, radians',
 				nodeClass: AngleEditor
 			},
 			{
@@ -303,6 +308,13 @@ export class NodeEditor extends EventDispatcher {
 		this.canvas = canvas;
 		this.domElement = domElement;
 
+		this._preview = false;
+
+		this.search = null;
+
+		this.menu = null;
+		this.previewMenu = null;
+
 		this.nodesContext = null;
 		this.examplesContext = null;
 
@@ -315,21 +327,26 @@ export class NodeEditor extends EventDispatcher {
 
 	}
 
+	setSize( width, height ) {
+
+		this.canvas.setSize( width, height );
+
+		return this;
+
+	}
+
 	centralizeNode( node ) {
 
 		const canvas = this.canvas;
-		const canvasRect = canvas.rect;
-
 		const nodeRect = node.dom.getBoundingClientRect();
 
-		const defaultOffsetX = nodeRect.width;
-		const defaultOffsetY = nodeRect.height;
-
 		node.setPosition(
-			( canvas.relativeX + ( canvasRect.width / 2 ) ) - defaultOffsetX,
-			( canvas.relativeY + ( canvasRect.height / 2 ) ) - defaultOffsetY
+			( ( canvas.width / 2 ) - canvas.scrollLeft ) - nodeRect.width,
+			( ( canvas.height / 2 ) - canvas.scrollTop ) - nodeRect.height
 		);
 
+		return this;
+
 	}
 
 	add( node ) {
@@ -359,9 +376,47 @@ export class NodeEditor extends EventDispatcher {
 
 	}
 
+	set preview( value ) {
+
+		if ( this._preview === value ) return;
+
+		if ( value ) {
+
+			this.menu.dom.remove();
+			this.canvas.dom.remove();
+			this.search.dom.remove();
+
+			this.domElement.append( this.previewMenu.dom );
+
+		} else {
+
+			this.canvas.focusSelected = false;
+
+			this.domElement.append( this.menu.dom );
+			this.domElement.append( this.canvas.dom );
+			this.domElement.append( this.search.dom );
+
+			this.previewMenu.dom.remove();
+
+		}
+
+		this._preview = value;
+
+	}
+
+	get preview() {
+
+		return this._preview;
+
+	}
+
 	newProject() {
 
-		this.canvas.clear();
+		const canvas = this.canvas;
+		canvas.clear();
+		canvas.scrollLeft = 0;
+		canvas.scrollTop = 0;
+		canvas.zoom = 1;
 
 		this.dispatchEvent( { type: 'new' } );
 
@@ -426,13 +481,23 @@ export class NodeEditor extends EventDispatcher {
 	_initMenu() {
 
 		const menu = new CircleMenu();
+		const previewMenu = new CircleMenu();
+
+		menu.setAlign( 'top left' );
+		previewMenu.setAlign( 'top left' );
 
+		const previewButton = new ButtonInput().setIcon( 'ti ti-3d-cube-sphere' ).setToolTip( 'Preview' );
 		const menuButton = new ButtonInput().setIcon( 'ti ti-apps' ).setToolTip( 'Add' );
 		const examplesButton = new ButtonInput().setIcon( 'ti ti-file-symlink' ).setToolTip( 'Examples' );
 		const newButton = new ButtonInput().setIcon( 'ti ti-file' ).setToolTip( 'New' );
 		const openButton = new ButtonInput().setIcon( 'ti ti-upload' ).setToolTip( 'Open' );
 		const saveButton = new ButtonInput().setIcon( 'ti ti-download' ).setToolTip( 'Save' );
 
+		const editorButton = new ButtonInput().setIcon( 'ti ti-subtask' ).setToolTip( 'Editor' );
+
+		previewButton.onClick( () => this.preview = true );
+		editorButton.onClick( () => this.preview = false );
+
 		menuButton.onClick( () => this.nodesContext.open() );
 		examplesButton.onClick( () => this.examplesContext.open() );
 
@@ -486,15 +551,19 @@ export class NodeEditor extends EventDispatcher {
 
 		} );
 
-		menu.add( examplesButton )
-			.add( menuButton )
+		menu.add( previewButton )
 			.add( newButton )
+			.add( examplesButton )
 			.add( openButton )
-			.add( saveButton );
+			.add( saveButton )
+			.add( menuButton );
+
+		previewMenu.add( editorButton );
 
 		this.domElement.append( menu.dom );
 
 		this.menu = menu;
+		this.previewMenu = previewMenu;
 
 	}
 
@@ -541,7 +610,6 @@ export class NodeEditor extends EventDispatcher {
 		addExample( basicContext, 'Animate UV' );
 		addExample( basicContext, 'Fake top light' );
 		addExample( basicContext, 'Oscillator color' );
-		addExample( basicContext, 'Matcap' );
 
 		addExample( advancedContext, 'Rim' );
 
@@ -571,11 +639,18 @@ export class NodeEditor extends EventDispatcher {
 					this.add( node );
 
 					this.centralizeNode( node );
+					this.canvas.select( node );
 
 				} );
 
 				search.add( button );
 
+				if ( item.tags !== undefined ) {
+
+					search.setTag( button, item.tags );
+
+				}
+
 			}
 
 			if ( item.children ) {
@@ -652,6 +727,7 @@ export class NodeEditor extends EventDispatcher {
 							this.add( node );
 
 							this.centralizeNode( node );
+							this.canvas.select( node );
 
 						} );
 
@@ -675,6 +751,8 @@ export class NodeEditor extends EventDispatcher {
 
 		} );
 
+		this.search = search;
+
 		this.domElement.append( search.dom );
 
 	}
@@ -698,6 +776,7 @@ export class NodeEditor extends EventDispatcher {
 			} else {
 
 				this.centralizeNode( node );
+				this.canvas.select( node );
 
 			}
 

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

@@ -1,5 +1,5 @@
 import { BaseNode } from '../core/BaseNode.js';
-import { MatcapUVNode } from 'three-nodes/Nodes.js';
+import { MatcapUVNode } from 'three/nodes';
 
 export class MatcapUVEditor extends BaseNode {
 

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 'three-nodes/Nodes.js';
+import { NormalNode } from 'three/nodes';
 
 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 'three-nodes/Nodes.js';
+import { PositionNode } from 'three/nodes';
 
 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 'three-nodes/Nodes.js';
+import { UVNode } from 'three/nodes';
 
 export class UVEditor extends BaseNode {
 

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

@@ -34,6 +34,12 @@ export class BaseNode extends ObjectNode {
 
 	}
 
+	getColor() {
+
+		return ( this.getColorValueFromValue( this.value ) || '#777777' ) + 'BB';
+
+	}
+
 	serialize( data ) {
 
 		super.serialize( data );
@@ -64,15 +70,16 @@ export class BaseNode extends ObjectNode {
 
 		if ( value.isMaterial === true ) {
 
-			return 'forestgreen';
+			//return 'forestgreen';
+			return '#228b22';
 
 		} else if ( value.isObject3D === true ) {
 
-			return 'orange';
+			return '#ffa500';
 
 		} else if ( value.isDataFile === true ) {
 
-			return 'aqua';
+			return '#00ffff';
 
 		}
 

package/examples/jsm/node-editor/display/BlendEditor.js

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

package/examples/jsm/node-editor/display/NormalMapEditor.js

@@ -1,6 +1,6 @@
 import { SelectInput, Element, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { NormalMapNode, ConstNode } from 'three-nodes/Nodes.js';
+import { NormalMapNode, ConstNode } from 'three/nodes';
 import { TangentSpaceNormalMap, ObjectSpaceNormalMap } from 'three';
 
 const nullValue = new ConstNode( 0 );

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

@@ -1,7 +1,7 @@
 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/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class ColorEditor extends BaseNode {
 

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

@@ -1,6 +1,6 @@
 import { NumberInput, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { UniformNode } from 'three-nodes/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class FloatEditor extends BaseNode {
 

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

@@ -1,6 +1,6 @@
 import { ButtonInput, SliderInput, NumberInput, LabelElement, Element } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { UniformNode } from 'three-nodes/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class SliderEditor extends BaseNode {
 

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

@@ -1,6 +1,6 @@
 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 { TextureNode, UVNode } from 'three/nodes';
 import { Texture, TextureLoader, RepeatWrapping, ClampToEdgeWrapping, MirroredRepeatWrapping } from 'three';
 
 const fileTexture = new WeakMap();

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

@@ -1,7 +1,7 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { Vector2 } from 'three';
-import { UniformNode } from 'three-nodes/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class Vector2Editor extends BaseNode {
 

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

@@ -1,7 +1,7 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { Vector3 } from 'three';
-import { UniformNode } from 'three-nodes/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class Vector3Editor extends BaseNode {
 

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

@@ -1,7 +1,7 @@
 import { NumberInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
 import { Vector4 } from 'three';
-import { UniformNode } from 'three-nodes/Nodes.js';
+import { UniformNode } from 'three/nodes';
 
 export class Vector4Editor extends BaseNode {
 

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

@@ -1,7 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MeshBasicNodeMaterial } from 'three-nodes/Nodes.js';
-import { MathUtils } from 'three';
+import { MeshBasicNodeMaterial } from 'three/nodes';
 
 export class BasicMaterialEditor extends BaseNode {
 
@@ -65,23 +64,21 @@ export class BasicMaterialEditor extends BaseNode {
 
 		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;
+		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,6 +1,6 @@
 import { ColorInput, ToggleInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { PointsNodeMaterial } from 'three-nodes/Nodes.js';
+import { PointsNodeMaterial } from 'three/nodes';
 import * as THREE from 'three';
 
 export class PointsMaterialEditor extends BaseNode {

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

@@ -1,7 +1,6 @@
 import { ColorInput, SliderInput, LabelElement } from '../../libs/flow.module.js';
 import { BaseNode } from '../core/BaseNode.js';
-import { MeshStandardNodeMaterial } from 'three-nodes/Nodes.js';
-import * as THREE from 'three';
+import { MeshStandardNodeMaterial } from 'three/nodes';
 
 export class StandardMaterialEditor extends BaseNode {
 
@@ -99,23 +98,21 @@ export class StandardMaterialEditor extends BaseNode {
 
 		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;
+		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();
+
 	}
 
 }