Examples: Move NodeMaterial to JSM.

examples/js/nodes/THREE.Nodes.js

@@ -1,221 +0,0 @@
-import {
-
-	// core
-
-	Node,
-	TempNode,
-	InputNode,
-	ConstNode,
-	VarNode,
-	StructNode,
-	AttributeNode,
-	FunctionNode,
-	ExpressionNode,
-	FunctionCallNode,
-	NodeLib,
-	NodeUtils,
-	NodeFrame,
-	NodeUniform,
-	NodeBuilder,
-
-	// inputs
-
-	BoolNode,
-	IntNode,
-	FloatNode,
-	Vector2Node,
-	Vector3Node,
-	Vector4Node,
-	ColorNode,
-	Matrix3Node,
-	Matrix4Node,
-	TextureNode,
-	CubeTextureNode,
-	ScreenNode,
-	ReflectorNode,
-	PropertyNode,
-	RTTNode,
-
-	// accessors
-
-	UVNode,
-	ColorsNode,
-	PositionNode,
-	NormalNode,
-	CameraNode,
-	LightNode,
-	ReflectNode,
-	ScreenUVNode,
-	ResolutionNode,
-
-	// math
-
-	MathNode,
-	OperatorNode,
-	CondNode,
-
-	// procedural
-
-	NoiseNode,
-	CheckerNode,
-
-	// bsdfs
-
-	BlinnShininessExponentNode,
-	BlinnExponentToRoughnessNode,
-	RoughnessToBlinnExponentNode,
-
-	// misc
-
-	TextureCubeUVNode,
-	TextureCubeNode,
-	NormalMapNode,
-	BumpMapNode,
-
-	// utils
-
-	BypassNode,
-	JoinNode,
-	SwitchNode,
-	TimerNode,
-	VelocityNode,
-	UVTransformNode,
-	MaxMIPLevelNode,
-	ColorSpaceNode,
-
-	// effects
-
-	BlurNode,
-	ColorAdjustmentNode,
-	LuminanceNode,
-
-	// material nodes
-
-	RawNode,
-	SpriteNode,
-	PhongNode,
-	StandardNode,
-	MeshStandardNode,
-
-	// materials
-
-	NodeMaterial,
-	SpriteNodeMaterial,
-	PhongNodeMaterial,
-	StandardNodeMaterial,
-	MeshStandardNodeMaterial,
-
-	// post-processing
-
-	NodePostProcessing
-
-} from './Nodes.js';
-
-// core
-
-THREE.Node = Node;
-THREE.TempNode = TempNode;
-THREE.InputNode = InputNode;
-THREE.ConstNode = ConstNode;
-THREE.VarNode = VarNode;
-THREE.StructNode = StructNode;
-THREE.AttributeNode = AttributeNode;
-THREE.FunctionNode = FunctionNode;
-THREE.ExpressionNode = ExpressionNode;
-THREE.FunctionCallNode = FunctionCallNode;
-THREE.NodeLib = NodeLib;
-THREE.NodeUtils = NodeUtils;
-THREE.NodeFrame = NodeFrame;
-THREE.NodeUniform = NodeUniform;
-THREE.NodeBuilder = NodeBuilder;
-
-// inputs
-
-THREE.BoolNode = BoolNode;
-THREE.IntNode = IntNode;
-THREE.FloatNode = FloatNode;
-THREE.Vector2Node = Vector2Node;
-THREE.Vector3Node = Vector3Node;
-THREE.Vector4Node = Vector4Node;
-THREE.ColorNode = ColorNode;
-THREE.Matrix3Node = Matrix3Node;
-THREE.Matrix4Node = Matrix4Node;
-THREE.TextureNode = TextureNode;
-THREE.CubeTextureNode = CubeTextureNode;
-THREE.ScreenNode = ScreenNode;
-THREE.ReflectorNode = ReflectorNode;
-THREE.PropertyNode = PropertyNode;
-THREE.RTTNode = RTTNode;
-
-// accessors
-
-THREE.UVNode = UVNode;
-THREE.ColorsNode = ColorsNode;
-THREE.PositionNode = PositionNode;
-THREE.NormalNode = NormalNode;
-THREE.CameraNode = CameraNode;
-THREE.LightNode = LightNode;
-THREE.ReflectNode = ReflectNode;
-THREE.ScreenUVNode = ScreenUVNode;
-THREE.ResolutionNode = ResolutionNode;
-
-// math
-
-THREE.MathNode = MathNode;
-THREE.OperatorNode = OperatorNode;
-THREE.CondNode = CondNode;
-
-// procedural
-
-THREE.NoiseNode = NoiseNode;
-THREE.CheckerNode = CheckerNode;
-
-// bsdfs
-
-THREE.BlinnShininessExponentNode = BlinnShininessExponentNode;
-THREE.BlinnExponentToRoughnessNode = BlinnExponentToRoughnessNode;
-THREE.RoughnessToBlinnExponentNode = RoughnessToBlinnExponentNode;
-
-// misc
-
-THREE.TextureCubeUVNode = TextureCubeUVNode;
-THREE.TextureCubeNode = TextureCubeNode;
-THREE.NormalMapNode = NormalMapNode;
-THREE.BumpMapNode = BumpMapNode;
-
-// utils
-
-THREE.BypassNode = BypassNode;
-THREE.JoinNode = JoinNode;
-THREE.SwitchNode = SwitchNode;
-THREE.TimerNode = TimerNode;
-THREE.VelocityNode = VelocityNode;
-THREE.UVTransformNode = UVTransformNode;
-THREE.MaxMIPLevelNode = MaxMIPLevelNode;
-THREE.ColorSpaceNode = ColorSpaceNode;
-
-// effects
-
-THREE.BlurNode = BlurNode;
-THREE.ColorAdjustmentNode = ColorAdjustmentNode;
-THREE.LuminanceNode = LuminanceNode;
-
-// material nodes
-
-THREE.RawNode = RawNode;
-THREE.SpriteNode = SpriteNode;
-THREE.PhongNode = PhongNode;
-THREE.StandardNode = StandardNode;
-THREE.MeshStandardNode = MeshStandardNode;
-
-// materials
-
-THREE.NodeMaterial = NodeMaterial;
-THREE.SpriteNodeMaterial = SpriteNodeMaterial;
-THREE.PhongNodeMaterial = PhongNodeMaterial;
-THREE.StandardNodeMaterial = StandardNodeMaterial;
-THREE.MeshStandardNodeMaterial = MeshStandardNodeMaterial;
-
-// post-processing
-
-THREE.NodePostProcessing = NodePostProcessing;

examples/js/loaders/NodeMaterialLoader.js → examples/jsm/loaders/NodeMaterialLoader.js

@@ -2,9 +2,16 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
-THREE.NodeMaterialLoader = function ( manager, library ) {
+import {
+	DefaultLoadingManager,
+	FileLoader
+} from "../../../build/three.module.js";
 
-	this.manager = ( manager !== undefined ) ? manager : THREE.DefaultLoadingManager;
+import * as Nodes from "../nodes/Nodes.js";
+
+var NodeMaterialLoader = function ( manager, library ) {
+
+	this.manager = ( manager !== undefined ) ? manager : DefaultLoadingManager;
 
 	this.nodes = {};
 	this.materials = {};
@@ -14,7 +21,7 @@ THREE.NodeMaterialLoader = function ( manager, library ) {
 
 };
 
-THREE.NodeMaterialLoaderUtils = {
+var NodeMaterialLoaderUtils = {
 
 	replaceUUIDObject: function ( object, uuid, value, recursive ) {
 
@@ -66,13 +73,13 @@ THREE.NodeMaterialLoaderUtils = {
 
 };
 
-Object.assign( THREE.NodeMaterialLoader.prototype, {
+Object.assign( NodeMaterialLoader.prototype, {
 
 	load: function ( url, onLoad, onProgress, onError ) {
 
 		var scope = this;
 
-		var loader = new THREE.FileLoader( scope.manager );
+		var loader = new FileLoader( scope.manager );
 		loader.setPath( scope.path );
 		loader.load( url, function ( text ) {
 
@@ -121,9 +128,9 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 	},
 
-	resolve: function( json ) {
+	resolve: function ( json ) {
 
-		switch( typeof json ) {
+		switch ( typeof json ) {
 
 			case "boolean":
 			case "number":
@@ -132,7 +139,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			case "string":
 
-				if (/^\w{8}-\w{4}-\w{4}-\w{4}-\w{12}$/i.test(json) || this.library[ json ]) {
+				if ( /^\w{8}-\w{4}-\w{4}-\w{4}-\w{12}$/i.test( json ) || this.library[ json ] ) {
 
 					return this.getNode( json );
 
@@ -144,9 +151,9 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 				if ( Array.isArray( json ) ) {
 
-					for(var i = 0; i < json.length; i++) {
+					for ( var i = 0; i < json.length; i ++ ) {
 
-						json[i] = this.resolve( json[i] );
+						json[ i ] = this.resolve( json[ i ] );
 
 					}
 
@@ -154,7 +161,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 					for ( var prop in json ) {
 
-						if (prop === "uuid") continue;
+						if ( prop === "uuid" ) continue;
 
 						json[ prop ] = this.resolve( json[ prop ] );
 
@@ -168,7 +175,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 	},
 
-	declare: function( json ) {
+	declare: function ( json ) {
 
 		var uuid, node, object;
 
@@ -176,7 +183,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			node = json.nodes[ uuid ];
 
-			object = new THREE[ node.nodeType + "Node" ]();
+			object = new Nodes[ node.nodeType + "Node" ]();
 
 			if ( node.name ) {
 
@@ -194,7 +201,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			node = json.materials[ uuid ];
 
-			object = new THREE[ node.type ]();
+			object = new Nodes[ node.type ]();
 
 			if ( node.name ) {
 
@@ -212,7 +219,7 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 
 			node = json.passes[ uuid ];
 
-			object = new THREE[ node.type ]();
+			object = new Nodes[ node.type ]();
 
 			if ( node.name ) {
 
@@ -263,3 +270,5 @@ Object.assign( THREE.NodeMaterialLoader.prototype, {
 	}
 
 } );
+
+export { NodeMaterialLoader, NodeMaterialLoaderUtils };

examples/js/nodes/accessors/CameraNode.js → examples/jsm/nodes/accessors/CameraNode.js

@@ -87,7 +87,7 @@ CameraNode.prototype.setScope = function ( scope ) {
 
 };
 
-CameraNode.prototype.getType = function ( builder ) {
+CameraNode.prototype.getType = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 
@@ -101,7 +101,7 @@ CameraNode.prototype.getType = function ( builder ) {
 
 };
 
-CameraNode.prototype.getUnique = function ( builder ) {
+CameraNode.prototype.getUnique = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 
@@ -116,7 +116,7 @@ CameraNode.prototype.getUnique = function ( builder ) {
 
 };
 
-CameraNode.prototype.getShared = function ( builder ) {
+CameraNode.prototype.getShared = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 
@@ -162,7 +162,7 @@ CameraNode.prototype.generate = function ( builder, output ) {
 
 };
 
-CameraNode.prototype.onUpdateFrame = function ( frame ) {
+CameraNode.prototype.onUpdateFrame = function ( /* frame */ ) {
 
 	switch ( this.scope ) {
 

examples/js/nodes/accessors/NormalNode.js → examples/jsm/nodes/accessors/NormalNode.js

@@ -21,7 +21,7 @@ NormalNode.prototype = Object.create( TempNode.prototype );
 NormalNode.prototype.constructor = NormalNode;
 NormalNode.prototype.nodeType = "Normal";
 
-NormalNode.prototype.getShared = function ( builder ) {
+NormalNode.prototype.getShared = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 

examples/js/nodes/accessors/PositionNode.js → examples/jsm/nodes/accessors/PositionNode.js

@@ -3,6 +3,7 @@
  */
 
 import { TempNode } from '../core/TempNode.js';
+import { NormalNode } from '../accessors/NormalNode.js';
 import { NodeLib } from '../core/NodeLib.js';
 
 function PositionNode( scope ) {
@@ -36,7 +37,7 @@ PositionNode.prototype.getType = function ( ) {
 
 };
 
-PositionNode.prototype.getShared = function ( builder ) {
+PositionNode.prototype.getShared = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 

examples/js/nodes/accessors/ReflectNode.js → examples/jsm/nodes/accessors/ReflectNode.js

@@ -20,7 +20,7 @@ ReflectNode.prototype = Object.create( TempNode.prototype );
 ReflectNode.prototype.constructor = ReflectNode;
 ReflectNode.prototype.nodeType = "Reflect";
 
-ReflectNode.prototype.getType = function ( builder ) {
+ReflectNode.prototype.getType = function ( /* builder */ ) {
 
 	switch ( this.scope ) {
 

examples/js/nodes/accessors/ResolutionNode.js → examples/jsm/nodes/accessors/ResolutionNode.js

@@ -2,13 +2,15 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector2 } from '../../../../build/three.module.js';
+
 import { Vector2Node } from '../inputs/Vector2Node.js';
 
 function ResolutionNode() {
 
 	Vector2Node.call( this );
 
-	this.size = new THREE.Vector2();
+	this.size = new Vector2();
 
 }
 

examples/js/nodes/core/FunctionNode.js → examples/jsm/nodes/core/FunctionNode.js

@@ -25,7 +25,7 @@ FunctionNode.prototype.nodeType = "Function";
 
 FunctionNode.prototype.useKeywords = true;
 
-FunctionNode.prototype.getShared = function ( builder, output ) {
+FunctionNode.prototype.getShared = function ( /* builder, output */ ) {
 
 	return ! this.isMethod;
 
@@ -89,9 +89,9 @@ FunctionNode.prototype.generate = function ( builder, output ) {
 
 	while ( match = propertiesRegexp.exec( this.src ) ) matches.push( match );
 
-	for ( var i = 0; i < matches.length; i++ ) {
+	for ( var i = 0; i < matches.length; i ++ ) {
 
-		var match = matches[i];
+		var match = matches[ i ];
 
 		var prop = match[ 0 ],
 			isGlobal = this.isMethod ? ! this.getInputByName( prop ) : true,

examples/js/nodes/core/InputNode.js → examples/jsm/nodes/core/InputNode.js

@@ -26,7 +26,7 @@ InputNode.prototype.setReadonly = function ( value ) {
 
 };
 
-InputNode.prototype.getReadonly = function ( builder ) {
+InputNode.prototype.getReadonly = function ( /* builder */ ) {
 
 	return this.readonly;
 

examples/js/nodes/core/Node.js → examples/jsm/nodes/core/Node.js

@@ -2,9 +2,11 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Math as _Math } from '../../../../build/three.module.js';
+
 function Node( type ) {
 
-	this.uuid = THREE.Math.generateUUID();
+	this.uuid = _Math.generateUUID();
 
 	this.name = "";
 
@@ -51,7 +53,7 @@ Node.prototype = {
 
 		settings = settings || {};
 
-		builder.addFlow( settings.slot, settings.cache, settings.context )
+		builder.addFlow( settings.slot, settings.cache, settings.context );
 
 		var flow = {};
 		flow.result = this.build( builder, output );
@@ -115,7 +117,7 @@ Node.prototype = {
 
 	},
 
-	getName: function ( builder ) {
+	getName: function ( /* builder */ ) {
 
 		return this.name;
 

examples/js/nodes/core/NodeBuilder.js → examples/jsm/nodes/core/NodeBuilder.js

@@ -2,6 +2,15 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	CubeReflectionMapping,
+	CubeRefractionMapping,
+	CubeUVReflectionMapping,
+	CubeUVRefractionMapping,
+	LinearEncoding,
+	GammaEncoding
+} from '../../../../build/three.module.js';
+
 import { NodeUniform } from './NodeUniform.js';
 import { NodeUtils } from './NodeUtils.js';
 import { NodeLib } from './NodeLib.js';
@@ -774,15 +783,15 @@ NodeBuilder.prototype = {
 
 					switch ( nodeCandidate.mapping ) {
 
-						case THREE.CubeReflectionMapping:
-						case THREE.CubeRefractionMapping:
+						case CubeReflectionMapping:
+						case CubeRefractionMapping:
 
 							return new CubeTextureNode( nodeCandidate );
 
 							break;
 
-						case THREE.CubeUVReflectionMapping:
-						case THREE.CubeUVRefractionMapping:
+						case CubeUVReflectionMapping:
+						case CubeUVRefractionMapping:
 
 							return new TextureCubeNode( new TextureNode( nodeCandidate ) );
 
@@ -942,7 +951,7 @@ NodeBuilder.prototype = {
 
 		if ( ! map ) {
 
-			encoding = THREE.LinearEncoding;
+			encoding = LinearEncoding;
 
 		} else if ( map.isTexture ) {
 
@@ -956,9 +965,9 @@ NodeBuilder.prototype = {
 		}
 
 		// add backwards compatibility for WebGLRenderer.gammaInput/gammaOutput parameter, should probably be removed at some point.
-		if ( encoding === THREE.LinearEncoding && gammaOverrideLinear ) {
+		if ( encoding === LinearEncoding && gammaOverrideLinear ) {
 
-			encoding = THREE.GammaEncoding;
+			encoding = GammaEncoding;
 
 		}
 

examples/js/nodes/core/TempNode.js → examples/jsm/nodes/core/TempNode.js

@@ -3,6 +3,7 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Math as _Math } from '../../../../build/three.module.js';
 import { Node } from './Node.js';
 
 function TempNode( type, params ) {
@@ -29,7 +30,7 @@ TempNode.prototype.build = function ( builder, output, uuid, ns ) {
 
 		if ( isUnique && this.constructor.uuid === undefined ) {
 
-			this.constructor.uuid = THREE.Math.generateUUID();
+			this.constructor.uuid = _Math.generateUUID();
 
 		}
 
@@ -94,7 +95,7 @@ TempNode.prototype.getShared = function ( builder, output ) {
 
 };
 
-TempNode.prototype.getUnique = function ( builder, output ) {
+TempNode.prototype.getUnique = function ( /* builder, output */ ) {
 
 	return this.unique;
 
@@ -108,7 +109,7 @@ TempNode.prototype.setLabel = function ( name ) {
 
 };
 
-TempNode.prototype.getLabel = function ( builder ) {
+TempNode.prototype.getLabel = function ( /* builder */ ) {
 
 	return this.label;
 

examples/js/nodes/effects/BlurNode.js → examples/jsm/nodes/effects/BlurNode.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector2 } from '../../../../build/three.module.js';
+
 import { TempNode } from '../core/TempNode.js';
 import { FunctionNode } from '../core/FunctionNode.js';
 import { FloatNode } from '../inputs/FloatNode.js';
@@ -72,7 +74,7 @@ BlurNode.prototype = Object.create( TempNode.prototype );
 BlurNode.prototype.constructor = BlurNode;
 BlurNode.prototype.nodeType = "Blur";
 
-BlurNode.prototype.updateFrame = function ( frame ) {
+BlurNode.prototype.updateFrame = function ( /* frame */ ) {
 
 	if ( this.size ) {
 
@@ -135,7 +137,7 @@ BlurNode.prototype.copy = function ( source ) {
 	this.uv = source.uv;
 	this.radius = source.radius;
 
-	if ( source.size !== undefined ) this.size = new THREE.Vector2( source.size.x, source.size.y );
+	if ( source.size !== undefined ) this.size = new Vector2( source.size.x, source.size.y );
 
 	this.blurX = source.blurX;
 	this.blurY = source.blurY;

examples/js/nodes/inputs/BoolNode.js → examples/jsm/nodes/inputs/BoolNode.js

@@ -16,7 +16,7 @@ BoolNode.prototype = Object.create( InputNode.prototype );
 BoolNode.prototype.constructor = BoolNode;
 BoolNode.prototype.nodeType = "Bool";
 
-BoolNode.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+BoolNode.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate */ ) {
 
 	return builder.format( this.value, type, output );
 

examples/js/nodes/inputs/ColorNode.js → examples/jsm/nodes/inputs/ColorNode.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Color } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 import { NodeUtils } from '../core/NodeUtils.js';
 
@@ -9,7 +11,7 @@ function ColorNode( color, g, b ) {
 
 	InputNode.call( this, 'c' );
 
-	this.value = color instanceof THREE.Color ? color : new THREE.Color( color || 0, g, b );
+	this.value = color instanceof Color ? color : new Color( color || 0, g, b );
 
 }
 
@@ -19,7 +21,7 @@ ColorNode.prototype.nodeType = "Color";
 
 NodeUtils.addShortcuts( ColorNode.prototype, 'value', [ 'r', 'g', 'b' ] );
 
-ColorNode.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+ColorNode.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate */ ) {
 
 	return builder.format( "vec3( " + this.r + ", " + this.g + ", " + this.b + " )", type, output );
 

examples/js/nodes/inputs/CubeTextureNode.js → examples/jsm/nodes/inputs/CubeTextureNode.js

@@ -60,7 +60,7 @@ CubeTextureNode.prototype.generate = function ( builder, output ) {
 
 	builder.addContext( context );
 
-	this.colorSpace = this.colorSpace || new ColorSpaceNode( new ExpressionNode('', outputType ) );
+	this.colorSpace = this.colorSpace || new ColorSpaceNode( new ExpressionNode( '', outputType ) );
 	this.colorSpace.fromEncoding( builder.getTextureEncodingFromMap( this.value ) );
 	this.colorSpace.input.parse( code );
 

examples/js/nodes/inputs/FloatNode.js → examples/jsm/nodes/inputs/FloatNode.js

@@ -16,7 +16,7 @@ FloatNode.prototype = Object.create( InputNode.prototype );
 FloatNode.prototype.constructor = FloatNode;
 FloatNode.prototype.nodeType = "Float";
 
-FloatNode.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+FloatNode.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate */ ) {
 
 	return builder.format( this.value + ( this.value % 1 ? '' : '.0' ), type, output );
 

examples/js/nodes/inputs/IntNode.js → examples/jsm/nodes/inputs/IntNode.js

@@ -16,7 +16,7 @@ IntNode.prototype = Object.create( InputNode.prototype );
 IntNode.prototype.constructor = IntNode;
 IntNode.prototype.nodeType = "Int";
 
-IntNode.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+IntNode.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate */ ) {
 
 	return builder.format( this.value, type, output );
 

examples/js/nodes/inputs/Matrix3Node.js → examples/jsm/nodes/inputs/Matrix3Node.js

@@ -2,13 +2,15 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Matrix3 } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 
 function Matrix3Node( matrix ) {
 
 	InputNode.call( this, 'm3' );
 
-	this.value = matrix || new THREE.Matrix3();
+	this.value = matrix || new Matrix3();
 
 }
 
@@ -36,7 +38,7 @@ Object.defineProperties( Matrix3Node.prototype, {
 
 } );
 
-Matrix3Node.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+Matrix3Node.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate */ ) {
 
 	return builder.format( "mat3( " + this.value.elements.join( ", " ) + " )", type, output );
 

examples/js/nodes/inputs/Matrix4Node.js → examples/jsm/nodes/inputs/Matrix4Node.js

@@ -2,13 +2,15 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Matrix4 } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 
 function Matrix4Node( matrix ) {
 
 	InputNode.call( this, 'm4' );
 
-	this.value = matrix || new THREE.Matrix4();
+	this.value = matrix || new Matrix4();
 
 }
 
@@ -36,7 +38,7 @@ Object.defineProperties( Matrix4Node.prototype, {
 
 } );
 
-Matrix4Node.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+Matrix4Node.prototype.generateReadonly = function ( builder, output, uuid, type /*, ns, needsUpdate */ ) {
 
 	return builder.format( "mat4( " + this.value.elements.join( ", " ) + " )", type, output );
 

examples/js/nodes/inputs/RTTNode.js → examples/jsm/nodes/inputs/RTTNode.js

@@ -2,6 +2,15 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	Mesh,
+	OrthographicCamera,
+	PlaneBufferGeometry,
+	Scene,
+	WebGLRenderTarget
+} from '../../../../build/three.module.js';
+
+import { NodeBuilder } from '../core/NodeBuilder.js';
 import { NodeMaterial } from '../materials/NodeMaterial.js';
 import { TextureNode } from './TextureNode.js';
 
@@ -13,14 +22,14 @@ function RTTNode( width, height, input, options ) {
 
 	this.clear = options.clear !== undefined ? options.clear : true;
 
-	this.renderTarget = new THREE.WebGLRenderTarget( width, height, options );
+	this.renderTarget = new WebGLRenderTarget( width, height, options );
 
 	this.material = new NodeMaterial();
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
+	this.camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	this.scene = new Scene();
 
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.material );
+	this.quad = new Mesh( new PlaneBufferGeometry( 2, 2 ), this.material );
 	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 
@@ -36,7 +45,7 @@ RTTNode.prototype.nodeType = "RTT";
 
 RTTNode.prototype.build = function ( builder, output, uuid ) {
 
-	var rttBuilder = new THREE.NodeBuilder();
+	var rttBuilder = new NodeBuilder();
 	rttBuilder.nodes = builder.nodes;
 	rttBuilder.updaters = builder.updaters;
 
@@ -59,9 +68,9 @@ RTTNode.prototype.updateFramesaveTo = function ( frame ) {
 		material.fragment.value = this;
 		material.build();
 
-		var scene = new THREE.Scene();
+		var scene = new Scene();
 
-		var quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), material );
+		var quad = new Mesh( new PlaneBufferGeometry( 2, 2 ), material );
 		quad.frustumCulled = false; // Avoid getting clipped
 		scene.add( quad );
 
@@ -134,7 +143,7 @@ RTTNode.prototype.toJSON = function ( meta ) {
 
 	if ( ! data ) {
 
-		data = THREE.TextureNode.prototype.toJSON.call( this, meta );
+		data = TextureNode.prototype.toJSON.call( this, meta );
 
 		if ( this.saveTo ) data.saveTo = this.saveTo.toJSON( meta ).uuid;
 

examples/js/nodes/inputs/ReflectorNode.js → examples/jsm/nodes/inputs/ReflectorNode.js

@@ -3,6 +3,7 @@
  */
 
 import { TempNode } from '../core/TempNode.js';
+import { InputNode } from '../core/InputNode.js';
 import { PositionNode } from '../accessors/PositionNode.js';
 import { OperatorNode } from '../math/OperatorNode.js';
 import { TextureNode } from './TextureNode.js';

examples/js/nodes/inputs/TextureNode.js → examples/jsm/nodes/inputs/TextureNode.js

@@ -64,7 +64,7 @@ TextureNode.prototype.generate = function ( builder, output ) {
 
 	builder.addContext( context );
 
-	this.colorSpace = this.colorSpace || new ColorSpaceNode( new ExpressionNode('', outputType ) );
+	this.colorSpace = this.colorSpace || new ColorSpaceNode( new ExpressionNode( '', outputType ) );
 	this.colorSpace.fromEncoding( builder.getTextureEncodingFromMap( this.value ) );
 	this.colorSpace.input.parse( code );
 

examples/js/nodes/inputs/Vector2Node.js → examples/jsm/nodes/inputs/Vector2Node.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector2 } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 import { NodeUtils } from '../core/NodeUtils.js';
 
@@ -9,7 +11,7 @@ function Vector2Node( x, y ) {
 
 	InputNode.call( this, 'v2' );
 
-	this.value = x instanceof THREE.Vector2 ? x : new THREE.Vector2( x, y );
+	this.value = x instanceof Vector2 ? x : new Vector2( x, y );
 
 }
 
@@ -19,7 +21,7 @@ Vector2Node.prototype.nodeType = "Vector2";
 
 NodeUtils.addShortcuts( Vector2Node.prototype, 'value', [ 'x', 'y' ] );
 
-Vector2Node.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+Vector2Node.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate*/ ) {
 
 	return builder.format( "vec2( " + this.x + ", " + this.y + " )", type, output );
 

examples/js/nodes/inputs/Vector3Node.js → examples/jsm/nodes/inputs/Vector3Node.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector3 } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 import { NodeUtils } from '../core/NodeUtils.js';
 
@@ -9,7 +11,7 @@ function Vector3Node( x, y, z ) {
 
 	InputNode.call( this, 'v3' );
 
-	this.value = x instanceof THREE.Vector3 ? x : new THREE.Vector3( x, y, z );
+	this.value = x instanceof Vector3 ? x : new Vector3( x, y, z );
 
 }
 
@@ -19,7 +21,7 @@ Vector3Node.prototype.nodeType = "Vector3";
 
 NodeUtils.addShortcuts( Vector3Node.prototype, 'value', [ 'x', 'y', 'z' ] );
 
-Vector3Node.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+Vector3Node.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate*/ ) {
 
 	return builder.format( "vec3( " + this.x + ", " + this.y + ", " + this.z + " )", type, output );
 

examples/js/nodes/inputs/Vector4Node.js → examples/jsm/nodes/inputs/Vector4Node.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector4 } from '../../../../build/three.module.js';
+
 import { InputNode } from '../core/InputNode.js';
 import { NodeUtils } from '../core/NodeUtils.js';
 
@@ -9,7 +11,7 @@ function Vector4Node( x, y, z, w ) {
 
 	InputNode.call( this, 'v4' );
 
-	this.value = x instanceof THREE.Vector4 ? x : new THREE.Vector4( x, y, z, w );
+	this.value = x instanceof Vector4 ? x : new Vector4( x, y, z, w );
 
 }
 
@@ -19,7 +21,7 @@ Vector4Node.prototype.nodeType = "Vector4";
 
 NodeUtils.addShortcuts( Vector4Node.prototype, 'value', [ 'x', 'y', 'z', 'w' ] );
 
-Vector4Node.prototype.generateReadonly = function ( builder, output, uuid, type, ns, needsUpdate ) {
+Vector4Node.prototype.generateReadonly = function ( builder, output, uuid, type/*, ns, needsUpdate*/ ) {
 
 	return builder.format( "vec4( " + this.x + ", " + this.y + ", " + this.z + ", " + this.w + " )", type, output );
 

examples/js/nodes/materials/NodeMaterial.js → examples/jsm/nodes/materials/NodeMaterial.js

@@ -2,6 +2,14 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	FrontSide,
+	LessEqualDepth,
+	NoColors,
+	NormalBlending,
+	ShaderMaterial
+} from '../../../../build/three.module.js';
+
 import { NodeBuilder } from '../core/NodeBuilder.js';
 import { ColorNode } from '../inputs/ColorNode.js';
 import { PositionNode } from '../accessors/PositionNode.js';
@@ -9,7 +17,7 @@ import { RawNode } from './nodes/RawNode.js';
 
 function NodeMaterial( vertex, fragment ) {
 
-	THREE.ShaderMaterial.call( this );
+	ShaderMaterial.call( this );
 
 	var self = this;
 
@@ -36,7 +44,7 @@ function NodeMaterial( vertex, fragment ) {
 
 	// it fix the programCache and share the code with others materials
 
-	this.onBeforeCompile.toString = function() {
+	this.onBeforeCompile.toString = function () {
 
 		return self.needsCompile;
 
@@ -44,7 +52,7 @@ function NodeMaterial( vertex, fragment ) {
 
 }
 
-NodeMaterial.prototype = Object.create( THREE.ShaderMaterial.prototype );
+NodeMaterial.prototype = Object.create( ShaderMaterial.prototype );
 NodeMaterial.prototype.constructor = NodeMaterial;
 NodeMaterial.prototype.type = "NodeMaterial";
 
@@ -110,7 +118,7 @@ NodeMaterial.prototype.build = function ( params ) {
 	this.fog = builder.requires.fog;
 	this.lights = builder.requires.lights;
 
-	this.transparent = builder.requires.transparent || this.blending > THREE.NormalBlending;
+	this.transparent = builder.requires.transparent || this.blending > NormalBlending;
 
 	this.needsUpdate = false;
 
@@ -166,12 +174,12 @@ NodeMaterial.prototype.toJSON = function ( meta ) {
 		if ( this.size !== undefined ) data.size = this.size;
 		if ( this.sizeAttenuation !== undefined ) data.sizeAttenuation = this.sizeAttenuation;
 
-		if ( this.blending !== THREE.NormalBlending ) data.blending = this.blending;
+		if ( this.blending !== NormalBlending ) data.blending = this.blending;
 		if ( this.flatShading === true ) data.flatShading = this.flatShading;
-		if ( this.side !== THREE.FrontSide ) data.side = this.side;
-		if ( this.vertexColors !== THREE.NoColors ) data.vertexColors = this.vertexColors;
+		if ( this.side !== FrontSide ) data.side = this.side;
+		if ( this.vertexColors !== NoColors ) data.vertexColors = this.vertexColors;
 
-		if ( this.depthFunc !== THREE.LessEqualDepth ) data.depthFunc = this.depthFunc;
+		if ( this.depthFunc !== LessEqualDepth ) data.depthFunc = this.depthFunc;
 		if ( this.depthTest === false ) data.depthTest = this.depthTest;
 		if ( this.depthWrite === false ) data.depthWrite = this.depthWrite;
 

examples/js/nodes/materials/nodes/MeshStandardNode.js → examples/jsm/nodes/materials/nodes/MeshStandardNode.js

@@ -2,6 +2,11 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	Color,
+	Vector2
+} from '../../../../../build/three.module.js';
+
 import { StandardNode } from './StandardNode.js';
 import { PropertyNode } from '../../inputs/PropertyNode.js';
 import { OperatorNode } from '../../math/OperatorNode.js';
@@ -13,10 +18,10 @@ function MeshStandardNode() {
 	StandardNode.call( this );
 
 	this.properties = {
-		color: new THREE.Color( 0xffffff ),
+		color: new Color( 0xffffff ),
 		roughness: 0.5,
 		metalness: 0.5,
-		normalScale: new THREE.Vector2( 1, 1 )
+		normalScale: new Vector2( 1, 1 )
 	};
 
 	this.inputs = {

examples/js/nodes/materials/nodes/PhongNode.js → examples/jsm/nodes/materials/nodes/PhongNode.js

@@ -2,6 +2,11 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	UniformsLib,
+	UniformsUtils
+} from '../../../../../build/three.module.js';
+
 import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 import { FloatNode } from '../../inputs/FloatNode.js';
@@ -32,10 +37,10 @@ PhongNode.prototype.build = function ( builder ) {
 
 		var position = this.position ? this.position.analyzeAndFlow( builder, 'v3', { cache: 'position' } ) : undefined;
 
-		builder.mergeUniform( THREE.UniformsUtils.merge( [
+		builder.mergeUniform( UniformsUtils.merge( [
 
-			THREE.UniformsLib.fog,
-			THREE.UniformsLib.lights
+			UniformsLib.fog,
+			UniformsLib.lights
 
 		] ) );
 
@@ -301,7 +306,7 @@ PhongNode.prototype.build = function ( builder ) {
 		/*
 		switch( builder.material.combine ) {
 
-			case THREE.ENVMAP_BLENDING_MULTIPLY:
+			case ENVMAP_BLENDING_MULTIPLY:
 
 				//output.push( "vec3 outgoingLight = reflectedLight.directDiffuse + reflectedLight.indirectDiffuse + reflectedLight.directSpecular + reflectedLight.indirectSpecular;" );
 				//outgoingLight = mix( outgoingLight, outgoingLight * envColor.xyz, specularStrength * reflectivity );

examples/js/nodes/materials/nodes/SpriteNode.js → examples/jsm/nodes/materials/nodes/SpriteNode.js

@@ -2,6 +2,11 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	UniformsLib,
+	UniformsUtils
+} from '../../../../../build/three.module.js';
+
 import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 
@@ -20,7 +25,7 @@ SpriteNode.prototype.nodeType = "Sprite";
 
 SpriteNode.prototype.build = function ( builder ) {
 
-	var output, code;
+	var output;
 
 	builder.define( 'SPRITE' );
 
@@ -31,8 +36,8 @@ SpriteNode.prototype.build = function ( builder ) {
 
 		var position = this.position ? this.position.analyzeAndFlow( builder, 'v3', { cache: 'position' } ) : undefined;
 
-		builder.mergeUniform( THREE.UniformsUtils.merge( [
-			THREE.UniformsLib.fog
+		builder.mergeUniform( UniformsUtils.merge( [
+			UniformsLib.fog
 		] ) );
 
 		builder.addParsCode( [

examples/js/nodes/materials/nodes/StandardNode.js → examples/jsm/nodes/materials/nodes/StandardNode.js

@@ -2,6 +2,11 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	UniformsLib,
+	UniformsUtils
+} from '../../../../../build/three.module.js';
+
 import { Node } from '../../core/Node.js';
 import { ColorNode } from '../../inputs/ColorNode.js';
 import { FloatNode } from '../../inputs/FloatNode.js';
@@ -35,14 +40,14 @@ StandardNode.prototype.build = function ( builder ) {
 
 		var position = this.position ? this.position.analyzeAndFlow( builder, 'v3', { cache: 'position' } ) : undefined;
 
-		builder.mergeUniform( THREE.UniformsUtils.merge( [
+		builder.mergeUniform( UniformsUtils.merge( [
 
-			THREE.UniformsLib.fog,
-			THREE.UniformsLib.lights
+			UniformsLib.fog,
+			UniformsLib.lights
 
 		] ) );
 
-		if ( THREE.UniformsLib.LTC_1 ) {
+		if ( UniformsLib.LTC_1 ) {
 
 			// add ltc data textures to material uniforms
 

examples/js/nodes/math/CondNode.js → examples/jsm/nodes/math/CondNode.js

@@ -12,7 +12,7 @@ function CondNode( a, b, op, ifNode, elseNode ) {
 	this.b = b;
 
 	this.op = op;
-	
+
 	this.ifNode = ifNode;
 	this.elseNode = elseNode;
 
@@ -31,7 +31,7 @@ CondNode.prototype.nodeType = "Cond";
 
 CondNode.prototype.getType = function ( builder ) {
 
-	if (this.ifNode) {
+	if ( this.ifNode ) {
 
 		var ifType = this.ifNode.getType( builder );
 		var elseType = this.elseNode.getType( builder );
@@ -45,7 +45,7 @@ CondNode.prototype.getType = function ( builder ) {
 		return ifType;
 
 	}
-	
+
 	return 'b';
 
 };
@@ -70,16 +70,16 @@ CondNode.prototype.generate = function ( builder, output ) {
 		b = this.b.build( builder, condType ),
 		code;
 
-	if (this.ifNode) {
+	if ( this.ifNode ) {
 
 		var ifCode = this.ifNode.build( builder, type ),
 			elseCode = this.elseNode.build( builder, type );
-		
+
 		code = '( ' + [ a, this.op, b, '?', ifCode, ':', elseCode ].join( ' ' ) + ' )';
 
 	} else {
 
-		code = '( ' + a + ' ' + this.op + ' ' +  b  + ' )';
+		code = '( ' + a + ' ' + this.op + ' ' + b + ' )';
 
 	}
 

examples/js/nodes/math/MathNode.js → examples/jsm/nodes/math/MathNode.js

@@ -67,7 +67,7 @@ MathNode.prototype = Object.create( TempNode.prototype );
 MathNode.prototype.constructor = MathNode;
 MathNode.prototype.nodeType = "Math";
 
-MathNode.prototype.getNumInputs = function ( builder ) {
+MathNode.prototype.getNumInputs = function ( /*builder*/ ) {
 
 	switch ( this.method ) {
 
@@ -76,7 +76,7 @@ MathNode.prototype.getNumInputs = function ( builder ) {
 		case MathNode.REFRACT:
 		case MathNode.SMOOTHSTEP:
 		case MathNode.FACEFORWARD:
-			
+
 			return 3;
 
 		case MathNode.MIN:
@@ -160,7 +160,7 @@ MathNode.prototype.generate = function ( builder, output ) {
 
 			return builder.format( '( 1.0 - ' + this.a.build( builder, inputType ) + ' )', inputType, output );
 
-		// 2 inputs
+			// 2 inputs
 
 		case MathNode.CROSS:
 
@@ -185,7 +185,7 @@ MathNode.prototype.generate = function ( builder, output ) {
 
 			break;
 
-		// 3 inputs
+			// 3 inputs
 
 		case MathNode.REFRACT:
 
@@ -203,7 +203,7 @@ MathNode.prototype.generate = function ( builder, output ) {
 
 			break;
 
-		// default
+			// default
 
 		default:
 
@@ -219,18 +219,18 @@ MathNode.prototype.generate = function ( builder, output ) {
 
 	var params = [];
 	params.push( a );
-	if (b) params.push( b );
-	if (c) params.push( c );
+	if ( b ) params.push( b );
+	if ( c ) params.push( c );
 
 	var numInputs = this.getNumInputs( builder );
 
-	if (params.length !== numInputs) {
+	if ( params.length !== numInputs ) {
 
-		throw Error(`Arguments not match used in "${this.method}". Require ${numInputs}, currently ${params.length}.`);
+		throw Error( `Arguments not match used in "${this.method}". Require ${numInputs}, currently ${params.length}.` );
 
 	}
 
-	return builder.format( this.method + '( ' + params.join(', ') + ' )', nodeType, output );
+	return builder.format( this.method + '( ' + params.join( ', ' ) + ' )', nodeType, output );
 
 };
 

examples/js/nodes/math/OperatorNode.js → examples/jsm/nodes/math/OperatorNode.js

@@ -46,8 +46,7 @@ OperatorNode.prototype.getType = function ( builder ) {
 
 OperatorNode.prototype.generate = function ( builder, output ) {
 
-	var data = builder.getNodeData( this ),
-		type = this.getType( builder );
+	var type = this.getType( builder );
 
 	var a = this.a.build( builder, type ),
 		b = this.b.build( builder, type );

examples/js/nodes/misc/TextureCubeNode.js → examples/jsm/nodes/misc/TextureCubeNode.js

@@ -18,16 +18,16 @@ function TextureCubeNode( value, textureSize ) {
 	this.value = value;
 	this.textureSize = textureSize || new FloatNode( 1024 );
 
-	this.radianceCache = { uv: new TextureCubeUVNode( 
-		new ReflectNode( ReflectNode.VECTOR ), 
-		this.textureSize, 
-		new BlinnExponentToRoughnessNode() 
+	this.radianceCache = { uv: new TextureCubeUVNode(
+		new ReflectNode( ReflectNode.VECTOR ),
+		this.textureSize,
+		new BlinnExponentToRoughnessNode()
 	) };
 
-	this.irradianceCache = { uv: new TextureCubeUVNode( 
-		new NormalNode( NormalNode.WORLD ), 
-		this.textureSize, 
-		new FloatNode( 1 ).setReadonly( true ) 
+	this.irradianceCache = { uv: new TextureCubeUVNode(
+		new NormalNode( NormalNode.WORLD ),
+		this.textureSize,
+		new FloatNode( 1 ).setReadonly( true )
 	) };
 
 }
@@ -55,13 +55,13 @@ TextureCubeNode.prototype.generateTextureCubeUV = function ( builder, cache ) {
 
 	builder.addContext( context );
 
-	cache.colorSpace10 = cache.colorSpace10 || new ColorSpaceNode( new ExpressionNode('', outputType ) );
+	cache.colorSpace10 = cache.colorSpace10 || new ColorSpaceNode( new ExpressionNode( '', outputType ) );
 	cache.colorSpace10.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 	cache.colorSpace10.input.parse( color10 );
 
 	color10 = cache.colorSpace10.build( builder, outputType );
 
-	cache.colorSpace20 = cache.colorSpace20 || new ColorSpaceNode( new ExpressionNode('', outputType ) );
+	cache.colorSpace20 = cache.colorSpace20 || new ColorSpaceNode( new ExpressionNode( '', outputType ) );
 	cache.colorSpace20.fromDecoding( builder.getTextureEncodingFromMap( this.value.value ) );
 	cache.colorSpace20.input.parse( color20 );
 

examples/js/nodes/misc/TextureCubeUVNode.js → examples/jsm/nodes/misc/TextureCubeUVNode.js

@@ -6,8 +6,6 @@ import { TempNode } from '../core/TempNode.js';
 import { ConstNode } from '../core/ConstNode.js';
 import { StructNode } from '../core/StructNode.js';
 import { FunctionNode } from '../core/FunctionNode.js';
-import { ReflectNode } from '../accessors/ReflectNode.js';
-import { FloatNode } from '../inputs/FloatNode.js';
 
 function TextureCubeUVNode( uv, textureSize, blinnExponentToRoughness ) {
 

examples/js/nodes/postprocessing/NodePass.js → examples/jsm/nodes/postprocessing/NodePass.js

@@ -2,15 +2,18 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Math as _Math } from '../../../../build/three.module.js';
+
+import { ShaderPass } from '../../postprocessing/ShaderPass.js';
 import { NodeMaterial } from '../materials/NodeMaterial.js';
 import { ScreenNode } from '../inputs/ScreenNode.js';
 
 function NodePass() {
 
-	THREE.ShaderPass.call( this );
+	ShaderPass.call( this );
 
 	this.name = "";
-	this.uuid = THREE.Math.generateUUID();
+	this.uuid = _Math.generateUUID();
 
 	this.userData = {};
 
@@ -24,7 +27,7 @@ function NodePass() {
 
 }
 
-NodePass.prototype = Object.create( THREE.ShaderPass.prototype );
+NodePass.prototype = Object.create( ShaderPass.prototype );
 NodePass.prototype.constructor = NodePass;
 
 NodePass.prototype.render = function () {
@@ -41,7 +44,7 @@ NodePass.prototype.render = function () {
 
 	this.uniforms = this.material.uniforms;
 
-	THREE.ShaderPass.prototype.render.apply( this, arguments );
+	ShaderPass.prototype.render.apply( this, arguments );
 
 };
 

examples/js/nodes/postprocessing/NodePostProcessing.js → examples/jsm/nodes/postprocessing/NodePostProcessing.js

@@ -2,6 +2,17 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	LinearFilter,
+	Mesh,
+	OrthographicCamera,
+	PlaneBufferGeometry,
+	RGBAFormat,
+	Scene,
+	Vector2,
+	WebGLRenderTarget
+} from '../../../../build/three.module.js';
+
 import { NodeMaterial } from '../materials/NodeMaterial.js';
 import { ScreenNode } from '../inputs/ScreenNode.js';
 
@@ -10,14 +21,14 @@ function NodePostProcessing( renderer, renderTarget ) {
 	if ( renderTarget === undefined ) {
 
 		var parameters = {
-			minFilter: THREE.LinearFilter,
-			magFilter: THREE.LinearFilter,
-			format: THREE.RGBAFormat,
+			minFilter: LinearFilter,
+			magFilter: LinearFilter,
+			format: RGBAFormat,
 			stencilBuffer: false
 		};
 
-		var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
-		renderTarget = new THREE.WebGLRenderTarget( size.width, size.height, parameters );
+		var size = renderer.getDrawingBufferSize( new Vector2() );
+		renderTarget = new WebGLRenderTarget( size.width, size.height, parameters );
 
 	}
 
@@ -27,10 +38,10 @@ function NodePostProcessing( renderer, renderTarget ) {
 	this.output = new ScreenNode();
 	this.material = new NodeMaterial();
 
-	this.camera = new THREE.OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
-	this.scene = new THREE.Scene();
+	this.camera = new OrthographicCamera( - 1, 1, 1, - 1, 0, 1 );
+	this.scene = new Scene();
 
-	this.quad = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2, 2 ), this.material );
+	this.quad = new Mesh( new PlaneBufferGeometry( 2, 2 ), this.material );
 	this.quad.frustumCulled = false; // Avoid getting clipped
 	this.scene.add( this.quad );
 

examples/js/nodes/utils/ColorSpaceNode.js → examples/jsm/nodes/utils/ColorSpaceNode.js

@@ -2,6 +2,16 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import {
+	GammaEncoding,
+	LinearEncoding,
+	RGBEEncoding,
+	RGBM7Encoding,
+	RGBM16Encoding,
+	RGBDEncoding,
+	sRGBEncoding
+} from '../../../../build/three.module.js';
+
 import { TempNode } from '../core/TempNode.js';
 import { ConstNode } from '../core/ConstNode.js';
 import { FloatNode } from '../inputs/FloatNode.js';
@@ -207,19 +217,19 @@ ColorSpaceNode.getEncodingComponents = function ( encoding ) {
 
 	switch ( encoding ) {
 
-		case THREE.LinearEncoding:
+		case LinearEncoding:
 			return [ 'Linear' ];
-		case THREE.sRGBEncoding:
+		case sRGBEncoding:
 			return [ 'sRGB' ];
-		case THREE.RGBEEncoding:
+		case RGBEEncoding:
 			return [ 'RGBE' ];
-		case THREE.RGBM7Encoding:
+		case RGBM7Encoding:
 			return [ 'RGBM', new FloatNode( 7.0 ).setReadonly( true ) ];
-		case THREE.RGBM16Encoding:
+		case RGBM16Encoding:
 			return [ 'RGBM', new FloatNode( 16.0 ).setReadonly( true ) ];
-		case THREE.RGBDEncoding:
+		case RGBDEncoding:
 			return [ 'RGBD', new FloatNode( 256.0 ).setReadonly( true ) ];
-		case THREE.GammaEncoding:
+		case GammaEncoding:
 			return [ 'Gamma', new ExpressionNode( 'float( GAMMA_FACTOR )', 'f' ) ];
 
 	}

examples/js/nodes/utils/VelocityNode.js → examples/jsm/nodes/utils/VelocityNode.js

@@ -2,6 +2,8 @@
  * @author sunag / http://www.sunag.com.br/
  */
 
+import { Vector3 } from '../../../../build/three.module.js';
+
 import { Vector3Node } from '../inputs/Vector3Node.js';
 
 function VelocityNode( target, params ) {
@@ -10,7 +12,7 @@ function VelocityNode( target, params ) {
 
 	this.params = {};
 
-	this.velocity = new THREE.Vector3();
+	this.velocity = new Vector3();
 
 	this.setTarget( target );
 	this.setParams( params );
@@ -21,7 +23,7 @@ VelocityNode.prototype = Object.create( Vector3Node.prototype );
 VelocityNode.prototype.constructor = VelocityNode;
 VelocityNode.prototype.nodeType = "Velocity";
 
-VelocityNode.prototype.getReadonly = function ( builder ) {
+VelocityNode.prototype.getReadonly = function ( /*builder*/ ) {
 
 	return false;
 
@@ -50,12 +52,12 @@ VelocityNode.prototype.setParams = function ( params ) {
 
 		case "elastic":
 
-			this.moment = new THREE.Vector3();
+			this.moment = new Vector3();
 
-			this.speed = new THREE.Vector3();
-			this.springVelocity = new THREE.Vector3();
+			this.speed = new Vector3();
+			this.springVelocity = new Vector3();
 
-			this.lastVelocity = new THREE.Vector3();
+			this.lastVelocity = new Vector3();
 
 			break;
 
@@ -76,18 +78,18 @@ VelocityNode.prototype.setTarget = function ( target ) {
 
 	if ( target ) {
 
-		this.position = target.getWorldPosition( this.position || new THREE.Vector3() );
+		this.position = target.getWorldPosition( this.position || new Vector3() );
 		this.oldPosition = this.position.clone();
 
 	}
 
 };
 
-VelocityNode.prototype.updateFrameVelocity = function ( frame ) {
+VelocityNode.prototype.updateFrameVelocity = function ( /*frame*/ ) {
 
 	if ( this.target ) {
 
-		this.position = this.target.getWorldPosition( this.position || new THREE.Vector3() );
+		this.position = this.target.getWorldPosition( this.position || new Vector3() );
 		this.velocity.subVectors( this.position, this.oldPosition );
 		this.oldPosition.copy( this.position );
 
@@ -146,9 +148,9 @@ VelocityNode.prototype.copy = function ( source ) {
 
 	Vector3Node.prototype.copy.call( this, source );
 
-	if ( source.target ) object.setTarget( source.target );
+	if ( source.target ) this.setTarget( source.target );
 
-	object.setParams( source.params );
+	this.setParams( source.params );
 
 };
 

examples/webgl_loader_nodes.html

@@ -14,195 +14,195 @@
 			Serialized using <a href="webgl_materials_nodes.html">webgl_materials_nodes.html</a>
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
 
-			import './js/nodes/THREE.Nodes.js';
-			import './js/loaders/NodeMaterialLoader.js';
+				import * as THREE from '../build/three.module.js';
 
-			var container = document.getElementById( 'container' );
+				import { GUI } from './jsm/libs/dat.gui.module.js';
+				import { OrbitControls } from './jsm/controls/OrbitControls.js';
+				import { NodeMaterialLoader } from './jsm/loaders/NodeMaterialLoader.js';
+				import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
+				import { NodeFrame } from './jsm/nodes/core/NodeFrame.js';
+				import { NodeMaterial } from './jsm/nodes/materials/NodeMaterial.js';
 
-			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-			var frame = new THREE.NodeFrame();
-			var teapot, mesh, cloud;
-			var controls;
-			var gui;
+				var container = document.getElementById( 'container' );
 
-			var param = { load: 'caustic' };
+				var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+				var frame = new NodeFrame();
+				var teapot, mesh, cloud;
+				var controls;
+				var gui;
 
-			window.addEventListener( 'load', init );
+				var param = { load: 'caustic' };
 
-			function init() {
+				window.addEventListener( 'load', init );
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
-				renderer.setPixelRatio( window.devicePixelRatio );
-				renderer.setSize( window.innerWidth, window.innerHeight );
-				container.appendChild( renderer.domElement );
+				function init() {
 
-				scene = new THREE.Scene();
+					renderer = new THREE.WebGLRenderer( { antialias: true } );
+					renderer.setPixelRatio( window.devicePixelRatio );
+					renderer.setSize( window.innerWidth, window.innerHeight );
+					container.appendChild( renderer.domElement );
 
-				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
-				camera.position.x = 50;
-				camera.position.z = - 50;
-				camera.position.y = 30;
-				camera.target = new THREE.Vector3();
+					scene = new THREE.Scene();
 
-				cloud = new THREE.TextureLoader().load( 'textures/lava/cloud.png' );
-				cloud.wrapS = cloud.wrapT = THREE.RepeatWrapping;
+					camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+					camera.position.x = 50;
+					camera.position.z = - 50;
+					camera.position.y = 30;
+					camera.target = new THREE.Vector3();
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
-				controls.minDistance = 50;
-				controls.maxDistance = 200;
+					cloud = new THREE.TextureLoader().load( 'textures/lava/cloud.png' );
+					cloud.wrapS = cloud.wrapT = THREE.RepeatWrapping;
 
-				scene.add( new THREE.AmbientLight( 0x464646 ) );
+					controls = new OrbitControls( camera, renderer.domElement );
+					controls.minDistance = 50;
+					controls.maxDistance = 200;
 
-				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-				light.position.set( 1, 0.75, 0.5 );
-				scene.add( light );
+					scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-				var light = new THREE.DirectionalLight( 0xccccff, 1 );
-				light.position.set( - 1, 0.75, - 0.5 );
-				scene.add( light );
+					var light = new THREE.DirectionalLight( 0xffddcc, 1 );
+					light.position.set( 1, 0.75, 0.5 );
+					scene.add( light );
 
-				teapot = new THREE.TeapotBufferGeometry( 15, 18 );
+					var light = new THREE.DirectionalLight( 0xccccff, 1 );
+					light.position.set( - 1, 0.75, - 0.5 );
+					scene.add( light );
 
-				mesh = new THREE.Mesh( teapot );
-				scene.add( mesh );
+					teapot = new TeapotBufferGeometry( 15, 18 );
 
-				window.addEventListener( 'resize', onWindowResize, false );
+					mesh = new THREE.Mesh( teapot );
+					scene.add( mesh );
 
-				updateMaterial();
+					window.addEventListener( 'resize', onWindowResize, false );
 
-				onWindowResize();
-				animate();
+					updateMaterial();
 
-			}
+					onWindowResize();
+					animate();
 
-			function clearGui() {
+				}
 
-				if ( gui ) gui.destroy();
+				function clearGui() {
 
-				gui = new dat.GUI();
+					if ( gui ) gui.destroy();
 
-				gui.add( param, 'load', {
-					'caustic': 'caustic',
-					'displace': 'displace',
-					'wave': 'wave',
-					'xray': 'xray'
-				} ).onFinishChange( function () {
+					gui = new GUI();
 
-					updateMaterial();
+					gui.add( param, 'load', {
+						'caustic': 'caustic',
+						'displace': 'displace',
+						'wave': 'wave',
+						'xray': 'xray'
+					} ).onFinishChange( function () {
 
-				} );
+						updateMaterial();
 
-				gui.open();
+					} );
 
-			}
+					gui.open();
 
-			function addGui( name, value, callback, isColor, min, max ) {
+				}
 
-				var node;
+				function addGui( name, value, callback, isColor, min, max ) {
 
-				param[ name ] = value;
+					var node;
 
-				if ( isColor ) {
+					param[ name ] = value;
 
-					node = gui.addColor( param, name ).onChange( function () {
+					if ( isColor ) {
 
-						callback( param[ name ] );
+						node = gui.addColor( param, name ).onChange( function () {
 
-					} );
+							callback( param[ name ] );
 
-				} else if ( typeof value == 'object' ) {
+						} );
 
-					node = gui.add( param, name, value ).onChange( function () {
+					} else if ( typeof value == 'object' ) {
 
-						callback( param[ name ] );
+						node = gui.add( param, name, value ).onChange( function () {
 
-					} );
+							callback( param[ name ] );
 
-				} else {
+						} );
 
-					node = gui.add( param, name, min, max ).onChange( function () {
+					} else {
 
-						callback( param[ name ] );
+						node = gui.add( param, name, min, max ).onChange( function () {
 
-					} );
+							callback( param[ name ] );
 
-				}
+						} );
 
-				return node;
+					}
 
-			}
+					return node;
 
+				}
 
-			function updateMaterial() {
 
-				if ( mesh.material ) mesh.material.dispose();
+				function updateMaterial() {
 
-				clearGui();
+					if ( mesh.material ) mesh.material.dispose();
 
-				var url = "nodes/" + param.load + ".json";
+					clearGui();
 
-				var library = {
-					"cloud": cloud
-				};
+					var url = "nodes/" + param.load + ".json";
 
-				var loader = new THREE.NodeMaterialLoader( undefined, library ).load( url, function () {
+					var library = {
+						"cloud": cloud
+					};
 
-					var time = loader.getObjectByName( "time" );
+					var loader = new NodeMaterialLoader( undefined, library ).load( url, function () {
 
-					if ( time ) {
+						var time = loader.getObjectByName( "time" );
 
-						// enable time scale
+						if ( time ) {
 
-						time.timeScale = true;
+							// enable time scale
 
-						// gui
+							time.timeScale = true;
 
-						addGui( 'timeScale', time.scale, function ( val ) {
+							// gui
 
-							time.scale = val;
+							addGui( 'timeScale', time.scale, function ( val ) {
 
-						}, false, - 2, 2 );
+								time.scale = val;
 
-					}
+							}, false, - 2, 2 );
 
-					// set material
-					mesh.material = loader.material;
+						}
 
-				} );
+						// set material
+						mesh.material = loader.material;
 
-			}
+					} );
 
-			function onWindowResize() {
+				}
+
+				function onWindowResize() {
 
-				var width = window.innerWidth, height = window.innerHeight;
+					var width = window.innerWidth, height = window.innerHeight;
 
-				camera.aspect = width / height;
-				camera.updateProjectionMatrix();
+					camera.aspect = width / height;
+					camera.updateProjectionMatrix();
 
-				renderer.setSize( width, height );
+					renderer.setSize( width, height );
 
-			}
+				}
 
-			function animate() {
+				function animate() {
 
-				var delta = clock.getDelta();
+					var delta = clock.getDelta();
 
-				// update material animation and/or gpu calcs (pre-renderer)
-				if ( mesh.material instanceof THREE.NodeMaterial ) frame.update( delta ).updateNode( mesh.material );
+					// update material animation and/or gpu calcs (pre-renderer)
+					if ( mesh.material instanceof NodeMaterial ) frame.update( delta ).updateNode( mesh.material );
 
-				renderer.render( scene, camera );
+					renderer.render( scene, camera );
 
-				requestAnimationFrame( animate );
+					requestAnimationFrame( animate );
 
-			}
+				}
 
 		</script>
 	</body>

examples/webgl_materials_compile.html

@@ -33,205 +33,211 @@
 			Loading ...
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
 
-		import './js/nodes/THREE.Nodes.js';
+			import * as THREE from '../build/three.module.js';
 
-		var container = document.getElementById( 'container' );
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { TeapotBufferGeometry } from './jsm/geometries/TeapotBufferGeometry.js';
+			import { NodeFrame } from './jsm/nodes/core/NodeFrame.js';
+			import { MathNode } from './jsm/nodes/math/MathNode.js';
+			import { OperatorNode } from './jsm/nodes/math/OperatorNode.js';
+			import { ConstNode } from './jsm/nodes/core/ConstNode.js';
+			import { ColorNode } from './jsm/nodes/inputs/ColorNode.js';
+			import { ExpressionNode } from './jsm/nodes/core/ExpressionNode.js';
+			import { TimerNode } from './jsm/nodes/utils/TimerNode.js';
+			import { FloatNode } from './jsm/nodes/inputs/FloatNode.js';
+			import { PhongNodeMaterial } from './jsm/nodes/materials/PhongNodeMaterial.js';
 
-		var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-		var frame = new THREE.NodeFrame();
-		var teapot;
-		var controls;
-		var rtTexture, rtMaterial;
-		var meshes = [];
+			var container = document.getElementById( 'container' );
 
-		document.getElementById( "preload" ).addEventListener( 'click', function () {
+			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
+			var frame = new NodeFrame();
+			var teapot;
+			var controls;
+			var rtTexture, rtMaterial;
+			var meshes = [];
 
-			var hash = document.location.hash.substr( 1 );
+			document.getElementById( "preload" ).addEventListener( 'click', function () {
 
-			if ( hash.length === 0 ) {
+				var hash = document.location.hash.substr( 1 );
 
-				window.location.hash = "#NoPreLoad";
+				if ( hash.length === 0 ) {
 
-			} else {
+					window.location.hash = "#NoPreLoad";
 
-				window.location.hash = "";
+				} else {
 
-			}
+					window.location.hash = "";
 
-			location.reload( true );
+				}
 
-		}, false );
+				location.reload( true );
 
-		window.addEventListener( 'load', init );
+			}, false );
 
-		function init() {
+			window.addEventListener( 'load', init );
 
-			renderer = new THREE.WebGLRenderer( { antialias: true } );
-			renderer.setPixelRatio( window.devicePixelRatio );
-			renderer.setSize( window.innerWidth, window.innerHeight );
-			container.appendChild( renderer.domElement );
+			function init() {
 
-			scene = new THREE.Scene();
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer.setPixelRatio( window.devicePixelRatio );
+				renderer.setSize( window.innerWidth, window.innerHeight );
+				container.appendChild( renderer.domElement );
 
-			camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
-			camera.position.x = 0;
-			camera.position.z = - 300;
-			camera.position.y = 200;
-			camera.target = new THREE.Vector3();
+				scene = new THREE.Scene();
 
-			controls = new THREE.OrbitControls( camera, renderer.domElement );
-			controls.minDistance = 50;
-			controls.maxDistance = 400;
+				camera = new THREE.PerspectiveCamera( fov, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera.position.x = 0;
+				camera.position.z = - 300;
+				camera.position.y = 200;
+				camera.target = new THREE.Vector3();
 
-			scene.add( new THREE.AmbientLight( 0x464646 ) );
+				controls = new OrbitControls( camera, renderer.domElement );
+				controls.minDistance = 50;
+				controls.maxDistance = 400;
 
-			var light = new THREE.DirectionalLight( 0xffddcc, 1 );
-			light.position.set( 1, 0.75, 0.5 );
-			scene.add( light );
+				scene.add( new THREE.AmbientLight( 0x464646 ) );
 
-			var light = new THREE.DirectionalLight( 0xccccff, 1 );
-			light.position.set( - 1, 0.75, - 0.5 );
-			scene.add( light );
+				var light = new THREE.DirectionalLight( 0xffddcc, 1 );
+				light.position.set( 1, 0.75, 0.5 );
+				scene.add( light );
 
-			teapot = new THREE.TeapotBufferGeometry( 15, 18 );
+				var light = new THREE.DirectionalLight( 0xccccff, 1 );
+				light.position.set( - 1, 0.75, - 0.5 );
+				scene.add( light );
 
-			var itemsonrow = 10;
+				teapot = new TeapotBufferGeometry( 15, 18 );
 
-			for ( var i = 0; i < itemsonrow * itemsonrow; i ++ ) {
+				var itemsonrow = 10;
 
-				var mesh = new THREE.Mesh( teapot );
+				for ( var i = 0; i < itemsonrow * itemsonrow; i ++ ) {
 
-				mesh.position.x = 50 * ( i % itemsonrow ) - 50 * itemsonrow / 2;
-				mesh.position.z = 50 * Math.floor( i / itemsonrow ) - 150;
-				updateMaterial( mesh );
-				scene.add( mesh );
-				meshes.push( mesh );
+					var mesh = new THREE.Mesh( teapot );
 
-			}
+					mesh.position.x = 50 * ( i % itemsonrow ) - 50 * itemsonrow / 2;
+					mesh.position.z = 50 * Math.floor( i / itemsonrow ) - 150;
+					updateMaterial( mesh );
+					scene.add( mesh );
+					meshes.push( mesh );
 
-			window.addEventListener( 'resize', onWindowResize, false );
+				}
 
-			var hash = document.location.hash.substr( 1 );
+				window.addEventListener( 'resize', onWindowResize, false );
 
-			if ( hash.length === 0 ) {
+				var hash = document.location.hash.substr( 1 );
 
-				renderer.compile( scene, camera );
+				if ( hash.length === 0 ) {
 
-			}
+					renderer.compile( scene, camera );
 
-			document.getElementById( "waitScreen" ).className = "hide";
+				}
 
-			setTimeout( function () {
+				document.getElementById( "waitScreen" ).className = "hide";
 
-				onWindowResize();
-				animate();
+				setTimeout( function () {
 
-			}, 1 );
+					onWindowResize();
+					animate();
 
-		}
+				}, 1 );
 
-		function updateMaterial( mesh ) {
+			}
 
-			if ( mesh.material ) mesh.material.dispose();
+			function updateMaterial( mesh ) {
 
-			if ( rtTexture ) {
+				if ( mesh.material ) mesh.material.dispose();
 
-				rtTexture.dispose();
-				rtTexture = null;
+				if ( rtTexture ) {
 
-			}
+					rtTexture.dispose();
+					rtTexture = null;
 
-			if ( rtMaterial ) {
+				}
 
-				rtMaterial.dispose();
-				rtMaterial = null;
+				if ( rtMaterial ) {
 
-			}
+					rtMaterial.dispose();
+					rtMaterial = null;
+
+				}
 
-			var mtl = new THREE.PhongNodeMaterial();
+				var mtl = new PhongNodeMaterial();
 
-			var time = new THREE.TimerNode();
-			var speed = new THREE.FloatNode( Math.random() );
+				var time = new TimerNode();
+				var speed = new FloatNode( Math.random() );
 
-			var color = new THREE.ColorNode( Math.random() * 0xFFFFFF );
+				var color = new ColorNode( Math.random() * 0xFFFFFF );
 
-			var timeSpeed = new THREE.OperatorNode(
-				time,
-				speed,
-				THREE.OperatorNode.MUL
-			);
+				var timeSpeed = new OperatorNode(
+					time,
+					speed,
+					OperatorNode.MUL
+				);
 
-			var sinCycleInSecs = new THREE.OperatorNode(
-				timeSpeed,
-				new THREE.ConstNode( THREE.ConstNode.PI2 ),
-				THREE.OperatorNode.MUL
-			);
+				var sinCycleInSecs = new OperatorNode(
+					timeSpeed,
+					new ConstNode( ConstNode.PI2 ),
+					OperatorNode.MUL
+				);
 
-			var cycle = new THREE.MathNode( sinCycleInSecs, THREE.MathNode.SIN );
+				var cycle = new MathNode( sinCycleInSecs, MathNode.SIN );
 
-			var cycleColor = new THREE.OperatorNode(
-				cycle,
-				color,
-				THREE.OperatorNode.MUL
-			);
+				var cycleColor = new OperatorNode(
+					cycle,
+					color,
+					OperatorNode.MUL
+				);
 
-			var cos = new THREE.MathNode( cycleColor, THREE.MathNode.SIN );
+				var cos = new MathNode( cycleColor, MathNode.SIN );
 
-			mtl.color = new THREE.ColorNode( 0 );
-			mtl.emissive = cos;
+				mtl.color = new ColorNode( 0 );
+				mtl.emissive = cos;
 
 
-			var transformer = new THREE.ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
-			mtl.transform = transformer;
+				var transformer = new ExpressionNode( "position + 0.0 * " + Math.random(), "vec3", [ ] );
+				mtl.transform = transformer;
 
-			// build shader ( ignore auto build )
-			mtl.build();
+				// build shader ( ignore auto build )
+				mtl.build();
 
-			// set material
-			mesh.material = mtl;
+				// set material
+				mesh.material = mtl;
 
-		}
+			}
 
-		function onWindowResize() {
+			function onWindowResize() {
 
-			var width = window.innerWidth, height = window.innerHeight;
+				var width = window.innerWidth, height = window.innerHeight;
 
-			camera.aspect = width / height;
-			camera.updateProjectionMatrix();
+				camera.aspect = width / height;
+				camera.updateProjectionMatrix();
 
-			renderer.setSize( width, height );
+				renderer.setSize( width, height );
 
-			if ( rtTexture ) rtTexture.setSize( width, height );
+				if ( rtTexture ) rtTexture.setSize( width, height );
 
-		}
+			}
 
-		function animate() {
+			function animate() {
 
-			var delta = clock.getDelta();
+				var delta = clock.getDelta();
 
-			frame.update( delta );
+				frame.update( delta );
 
-			for ( var i = 0; i < meshes.length; i ++ ) {
+				for ( var i = 0; i < meshes.length; i ++ ) {
 
-				var mesh = meshes[ i ];
+					var mesh = meshes[ i ];
 
-				frame.updateNode( mesh.material );
+					frame.updateNode( mesh.material );
 
-			}
+				}
 
-			renderer.render( scene, camera );
+				renderer.render( scene, camera );
 
-			requestAnimationFrame( animate );
+				requestAnimationFrame( animate );
 
-		}
+			}
 
 		</script>
 

examples/webgl_materials_envmaps_hdr_nodes.html

@@ -31,33 +31,18 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
 			Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/RGBELoader.js"></script>
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
-			/*
-			 * COPIED FROM webgl_materials_envmaps_hdr.html
-			 *
-			 *
-			 *
-			 */
-			import './js/nodes/THREE.Nodes.js';
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import * as THREE from '../build/three.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			import Stats from './jsm/libs/stats.module.js';
 
-			}
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
+			import { MeshStandardNodeMaterial } from './jsm/nodes/materials/MeshStandardNodeMaterial.js';
 
 			var params = {
 				envMap: 'HDR',
@@ -105,7 +90,7 @@
 				torusMesh = new THREE.Mesh( geometry, material );
 				scene.add( torusMesh );
 
-				material = new THREE.MeshStandardNodeMaterial();
+				material = new MeshStandardNodeMaterial();
 				material.color = new THREE.Color( 0xffffff );
 				material.roughness = params.metalness;
 				material.metalness = params.roguhness;
@@ -119,14 +104,15 @@
 				scene.add( planeMesh );
 
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-				hdrCubeMap = new THREE.HDRCubeTextureLoader()
+				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
-					.load( THREE.UnsignedByteType, hdrUrls, function () {
+					.setType( THREE.UnsignedByteType )
+					.load( hdrUrls, function () {
 
-						var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap );
+						var pmremGenerator = new PMREMGenerator( hdrCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
@@ -146,10 +132,10 @@
 
 						ldrCubeMap.encoding = THREE.GammaEncoding;
 
-						var pmremGenerator = new THREE.PMREMGenerator( ldrCubeMap );
+						var pmremGenerator = new PMREMGenerator( ldrCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						ldrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
@@ -168,10 +154,10 @@
 						rgbmCubeMap.encoding = THREE.RGBM16Encoding;
 						rgbmCubeMap.format = THREE.RGBAFormat;
 
-						var pmremGenerator = new THREE.PMREMGenerator( rgbmCubeMap );
+						var pmremGenerator = new PMREMGenerator( rgbmCubeMap );
 						pmremGenerator.update( renderer );
 
-						var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+						var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 						pmremCubeUVPacker.update( renderer );
 
 						rgbmCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
@@ -195,13 +181,13 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 300;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'envMap', [ 'LDR', 'HDR', 'RGBM16' ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );
@@ -244,7 +230,7 @@
 				torusMeshNode.material.roughness = params.roughness;
 				torusMeshNode.material.metalness = params.metalness;
 
-				torusMesh.visible = !params.nodes;
+				torusMesh.visible = ! params.nodes;
 				torusMeshNode.visible = params.nodes;
 
 				var renderTarget, cubeMap;
@@ -263,6 +249,7 @@
 						renderTarget = rgbmCubeRenderTarget;
 						cubeMap = rgbmCubeMap;
 						break;
+
 				}
 
 				var newEnvMap = renderTarget ? renderTarget.texture : null;

examples/webgl_materials_envmaps_pmrem_nodes.html

@@ -31,33 +31,21 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">threejs</a> - High dynamic range (RGBE) Image-based Lighting (IBL)<br />using run-time generated pre-filtered roughness mipmaps (PMREM)<br/>
 			Created by Prashant Sharma and <a href="http://clara.io/" target="_blank" rel="noopener">Ben Houston</a>.</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
-		<script src="js/loaders/RGBELoader.js"></script>
-		<script src="js/loaders/HDRCubeTextureLoader.js"></script>
-
-		<script src="js/WebGL.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
-		<script src="js/pmrem/PMREMGenerator.js"></script>
-		<script src="js/pmrem/PMREMCubeUVPacker.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
-			/*
-			 * COPIED FROM webgl_materials_envmaps_hdr.html
-			 *
-			 *
-			 *
-			 */
-			import './js/nodes/THREE.Nodes.js';
 
-			if ( WEBGL.isWebGLAvailable() === false ) {
+			import * as THREE from '../build/three.module.js';
 
-				document.body.appendChild( WEBGL.getWebGLErrorMessage() );
+			import Stats from './jsm/libs/stats.module.js';
 
-			}
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { HDRCubeTextureLoader } from './jsm/loaders/HDRCubeTextureLoader.js';
+			import { PMREMGenerator } from './jsm/pmrem/PMREMGenerator.js';
+			import { PMREMCubeUVPacker } from './jsm/pmrem/PMREMCubeUVPacker.js';
+			import { StandardNodeMaterial } from './jsm/nodes/materials/StandardNodeMaterial.js';
+			import { FloatNode } from './jsm/nodes/inputs/FloatNode.js';
+			import { TextureNode } from './jsm/nodes/inputs/TextureNode.js';
+			import { TextureCubeNode } from './jsm/nodes/misc/TextureCubeNode.js';
 
 			var params = {
 				textureSize: 1024,
@@ -71,8 +59,8 @@
 			var container, stats;
 			var camera, scene, renderer, controls;
 			var nodeMaterial, nodeTexture, nodeTextureSize, torusMesh, planeMesh;
-			var ldrCubeRenderTarget, hdrCubeRenderTarget, rgbmCubeRenderTarget;
-			var ldrCubeMap, hdrCubeMap, rgbmCubeMap;
+			var hdrCubeRenderTarget;
+			var hdrCubeMap;
 
 			init();
 			animate();
@@ -81,10 +69,10 @@
 
 				nodeTextureSize.value = textureSize;
 
-				var pmremGenerator = new THREE.PMREMGenerator( hdrCubeMap, undefined, textureSize / 4 );
+				var pmremGenerator = new PMREMGenerator( hdrCubeMap, undefined, textureSize / 4 );
 				pmremGenerator.update( renderer );
 
-				var pmremCubeUVPacker = new THREE.PMREMCubeUVPacker( pmremGenerator.cubeLods );
+				var pmremCubeUVPacker = new PMREMCubeUVPacker( pmremGenerator.cubeLods );
 				pmremCubeUVPacker.update( renderer );
 
 				hdrCubeRenderTarget = pmremCubeUVPacker.CubeUVRenderTarget;
@@ -119,16 +107,16 @@
 
 				var geometry = new THREE.TorusKnotBufferGeometry( 18, 8, 150, 20 );
 
-				nodeMaterial = new THREE.StandardNodeMaterial();
+				nodeMaterial = new StandardNodeMaterial();
 				nodeMaterial.color.value = new THREE.Color( 0xffffff );
 				nodeMaterial.roughness.value = params.metalness;
 				nodeMaterial.metalness.value = params.roguhness;
 				nodeMaterial.visible = false;
 
-				nodeTexture = new THREE.TextureNode();
-				nodeTextureSize = new THREE.FloatNode( 1024 );
+				nodeTexture = new TextureNode();
+				nodeTextureSize = new FloatNode( 1024 );
 
-				nodeMaterial.environment = new THREE.TextureCubeNode( nodeTexture, nodeTextureSize );
+				nodeMaterial.environment = new TextureCubeNode( nodeTexture, nodeTextureSize );
 
 				torusMesh = new THREE.Mesh( geometry, nodeMaterial );
 				scene.add( torusMesh );
@@ -139,9 +127,10 @@
 				scene.add( planeMesh );
 
 				var hdrUrls = [ 'px.hdr', 'nx.hdr', 'py.hdr', 'ny.hdr', 'pz.hdr', 'nz.hdr' ];
-				hdrCubeMap = new THREE.HDRCubeTextureLoader()
+				hdrCubeMap = new HDRCubeTextureLoader()
 					.setPath( './textures/cube/pisaHDR/' )
-					.load( THREE.UnsignedByteType, hdrUrls, function () {
+					.setType( THREE.UnsignedByteType )
+					.load( hdrUrls, function () {
 
 						generate( params.textureSize );
 
@@ -160,13 +149,13 @@
 				stats = new Stats();
 				container.appendChild( stats.dom );
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 300;
 
 				window.addEventListener( 'resize', onWindowResize, false );
 
-				var gui = new dat.GUI();
+				var gui = new GUI();
 
 				gui.add( params, 'textureSize', [ 128, 256, 512, 1024, 2048, 4096 ] );
 				gui.add( params, 'roughness', 0, 1, 0.01 );

examples/webgl_mirror_nodes.html

@@ -20,16 +20,23 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - mirror node-based
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-		<script src="js/objects/Reflector.js"></script>
-		<script src="js/objects/ReflectorRTT.js"></script>
-		<script src="js/controls/OrbitControls.js"></script>
-
 		<script type="module">
-
-			import './js/nodes/THREE.Nodes.js';
-			import './js/loaders/NodeMaterialLoader.js';
+			import * as THREE from '../build/three.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { ReflectorRTT } from './jsm/objects/ReflectorRTT.js';
+			import { NodeFrame } from './jsm/nodes/core/NodeFrame.js';
+			import { ExpressionNode } from './jsm/nodes/core/ExpressionNode.js';
+			import { PhongNodeMaterial } from './jsm/nodes/materials/PhongNodeMaterial.js';
+			import { MathNode } from './jsm/nodes/math/MathNode.js';
+			import { OperatorNode } from './jsm/nodes/math/OperatorNode.js';
+			import { TextureNode } from './jsm/nodes/inputs/TextureNode.js';
+			import { BlurNode } from './jsm/nodes/effects/BlurNode.js';
+			import { FloatNode } from './jsm/nodes/inputs/FloatNode.js';
+			import { ReflectorNode } from './jsm/nodes/inputs/ReflectorNode.js';
+			import { SwitchNode } from './jsm/nodes/utils/SwitchNode.js';
+			import { NormalMapNode } from './jsm/nodes/misc/NormalMapNode.js';
 
 			// scene size
 			var WIDTH = window.innerWidth;
@@ -51,12 +58,12 @@
 
 			var cameraControls;
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
 			var sphereGroup, smallSphere;
 			var groundMirrorMaterial;
 
-			var frame = new THREE.NodeFrame();
+			var frame = new NodeFrame();
 
 			function init() {
 
@@ -72,7 +79,7 @@
 				camera = new THREE.PerspectiveCamera( VIEW_ANGLE, ASPECT, NEAR, FAR );
 				camera.position.set( 0, 75, 160 );
 
-				cameraControls = new THREE.OrbitControls( camera, renderer.domElement );
+				cameraControls = new OrbitControls( camera, renderer.domElement );
 				cameraControls.target.set( 0, 40, 0 );
 				cameraControls.maxDistance = 400;
 				cameraControls.minDistance = 10;
@@ -89,35 +96,35 @@
 
 				// reflector/mirror plane
 				var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
-				var groundMirror = new THREE.ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
+				var groundMirror = new ReflectorRTT( geometry, { clipBias: 0.003, textureWidth: WIDTH, textureHeight: HEIGHT } );
 
-				var mask = new THREE.SwitchNode( new THREE.TextureNode( decalDiffuse ), 'w' );
+				var mask = new SwitchNode( new TextureNode( decalDiffuse ), 'w' );
 
-				var mirror = new THREE.ReflectorNode( groundMirror );
+				var mirror = new ReflectorNode( groundMirror );
 
-				var normalMap = new THREE.TextureNode( decalNormal );
-				var normalXY = new THREE.SwitchNode( normalMap, 'xy' );
-				var normalXYFlip = new THREE.MathNode(
+				var normalMap = new TextureNode( decalNormal );
+				var normalXY = new SwitchNode( normalMap, 'xy' );
+				var normalXYFlip = new MathNode(
 					normalXY,
-					THREE.MathNode.INVERT
+					MathNode.INVERT
 				);
 
-				var offsetNormal = new THREE.OperatorNode(
+				var offsetNormal = new OperatorNode(
 					normalXYFlip,
-					new THREE.FloatNode( .5 ),
-					THREE.OperatorNode.SUB
+					new FloatNode( .5 ),
+					OperatorNode.SUB
 				);
 
-				mirror.offset = new THREE.OperatorNode(
+				mirror.offset = new OperatorNode(
 					offsetNormal, // normal
-					new THREE.FloatNode( 6 ), // scale
-					THREE.OperatorNode.MUL
+					new FloatNode( 6 ), // scale
+					OperatorNode.MUL
 				);
 
-				var blurMirror = new THREE.BlurNode( mirror );
+				var blurMirror = new BlurNode( mirror );
 				blurMirror.size = new THREE.Vector2( WIDTH, HEIGHT );
-				blurMirror.uv = new THREE.ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
-				blurMirror.uv.keywords[ "projCoord" ] = new THREE.OperatorNode( mirror.offset, mirror.uv, THREE.OperatorNode.ADD );
+				blurMirror.uv = new ExpressionNode( "projCoord.xyz / projCoord.q", "vec3" );
+				blurMirror.uv.keywords[ "projCoord" ] = new OperatorNode( mirror.offset, mirror.uv, OperatorNode.ADD );
 				blurMirror.radius.x = blurMirror.radius.y = 0;
 
 				gui.add( { blur: blurMirror.radius.x }, "blur", 0, 25 ).onChange( function ( v ) {
@@ -126,11 +133,11 @@
 
 				} );
 
-				groundMirrorMaterial = new THREE.PhongNodeMaterial();
+				groundMirrorMaterial = new PhongNodeMaterial();
 				groundMirrorMaterial.environment = blurMirror; // or add "mirror" variable to disable blur
 				groundMirrorMaterial.environmentAlpha = mask;
-				groundMirrorMaterial.normal = new THREE.NormalMapNode( normalMap );
-				//groundMirrorMaterial.normalScale = new THREE.FloatNode( 1 );
+				groundMirrorMaterial.normal = new NormalMapNode( normalMap );
+				//groundMirrorMaterial.normalScale = new FloatNode( 1 );
 
 				// test serialization
 				/*
@@ -142,7 +149,7 @@
 
 						var json = groundMirrorMaterial.toJSON();
 
-						groundMirrorMaterial = new THREE.NodeMaterialLoader( null, library ).parse( json );
+						groundMirrorMaterial = new NodeMaterialLoader( null, library ).parse( json );
 					*/
 				//--
 

examples/webgl_performance_nodes.html

@@ -8,9 +8,6 @@
 	</head>
 	<body>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/stats.min.js"></script>
-
 		<div id="info">
 			<a href="http://threejs.org" target="_blank">three.js</a><span class="white"> - NodeMaterial Performance</span><br />
 			<br>
@@ -37,7 +34,12 @@
 
 		<script type="module">
 
-			import './js/nodes/THREE.Nodes.js';
+			import * as THREE from '../build/three.module.js';
+
+			import Stats from './jsm/libs/stats.module.js';
+
+			import { StandardNodeMaterial } from './jsm/nodes/materials/StandardNodeMaterial.js';
+			import { MeshStandardNodeMaterial } from './jsm/nodes/materials/MeshStandardNodeMaterial.js';
 
 			var container, stats;
 
@@ -116,7 +118,7 @@
 
 				time = performance.now();
 
-				createScene( THREE.StandardNodeMaterial );
+				createScene( StandardNodeMaterial );
 
 				render();
 
@@ -128,7 +130,7 @@
 
 				time = performance.now();
 
-				createScene( THREE.MeshStandardNodeMaterial );
+				createScene( MeshStandardNodeMaterial );
 
 				render();
 

examples/webgl_postprocessing_nodes.html

@@ -11,20 +11,19 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Post-Processing
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
 
-			import './js/nodes/THREE.Nodes.js';
-			import './js/loaders/NodeMaterialLoader.js';
+			import * as THREE from '../build/three.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import * as Nodes from './jsm/nodes/Nodes.js';
 
 			var camera, scene, renderer;
 			var object, light, nodepost;
 			var gui;
 
 			var clock = new THREE.Clock();
-			var frame = new THREE.NodeFrame();
+			var frame = new Nodes.NodeFrame();
 
 			var param = { example: new URL( window.location.href ).searchParams.get( 'e' ) || 'color-adjustment' };
 
@@ -43,7 +42,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( param, 'example', {
 					'basic / color-adjustment': 'color-adjustment',
@@ -115,19 +114,19 @@
 
 						// POST
 
-						var screen = new THREE.ScreenNode();
+						var screen = new Nodes.ScreenNode();
 
-						var hue = new THREE.FloatNode();
-						var sataturation = new THREE.FloatNode( 1 );
-						var vibrance = new THREE.FloatNode();
-						var brightness = new THREE.FloatNode( 0 );
-						var contrast = new THREE.FloatNode( 1 );
+						var hue = new Nodes.FloatNode();
+						var sataturation = new Nodes.FloatNode( 1 );
+						var vibrance = new Nodes.FloatNode();
+						var brightness = new Nodes.FloatNode( 0 );
+						var contrast = new Nodes.FloatNode( 1 );
 
-						var hueNode = new THREE.ColorAdjustmentNode( screen, hue, THREE.ColorAdjustmentNode.HUE );
-						var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
-						var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
-						var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
-						var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
+						var hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
+						var satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
+						var vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
+						var brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
+						var contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
 
 						nodepost.output = contrastNode;
 
@@ -169,14 +168,14 @@
 
 						// POST
 
-						var color = new THREE.ColorNode( 0xFFFFFF );
-						var percent = new THREE.FloatNode( .5 );
+						var color = new Nodes.ColorNode( 0xFFFFFF );
+						var percent = new Nodes.FloatNode( .5 );
 
-						var fade = new THREE.MathNode(
-							new THREE.ScreenNode(),
+						var fade = new Nodes.MathNode(
+							new Nodes.ScreenNode(),
 							color,
 							percent,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
 						nodepost.output = fade;
@@ -201,16 +200,16 @@
 
 						// POST
 
-						var alpha = new THREE.FloatNode( 1 );
+						var alpha = new Nodes.FloatNode( 1 );
 
-						var screen = new THREE.ScreenNode();
-						var inverted = new THREE.MathNode( screen, THREE.MathNode.INVERT );
+						var screen = new Nodes.ScreenNode();
+						var inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
 
-						var fade = new THREE.MathNode(
+						var fade = new Nodes.MathNode(
 							screen,
 							inverted,
 							alpha,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
 						nodepost.output = fade;
@@ -229,10 +228,10 @@
 
 						// POST
 
-						var multiply = new THREE.OperatorNode(
-							new THREE.ScreenNode(),
-							new THREE.TextureNode( lensflare2 ),
-							THREE.OperatorNode.ADD
+						var multiply = new Nodes.OperatorNode(
+							new Nodes.ScreenNode(),
+							new Nodes.TextureNode( lensflare2 ),
+							Nodes.OperatorNode.ADD
 						);
 
 						nodepost.output = multiply;
@@ -240,10 +239,10 @@
 						// GUI
 
 						addGui( 'blend', {
-							'addition': THREE.OperatorNode.ADD,
-							'subtract': THREE.OperatorNode.SUB,
-							'multiply': THREE.OperatorNode.MUL,
-							'division': THREE.OperatorNode.DIV
+							'addition': Nodes.OperatorNode.ADD,
+							'subtract': Nodes.OperatorNode.SUB,
+							'multiply': Nodes.OperatorNode.MUL,
+							'division': Nodes.OperatorNode.DIV
 						}, function ( val ) {
 
 							multiply.op = val;
@@ -258,18 +257,18 @@
 
 						// PASS
 
-						var screen = new THREE.ScreenNode();
-						var sat = new THREE.FloatNode( 0 );
+						var screen = new Nodes.ScreenNode();
+						var sat = new Nodes.FloatNode( 0 );
 
-						var satrgb = new THREE.FunctionNode( [
+						var satrgb = new Nodes.FunctionNode( [
 							"vec3 satrgb( vec3 rgb, float adjustment ) {",
 							// include luminance function from LuminanceNode
 							"	vec3 intensity = vec3( luminance( rgb ) );",
 							"	return mix( intensity, rgb, adjustment );",
 							"}"
-						].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
+						].join( "\n" ), [ Nodes.LuminanceNode.Nodes.luminance ] );
 
-						var saturation = new THREE.FunctionCallNode( satrgb );
+						var saturation = new Nodes.FunctionCallNode( satrgb );
 						saturation.inputs.rgb = screen;
 						saturation.inputs.adjustment = sat;
 
@@ -289,41 +288,41 @@
 
 						// POST
 
-						var normal = new THREE.TextureNode( decalNormal );
-						var normalXY = new THREE.SwitchNode( normal, 'xy' );
-						var scale = new THREE.FloatNode( .5 );
+						var normal = new Nodes.TextureNode( decalNormal );
+						var normalXY = new Nodes.SwitchNode( normal, 'xy' );
+						var scale = new Nodes.FloatNode( .5 );
 
-						var normalXYFlip = new THREE.MathNode(
+						var normalXYFlip = new Nodes.MathNode(
 							normalXY,
-							THREE.MathNode.INVERT
+							Nodes.MathNode.INVERT
 						);
 
-						var offsetNormal = new THREE.OperatorNode(
+						var offsetNormal = new Nodes.OperatorNode(
 							normalXYFlip,
-							new THREE.FloatNode( .5 ),
-							THREE.OperatorNode.ADD
+							new Nodes.FloatNode( .5 ),
+							Nodes.OperatorNode.ADD
 						);
 
-						var scaleTexture = new THREE.OperatorNode(
-							new THREE.SwitchNode( normal, 'z' ),
+						var scaleTexture = new Nodes.OperatorNode(
+							new Nodes.SwitchNode( normal, 'z' ),
 							offsetNormal,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var scaleNormal = new THREE.MathNode(
-							new THREE.FloatNode( 1 ),
+						var scaleNormal = new Nodes.MathNode(
+							new Nodes.FloatNode( 1 ),
 							scaleTexture,
 							scale,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
-						var offsetCoord = new THREE.OperatorNode(
-							new THREE.UVNode(),
+						var offsetCoord = new Nodes.OperatorNode(
+							new Nodes.UVNode(),
 							scaleNormal,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var screen = new THREE.ScreenNode( offsetCoord );
+						var screen = new Nodes.ScreenNode( offsetCoord );
 
 						nodepost.output = screen;
 
@@ -351,18 +350,18 @@
 
 						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var screen = new THREE.ScreenNode();
+						var screen = new Nodes.ScreenNode();
 
-						var previousFrame = new THREE.RTTNode( size.width, size.height, screen );
+						var previousFrame = new Nodes.RTTNode( size.width, size.height, screen );
 
-						var motionBlur = new THREE.MathNode(
+						var motionBlur = new Nodes.MathNode(
 							previousFrame,
 							screen,
-							new THREE.FloatNode( .5 ),
-							THREE.MathNode.MIX
+							new Nodes.FloatNode( .5 ),
+							Nodes.MathNode.MIX
 						);
 
-						var currentFrame = new THREE.RTTNode( size.width, size.height, motionBlur );
+						var currentFrame = new Nodes.RTTNode( size.width, size.height, motionBlur );
 						currentFrame.saveTo = previousFrame;
 
 						nodepost.output = currentFrame;
@@ -373,35 +372,35 @@
 
 						// POST
 
-						var scale = new THREE.FloatNode( 128 );
-						var fade = new THREE.FloatNode( 1 );
-						var uv = new THREE.UVNode();
+						var scale = new Nodes.FloatNode( 128 );
+						var fade = new Nodes.FloatNode( 1 );
+						var uv = new Nodes.UVNode();
 
-						var blocks = new THREE.OperatorNode(
+						var blocks = new Nodes.OperatorNode(
 							uv,
 							scale,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var blocksSize = new THREE.MathNode(
+						var blocksSize = new Nodes.MathNode(
 							blocks,
-							THREE.MathNode.FLOOR
+							Nodes.MathNode.FLOOR
 						);
 
-						var mosaicUV = new THREE.OperatorNode(
+						var mosaicUV = new Nodes.OperatorNode(
 							blocksSize,
 							scale,
-							THREE.OperatorNode.DIV
+							Nodes.OperatorNode.DIV
 						);
 
-						var fadeScreen = new THREE.MathNode(
+						var fadeScreen = new Nodes.MathNode(
 							uv,
 							mosaicUV,
 							fade,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
-						nodepost.output = new THREE.ScreenNode( fadeScreen );
+						nodepost.output = new Nodes.ScreenNode( fadeScreen );
 
 						// GUI
 
@@ -419,7 +418,7 @@
 
 						addGui( 'mask', false, function ( val ) {
 
-							fadeScreen.c = val ? new THREE.TextureNode( lensflare2 ) : fade;
+							fadeScreen.c = val ? new Nodes.TextureNode( lensflare2 ) : fade;
 
 							nodepost.needsUpdate = true;
 
@@ -433,7 +432,7 @@
 
 						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
+						var blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );
 
 						nodepost.output = blurScreen;
@@ -466,7 +465,7 @@
 
 							var json = nodepost.toJSON();
 
-							nodepost.output = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
+							nodepost.output = new NodeMaterialLoader( null, library ).parse( json ).value;
 						*/
 
 			}
@@ -478,7 +477,7 @@
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				nodepost = new THREE.NodePostProcessing( renderer );
+				nodepost = new Nodes.NodePostProcessing( renderer );
 
 				//
 

examples/webgl_postprocessing_nodes_pass.html

@@ -11,28 +11,22 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Post-Processing
 		</div>
 
-		<script src="../build/three.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
-		<script src="js/shaders/CopyShader.js"></script>
-
-		<script src="js/postprocessing/EffectComposer.js"></script>
-		<script src="js/postprocessing/RenderPass.js"></script>
-		<script src="js/postprocessing/MaskPass.js"></script>
-		<script src="js/postprocessing/ShaderPass.js"></script>
-
 		<script type="module">
 
-			import './js/nodes/THREE.Nodes.js';
-			import { NodePass } from './js/nodes/postprocessing/NodePass.js';
-			import './js/loaders/NodeMaterialLoader.js';
+			import * as THREE from '../build/three.module.js';
+
+			import { GUI } from './jsm/libs/dat.gui.module.js';
+			import { EffectComposer } from './jsm/postprocessing/EffectComposer.js';
+			import { RenderPass } from './jsm/postprocessing/RenderPass.js';
+			import { NodePass } from './jsm/nodes/postprocessing/NodePass.js';
+			import * as Nodes from './jsm/nodes/Nodes.js';
 
 			var camera, scene, renderer, composer;
 			var object, light, nodepass;
 			var gui;
 
 			var clock = new THREE.Clock();
-			var frame = new THREE.NodeFrame();
+			var frame = new Nodes.NodeFrame();
 
 			var param = { example: 'color-adjustment' };
 
@@ -51,7 +45,7 @@
 
 				if ( gui ) gui.destroy();
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
 				gui.add( param, 'example', {
 					'basic / color-adjustment': 'color-adjustment',
@@ -120,19 +114,19 @@
 
 					case 'color-adjustment':
 
-						var screen = new THREE.ScreenNode();
+						var screen = new Nodes.ScreenNode();
 
-						var hue = new THREE.FloatNode();
-						var sataturation = new THREE.FloatNode( 1 );
-						var vibrance = new THREE.FloatNode();
-						var brightness = new THREE.FloatNode( 0 );
-						var contrast = new THREE.FloatNode( 1 );
+						var hue = new Nodes.FloatNode();
+						var sataturation = new Nodes.FloatNode( 1 );
+						var vibrance = new Nodes.FloatNode();
+						var brightness = new Nodes.FloatNode( 0 );
+						var contrast = new Nodes.FloatNode( 1 );
 
-						var hueNode = new THREE.ColorAdjustmentNode( screen, hue, THREE.ColorAdjustmentNode.HUE );
-						var satNode = new THREE.ColorAdjustmentNode( hueNode, sataturation, THREE.ColorAdjustmentNode.SATURATION );
-						var vibranceNode = new THREE.ColorAdjustmentNode( satNode, vibrance, THREE.ColorAdjustmentNode.VIBRANCE );
-						var brightnessNode = new THREE.ColorAdjustmentNode( vibranceNode, brightness, THREE.ColorAdjustmentNode.BRIGHTNESS );
-						var contrastNode = new THREE.ColorAdjustmentNode( brightnessNode, contrast, THREE.ColorAdjustmentNode.CONTRAST );
+						var hueNode = new Nodes.ColorAdjustmentNode( screen, hue, Nodes.ColorAdjustmentNode.HUE );
+						var satNode = new Nodes.ColorAdjustmentNode( hueNode, sataturation, Nodes.ColorAdjustmentNode.SATURATION );
+						var vibranceNode = new Nodes.ColorAdjustmentNode( satNode, vibrance, Nodes.ColorAdjustmentNode.VIBRANCE );
+						var brightnessNode = new Nodes.ColorAdjustmentNode( vibranceNode, brightness, Nodes.ColorAdjustmentNode.BRIGHTNESS );
+						var contrastNode = new Nodes.ColorAdjustmentNode( brightnessNode, contrast, Nodes.ColorAdjustmentNode.CONTRAST );
 
 						nodepass.input = contrastNode;
 
@@ -174,14 +168,14 @@
 
 						// PASS
 
-						var color = new THREE.ColorNode( 0xFFFFFF );
-						var percent = new THREE.FloatNode( .5 );
+						var color = new Nodes.ColorNode( 0xFFFFFF );
+						var percent = new Nodes.FloatNode( .5 );
 
-						var fade = new THREE.MathNode(
-							new THREE.ScreenNode(),
+						var fade = new Nodes.MathNode(
+							new Nodes.ScreenNode(),
 							color,
 							percent,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
 						nodepass.input = fade;
@@ -206,16 +200,16 @@
 
 						// PASS
 
-						var alpha = new THREE.FloatNode( 1 );
+						var alpha = new Nodes.FloatNode( 1 );
 
-						var screen = new THREE.ScreenNode();
-						var inverted = new THREE.MathNode( screen, THREE.MathNode.INVERT );
+						var screen = new Nodes.ScreenNode();
+						var inverted = new Nodes.MathNode( screen, Nodes.MathNode.INVERT );
 
-						var fade = new THREE.MathNode(
+						var fade = new Nodes.MathNode(
 							screen,
 							inverted,
 							alpha,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
 						nodepass.input = fade;
@@ -234,10 +228,10 @@
 
 						// PASS
 
-						var multiply = new THREE.OperatorNode(
-							new THREE.ScreenNode(),
-							new THREE.TextureNode( lensflare2 ),
-							THREE.OperatorNode.ADD
+						var multiply = new Nodes.OperatorNode(
+							new Nodes.ScreenNode(),
+							new Nodes.TextureNode( lensflare2 ),
+							Nodes.OperatorNode.ADD
 						);
 
 						nodepass.input = multiply;
@@ -245,10 +239,10 @@
 						// GUI
 
 						addGui( 'blend', {
-							'addition': THREE.OperatorNode.ADD,
-							'subtract': THREE.OperatorNode.SUB,
-							'multiply': THREE.OperatorNode.MUL,
-							'division': THREE.OperatorNode.DIV
+							'addition': Nodes.OperatorNode.ADD,
+							'subtract': Nodes.OperatorNode.SUB,
+							'multiply': Nodes.OperatorNode.MUL,
+							'division': Nodes.OperatorNode.DIV
 						}, function ( val ) {
 
 							multiply.op = val;
@@ -263,18 +257,18 @@
 
 						// PASS
 
-						var screen = new THREE.ScreenNode();
-						var sat = new THREE.FloatNode( 0 );
+						var screen = new Nodes.ScreenNode();
+						var sat = new Nodes.FloatNode( 0 );
 
-						var satrgb = new THREE.FunctionNode( [
+						var satrgb = new Nodes.FunctionNode( [
 							"vec3 satrgb( vec3 rgb, float adjustment ) {",
 							// include luminance function from LuminanceNode
 							"	vec3 intensity = vec3( luminance( rgb ) );",
 							"	return mix( intensity, rgb, adjustment );",
 							"}"
-						].join( "\n" ), [ THREE.LuminanceNode.Nodes.luminance ] );
+						].join( "\n" ), [ Nodes.LuminanceNode.Nodes.luminance ] );
 
-						var saturation = new THREE.FunctionCallNode( satrgb );
+						var saturation = new Nodes.FunctionCallNode( satrgb );
 						saturation.inputs.rgb = screen;
 						saturation.inputs.adjustment = sat;
 
@@ -294,41 +288,41 @@
 
 						// PASS
 
-						var normal = new THREE.TextureNode( decalNormal );
-						var normalXY = new THREE.SwitchNode( normal, 'xy' );
-						var scale = new THREE.FloatNode( .5 );
+						var normal = new Nodes.TextureNode( decalNormal );
+						var normalXY = new Nodes.SwitchNode( normal, 'xy' );
+						var scale = new Nodes.FloatNode( .5 );
 
-						var normalXYFlip = new THREE.MathNode(
+						var normalXYFlip = new Nodes.MathNode(
 							normalXY,
-							THREE.MathNode.INVERT
+							Nodes.MathNode.INVERT
 						);
 
-						var offsetNormal = new THREE.OperatorNode(
+						var offsetNormal = new Nodes.OperatorNode(
 							normalXYFlip,
-							new THREE.FloatNode( .5 ),
-							THREE.OperatorNode.ADD
+							new Nodes.FloatNode( .5 ),
+							Nodes.OperatorNode.ADD
 						);
 
-						var scaleTexture = new THREE.OperatorNode(
-							new THREE.SwitchNode( normal, 'z' ),
+						var scaleTexture = new Nodes.OperatorNode(
+							new Nodes.SwitchNode( normal, 'z' ),
 							offsetNormal,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var scaleNormal = new THREE.MathNode(
-							new THREE.FloatNode( 1 ),
+						var scaleNormal = new Nodes.MathNode(
+							new Nodes.FloatNode( 1 ),
 							scaleTexture,
 							scale,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
-						var offsetCoord = new THREE.OperatorNode(
-							new THREE.UVNode(),
+						var offsetCoord = new Nodes.OperatorNode(
+							new Nodes.UVNode(),
 							scaleNormal,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var screen = new THREE.ScreenNode( offsetCoord );
+						var screen = new Nodes.ScreenNode( offsetCoord );
 
 						nodepass.input = screen;
 
@@ -354,35 +348,35 @@
 
 						// PASS
 
-						var scale = new THREE.FloatNode( 128 );
-						var fade = new THREE.FloatNode( 1 );
-						var uv = new THREE.UVNode();
+						var scale = new Nodes.FloatNode( 128 );
+						var fade = new Nodes.FloatNode( 1 );
+						var uv = new Nodes.UVNode();
 
-						var blocks = new THREE.OperatorNode(
+						var blocks = new Nodes.OperatorNode(
 							uv,
 							scale,
-							THREE.OperatorNode.MUL
+							Nodes.OperatorNode.MUL
 						);
 
-						var blocksSize = new THREE.MathNode(
+						var blocksSize = new Nodes.MathNode(
 							blocks,
-							THREE.MathNode.FLOOR
+							Nodes.MathNode.FLOOR
 						);
 
-						var mosaicUV = new THREE.OperatorNode(
+						var mosaicUV = new Nodes.OperatorNode(
 							blocksSize,
 							scale,
-							THREE.OperatorNode.DIV
+							Nodes.OperatorNode.DIV
 						);
 
-						var fadeScreen = new THREE.MathNode(
+						var fadeScreen = new Nodes.MathNode(
 							uv,
 							mosaicUV,
 							fade,
-							THREE.MathNode.MIX
+							Nodes.MathNode.MIX
 						);
 
-						nodepass.input = new THREE.ScreenNode( fadeScreen );
+						nodepass.input = new Nodes.ScreenNode( fadeScreen );
 
 						// GUI
 
@@ -400,7 +394,7 @@
 
 						addGui( 'mask', false, function ( val ) {
 
-							fadeScreen.c = val ? new THREE.TextureNode( lensflare2 ) : fade;
+							fadeScreen.c = val ? new Nodes.TextureNode( lensflare2 ) : fade;
 
 							nodepass.needsUpdate = true;
 
@@ -414,7 +408,7 @@
 
 						var size = renderer.getDrawingBufferSize( new THREE.Vector2() );
 
-						var blurScreen = new THREE.BlurNode( new THREE.ScreenNode() );
+						var blurScreen = new Nodes.BlurNode( new Nodes.ScreenNode() );
 						blurScreen.size = new THREE.Vector2( size.width, size.height );
 
 						nodepass.input = blurScreen;
@@ -447,7 +441,7 @@
 
 							var json = nodepass.toJSON();
 
-							nodepass.input = new THREE.NodeMaterialLoader( null, library ).parse( json ).value;
+							nodepass.input = new Nodes.NodeMaterialLoader( null, library ).parse( json ).value;
 						*/
 
 			}
@@ -492,8 +486,8 @@
 
 				// postprocessing
 
-				composer = new THREE.EffectComposer( renderer );
-				composer.addPass( new THREE.RenderPass( scene, camera ) );
+				composer = new EffectComposer( renderer );
+				composer.addPass( new RenderPass( scene, camera ) );
 
 				nodepass = new NodePass();
 

examples/webgl_sprites_nodes.html

@@ -13,21 +13,28 @@
 			<a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - Node-Based Sprites
 		</div>
 
-		<script src="../build/three.js"></script>
-
-		<script src='js/geometries/TeapotBufferGeometry.js'></script>
-		<script src="js/controls/OrbitControls.js"></script>
-		<script src="js/libs/dat.gui.min.js"></script>
-
 		<script type="module">
 
-			import './js/nodes/THREE.Nodes.js';
-			import './js/loaders/NodeMaterialLoader.js';
+			import * as THREE from '../build/three.module.js';
+
+			import { OrbitControls } from './jsm/controls/OrbitControls.js';
+			import { NodeMaterialLoader, NodeMaterialLoaderUtils } from './jsm/loaders/NodeMaterialLoader.js';
+			import { NodeFrame } from './jsm/nodes/core/NodeFrame.js';
+			import { SpriteNodeMaterial } from './jsm/nodes/materials/SpriteNodeMaterial.js';
+			import { MathNode } from './jsm/nodes/math/MathNode.js';
+			import { OperatorNode } from './jsm/nodes/math/OperatorNode.js';
+			import { TextureNode } from './jsm/nodes/inputs/TextureNode.js';
+			import { Vector2Node } from './jsm/nodes/inputs/Vector2Node.js';
+			import { TimerNode } from './jsm/nodes/utils/TimerNode.js';
+			import { FunctionNode } from './jsm/nodes/core/FunctionNode.js';
+			import { FunctionCallNode } from './jsm/nodes/core/FunctionCallNode.js';
+			import { PositionNode } from './jsm/nodes/accessors/PositionNode.js';
+			import { UVNode } from './jsm/nodes/accessors/UVNode.js';
 
 			var container = document.getElementById( 'container' );
 
 			var renderer, scene, camera, clock = new THREE.Clock(), fov = 50;
-			var frame = new THREE.NodeFrame();
+			var frame = new NodeFrame();
 			var sprite1, sprite2, sprite3;
 			var walkingManTexture, walkingManTextureURL;
 			var library = {};
@@ -53,7 +60,7 @@
 				camera.position.z = 100;
 				camera.target = new THREE.Vector3();
 
-				controls = new THREE.OrbitControls( camera, renderer.domElement );
+				controls = new OrbitControls( camera, renderer.domElement );
 				controls.minDistance = 50;
 				controls.maxDistance = 200;
 
@@ -73,36 +80,36 @@
 
 				function createHorizontalSpriteSheetNode( hCount, speed ) {
 
-					var speed = new THREE.Vector2Node( speed, 0 ); // frame per second
-					var scale = new THREE.Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
+					var speed = new Vector2Node( speed, 0 ); // frame per second
+					var scale = new Vector2Node( 1 / hCount, 1 ); // 8 horizontal images in sprite-sheet
 
-					var uvTimer = new THREE.OperatorNode(
-						new THREE.TimerNode(),
+					var uvTimer = new OperatorNode(
+						new TimerNode(),
 						speed,
-						THREE.OperatorNode.MUL
+						OperatorNode.MUL
 					);
 
-					var uvIntegerTimer = new THREE.MathNode(
+					var uvIntegerTimer = new MathNode(
 						uvTimer,
-						THREE.MathNode.FLOOR
+						MathNode.FLOOR
 					);
 
-					var uvFrameOffset = new THREE.OperatorNode(
+					var uvFrameOffset = new OperatorNode(
 						uvIntegerTimer,
 						scale,
-						THREE.OperatorNode.MUL
+						OperatorNode.MUL
 					);
 
-					var uvScale = new THREE.OperatorNode(
-						new THREE.UVNode(),
+					var uvScale = new OperatorNode(
+						new UVNode(),
 						scale,
-						THREE.OperatorNode.MUL
+						OperatorNode.MUL
 					);
 
-					var uvFrame = new THREE.OperatorNode(
+					var uvFrame = new OperatorNode(
 						uvScale,
 						uvFrameOffset,
-						THREE.OperatorNode.ADD
+						OperatorNode.ADD
 					);
 
 					return uvFrame;
@@ -114,32 +121,32 @@
 				var spriteWidth = 20,
 					spriteHeight = 20;
 
-				scene.add( sprite1 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				scene.add( sprite1 = new THREE.Sprite( new SpriteNodeMaterial() ) );
 				sprite1.scale.x = spriteWidth;
 				sprite1.scale.y = spriteHeight;
-				sprite1.material.color = new THREE.TextureNode( walkingManTexture );
+				sprite1.material.color = new TextureNode( walkingManTexture );
 				sprite1.material.color.uv = createHorizontalSpriteSheetNode( 8, 10 );
 
-				scene.add( sprite2 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				scene.add( sprite2 = new THREE.Sprite( new SpriteNodeMaterial() ) );
 				sprite2.position.x = 30;
 				sprite2.scale.x = spriteWidth;
 				sprite2.scale.y = spriteHeight;
-				sprite2.material.color = new THREE.TextureNode( walkingManTexture );
+				sprite2.material.color = new TextureNode( walkingManTexture );
 				sprite2.material.color.uv = createHorizontalSpriteSheetNode( 8, 30 );
-				sprite2.material.color = new THREE.MathNode( sprite2.material.color, THREE.MathNode.INVERT );
+				sprite2.material.color = new MathNode( sprite2.material.color, MathNode.INVERT );
 				sprite2.material.spherical = false; // look at camera horizontally only, very used in vegetation
 				// horizontal zigzag sprite
-				sprite2.material.position = new THREE.OperatorNode(
-					new THREE.OperatorNode(
-						new THREE.MathNode( new THREE.TimerNode( 3 ), THREE.MathNode.SIN ), // 3 is speed (time scale)
-						new THREE.Vector2Node( .3, 0 ), // horizontal scale (position)
-						THREE.OperatorNode.MUL
+				sprite2.material.position = new OperatorNode(
+					new OperatorNode(
+						new MathNode( new TimerNode( 3 ), MathNode.SIN ), // 3 is speed (time scale)
+						new Vector2Node( .3, 0 ), // horizontal scale (position)
+						OperatorNode.MUL
 					),
-					new THREE.PositionNode(),
-					THREE.OperatorNode.ADD
+					new PositionNode(),
+					OperatorNode.ADD
 				);
 
-				var sineWaveFunction = new THREE.FunctionNode( [
+				var sineWaveFunction = new FunctionNode( [
 					// https://stackoverflow.com/questions/36174431/how-to-make-a-wave-warp-effect-in-shader
 					"vec2 sineWave(vec2 uv, vec2 phase) {",
 					// wave distortion
@@ -149,14 +156,14 @@
 					"}"
 				].join( "\n" ) );
 
-				scene.add( sprite3 = new THREE.Sprite( new THREE.SpriteNodeMaterial() ) );
+				scene.add( sprite3 = new THREE.Sprite( new SpriteNodeMaterial() ) );
 				sprite3.position.x = - 30;
 				sprite3.scale.x = spriteWidth;
 				sprite3.scale.y = spriteHeight;
-				sprite3.material.color = new THREE.TextureNode( walkingManTexture );
-				sprite3.material.color.uv = new THREE.FunctionCallNode( sineWaveFunction, {
+				sprite3.material.color = new TextureNode( walkingManTexture );
+				sprite3.material.color.uv = new FunctionCallNode( sineWaveFunction, {
 					"uv": createHorizontalSpriteSheetNode( 8, 10 ),
-					"phase": new THREE.TimerNode()
+					"phase": new TimerNode()
 				} );
 				sprite3.material.fog = true;
 
@@ -187,11 +194,11 @@
 
 				// replace uuid to url (facilitates the load of textures using url otherside uuid)
 
-				THREE.NodeMaterialLoaderUtils.replaceUUID( json, walkingManTexture, walkingManTextureURL );
+				NodeMaterialLoaderUtils.replaceUUID( json, walkingManTexture, walkingManTextureURL );
 
 				// deserialize
 
-				var material = new THREE.NodeMaterialLoader( null, library ).parse( json );
+				var material = new NodeMaterialLoader( null, library ).parse( json );
 
 				// replace material