Merge pull request #16 from mrdoob/dev

merge

.github/ISSUE_TEMPLATE.md

@@ -19,7 +19,7 @@ Please also include a live example if possible. You can start from these templat
 ##### Three.js version
 
 - [ ] Dev
-- [ ] r105
+- [ ] r106
 - [ ] ...
 
 ##### Browser

docs/api/en/cameras/CubeCamera.html

@@ -24,7 +24,7 @@
 		scene.add( cubeCamera );
 
 		// Create car
-		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget } );
+		var chromeMaterial = new THREE.MeshLambertMaterial( { color: 0xffffff, envMap: cubeCamera.renderTarget.texture } );
 		var car = new Mesh( carGeometry, chromeMaterial );
 		scene.add( car );
 

docs/api/en/core/BufferGeometry.html

@@ -51,43 +51,6 @@
 			[example:webgl_buffergeometry_rawshader Raw Shaders]
 		</p>
 
-
-		<h2>Accessing Attributes</h2>
-		<p>
-		WebGL stores data associated with individual vertices of a geometry in <em>attributes</em>.
-		Examples include the position of the vertex, the normal vector for the vertex, the vertex color,
-		and so on. When using [page:Geometry], the [page:WebGLRenderer renderer] takes care of wrapping
-		up this information into typed array buffers and sending this data to the shader. With
-		BufferGeometry, all of this data is stored in buffers associated with individual attributes.
-		This means that to get the position data associated with a vertex (for instance), you must call
-		[page:.getAttribute] to access the 'position' [page:BufferAttribute attribute], then access the individual
-		x, y, and z coordinates of the position.
-		</p>
-		<p>
-		The following attributes are set by various members of this class:
-		</p>
-		<h3>[page:BufferAttribute position] (itemSize: 3)</h3>
-		<p>
-		Stores the x, y, and z coordinates of each vertex in this geometry. Set by [page:.fromGeometry]().
-		</p>
-
-		<h3>[page:BufferAttribute normal] (itemSize: 3)</h3>
-		<p>
-		Stores the x, y, and z components of the vertex normal vector of each vertex in this geometry.
-		Set by [page:.fromGeometry]().
-		</p>
-
-		<h3>[page:BufferAttribute color] (itemSize: 3)</h3>
-		<p>
-		Stores the red, green, and blue channels of vertex color of each vertex in this geometry.
-		Set by [page:.fromGeometry]().
-		</p>
-
-		<p>
-		In addition to the the built-in attributes, you can set your own custom attributes using the addAttribute method. With [page:Geometry], these attributes are set and stored on the [page:Material]. In BufferGeometry, the attributes are stored with the geometry itself. Note that you still need to set the attributes information on the material as well, but the value of each attribute is stored in the BufferGeometry.
-		</p>
-
-
 		<h2>Constructor</h2>
 
 

docs/api/en/core/bufferAttributeTypes/BufferAttributeTypes.html

@@ -31,7 +31,8 @@
 
 		<h2>Constructor</h2>
 
-		All of the above are called in the same way.
+		<p>All of the above are called in the same way.</p>
+
 		<h3>TypedBufferAttribute( [param:Array array], [param:Integer itemSize], [param:Boolean normalized] )</h3>
 		<p>
 			array -- this can be a typed or untyped (normal) array. It will be converted to the Type specified.<br /><br />

docs/api/en/extras/ShapeUtils.html

@@ -22,7 +22,7 @@
 
 		<h3>[method:Number area]( contour )</h3>
 		<p>
-		contour -- 2D polygon.<br /><br />
+		contour -- 2D polygon. An array of THREE.Vector2()<br /><br />
 
 		Calculate area of a ( 2D ) contour polygon.<br /><br />
 

docs/api/en/helpers/ArrowHelper.html

@@ -68,9 +68,9 @@
 
 
 
-		<h3>[method:null setColor]([param:Number hex])</h3>
+		<h3>[method:null setColor]([param:Color color])</h3>
 		<p>
-		hex -- The hexadecimal value of the color.<br /><br />
+		color -- The desired color.<br /><br />
 
 		Sets the color of the arrowHelper.
 		</p>

docs/api/en/objects/LOD.html

@@ -43,13 +43,6 @@ for( var i = 0; i < 3; i++ ) {
 scene.add( lod );
 		</code>
 
-		<p>
-		Note that for the LOD to switch between the different detail levels, you will
-		have to call [page:.update update]( camera ) in your render loop. See the source code
-		for this example for details:
-		[example:webgl_lod WebGL / LOD]
-		</div>
-
 		<h2>Constructor</h2>
 		<h3>[name]( )</h3>
 		<p>
@@ -60,6 +53,13 @@ scene.add( lod );
 		<h2>Properties</h2>
 		<p>See the base [page:Object3D] class for common properties.</p>
 
+		<h3>[property:boolean autoUpdate]</h3>
+		<p>
+		Whether the LOD object is updated automatically by the renderer per frame or not.
+		If set to false, you have to call [page:LOD.update]() in the render loop by yourself.
+		Default is true.
+		</p>
+
 		<h3>[property:array levels]</h3>
 		<p>
 		An array of [page:object level] objects<br /><br />
@@ -108,8 +108,7 @@ scene.add( lod );
 		<h3>[method:null update]( [param:Camera camera] )</h3>
 		<p>
 			Set the visibility of each [page:levels level]'s [page:Object3D object] based on
-			distance from the [page:Camera camera]. This needs to be called in the render loop
-			for levels of detail to be updated dynamically.
+			distance from the [page:Camera camera]. 
 		</p>
 
 		<h2>Source</h2>

docs/api/en/renderers/WebGLRenderer.html

@@ -258,7 +258,7 @@
 
 		<h3>[property:Integer shadowMap.type]</h3>
 		<p>Defines shadow map type (unfiltered, percentage close filtering, percentage close filtering with bilinear filtering in shader)</p>
-		<p>Options are THREE.BasicShadowMap, THREE.PCFShadowMap (default), THREE.PCFSoftShadowMap. See [page:Renderer Renderer constants] for details.</p>
+		<p>Options are THREE.BasicShadowMap, THREE.PCFShadowMap (default) and THREE.PCFSoftShadowMap. See [page:Renderer Renderer constants] for details.</p>
 
 		<h3>[property:Boolean sortObjects]</h3>
 		<p>

docs/api/en/textures/DataTexture.html

@@ -19,7 +19,7 @@
 
 		<h3>[name]( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy )</h3>
 		<p>
-			The data argument must be an ArrayBuffer or a typed array view.
+			The data argument must be an [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
 			Further parameters correspond to the properties inherited from [page:Texture], where both magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
 		</p>
 		<p>

docs/api/zh/core/BufferGeometry.html

@@ -50,39 +50,6 @@
 			[example:webgl_buffergeometry_rawshader Raw Shaders]
 		</p>
 
-
-		<h2>访问属性值</h2>
-		<p>
-			WebGL 将与每个顶点相关的数据保存为 <em>attributes</em>. 这些属性例如，顶点位置、顶点法向量、顶点颜色等等。
-			当使用 [page:Geometry] 时，[page:WebGLRenderer renderer] 将数据包装为有类型的队列的缓存，并将数据送往着色器。有了
-			BufferGeometry 这些数据都被存储到相应类型的属性的缓存中。这就意味着，如果想要获得顶点的位置信息，你必须调用
-			[page:.getAttribute] 访问位置信息的 page:BufferAttribute attribute]，之后再访问位置矢量中每一维坐标值（x，y，z 值）。
-		</p>
-		<p>
-			通过该类提供的下属方法设置以下属性值:
-		</p>
-		<h3>[page:BufferAttribute position] (itemSize: 3)</h3>
-		<p>
-			存储当前几何体中每个顶点的坐标，包含 x，y，z 三维数据。通过 [page:.fromGeometry]() 设置。
-		</p>
-
-		<h3>[page:BufferAttribute normal] (itemSize: 3)</h3>
-		<p>
-			存储当前几何体中每个顶点的法向量，包含 x，y，z 三维数据。通过 [page:.fromGeometry]() 设置。
-		</p>
-
-		<h3>[page:BufferAttribute color] (itemSize: 3)</h3>
-		<p>
-			存储当前几何体中每个顶点的颜色值，包含 R，G，B 三通道颜色值。通过 [page:.fromGeometry]() 设置。
-		</p>
-
-		<p>
-			除了上述已有的属性，你可以通过 addAttribute 方法自定义属性。通过 [page:Geometry]，这些自定义属性被存储到
-			[page:Material] 中。在 BufferGeometry 中，属性则被存储到几何体本身。注意，你依然需要在材质中设置属性信息，
-			但是属性的值则被存储到 BufferGeometry。
-		</p>
-
-
 		<h2>构造函数</h2>
 
 

docs/api/zh/helpers/ArrowHelper.html

@@ -67,10 +67,9 @@
 		<p>请到基类 [page:Object3D] 页面查看公共方法.</p>
 
 
-
-		<h3>[method:null setColor]([param:Number hex])</h3>
+		<h3>[method:null setColor]([param:Color color])</h3>
 		<p>
-		hex -- 16进制颜色值.<br /><br />
+		color -- The desired color.<br /><br />
 
 		设置箭头辅助对象的颜色.
 		</p>

docs/api/zh/objects/LOD.html

@@ -41,12 +41,6 @@ for( var i = 0; i < 3; i++ ) {
 scene.add( lod );
 		</code>
 
-		<p>
-			请注意，要使得LOD在各不同细节层次之间进行切换，你将需要在你的渲染循环中调用[page:.update update]( camera )。
-			详情请查看这个示例中的源代码：
-		[example:webgl_lod WebGL / LOD]
-		</div>
-
 		<h2>Constructor</h2>
 		<h3>[name]( )</h3>
 		<p>
@@ -57,6 +51,13 @@ scene.add( lod );
 		<h2>属性</h2>
 		<p>请参阅其基类[page:Object3D]来查看公共属性。</p>
 
+		<h3>[property:boolean autoUpdate]</h3>
+		<p>
+		Whether the LOD object is updated automatically by the renderer per frame or not.
+		If set to false, you have to call [page:LOD.update]() in the render loop by yourself.
+		Default is true.
+		</p>
+
 		<h3>[property:array levels]</h3>
 		<p>
 			一个包含有[page:object level] objects（各层次物体）的数组。<br /><br />
@@ -104,7 +105,6 @@ scene.add( lod );
 		<h3>[method:null update]( [param:Camera camera] )</h3>
 		<p>
 			基于每个[page:levels level]中的[page:Object3D object]和[page:Camera camera]（摄像机）之间的距离，来设置其可见性。
-			为了使得多细节层次能够被自动地更新，这个方法需要在渲染循环中被调用。
 		</p>
 
 		<h2>源代码</h2>

docs/api/zh/textures/DataTexture.html

@@ -19,7 +19,7 @@
 
 		<h3>[name]( data, width, height, format, type, mapping, wrapS, wrapT, magFilter, minFilter, anisotropy )</h3>
 		<p>
-			The data argument must be an ArrayBuffer or a typed array view.
+			The data argument must be an [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
 			Further parameters correspond to the properties inherited from [page:Texture], where both magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
 		</p>
 		<p>

docs/examples/en/loaders/GLTFLoader.html

@@ -58,7 +58,7 @@
 		// Optional: Provide a DRACOLoader instance to decode compressed mesh data
 		THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
 		loader.setDRACOLoader( new THREE.DRACOLoader() );
-			
+
 		// Optional: Pre-fetch Draco WASM/JS module, to save time while parsing.
 		THREE.DRACOLoader.getDecoderModule();
 
@@ -207,6 +207,11 @@
 		Refer to this [link:https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco#readme readme] for the details of Draco and its decoder.
 		</p>
 
+		<h3>[method:null setDDSLoader]( [param:DDSLoader ddsLoader] )</h3>
+		<p>
+		[page:DDSLoader ddsLoader] — Instance of THREE.DDSLoader, to be used for loading compressed textures with the MSFT_TEXTURE_DDS extension.
+		</p>
+
 		<h3>[method:null parse]( [param:ArrayBuffer data], [param:String path], [param:Function onLoad], [param:Function onError] )</h3>
 		<p>
 		[page:ArrayBuffer data] — glTF asset to parse, as an ArrayBuffer or <em>JSON</em> string.<br />

docs/examples/zh/loaders/GLTFLoader.html

@@ -58,7 +58,7 @@
 		// Optional: Provide a DRACOLoader instance to decode compressed mesh data
 		THREE.DRACOLoader.setDecoderPath( '/examples/js/libs/draco' );
 		loader.setDRACOLoader( new THREE.DRACOLoader() );
-			
+
 		// Optional: Pre-fetch Draco WASM/JS module, to save time while parsing.
 		THREE.DRACOLoader.getDecoderModule();
 
@@ -207,6 +207,11 @@
 		Refer to this [link:https://github.com/mrdoob/three.js/tree/dev/examples/js/libs/draco#readme readme] for the details of Draco and its decoder.
 		</p>
 
+		<h3>[method:null setDDSLoader]( [param:DDSLoader ddsLoader] )</h3>
+		<p>
+		[page:DDSLoader ddsLoader] — Instance of THREE.DDSLoader, to be used for loading compressed textures with the MSFT_TEXTURE_DDS extension.
+		</p>
+
 		<h3>[method:null parse]( [param:ArrayBuffer data], [param:String path], [param:Function onLoad], [param:Function onError] )</h3>
 		<p>
 		[page:ArrayBuffer data] — glTF asset to parse, as an ArrayBuffer or <em>JSON</em> string.<br />

docs/manual/en/introduction/How-to-create-VR-content.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>[name]</h1>
-	<br />
 
 	<p>
 		This guide provides a brief overview of the basic components of a web-based VR application
@@ -49,7 +48,7 @@ renderer.vr.enabled = true;
 
 	<p>
 		Finally, you have to adjust your animation loop since we can't use our well known
-		*window.requestAnimationFrame()* function. For VR projects we use [page:WebGLRenderer.setAnimationLoop setAnimationLoop]. 
+		*window.requestAnimationFrame()* function. For VR projects we use [page:WebGLRenderer.setAnimationLoop setAnimationLoop].
 		The minimal code looks like this:
 	</p>
 

docs/manual/en/introduction/How-to-dispose-of-objects.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>[name]</h1>
-	<br />
 
 	<p>
 		One important aspect in order to improve performance and avoid memory leaks in your application is the disposal of unused library entities.

docs/manual/en/introduction/How-to-use-WebGL2.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>[name]</h1>
-	<br />
 
 	<p>
 		Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a

docs/manual/en/introduction/Import-via-modules.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</h1><br />
+		<h1>[name]</h1>
 
 		<p>
 			While importing three.js via script tags is a great way to get up and running fast, it has a few drawbacks for longer lived projects, for example:
@@ -66,340 +66,16 @@
 		<p>
 			The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
 			examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
-			for their project. However, not all files are modules which makes their usage in certain cases inconvenient. In order to address this issue,
-			we are working to provide all the examples as modules in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory.
-			If you install three.js via npm, you can import them like so:
+			for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
+			module version for almost all example files. If you install three.js via npm, you can import them like so:
 		</p>
 		<code>
 		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
 		</code>
-		<p>
-			The following examples files are already available as modules:
-			<ul>
-				<li>animation
-					<ul>
-						<li>AnimationClipCreator</li>
-						<li>CCDIKSolver</li>
-						<li>MMDAnimationHelper</li>
-						<li>MMDPhysics</li>
-						<li>TimelinerController</li>
-					</ul>
-				</li>
-				<li>cameras
-					<ul>
-						<li>CinematicCamera</li>
-					</ul>
-				</li>
-				<li>controls
-					<ul>
-						<li>DeviceOrientationControls</li>
-						<li>DragControls</li>
-						<li>EditorControls</li>
-						<li>FirstPersonControls</li>
-						<li>FlyControls</li>
-						<li>MapControls</li>
-						<li>OrbitControls</li>
-						<li>OrthographicTrackballControls</li>
-						<li>PointerLockControls</li>
-						<li>TrackballControls</li>
-						<li>TransformControls</li>
-					</ul>
-				</li>
-				<li>curves
-					<ul>
-						<li>CurveExtras</li>
-						<li>NURBSCurve</li>
-						<li>NURBSSurface</li>
-						<li>NURBSUtils</li>
-					</ul>
-				</li>
-				<li>effects
-					<ul>
-						<li>AnaglyphEffect</li>
-						<li>AsciiEffect</li>
-						<li>OutlineEffect</li>
-						<li>ParallaxBarrierEffect</li>
-						<li>PeppersGhostEffect</li>
-						<li>StereoEffect</li>
-					</ul>
-				</li>
-				<li>exporters
-					<ul>
-						<li>ColladaExporter</li>
-						<li>DRACOExporter</li>
-						<li>GLTFExporter</li>
-						<li>MMDExporter</li>
-						<li>OBJExporter</li>
-						<li>PLYExporter</li>
-						<li>STLExporter</li>
-						<li>TypedGeometryExporter</li>
-					</ul>
-				</li>
-				<li>geometries
-					<ul>
-						<li>BoxLineGeometry</li>
-						<li>ConvexGeometry</li>
-						<li>DecalGeometry</li>
-						<li>ParametricGeometries</li>
-						<li>TeapotBufferGeometry</li>
-					</ul>
-				</li>
-				<li>interactive
-					<ul>
-						<li>SelectionBox</li>
-						<li>SelectionHelper</li>
-					</ul>
-				</li>
-				<li>lights
-					<ul>
-						<li>LightProbeGenerator</li>
-						<li>RectAreaLightUniformsLib</li>
-					</ul>
-				</li>
-				<li>lines
-					<ul>
-						<li>Line2</li>
-						<li>LineGeometry</li>
-						<li>LineMaterial</li>
-						<li>LineSegments2</li>
-						<li>LineSegmentsGeometry</li>
-						<li>Wireframe</li>
-						<li>WireframeGeometry2</li>
-					</ul>
-				</li>
-				<li>loaders
-					<ul>
-						<li>ctm
-							<ul>
-								<li>CTMLoader</li>
-							</ul>
-						</li>
-						<li>deprecated
-							<ul>
-								<li>LegacyGLTFLoader</li>
-								<li>LegacyJSONLoader</li>
-							</ul>
-						</li>
-						<li>3MFLoader</li>
-						<li>AMFLoader</li>
-						<li>AWDLoader</li>
-						<li>AssimpJSONLoader</li>
-						<li>AssimpLoader</li>
-						<li>BabylonLoader</li>
-						<li>BVHLoader</li>
-						<li>ColladaLoader</li>
-						<li>DDSLoader</li>
-						<li>DRACOLoader</li>
-						<li>EXRLoader</li>
-						<li>FBXLoader</li>
-						<li>GCodeLoader</li>
-						<li>GLTFLoader</li>
-						<li>HDRCubeTextureLoader</li>
-						<li>KMZLoader</li>
-						<li>KTXLoader</li>
-						<li>LWOLoader</li>
-						<li>MD2Loader</li>
-						<li>MMDLoader</li>
-						<li>MTLLoader</li>
-						<li>NRRDLoader</li>
-						<li>OBJLoader</li>
-						<li>PCDLoader</li>
-						<li>PDBLoader</li>
-						<li>PlayCanvasLoader</li>
-						<li>PLYLoader</li>
-						<li>PRWMLoader</li>
-						<li>PVRLoader</li>
-						<li>RGBELoader</li>
-						<li>STLLoader</li>
-						<li>SVGLoader</li>
-						<li>TDSLoader</li>
-						<li>TGALoader</li>
-						<li>TTFLoader</li>
-						<li>VRMLLoader</li>
-						<li>VRMLoader</li>
-						<li>VTKLoader</li>
-						<li>XLoader</li>
-					</ul>
-				</li>
-				<li>math
-					<ul>
-						<li>ColorConverter</li>
-						<li>ConvexHull</li>
-						<li>ImprovedNoise</li>
-						<li>Lut</li>
-						<li>SimplexNoise</li>
-					</ul>
-				</li>
-				<li>misc
-					<ul>
-						<li>CarControls</li>
-						<li>ConvexObjectBreaker</li>
-						<li>GPUComputationRenderer</li>
-						<li>Gyroscope</li>
-						<li>MD2Character</li>
-						<li>MD2CharacterComplex</li>
-						<li>MorphAnimMesh</li>
-						<li>MorphBlendMesh</li>
-						<li>Ocean</li>
-						<li>RollerCoaster</li>
-						<li>Volume</li>
-						<li>VolumeSlice</li>
-					</ul>
-				</li>
-				<li>modifiers
-					<ul>
-						<li>ExplodeModifier</li>
-						<li>SimplifyModifier</li>
-						<li>SubdivisionModifier</li>
-						<li>TessellateModifier</li>
-					</ul>
-				</li>
-				<li>objects
-					<ul>
-						<li>Fire</li>
-						<li>Lensflare</li>
-						<li>Reflector</li>
-						<li>Refractor</li>
-						<li>ReflectorRTT</li>
-						<li>ShadowMesh</li>
-						<li>Sky</li>
-						<li>Water</li>
-						<li>Water2</li>
-					</ul>
-				</li>
-				<li>pmrem
-					<ul>
-						<li>PMREMCubeUVPacker</li>
-						<li>PMREMGenerator</li>
-					</ul>
-				</li>
-				<li>postprocessing
-					<ul>
-						<li>AdaptiveToneMappingPass</li>
-						<li>AfterimagePass</li>
-						<li>BloomPass</li>
-						<li>BokehPass</li>
-						<li>ClearPass</li>
-						<li>CubeTexturePass</li>
-						<li>DotScreenPass</li>
-						<li>EffectComposer</li>
-						<li>FilmPass</li>
-						<li>GlitchPass</li>
-						<li>HalftonePass</li>
-						<li>MaskPass</li>
-						<li>OutlinePass</li>
-						<li>RenderPass</li>
-						<li>SAOPass</li>
-						<li>SavePass</li>
-						<li>ShaderPass</li>
-						<li>SMAAPass</li>
-						<li>SSAARenderPass</li>
-						<li>SSAOPass</li>
-						<li>TAARenderPass</li>
-						<li>TexturePass</li>
-						<li>UnrealBloomPass</li>
-					</ul>
-				</li>
-				<li>renderers
-					<ul>
-						<li>CSS2DRenderer</li>
-						<li>CSS3DRenderer</li>
-						<li>Projector</li>
-						<li>SoftwareRenderer</li>
-						<li>SVGRenderer</li>
-						<li>RaytracingRenderer</li>
-						<li>WebGLDeferredRenderer</li>
-					</ul>
-				</li>
-				<li>shaders
-					<ul>
-						<li>AfterimageShader</li>
-						<li>BasicShader</li>
-						<li>BleachBypassShader</li>
-						<li>BlendShader</li>
-						<li>BokehShader</li>
-						<li>BokehShader2</li>
-						<li>BrightnessContrastShader</li>
-						<li>ColorCorrectionShader</li>
-						<li>ColorifyShader</li>
-						<li>ConvolutionShader</li>
-						<li>CopyShader</li>
-						<li>DepthLimitedBlurShader</li>
-						<li>DigitalGlitch</li>
-						<li>DOFMipMapShader</li>
-						<li>DotScreenShader</li>
-						<li>FilmShader</li>
-						<li>FocusShader</li>
-						<li>FreiChenShader</li>
-						<li>FresnelShader</li>
-						<li>FXAAShader</li>
-						<li>GammaCorrectionShader</li>
-						<li>GodRaysShader</li>
-						<li>HalftoneShader</li>
-						<li>HorizontalBlurShader</li>
-						<li>HorizontalTiltShiftShader</li>
-						<li>HueSaturationShader</li>
-						<li>KaleidoShader</li>
-						<li>LuminosityHighPassShader</li>
-						<li>LuminosityShader</li>
-						<li>MirrorShader</li>
-						<li>NormalMapShader</li>
-						<li>OceanShaders</li>
-						<li>ParallaxShader</li>
-						<li>PixelShader</li>
-						<li>RGBShiftShader</li>
-						<li>SAOShader</li>
-						<li>SepiaShader</li>
-						<li>SkinShader</li>
-						<li>SMAAShader</li>
-						<li>SobelOperatorShader</li>
-						<li>SSAOShader</li>
-						<li>TechnicolorShader</li>
-						<li>TerrainShader</li>
-						<li>ToneMapShader</li>
-						<li>ToonShader</li>
-						<li>TranslucentShader</li>
-						<li>TriangleBlurShader</li>
-						<li>UnpackDepthRGBAShader</li>
-						<li>VerticalBlurShader</li>
-						<li>VerticalTiltShiftShader</li>
-						<li>VignetteShader</li>
-						<li>VolumeShader</li>
-						<li>WaterRefractionShader</li>
-					</ul>
-				</li>
-				<li>utils
-					<ul>
-						<li>BufferGeometryUtils</li>
-						<li>GeometryUtils</li>
-						<li>MathUtils</li>
-						<li>SceneUtils</li>
-						<li>ShadowMapViewer</li>
-						<li>SkeletonUtils</li>
-						<li>TypedArrayUtils</li>
-						<li>UVsDebug</li>
-					</ul>
-				</li>
-				<li>vr
-					<ul>
-						<li>deprecated
-							<ul>
-								<li>DaydreamController</li>
-								<li>GearVRController</li>
-							</ul>
-						</li>
-						<li>PaintViveController</li>
-						<li>ViveController</li>
-					</ul>
-				</li>
-			</ul>
-		</p>
 		<p>
 			Note: When using code from the examples directory, it's important that all files match the version of
 			your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
-			with three.js R103. You can easily keep your files in sync by using the modules from the JSM directory. If the file
-			is not available as a module, you can still use third-party npm packages or convert the file to a module by yourself.
-			In both cases, ensure the code is compatible with your three.js main file.
+			with three.js R103.
 		</p>
 	</body>
 </html>

docs/manual/en/introduction/Loading-3D-models.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>[name]</h1>
-	<br />
 
 	<p>
 		3D models are available in hundreds of file formats, each with different

docs/manual/en/introduction/Migration-guide.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</a></h1>
+		<h1>[name]</h1>
 
 		<p class="desc">
 			The migration guide is maintained on the [link:https://github.com/mrdoob/three.js/wiki wiki].

docs/manual/en/introduction/Useful-links.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</h1><br />
+		<h1>[name]</h1>
 
 		<p class="desc">
 			The following is a collection of links that you might find useful when learning three.js.<br />

docs/manual/en/introduction/WebGL-compatibility-check.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>[name]</h1><br />
+		<h1>[name]</h1>
 		<p>
 			Even though this is becoming less and less of a problem, some devices or browsers may still not support WebGL.
 			The following method allows you to check if it is supported and display a message to the user if it is not.

docs/manual/zh/introduction/Creating-a-scene.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>创建一个场景（[name]）</h1><br />
+		<h1>创建一个场景（[name]）</h1>
 
 		<p>这一部分将对three.js来做一个简要的介绍；我们将开始搭建一个场景，其中包含一个正在旋转的立方体。页面下方有一个已经完成的例子，当你遇到麻烦，或者需要帮助的时候，可以看一看。</p>
 

docs/manual/zh/introduction/How-to-create-VR-content.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>如何创建VR内容（[name]）</h1>
-	<br />
 
 	<p>
 		本指南简要介绍了使用three.js来制作的基于Web的VR应用程序的基本组件。
@@ -48,7 +47,7 @@ renderer.vr.enabled = true;
 	<p>
 		最后，你需要调整你的动画循环，因为在这里我们不能使用我们所熟知的
 		*window.requestAnimationFrame()*函数来更新场景。对于VR项目来说，我们使用的是[page:WebGLRenderer.setAnimationLoop setAnimationLoop]。
-		
+
 		简短的示例代码如下：
 	</p>
 
@@ -81,4 +80,4 @@ renderer.setAnimationLoop( function () {
 
 </body>
 
-</html>
+</html>

docs/manual/zh/introduction/How-to-dispose-of-objects.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>如何废置对象（[name]）</h1>
-	<br />
 
 	<p>
 		为了提高性能，并避免应用程序中的内存泄露，一个重要的方面是废置未使用的类库实体。

docs/manual/zh/introduction/How-to-use-WebGL2.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>如何使用WebGL 2（[name]）</h1>
-	<br />
 
 	<p>
 		从R95版本起，three.js便开始支持使用WebGL 2环境来进行渲染。默认情况下，当创建一个*WebGLRenderer*实例时，

docs/manual/zh/introduction/Import-via-modules.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>通过模块来引入（[name]）</h1><br />
+		<h1>通过模块来引入（[name]）</h1>
 
 		<p>
 			虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式，但这种方式对于一些具有较长生命周期的项目来说是有一些缺点的。比如说：

docs/manual/zh/introduction/Loading-3D-models.html

@@ -11,7 +11,6 @@
 
 <body>
 	<h1>载入3D模型（[name]）</h1>
-	<br />
 
 	<p>
 	目前，3D模型的格式有成千上万种可供选择，但每一种格式都具有不同的目的、用途以及复杂性。

docs/manual/zh/introduction/Useful-links.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>一些有用的链接（[name]）</h1><br />
+		<h1>一些有用的链接（[name]）</h1>
 
 		<p class="desc">
 			下面是一些你在学习three.js过程中或许对你有很大帮助的链接。<br />

docs/manual/zh/introduction/WebGL-compatibility-check.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	<body>
-		<h1>WebGL兼容性检查（[name]）</h1><br />
+		<h1>WebGL兼容性检查（[name]）</h1>
 		<p>
             虽然这个问题现在已经变得越来不明显，但不可否定的是，某些设备以及浏览器直到现在仍然不支持WebGL。<br>以下的方法可以帮助你检测当前用户所使用的环境是否支持WebGL，如果不支持，将会向用户提示一条信息。
 		</p>

docs/page.css

@@ -2,18 +2,14 @@
 	--color-blue: #049EF4;
 	--text-color: #444;
 
-	--font-size: 14px;
-	--line-height: 24px;
-	--font-size-sanserif: 1.14285714286rem;
-	--line-height-sanserif: 1.71428571rem;
+	--font-size: 16px;
+	--line-height: 26px;
 
 	--border-style: 1px solid #E8E8E8;
-	--header-height: 48px;
 	--panel-width: 300px;
-	--panel-padding: 1.143rem;
-	--page-padding: 1.75rem;
+	--page-padding: 24px;
 	--max-width: 760px;
-	--icon-size: 1.428rem;
+	--icon-size: 20px;
 }
 
 @font-face {
@@ -60,28 +56,29 @@ a {
 }
 
 h1 {
-	font-size: 2.8rem;
-	line-height: 3.4rem;
+	font-size: 40px;
+	line-height: 48px;
 	font-weight: normal;
-	margin-top: 1rem;
-	margin-bottom: -0.2rem;
 	margin-left: -2px;
+	margin-top: 16px;
+	margin-bottom: -8px;
 }
 
 h2 {
-	font-size: 2rem;
-	line-height: 2.6rem;
+	font-size: 28px;
+	line-height: 36px;
 	font-weight: normal;
-	margin-top: 2rem;
-	margin-bottom: -0.4rem;
+	margin-left: -1px;
+	margin-top: 28px;
+	margin-bottom: -8px;
 }
 
 h3 {
-	font-size: 1.42857143rem;
-	line-height: 2.14285714rem;
+	font-size: 20px;
+	line-height: 28px;
 	font-weight: normal;
-	margin-top: 1.8rem;
-	margin-bottom: -0.4rem;
+	margin-top: 24px;
+	margin-bottom: -8px;
 }
 
 p,
@@ -89,14 +86,12 @@ div,
 table,
 ol,
 ul {
-	font-size: var(--font-size-sanserif);
-	line-height: var(--line-height-sanserif);
-	margin-top: .8rem;
-	margin-bottom: .8rem;
+	margin-top: 16px;
+	margin-bottom: 16px;
 }
 
 p {
-	padding-right: 1rem;
+	padding-right: 16px;
 }
 
 ul, ol {
@@ -105,22 +100,24 @@ ul, ol {
 }
 ul li,
 ol li {
-	padding-left: 0.25rem;
-	margin-bottom: 0.25rem;
+	padding-left: 4px;
+	margin-bottom: 4px;
 }
 
 li ul,
 li ol {
-	margin-top: 0.25rem;
+	margin-top: 4px;
 }
 
 code {
-	margin: 1.2rem calc(-1 * var(--page-padding));
+	font-size: calc(var(--font-size) - 1px);
+	line-height: calc(var(--line-height) - 1px);
+	margin: 16px calc(-1 * var(--page-padding));
 }
 
 ol code,
 ul code {
-	margin: 1.2rem 0;
+	margin: 16px 0;
 }
 
 code.inline {
@@ -145,7 +142,7 @@ table th,
 table td {
 	text-align: left;
 	vertical-align: top;
-	padding: .6rem .4rem;
+	padding: 8px 6px;
 	border-bottom: var(--border-style);
 }
 
@@ -159,7 +156,7 @@ table td:first-child {
 
 code:not(.inline) {
 	display: block;
-	padding: 1.25rem var(--page-padding);
+	padding: calc(var(--page-padding) - 6px) var(--page-padding);
 	white-space: pre-wrap;
 	overflow: auto;
 	box-sizing: border-box;
@@ -185,11 +182,11 @@ strong {
 /* TODO: Duplicate styles in main.css. Needed here cause button is inside the iframe */
 #button {
 	position: fixed;
-	bottom: 1rem;
-	right: 1rem;
+	bottom: 16px;
+	right: 16px;
 
-	padding: 0.75rem;
-	border-radius: 2rem;
+	padding: 12px;
+	border-radius: 50%;
 	margin-bottom: 0px;
 
 	background-color: #FFF;
@@ -204,7 +201,7 @@ strong {
 	}
 	#button img {
 		display: block;
-		width: calc(1.125 * var(--icon-size));
+		width: var(--icon-size);
 	}
 
 a.permalink {
@@ -228,8 +225,22 @@ a.param:hover {
 		--panel-width: 360px;
 		--font-size: 18px;
 		--line-height: 28px;
-		--header-height: 56px;
-		--max-width: 1160px;
+		--max-width: 880px;
+		--page-padding: 28px;
+		--icon-size: 24px;
+	}
+	h1 {
+		font-size: 42px;
+		line-height: 50px;
+	}
+	h2 {
+		font-size: 32px;
+		line-height: 40px;
+	}
+
+	h3 {
+		font-size: 24px;
+		line-height: 32px;
 	}
 }
 
@@ -237,23 +248,28 @@ a.param:hover {
 
 @media all and ( max-width: 640px ) {
 	:root {
-		--page-padding: var(--panel-padding);
+		--page-padding: 16px;
+		--icon-size: 24px;
 	}
-
 	body {
 		padding: var(--page-padding);
 	}
 
 	h1 {
-		font-size: 2rem;
-		line-height: 2.6rem;
-		padding-right: 2rem;
+		font-size: 28px;
+		line-height: 36px;
+		padding-right: 20px;
 		margin-top: 0;
 	}
 
 	h2 {
-		font-size: 1.6rem;
-		line-height: 2.2rem;
-		margin-top: 1.6rem;
+		font-size: 24px;
+		line-height: 32px;
+		margin-top: 24px;
+	}
+
+	h3 {
+		font-size: 20px;
+		line-height: 28px;
 	}
 }

docs/scenes/bones-browser.html

@@ -6,7 +6,11 @@
 		<link rel="shortcut icon" href="../../files/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="../../files/main.css">
 		<style>
-			canvas { width: 100%; height: 100% }
+			canvas {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
 
 			#newWindow {
 				display: block;
@@ -21,11 +25,27 @@
 
 		<a id='newWindow' href='./bones-browser.html' target='_blank'>Open in New Window</a>
 
-		<script src="../../build/three.min.js"></script>
-		<script src='../../examples/js/libs/dat.gui.min.js'></script>
-		<script src="../../examples/js/controls/OrbitControls.js"></script>
-
-		<script>
+		<script type="module">
+			import {
+				Bone,
+				Color,
+				CylinderBufferGeometry,
+				DoubleSide,
+				Float32BufferAttribute,
+				MeshPhongMaterial,
+				PerspectiveCamera,
+				PointLight,
+				Scene,
+				SkinnedMesh,
+				Skeleton,
+				SkeletonHelper,
+				Vector3,
+				Uint16BufferAttribute,
+				WebGLRenderer
+			} from "../../build/three.module.js";
+
+			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
 
 			var gui, scene, camera, renderer, orbit, lights, mesh, bones, skeletonHelper;
 
@@ -35,27 +55,27 @@
 
 			function initScene() {
 
-				gui = new dat.GUI();
+				gui = new GUI();
 
-				scene = new THREE.Scene();
-				scene.background = new THREE.Color( 0x444444 );
+				scene = new Scene();
+				scene.background = new Color( 0x444444 );
 
-				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
+				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.z = 30;
 				camera.position.y = 30;
 
-				renderer = new THREE.WebGLRenderer( { antialias: true } );
+				renderer = new WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
 
-				orbit = new THREE.OrbitControls( camera, renderer.domElement );
+				orbit = new OrbitControls( camera, renderer.domElement );
 				orbit.enableZoom = false;
 
 				lights = [];
-				lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-				lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+				lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
+				lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
+				lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
 
 				lights[ 0 ].position.set( 0, 200, 0 );
 				lights[ 1 ].position.set( 100, 200, 100 );
@@ -81,7 +101,7 @@
 
 			function createGeometry( sizing ) {
 
-				var geometry = new THREE.CylinderBufferGeometry(
+				var geometry = new CylinderBufferGeometry(
 					5, // radiusTop
 					5, // radiusBottom
 					sizing.height, // height
@@ -92,7 +112,7 @@
 
 				var position = geometry.attributes.position;
 
-				var vertex = new THREE.Vector3();
+				var vertex = new Vector3();
 
 				var skinIndices = [];
 				var skinWeights = [];
@@ -111,8 +131,8 @@
 
 				}
 
-				geometry.addAttribute( 'skinIndex', new THREE.Uint16BufferAttribute( skinIndices, 4 ) );
-				geometry.addAttribute( 'skinWeight', new THREE.Float32BufferAttribute( skinWeights, 4 ) );
+				geometry.addAttribute( 'skinIndex', new Uint16BufferAttribute( skinIndices, 4 ) );
+				geometry.addAttribute( 'skinWeight', new Float32BufferAttribute( skinWeights, 4 ) );
 
 				return geometry;
 
@@ -122,13 +142,13 @@
 
 				bones = [];
 
-				var prevBone = new THREE.Bone();
+				var prevBone = new Bone();
 				bones.push( prevBone );
 				prevBone.position.y = - sizing.halfHeight;
 
 				for ( var i = 0; i < sizing.segmentCount; i ++ ) {
 
-					var bone = new THREE.Bone();
+					var bone = new Bone();
 					bone.position.y = sizing.segmentHeight;
 					bones.push( bone );
 					prevBone.add( bone );
@@ -142,22 +162,22 @@
 
 			function createMesh( geometry, bones ) {
 
-				var material = new THREE.MeshPhongMaterial( {
+				var material = new MeshPhongMaterial( {
 					skinning: true,
 					color: 0x156289,
 					emissive: 0x072534,
-					side: THREE.DoubleSide,
+					side: DoubleSide,
 					flatShading: true
 				} );
 
-				var mesh = new THREE.SkinnedMesh( geometry,	material );
-				var skeleton = new THREE.Skeleton( bones );
+				var mesh = new SkinnedMesh( geometry,	material );
+				var skeleton = new Skeleton( bones );
 
 				mesh.add( bones[ 0 ] );
 
 				mesh.bind( skeleton );
 
-				skeletonHelper = new THREE.SkeletonHelper( mesh );
+				skeletonHelper = new SkeletonHelper( mesh );
 				skeletonHelper.material.linewidth = 2;
 				scene.add( skeletonHelper );
 

docs/scenes/js/geometry.js

@@ -1,1384 +0,0 @@
-/**
- * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
- */
-
-var twoPi = Math.PI * 2;
-
-function updateGroupGeometry( mesh, geometry ) {
-
-	if ( geometry.isGeometry ) {
-
-		geometry = new THREE.BufferGeometry().fromGeometry( geometry );
-
-		console.warn( 'THREE.GeometryBrowser: Converted Geometry to BufferGeometry.' );
-
-	}
-
-	mesh.children[ 0 ].geometry.dispose();
-	mesh.children[ 1 ].geometry.dispose();
-
-	mesh.children[ 0 ].geometry = new THREE.WireframeGeometry( geometry );
-	mesh.children[ 1 ].geometry = geometry;
-
-	// these do not update nicely together if shared
-
-}
-
-function CustomSinCurve( scale ) {
-
-	THREE.Curve.call( this );
-
-	this.scale = ( scale === undefined ) ? 1 : scale;
-
-}
-
-CustomSinCurve.prototype = Object.create( THREE.Curve.prototype );
-CustomSinCurve.prototype.constructor = CustomSinCurve;
-
-CustomSinCurve.prototype.getPoint = function ( t ) {
-
-	var tx = t * 3 - 1.5;
-	var ty = Math.sin( 2 * Math.PI * t );
-	var tz = 0;
-
-	return new THREE.Vector3( tx, ty, tz ).multiplyScalar( this.scale );
-
-};
-
-// heart shape
-
-var x = 0, y = 0;
-
-var heartShape = new THREE.Shape();
-
-heartShape.moveTo( x + 5, y + 5 );
-heartShape.bezierCurveTo( x + 5, y + 5, x + 4, y, x, y );
-heartShape.bezierCurveTo( x - 6, y, x - 6, y + 7, x - 6, y + 7 );
-heartShape.bezierCurveTo( x - 6, y + 11, x - 3, y + 15.4, x + 5, y + 19 );
-heartShape.bezierCurveTo( x + 12, y + 15.4, x + 16, y + 11, x + 16, y + 7 );
-heartShape.bezierCurveTo( x + 16, y + 7, x + 16, y, x + 10, y );
-heartShape.bezierCurveTo( x + 7, y, x + 5, y + 5, x + 5, y + 5 );
-
-var guis = {
-
-	BoxBufferGeometry: function ( mesh ) {
-
-		var data = {
-			width: 15,
-			height: 15,
-			depth: 15,
-			widthSegments: 1,
-			heightSegments: 1,
-			depthSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.BoxBufferGeometry(
-					data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.BoxBufferGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	BoxGeometry: function ( mesh ) {
-
-		var data = {
-			width: 15,
-			height: 15,
-			depth: 15,
-			widthSegments: 1,
-			heightSegments: 1,
-			depthSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.BoxGeometry(
-					data.width, data.height, data.depth, data.widthSegments, data.heightSegments, data.depthSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.BoxGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depthSegments', 1, 10 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	CylinderBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radiusTop: 5,
-			radiusBottom: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CylinderBufferGeometry(
-					data.radiusTop,
-					data.radiusBottom,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CylinderBufferGeometry' );
-
-		folder.add( data, 'radiusTop', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'radiusBottom', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	CylinderGeometry: function ( mesh ) {
-
-		var data = {
-			radiusTop: 5,
-			radiusBottom: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CylinderGeometry(
-					data.radiusTop,
-					data.radiusBottom,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CylinderGeometry' );
-
-		folder.add( data, 'radiusTop', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'radiusBottom', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	ConeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ConeBufferGeometry(
-					data.radius,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ConeBufferGeometry' );
-
-		folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-	ConeGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 5,
-			height: 10,
-			radialSegments: 8,
-			heightSegments: 1,
-			openEnded: false,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ConeGeometry(
-					data.radius,
-					data.height,
-					data.radialSegments,
-					data.heightSegments,
-					data.openEnded,
-					data.thetaStart,
-					data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ConeGeometry' );
-
-		folder.add( data, 'radius', 0, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 50 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 64 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'openEnded' ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-
-		generateGeometry();
-
-	},
-
-
-	CircleBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			segments: 32,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CircleBufferGeometry(
-					data.radius, data.segments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CircleBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	CircleGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			segments: 32,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.CircleGeometry(
-					data.radius, data.segments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.CircleGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'segments', 0, 128 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	DodecahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.DodecahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.DodecahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	DodecahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.DodecahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.DodecahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	IcosahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.IcosahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.IcosahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	IcosahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.IcosahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.IcosahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	LatheBufferGeometry: function ( mesh ) {
-
-		var points = [];
-
-		for ( var i = 0; i < 10; i ++ ) {
-
-			points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
-
-		}
-
-		var data = {
-			segments: 12,
-			phiStart: 0,
-			phiLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.LatheBufferGeometry(
-				points, data.segments, data.phiStart, data.phiLength
-			);
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.LatheBufferGeometry' );
-
-		folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	LatheGeometry: function ( mesh ) {
-
-		var points = [];
-
-		for ( var i = 0; i < 10; i ++ ) {
-
-			points.push( new THREE.Vector2( Math.sin( i * 0.2 ) * 10 + 5, ( i - 5 ) * 2 ) );
-
-		}
-
-		var data = {
-			segments: 12,
-			phiStart: 0,
-			phiLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.LatheGeometry(
-				points, data.segments, data.phiStart, data.phiLength
-			);
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.LatheGeometry' );
-
-		folder.add( data, 'segments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	OctahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.OctahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.OctahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	OctahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.OctahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.OctahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	PlaneBufferGeometry: function ( mesh ) {
-
-		var data = {
-			width: 10,
-			height: 10,
-			widthSegments: 1,
-			heightSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.PlaneBufferGeometry(
-					data.width, data.height, data.widthSegments, data.heightSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.PlaneBufferGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	PlaneGeometry: function ( mesh ) {
-
-		var data = {
-			width: 10,
-			height: 10,
-			widthSegments: 1,
-			heightSegments: 1
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.PlaneGeometry(
-					data.width, data.height, data.widthSegments, data.heightSegments
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.PlaneGeometry' );
-
-		folder.add( data, 'width', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	RingBufferGeometry: function ( mesh ) {
-
-		var data = {
-			innerRadius: 5,
-			outerRadius: 10,
-			thetaSegments: 8,
-			phiSegments: 8,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.RingBufferGeometry(
-					data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.RingBufferGeometry' );
-
-		folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	RingGeometry: function ( mesh ) {
-
-		var data = {
-			innerRadius: 5,
-			outerRadius: 10,
-			thetaSegments: 8,
-			phiSegments: 8,
-			thetaStart: 0,
-			thetaLength: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.RingGeometry(
-					data.innerRadius, data.outerRadius, data.thetaSegments, data.phiSegments, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.RingGeometry' );
-
-		folder.add( data, 'innerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'outerRadius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'thetaSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiSegments', 1, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	SphereBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 15,
-			widthSegments: 8,
-			heightSegments: 6,
-			phiStart: 0,
-			phiLength: twoPi,
-			thetaStart: 0,
-			thetaLength: Math.PI
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.SphereBufferGeometry(
-					data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.SphereBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	SphereGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 15,
-			widthSegments: 8,
-			heightSegments: 6,
-			phiStart: 0,
-			phiLength: twoPi,
-			thetaStart: 0,
-			thetaLength: Math.PI
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.SphereGeometry(
-					data.radius, data.widthSegments, data.heightSegments, data.phiStart, data.phiLength, data.thetaStart, data.thetaLength
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.SphereGeometry' );
-
-		folder.add( data, 'radius', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'widthSegments', 3, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'heightSegments', 2, 32 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'phiStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'phiLength', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaStart', 0, twoPi ).onChange( generateGeometry );
-		folder.add( data, 'thetaLength', 0, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TetrahedronGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TetrahedronGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TetrahedronGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TetrahedronBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			detail: 0
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TetrahedronBufferGeometry(
-					data.radius, data.detail
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TetrahedronBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'detail', 0, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TextGeometry: function ( mesh ) {
-
-		var data = {
-			text: "TextGeometry",
-			size: 5,
-			height: 2,
-			curveSegments: 12,
-			font: "helvetiker",
-			weight: "regular",
-			bevelEnabled: false,
-			bevelThickness: 1,
-			bevelSize: 0.5,
-			bevelOffset: 0.0,
-			bevelSegments: 3
-		};
-
-		var fonts = [
-			"helvetiker",
-			"optimer",
-			"gentilis",
-			"droid/droid_serif"
-		];
-
-		var weights = [
-			"regular", "bold"
-		];
-
-		function generateGeometry() {
-
-			var loader = new THREE.FontLoader();
-			loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
-
-				var geometry = new THREE.TextGeometry( data.text, {
-					font: font,
-					size: data.size,
-					height: data.height,
-					curveSegments: data.curveSegments,
-					bevelEnabled: data.bevelEnabled,
-					bevelThickness: data.bevelThickness,
-					bevelSize: data.bevelSize,
-					bevelOffset: data.bevelOffset,
-					bevelSegments: data.bevelSegments
-				} );
-				geometry.center();
-
-				updateGroupGeometry( mesh, geometry );
-
-			} );
-
-		}
-
-		//Hide the wireframe
-		mesh.children[ 0 ].visible = false;
-
-		var folder = gui.addFolder( 'THREE.TextGeometry' );
-
-		folder.add( data, 'text' ).onChange( generateGeometry );
-		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'font', fonts ).onChange( generateGeometry );
-		folder.add( data, 'weight', weights ).onChange( generateGeometry );
-		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TextBufferGeometry: function ( mesh ) {
-
-		var data = {
-			text: "TextBufferGeometry",
-			size: 5,
-			height: 2,
-			curveSegments: 12,
-			font: "helvetiker",
-			weight: "regular",
-			bevelEnabled: false,
-			bevelThickness: 1,
-			bevelSize: 0.5,
-			bevelOffset: 0.0,
-			bevelSegments: 3
-		};
-
-		var fonts = [
-			"helvetiker",
-			"optimer",
-			"gentilis",
-			"droid/droid_serif"
-		];
-
-		var weights = [
-			"regular", "bold"
-		];
-
-		function generateGeometry() {
-
-			var loader = new THREE.FontLoader();
-			loader.load( '../../examples/fonts/' + data.font + '_' + data.weight + '.typeface.json', function ( font ) {
-
-				var geometry = new THREE.TextBufferGeometry( data.text, {
-					font: font,
-					size: data.size,
-					height: data.height,
-					curveSegments: data.curveSegments,
-					bevelEnabled: data.bevelEnabled,
-					bevelThickness: data.bevelThickness,
-					bevelSize: data.bevelSize,
-					bevelOffset: data.bevelOffset,
-					bevelSegments: data.bevelSegments
-				} );
-				geometry.center();
-
-				updateGroupGeometry( mesh, geometry );
-
-			} );
-
-		}
-
-		//Hide the wireframe
-		mesh.children[ 0 ].visible = false;
-
-		var folder = gui.addFolder( 'THREE.TextBufferGeometry' );
-
-		folder.add( data, 'text' ).onChange( generateGeometry );
-		folder.add( data, 'size', 1, 30 ).onChange( generateGeometry );
-		folder.add( data, 'height', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'curveSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'font', fonts ).onChange( generateGeometry );
-		folder.add( data, 'weight', weights ).onChange( generateGeometry );
-		folder.add( data, 'bevelEnabled' ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 0.1, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 3 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -0.5, 1.5 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 0, 8 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			radialSegments: 16,
-			tubularSegments: 100,
-			arc: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusBufferGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			radialSegments: 16,
-			tubularSegments: 100,
-			arc: twoPi
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusGeometry(
-					data.radius, data.tube, data.radialSegments, data.tubularSegments, data.arc
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 2, 30 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 200 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'arc', 0.1, twoPi ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusKnotBufferGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			tubularSegments: 64,
-			radialSegments: 8,
-			p: 2,
-			q: 3
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusKnotBufferGeometry(
-					data.radius, data.tube, data.tubularSegments, data.radialSegments,
-					data.p, data.q
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusKnotBufferGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TorusKnotGeometry: function ( mesh ) {
-
-		var data = {
-			radius: 10,
-			tube: 3,
-			tubularSegments: 64,
-			radialSegments: 8,
-			p: 2,
-			q: 3
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TorusKnotGeometry(
-					data.radius, data.tube, data.tubularSegments, data.radialSegments,
-					data.p, data.q
-				)
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TorusKnotGeometry' );
-
-		folder.add( data, 'radius', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'tube', 0.1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'tubularSegments', 3, 300 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 3, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'p', 1, 20 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'q', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ParametricBufferGeometry: function ( mesh ) {
-
-		var data = {
-			slices: 25,
-			stacks: 25
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ParametricBufferGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ParametricBufferGeometry' );
-
-		folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ParametricGeometry: function ( mesh ) {
-
-		var data = {
-			slices: 25,
-			stacks: 25
-		};
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.ParametricGeometry( THREE.ParametricGeometries.klein, data.slices, data.stacks )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ParametricGeometry' );
-
-		folder.add( data, 'slices', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'stacks', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TubeGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 20,
-			radius: 2,
-			radialSegments: 8
-		};
-
-		var path = new CustomSinCurve( 10 );
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TubeGeometry( path, data.segments, data.radius, data.radialSegments, false )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TubeGeometry' );
-
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	TubeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 20,
-			radius: 2,
-			radialSegments: 8
-		};
-
-		var path = new CustomSinCurve( 10 );
-
-		function generateGeometry() {
-
-			updateGroupGeometry( mesh,
-				new THREE.TubeBufferGeometry( path, data.segments, data.radius, data.radialSegments, false )
-			);
-
-		}
-
-		var folder = gui.addFolder( 'THREE.TubeBufferGeometry' );
-
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'radius', 1, 10 ).onChange( generateGeometry );
-		folder.add( data, 'radialSegments', 1, 20 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ShapeGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 12
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ShapeGeometry( heartShape, data.segments );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ShapeGeometry' );
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ShapeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			segments: 12
-		};
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ShapeBufferGeometry( heartShape, data.segments );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ShapeBufferGeometry' );
-		folder.add( data, 'segments', 1, 100 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ExtrudeGeometry: function ( mesh ) {
-
-		var data = {
-			steps: 2,
-			depth: 16,
-			bevelEnabled: true,
-			bevelThickness: 1,
-			bevelSize: 1,
-			bevelOffset: 0,
-			bevelSegments: 1
-		};
-
-		var length = 12, width = 8;
-
-		var shape = new THREE.Shape();
-		shape.moveTo( 0, 0 );
-		shape.lineTo( 0, width );
-		shape.lineTo( length, width );
-		shape.lineTo( length, 0 );
-		shape.lineTo( 0, 0 );
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ExtrudeGeometry( shape, data );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ExtrudeGeometry' );
-
-		folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	},
-
-	ExtrudeBufferGeometry: function ( mesh ) {
-
-		var data = {
-			steps: 2,
-			depth: 16,
-			bevelEnabled: true,
-			bevelThickness: 1,
-			bevelSize: 1,
-			bevelOffset: 0,
-			bevelSegments: 1
-		};
-
-		var length = 12, width = 8;
-
-		var shape = new THREE.Shape();
-		shape.moveTo( 0, 0 );
-		shape.lineTo( 0, width );
-		shape.lineTo( length, width );
-		shape.lineTo( length, 0 );
-		shape.lineTo( 0, 0 );
-
-		function generateGeometry() {
-
-			var geometry = new THREE.ExtrudeBufferGeometry( shape, data );
-			geometry.center();
-
-			updateGroupGeometry( mesh, geometry );
-
-		}
-
-		var folder = gui.addFolder( 'THREE.ExtrudeBufferGeometry' );
-
-		folder.add( data, 'steps', 1, 10 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'depth', 1, 20 ).onChange( generateGeometry );
-		folder.add( data, 'bevelThickness', 1, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSize', 0, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelOffset', -4, 5 ).step( 1 ).onChange( generateGeometry );
-		folder.add( data, 'bevelSegments', 1, 5 ).step( 1 ).onChange( generateGeometry );
-
-		generateGeometry();
-
-	}
-
-};
-
-function chooseFromHash( mesh ) {
-
-	var selectedGeometry = window.location.hash.substring( 1 ) || "TorusGeometry";
-
-	if ( guis[ selectedGeometry ] !== undefined ) {
-
-		guis[ selectedGeometry ]( mesh );
-
-	}
-
-	if ( selectedGeometry === 'TextGeometry' || selectedGeometry === 'TextBufferGeometry' ) {
-
-		return { fixed: true };
-
-	}
-
-	//No configuration options
-	return {};
-
-}

docs/scenes/js/material.js

@@ -1,674 +0,0 @@
-/**
- * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
- */
-
-var constants = {
-
-	combine: {
-
-		'THREE.MultiplyOperation': THREE.MultiplyOperation,
-		'THREE.MixOperation': THREE.MixOperation,
-		'THREE.AddOperation': THREE.AddOperation
-
-	},
-
-	side: {
-
-		'THREE.FrontSide': THREE.FrontSide,
-		'THREE.BackSide': THREE.BackSide,
-		'THREE.DoubleSide': THREE.DoubleSide
-
-	},
-
-	colors: {
-
-		'THREE.NoColors': THREE.NoColors,
-		'THREE.VertexColors': THREE.VertexColors
-
-	},
-
-	blendingMode: {
-
-		'THREE.NoBlending': THREE.NoBlending,
-		'THREE.NormalBlending': THREE.NormalBlending,
-		'THREE.AdditiveBlending': THREE.AdditiveBlending,
-		'THREE.SubtractiveBlending': THREE.SubtractiveBlending,
-		'THREE.MultiplyBlending': THREE.MultiplyBlending,
-		'THREE.CustomBlending': THREE.CustomBlending
-
-	},
-
-	equations: {
-
-		'THREE.AddEquation': THREE.AddEquation,
-		'THREE.SubtractEquation': THREE.SubtractEquation,
-		'THREE.ReverseSubtractEquation': THREE.ReverseSubtractEquation
-
-	},
-
-	destinationFactors: {
-
-		'THREE.ZeroFactor': THREE.ZeroFactor,
-		'THREE.OneFactor': THREE.OneFactor,
-		'THREE.SrcColorFactor': THREE.SrcColorFactor,
-		'THREE.OneMinusSrcColorFactor': THREE.OneMinusSrcColorFactor,
-		'THREE.SrcAlphaFactor': THREE.SrcAlphaFactor,
-		'THREE.OneMinusSrcAlphaFactor': THREE.OneMinusSrcAlphaFactor,
-		'THREE.DstAlphaFactor': THREE.DstAlphaFactor,
-		'THREE.OneMinusDstAlphaFactor': THREE.OneMinusDstAlphaFactor
-
-	},
-
-	sourceFactors: {
-
-		'THREE.DstColorFactor': THREE.DstColorFactor,
-		'THREE.OneMinusDstColorFactor': THREE.OneMinusDstColorFactor,
-		'THREE.SrcAlphaSaturateFactor': THREE.SrcAlphaSaturateFactor
-
-	}
-
-};
-
-function getObjectsKeys( obj ) {
-
-	var keys = [];
-
-	for ( var key in obj ) {
-
-		if ( obj.hasOwnProperty( key ) ) {
-
-			keys.push( key );
-
-		}
-
-	}
-
-	return keys;
-
-}
-
-var textureLoader = new THREE.TextureLoader();
-var cubeTextureLoader = new THREE.CubeTextureLoader();
-
-var envMaps = ( function () {
-
-	var path = '../../examples/textures/cube/SwedishRoyalCastle/';
-	var format = '.jpg';
-	var urls = [
-		path + 'px' + format, path + 'nx' + format,
-		path + 'py' + format, path + 'ny' + format,
-		path + 'pz' + format, path + 'nz' + format
-	];
-
-	var reflectionCube = cubeTextureLoader.load( urls );
-	reflectionCube.format = THREE.RGBFormat;
-
-	var refractionCube = cubeTextureLoader.load( urls );
-	refractionCube.mapping = THREE.CubeRefractionMapping;
-	refractionCube.format = THREE.RGBFormat;
-
-	return {
-		none: null,
-		reflection: reflectionCube,
-		refraction: refractionCube
-	};
-
-} )();
-
-var diffuseMaps = ( function () {
-
-	var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
-	bricks.wrapS = THREE.RepeatWrapping;
-	bricks.wrapT = THREE.RepeatWrapping;
-	bricks.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		bricks: bricks
-	};
-
-} )();
-
-var roughnessMaps = ( function () {
-
-	var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
-	bricks.wrapT = THREE.RepeatWrapping;
-	bricks.wrapS = THREE.RepeatWrapping;
-	bricks.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		bricks: bricks
-	};
-
-} )();
-
-var matcaps = ( function () {
-
-	return {
-		none: null,
-		porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
-	};
-
-} )();
-
-var alphaMaps = ( function () {
-
-	var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
-	fibers.wrapT = THREE.RepeatWrapping;
-	fibers.wrapS = THREE.RepeatWrapping;
-	fibers.repeat.set( 9, 1 );
-
-	return {
-		none: null,
-		fibers: fibers
-	};
-
-} )();
-
-var gradientMaps = ( function () {
-
-	var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
-	threeTone.minFilter = THREE.NearestFilter;
-	threeTone.magFilter = THREE.NearestFilter;
-
-	var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
-	fiveTone.minFilter = THREE.NearestFilter;
-	fiveTone.magFilter = THREE.NearestFilter;
-
-	return {
-		none: null,
-		threeTone: threeTone,
-		fiveTone: fiveTone
-	};
-
-} )();
-
-var envMapKeys = getObjectsKeys( envMaps );
-var diffuseMapKeys = getObjectsKeys( diffuseMaps );
-var roughnessMapKeys = getObjectsKeys( roughnessMaps );
-var matcapKeys = getObjectsKeys( matcaps );
-var alphaMapKeys = getObjectsKeys( alphaMaps );
-var gradientMapKeys = getObjectsKeys( gradientMaps );
-
-function generateVertexColors( geometry ) {
-
-	var positionAttribute = geometry.attributes.position;
-
-	var colors = [];
-	var color = new THREE.Color();
-
-	for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
-
-		color.setHSL( i / il * Math.random(), 0.5, 0.5 );
-		colors.push( color.r, color.g, color.b );
-
-	}
-
-	geometry.addAttribute( 'color', new THREE.Float32BufferAttribute( colors, 3 ) );
-
-}
-
-function handleColorChange( color ) {
-
-	return function ( value ) {
-
-		if ( typeof value === 'string' ) {
-
-			value = value.replace( '#', '0x' );
-
-		}
-
-		color.setHex( value );
-
-	};
-
-}
-
-function needsUpdate( material, geometry ) {
-
-	return function () {
-
-		material.vertexColors = parseInt( material.vertexColors ); //Ensure number
-		material.side = parseInt( material.side ); //Ensure number
-		material.needsUpdate = true;
-		geometry.attributes.position.needsUpdate = true;
-		geometry.attributes.normal.needsUpdate = true;
-		geometry.attributes.color.needsUpdate = true;
-
-	};
-
-}
-
-function updateTexture( material, materialKey, textures ) {
-
-	return function ( key ) {
-
-		material[ materialKey ] = textures[ key ];
-		material.needsUpdate = true;
-
-	};
-
-}
-
-function guiScene( gui, scene ) {
-
-	var folder = gui.addFolder( 'Scene' );
-
-	var data = {
-		background: '#000000',
-		'ambient light': ambientLight.color.getHex()
-	};
-
-	var color = new THREE.Color();
-	var colorConvert = handleColorChange( color );
-
-	folder.addColor( data, 'background' ).onChange( function ( value ) {
-
-		colorConvert( value );
-
-		renderer.setClearColor( color.getHex() );
-
-	} );
-
-	folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
-
-	guiSceneFog( folder, scene );
-
-}
-
-function guiSceneFog( folder, scene ) {
-
-	var fogFolder = folder.addFolder( 'scene.fog' );
-
-	var fog = new THREE.Fog( 0x3f7b9d, 0, 60 );
-
-	var data = {
-		fog: {
-			'THREE.Fog()': false,
-			'scene.fog.color': fog.color.getHex()
-		}
-	};
-
-	fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
-
-		if ( useFog ) {
-
-			scene.fog = fog;
-
-		} else {
-
-			scene.fog = null;
-
-		}
-
-	} );
-
-	fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
-
-}
-
-function guiMaterial( gui, mesh, material, geometry ) {
-
-	var folder = gui.addFolder( 'THREE.Material' );
-
-	folder.add( material, 'transparent' );
-	folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
-	// folder.add( material, 'blending', constants.blendingMode );
-	// folder.add( material, 'blendSrc', constants.destinationFactors );
-	// folder.add( material, 'blendDst', constants.destinationFactors );
-	// folder.add( material, 'blendEquation', constants.equations );
-	folder.add( material, 'depthTest' );
-	folder.add( material, 'depthWrite' );
-	// folder.add( material, 'polygonOffset' );
-	// folder.add( material, 'polygonOffsetFactor' );
-	// folder.add( material, 'polygonOffsetUnits' );
-	folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'visible' );
-	folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
-
-}
-
-function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-	folder.add( material, 'combine', constants.combine );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'refractionRatio', 0, 1 );
-
-}
-
-function guiMeshDepthMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
-
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
-
-	var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
-
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-
-}
-
-function guiLineBasicMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex()
-	};
-
-	var folder = gui.addFolder( 'THREE.LineBasicMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( material, 'linewidth', 0, 10 );
-	folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
-	folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-}
-
-function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-	folder.add( material, 'combine', constants.combine );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'refractionRatio', 0, 1 );
-
-}
-
-function guiMeshMatcapMaterial( gui, mesh, material ) {
-
-	var data = {
-		color: material.color.getHex(),
-		matcap: matcapKeys[ 1 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		specular: material.specular.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-	folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
-
-	folder.add( material, 'shininess', 0, 100 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshToonMaterial( gui, mesh, material ) {
-
-	var data = {
-		color: material.color.getHex(),
-		map: diffuseMapKeys[ 0 ],
-		gradientMap: gradientMapKeys[ 1 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-}
-
-function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		roughnessMap: roughnessMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'roughness', 0, 1 );
-	folder.add( material, 'metalness', 0, 1 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-	// TODO metalnessMap
-
-}
-
-function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
-
-	var data = {
-		color: material.color.getHex(),
-		emissive: material.emissive.getHex(),
-		envMaps: envMapKeys[ 0 ],
-		map: diffuseMapKeys[ 0 ],
-		roughnessMap: roughnessMapKeys[ 0 ],
-		alphaMap: alphaMapKeys[ 0 ]
-	};
-
-	var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
-
-	folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
-	folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
-
-	folder.add( material, 'roughness', 0, 1 );
-	folder.add( material, 'metalness', 0, 1 );
-	folder.add( material, 'reflectivity', 0, 1 );
-	folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
-	folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
-	folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'wireframe' );
-	folder.add( material, 'wireframeLinewidth', 0, 10 );
-	folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
-	folder.add( material, 'fog' );
-	folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
-	folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
-	folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
-	folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-
-	// TODO metalnessMap
-
-}
-
-function chooseFromHash( gui, mesh, geometry ) {
-
-	var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
-	var material;
-
-	switch ( selectedMaterial ) {
-
-		case 'MeshBasicMaterial' :
-
-			material = new THREE.MeshBasicMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshBasicMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshLambertMaterial' :
-
-			material = new THREE.MeshLambertMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshLambertMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshMatcapMaterial' :
-
-			material = new THREE.MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshMatcapMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshPhongMaterial' :
-
-			material = new THREE.MeshPhongMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshPhongMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshToonMaterial' :
-
-			material = new THREE.MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshToonMaterial( gui, mesh, material, geometry );
-
-			// only use a single point light
-
-			lights[ 0 ].visible = false;
-			lights[ 2 ].visible = false;
-
-			return material;
-
-			break;
-
-		case 'MeshStandardMaterial' :
-
-			material = new THREE.MeshStandardMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshStandardMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshPhysicalMaterial' :
-
-			material = new THREE.MeshPhysicalMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshPhysicalMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshDepthMaterial' :
-
-			material = new THREE.MeshDepthMaterial();
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshDepthMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'MeshNormalMaterial' :
-
-			material = new THREE.MeshNormalMaterial();
-			guiMaterial( gui, mesh, material, geometry );
-			guiMeshNormalMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-		case 'LineBasicMaterial' :
-
-			material = new THREE.LineBasicMaterial( { color: 0x2194CE } );
-			guiMaterial( gui, mesh, material, geometry );
-			guiLineBasicMaterial( gui, mesh, material, geometry );
-
-			return material;
-
-			break;
-
-	}
-
-}

docs/scenes/material-browser.html

@@ -6,7 +6,11 @@
 		<link rel="shortcut icon" href="../../files/favicon.ico" />
 		<link rel="stylesheet" type="text/css" href="../../files/main.css">
 		<style>
-			canvas { width: 100%; height: 100% }
+			canvas {
+				display: block;
+				width: 100%;
+				height: 100%;
+			}
 
 			#newWindow {
 				display: block;
@@ -21,34 +25,732 @@
 
 		<a id='newWindow' href='./material-browser.html' target='_blank'>Open in New Window</a>
 
-		<script src="../../build/three.min.js"></script>
-		<script src='../../examples/js/libs/dat.gui.min.js'></script>
-		<script src='js/material.js'></script>
+		<script type="module">
+			import {
+				AdditiveBlending, CustomBlending, MultiplyBlending, NormalBlending, NoBlending, SubtractiveBlending,
+				AddEquation, ReverseSubtractEquation, SubtractEquation,
+				AddOperation, MixOperation, MultiplyOperation,
+				AmbientLight,
+				Color,
+				CubeTextureLoader,
+				CubeRefractionMapping,
+				DoubleSide, FrontSide, BackSide,
+				DstAlphaFactor, DstColorFactor, OneFactor, OneMinusDstAlphaFactor, OneMinusDstColorFactor, OneMinusSrcAlphaFactor, OneMinusSrcColorFactor, SrcAlphaFactor, SrcAlphaSaturateFactor, SrcColorFactor, ZeroFactor,
+				Float32BufferAttribute,
+				Fog,
+				LineBasicMaterial,
+				Mesh,
+				MeshBasicMaterial,
+				MeshDepthMaterial,
+				MeshLambertMaterial,
+				MeshMatcapMaterial,
+				MeshNormalMaterial,
+				MeshPhongMaterial,
+				MeshPhysicalMaterial,
+				MeshStandardMaterial,
+				MeshToonMaterial,
+				NearestFilter,
+				PerspectiveCamera,
+				PointLight,
+				RepeatWrapping,
+				RGBFormat,
+				Scene,
+				TextureLoader,
+				TorusKnotBufferGeometry,
+				VertexColors, NoColors,
+				WebGLRenderer
+			} from "../../build/three.module.js";
+
+			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
+
+			/**
+			 * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
+			 */
+
+			var constants = {
+
+				combine: {
+
+					'THREE.MultiplyOperation': MultiplyOperation,
+					'THREE.MixOperation': MixOperation,
+					'THREE.AddOperation': AddOperation
+
+				},
+
+				side: {
+
+					'THREE.FrontSide': FrontSide,
+					'THREE.BackSide': BackSide,
+					'THREE.DoubleSide': DoubleSide
+
+				},
+
+				colors: {
+
+					'THREE.NoColors': NoColors,
+					'THREE.VertexColors': VertexColors
+
+				},
+
+				blendingMode: {
+
+					'THREE.NoBlending': NoBlending,
+					'THREE.NormalBlending': NormalBlending,
+					'THREE.AdditiveBlending': AdditiveBlending,
+					'THREE.SubtractiveBlending': SubtractiveBlending,
+					'THREE.MultiplyBlending': MultiplyBlending,
+					'THREE.CustomBlending': CustomBlending
+
+				},
+
+				equations: {
+
+					'THREE.AddEquation': AddEquation,
+					'THREE.SubtractEquation': SubtractEquation,
+					'THREE.ReverseSubtractEquation': ReverseSubtractEquation
+
+				},
+
+				destinationFactors: {
+
+					'THREE.ZeroFactor': ZeroFactor,
+					'THREE.OneFactor': OneFactor,
+					'THREE.SrcColorFactor': SrcColorFactor,
+					'THREE.OneMinusSrcColorFactor': OneMinusSrcColorFactor,
+					'THREE.SrcAlphaFactor': SrcAlphaFactor,
+					'THREE.OneMinusSrcAlphaFactor': OneMinusSrcAlphaFactor,
+					'THREE.DstAlphaFactor': DstAlphaFactor,
+					'THREE.OneMinusDstAlphaFactor': OneMinusDstAlphaFactor
+
+				},
+
+				sourceFactors: {
+
+					'THREE.DstColorFactor': DstColorFactor,
+					'THREE.OneMinusDstColorFactor': OneMinusDstColorFactor,
+					'THREE.SrcAlphaSaturateFactor': SrcAlphaSaturateFactor
+
+				}
+
+			};
+
+			function getObjectsKeys( obj ) {
+
+				var keys = [];
+
+				for ( var key in obj ) {
+
+					if ( obj.hasOwnProperty( key ) ) {
+
+						keys.push( key );
+
+					}
+
+				}
+
+				return keys;
+
+			}
+
+			var textureLoader = new TextureLoader();
+			var cubeTextureLoader = new CubeTextureLoader();
+
+			var envMaps = ( function () {
+
+				var path = '../../examples/textures/cube/SwedishRoyalCastle/';
+				var format = '.jpg';
+				var urls = [
+					path + 'px' + format, path + 'nx' + format,
+					path + 'py' + format, path + 'ny' + format,
+					path + 'pz' + format, path + 'nz' + format
+				];
+
+				var reflectionCube = cubeTextureLoader.load( urls );
+				reflectionCube.format = RGBFormat;
+
+				var refractionCube = cubeTextureLoader.load( urls );
+				refractionCube.mapping = CubeRefractionMapping;
+				refractionCube.format = RGBFormat;
+
+				return {
+					none: null,
+					reflection: reflectionCube,
+					refraction: refractionCube
+				};
+
+			} )();
+
+			var diffuseMaps = ( function () {
+
+				var bricks = textureLoader.load( '../../examples/textures/brick_diffuse.jpg' );
+				bricks.wrapS = RepeatWrapping;
+				bricks.wrapT = RepeatWrapping;
+				bricks.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					bricks: bricks
+				};
+
+			} )();
+
+			var roughnessMaps = ( function () {
+
+				var bricks = textureLoader.load( '../../examples/textures/brick_roughness.jpg' );
+				bricks.wrapT = RepeatWrapping;
+				bricks.wrapS = RepeatWrapping;
+				bricks.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					bricks: bricks
+				};
+
+			} )();
+
+			var matcaps = ( function () {
+
+				return {
+					none: null,
+					porcelainWhite: textureLoader.load( '../../examples/textures/matcaps/matcap-porcelain-white.jpg' )
+				};
+
+			} )();
+
+			var alphaMaps = ( function () {
+
+				var fibers = textureLoader.load( '../../examples/textures/alphaMap.jpg' );
+				fibers.wrapT = RepeatWrapping;
+				fibers.wrapS = RepeatWrapping;
+				fibers.repeat.set( 9, 1 );
+
+				return {
+					none: null,
+					fibers: fibers
+				};
+
+			} )();
+
+			var gradientMaps = ( function () {
+
+				var threeTone = textureLoader.load( '../../examples/textures/gradientMaps/threeTone.jpg' );
+				threeTone.minFilter = NearestFilter;
+				threeTone.magFilter = NearestFilter;
+
+				var fiveTone = textureLoader.load( '../../examples/textures/gradientMaps/fiveTone.jpg' );
+				fiveTone.minFilter = NearestFilter;
+				fiveTone.magFilter = NearestFilter;
+
+				return {
+					none: null,
+					threeTone: threeTone,
+					fiveTone: fiveTone
+				};
+
+			} )();
+
+			var envMapKeys = getObjectsKeys( envMaps );
+			var diffuseMapKeys = getObjectsKeys( diffuseMaps );
+			var roughnessMapKeys = getObjectsKeys( roughnessMaps );
+			var matcapKeys = getObjectsKeys( matcaps );
+			var alphaMapKeys = getObjectsKeys( alphaMaps );
+			var gradientMapKeys = getObjectsKeys( gradientMaps );
+
+			function generateVertexColors( geometry ) {
+
+				var positionAttribute = geometry.attributes.position;
+
+				var colors = [];
+				var color = new Color();
+
+				for ( var i = 0, il = positionAttribute.count; i < il; i ++ ) {
+
+					color.setHSL( i / il * Math.random(), 0.5, 0.5 );
+					colors.push( color.r, color.g, color.b );
+
+				}
+
+				geometry.addAttribute( 'color', new Float32BufferAttribute( colors, 3 ) );
+
+			}
+
+			function handleColorChange( color ) {
+
+				return function ( value ) {
+
+					if ( typeof value === 'string' ) {
+
+						value = value.replace( '#', '0x' );
+
+					}
+
+					color.setHex( value );
+
+				};
+
+			}
+
+			function needsUpdate( material, geometry ) {
+
+				return function () {
+
+					material.vertexColors = parseInt( material.vertexColors ); //Ensure number
+					material.side = parseInt( material.side ); //Ensure number
+					material.needsUpdate = true;
+					geometry.attributes.position.needsUpdate = true;
+					geometry.attributes.normal.needsUpdate = true;
+					geometry.attributes.color.needsUpdate = true;
+
+				};
+
+			}
+
+			function updateTexture( material, materialKey, textures ) {
+
+				return function ( key ) {
+
+					material[ materialKey ] = textures[ key ];
+					material.needsUpdate = true;
+
+				};
+
+			}
+
+			function guiScene( gui, scene ) {
+
+				var folder = gui.addFolder( 'Scene' );
+
+				var data = {
+					background: '#000000',
+					'ambient light': ambientLight.color.getHex()
+				};
+
+				folder.addColor( data, 'ambient light' ).onChange( handleColorChange( ambientLight.color ) );
+
+				guiSceneFog( folder, scene );
+
+			}
+
+			function guiSceneFog( folder, scene ) {
+
+				var fogFolder = folder.addFolder( 'scene.fog' );
+
+				var fog = new Fog( 0x3f7b9d, 0, 60 );
+
+				var data = {
+					fog: {
+						'THREE.Fog()': false,
+						'scene.fog.color': fog.color.getHex()
+					}
+				};
+
+				fogFolder.add( data.fog, 'THREE.Fog()' ).onChange( function ( useFog ) {
+
+					if ( useFog ) {
+
+						scene.fog = fog;
+
+					} else {
+
+						scene.fog = null;
+
+					}
+
+				} );
+
+				fogFolder.addColor( data.fog, 'scene.fog.color' ).onChange( handleColorChange( fog.color ) );
+
+			}
+
+			function guiMaterial( gui, mesh, material, geometry ) {
+
+				var folder = gui.addFolder( 'THREE.Material' );
+
+				folder.add( material, 'transparent' );
+				folder.add( material, 'opacity', 0, 1 ).step( 0.01 );
+				// folder.add( material, 'blending', constants.blendingMode );
+				// folder.add( material, 'blendSrc', constants.destinationFactors );
+				// folder.add( material, 'blendDst', constants.destinationFactors );
+				// folder.add( material, 'blendEquation', constants.equations );
+				folder.add( material, 'depthTest' );
+				folder.add( material, 'depthWrite' );
+				// folder.add( material, 'polygonOffset' );
+				// folder.add( material, 'polygonOffsetFactor' );
+				// folder.add( material, 'polygonOffsetUnits' );
+				folder.add( material, 'alphaTest', 0, 1 ).step( 0.01 ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'visible' );
+				folder.add( material, 'side', constants.side ).onChange( needsUpdate( material, geometry ) );
+
+			}
+
+			function guiMeshBasicMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshBasicMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'refractionRatio', 0, 1 );
 
-		<script>
+			}
+
+			function guiMeshDepthMaterial( gui, mesh, material ) {
+
+				var data = {
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshDepthMaterial' );
+
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshNormalMaterial( gui, mesh, material, geometry ) {
+
+				var folder = gui.addFolder( 'THREE.MeshNormalMaterial' );
+
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+
+			}
+
+			function guiLineBasicMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex()
+				};
+
+				var folder = gui.addFolder( 'THREE.LineBasicMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( material, 'linewidth', 0, 10 );
+				folder.add( material, 'linecap', [ 'butt', 'round', 'square' ] );
+				folder.add( material, 'linejoin', [ 'round', 'bevel', 'miter' ] );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+			}
+
+			function guiMeshLambertMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshLambertMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'refractionRatio', 0, 1 );
+
+			}
+
+			function guiMeshMatcapMaterial( gui, mesh, material ) {
+
+				var data = {
+					color: material.color.getHex(),
+					matcap: matcapKeys[ 1 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshMatcapMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.add( data, 'matcap', matcapKeys ).onChange( updateTexture( material, 'matcap', matcaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshPhongMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					specular: material.specular.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshPhongMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+				folder.addColor( data, 'specular' ).onChange( handleColorChange( material.specular ) );
+
+				folder.add( material, 'shininess', 0, 100 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshToonMaterial( gui, mesh, material ) {
+
+				var data = {
+					color: material.color.getHex(),
+					map: diffuseMapKeys[ 0 ],
+					gradientMap: gradientMapKeys[ 1 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshToonMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'gradientMap', gradientMapKeys ).onChange( updateTexture( material, 'gradientMap', gradientMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+			}
+
+			function guiMeshStandardMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					roughnessMap: roughnessMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshStandardMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'roughness', 0, 1 );
+				folder.add( material, 'metalness', 0, 1 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+				// TODO metalnessMap
+
+			}
+
+			function guiMeshPhysicalMaterial( gui, mesh, material, geometry ) {
+
+				var data = {
+					color: material.color.getHex(),
+					emissive: material.emissive.getHex(),
+					envMaps: envMapKeys[ 0 ],
+					map: diffuseMapKeys[ 0 ],
+					roughnessMap: roughnessMapKeys[ 0 ],
+					alphaMap: alphaMapKeys[ 0 ]
+				};
+
+				var folder = gui.addFolder( 'THREE.MeshPhysicalMaterial' );
+
+				folder.addColor( data, 'color' ).onChange( handleColorChange( material.color ) );
+				folder.addColor( data, 'emissive' ).onChange( handleColorChange( material.emissive ) );
+
+				folder.add( material, 'roughness', 0, 1 );
+				folder.add( material, 'metalness', 0, 1 );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'clearCoat', 0, 1 ).step( 0.01 );
+				folder.add( material, 'clearCoatRoughness', 0, 1 ).step( 0.01 );
+				folder.add( material, 'flatShading' ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'wireframe' );
+				folder.add( material, 'wireframeLinewidth', 0, 10 );
+				folder.add( material, 'vertexColors', constants.colors ).onChange( needsUpdate( material, geometry ) );
+				folder.add( material, 'fog' );
+				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
+				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
+				folder.add( data, 'roughnessMap', roughnessMapKeys ).onChange( updateTexture( material, 'roughnessMap', roughnessMaps ) );
+				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+
+				// TODO metalnessMap
+
+			}
+
+			function chooseFromHash( gui, mesh, geometry ) {
+
+				var selectedMaterial = window.location.hash.substring( 1 ) || 'MeshBasicMaterial';
+				var material;
+
+				switch ( selectedMaterial ) {
+
+					case 'MeshBasicMaterial' :
+
+						material = new MeshBasicMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshBasicMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshLambertMaterial' :
+
+						material = new MeshLambertMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshLambertMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshMatcapMaterial' :
+
+						material = new MeshMatcapMaterial( { matcap: matcaps.porcelainWhite } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshMatcapMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshPhongMaterial' :
+
+						material = new MeshPhongMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshPhongMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshToonMaterial' :
+
+						material = new MeshToonMaterial( { color: 0x2194CE, gradientMap: gradientMaps.threeTone } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshToonMaterial( gui, mesh, material, geometry );
+
+						// only use a single point light
+
+						lights[ 0 ].visible = false;
+						lights[ 2 ].visible = false;
+
+						return material;
+
+						break;
+
+					case 'MeshStandardMaterial' :
+
+						material = new MeshStandardMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshStandardMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshPhysicalMaterial' :
+
+						material = new MeshPhysicalMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshPhysicalMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshDepthMaterial' :
+
+						material = new MeshDepthMaterial();
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshDepthMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'MeshNormalMaterial' :
+
+						material = new MeshNormalMaterial();
+						guiMaterial( gui, mesh, material, geometry );
+						guiMeshNormalMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+					case 'LineBasicMaterial' :
+
+						material = new LineBasicMaterial( { color: 0x2194CE } );
+						guiMaterial( gui, mesh, material, geometry );
+						guiLineBasicMaterial( gui, mesh, material, geometry );
+
+						return material;
+
+						break;
+
+				}
+
+			}
+
+			//
 
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
-			var gui = new dat.GUI();
+			var gui = new GUI();
 
-			var scene = new THREE.Scene();
-			scene.background = new THREE.Color( 0x444444 );
+			var scene = new Scene();
+			scene.background = new Color( 0x444444 );
 
-			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
+			var camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 
-			var renderer = new THREE.WebGLRenderer( { antialias: true } );
+			var renderer = new WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			document.body.appendChild( renderer.domElement );
 
-			var ambientLight = new THREE.AmbientLight( 0x000000 );
+			var ambientLight = new AmbientLight( 0x000000 );
 			scene.add( ambientLight );
 
 			var lights = [];
-			lights[ 0 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-			lights[ 1 ] = new THREE.PointLight( 0xffffff, 1, 0 );
-			lights[ 2 ] = new THREE.PointLight( 0xffffff, 1, 0 );
+			lights[ 0 ] = new PointLight( 0xffffff, 1, 0 );
+			lights[ 1 ] = new PointLight( 0xffffff, 1, 0 );
+			lights[ 2 ] = new PointLight( 0xffffff, 1, 0 );
 
 			lights[ 0 ].position.set( 0, 200, 0 );
 			lights[ 1 ].position.set( 100, 200, 100 );
@@ -60,12 +762,12 @@
 
 			guiScene( gui, scene, camera );
 
-			var geometry = new THREE.TorusKnotBufferGeometry( 10, 3, 100, 16 );
+			var geometry = new TorusKnotBufferGeometry( 10, 3, 100, 16 );
 			geometry = geometry.toNonIndexed();
 
 			generateVertexColors( geometry );
 
-			var mesh = new THREE.Mesh( geometry );
+			var mesh = new Mesh( geometry );
 			mesh.material = chooseFromHash( gui, mesh, geometry );
 
 			scene.add( mesh );
@@ -76,8 +778,6 @@
 
 				requestAnimationFrame( render );
 
-				var time = Date.now() * 0.001;
-
 				mesh.rotation.x += 0.005;
 				mesh.rotation.y += 0.005;
 

editor/docs/Implementing additional commands for undo-redo.md

@@ -25,15 +25,15 @@ Then there are separate commands for:
 Every command needs a constructor. In the constructor
 
 ```javascript
-	
-var DoSomethingCommand = function () {
 
-	Command.call( this ); // Required: Call default constructor
+var DoSomethingCommand = function ( editor ) {
+
+	Command.call( this, editor ); // Required: Call default constructor
 
 	this.type = 'DoSomethingCommand';            // Required: has to match the object-name!
 	this.name = 'Set/Do/Update Something'; // Required: description of the command, used in Sidebar.History
 
-	// TODO: store all the relevant information needed to 
+	// TODO: store all the relevant information needed to
 	// restore the old and the new state
 
 };
@@ -50,13 +50,13 @@ DoSomethingCommand.prototype = {
 
 	execute: function () {
 
-		// TODO: apply changes to 'object' to reach the new state 
+		// TODO: apply changes to 'object' to reach the new state
 
 	},
 
 	undo: function () {
 
-		// TODO: restore 'object' to old state 
+		// TODO: restore 'object' to old state
 
 	},
 

editor/docs/Writing unit tests for undo-redo commands.md

@@ -68,7 +68,7 @@ test("Test DoSomethingCommand (Undo and Redo)", function() {
     // var perspectiveCamera = aPerspectiveCamera( 'Name your perspectiveCamera' );
 
     // in most cases you'll need to add the object to work with
-    editor.execute( new AddObjectCommand( box ) );
+    editor.execute( new AddObjectCommand( editor, box ) );
 
 
     // your test begins here...
@@ -91,4 +91,4 @@ Finally, perform `editor.redo()` and verify if the values are as expected.
 
 ### 4. Execute the test ###
 
-Open the editor's unit test suite `test/unit/unittests_editor.html` in your browser and check the results from the test framework.
+Open the editor's unit test suite `test/unit/unittests_editor.html` in your browser and check the results from the test framework.

editor/index.html

@@ -18,8 +18,11 @@
 		<script src="../examples/js/controls/EditorControls.js"></script>
 		<script src="../examples/js/controls/TransformControls.js"></script>
 
+		<script src="../examples/js/libs/chevrotain.min.js"></script> <!-- VRML -->
 		<script src="../examples/js/libs/jszip.min.js"></script>
 		<script src="../examples/js/libs/inflate.min.js"></script> <!-- FBX -->
+		<script src="../examples/js/libs/lzma.js"></script> <!-- CTM -->
+		<script src="../examples/js/libs/ctm.js"></script> <!-- CTM -->
 
 		<script src="../examples/js/loaders/AMFLoader.js"></script>
 		<script src="../examples/js/loaders/AWDLoader.js"></script>
@@ -41,8 +44,6 @@
 		<script src="../examples/js/loaders/TDSLoader.js"></script>
 		<script src="../examples/js/loaders/VRMLLoader.js"></script>
 		<script src="../examples/js/loaders/VTKLoader.js"></script>
-		<script src="../examples/js/loaders/ctm/lzma.js"></script>
-		<script src="../examples/js/loaders/ctm/ctm.js"></script>
 		<script src="../examples/js/loaders/ctm/CTMLoader.js"></script>
 
 		<script src="../examples/js/exporters/ColladaExporter.js"></script>

editor/js/Command.js

@@ -4,26 +4,19 @@
  */
 
 /**
- * @param editorRef pointer to main editor object used to initialize
+ * @param editor pointer to main editor object used to initialize
  *        each command object with a reference to the editor
  * @constructor
  */
 
-var Command = function ( editorRef ) {
+var Command = function ( editor ) {
 
 	this.id = - 1;
 	this.inMemory = false;
 	this.updatable = false;
 	this.type = '';
 	this.name = '';
-
-	if ( editorRef !== undefined ) {
-
-		Command.editor = editorRef;
-
-	}
-	this.editor = Command.editor;
-
+	this.editor = editor;
 
 };
 

editor/js/History.js

@@ -14,10 +14,6 @@ History = function ( editor ) {
 	this.historyDisabled = false;
 	this.config = editor.config;
 
-	//Set editor-reference in Command
-
-	Command( editor );
-
 	// signals
 
 	var scope = this;

editor/js/Loader.js

@@ -66,7 +66,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.TDSLoader();
 					var object = loader.parse( event.target.result );
 
-					editor.execute( new AddObjectCommand( object ) );
+					editor.execute( new AddObjectCommand( editor, object ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -80,7 +80,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.AMFLoader();
 					var amfobject = loader.parse( event.target.result );
 
-					editor.execute( new AddObjectCommand( amfobject ) );
+					editor.execute( new AddObjectCommand( editor, amfobject ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -94,7 +94,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.AWDLoader();
 					var scene = loader.parse( event.target.result );
 
-					editor.execute( new SetSceneCommand( scene ) );
+					editor.execute( new SetSceneCommand( editor, scene ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -111,7 +111,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.BabylonLoader();
 					var scene = loader.parse( json );
 
-					editor.execute( new SetSceneCommand( scene ) );
+					editor.execute( new SetSceneCommand( editor, scene ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -133,7 +133,7 @@ var Loader = function ( editor ) {
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.name = filename;
 
-					editor.execute( new AddObjectCommand( mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -160,7 +160,7 @@ var Loader = function ( editor ) {
 						var mesh = new THREE.Mesh( geometry, material );
 						mesh.name = filename;
 
-						editor.execute( new AddObjectCommand( mesh ) );
+						editor.execute( new AddObjectCommand( editor, mesh ) );
 
 					} );
 
@@ -181,7 +181,7 @@ var Loader = function ( editor ) {
 					collada.scene.name = filename;
 
 					editor.addAnimation( collada.scene, collada.animations );
-					editor.execute( new AddObjectCommand( collada.scene ) );
+					editor.execute( new AddObjectCommand( editor, collada.scene ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -198,7 +198,7 @@ var Loader = function ( editor ) {
 					var object = loader.parse( contents );
 
 					editor.addAnimation( object, object.animations );
-					editor.execute( new AddObjectCommand( object ) );
+					editor.execute( new AddObjectCommand( editor, object ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -221,7 +221,7 @@ var Loader = function ( editor ) {
 						scene.name = filename;
 
 						editor.addAnimation( scene, result.animations );
-						editor.execute( new AddObjectCommand( scene ) );
+						editor.execute( new AddObjectCommand( editor, scene ) );
 
 					} );
 
@@ -254,7 +254,7 @@ var Loader = function ( editor ) {
 						scene.name = filename;
 
 						editor.addAnimation( scene, result.animations );
-						editor.execute( new AddObjectCommand( scene ) );
+						editor.execute( new AddObjectCommand( editor, scene ) );
 
 					} );
 
@@ -329,7 +329,7 @@ var Loader = function ( editor ) {
 
 					collada.scene.name = filename;
 
-					editor.execute( new AddObjectCommand( collada.scene ) );
+					editor.execute( new AddObjectCommand( editor, collada.scene ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -353,7 +353,7 @@ var Loader = function ( editor ) {
 					mesh.name = filename;
 
 					editor.addAnimation( mesh, geometry.animations );
-					editor.execute( new AddObjectCommand( mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -369,7 +369,7 @@ var Loader = function ( editor ) {
 					var object = new THREE.OBJLoader().parse( contents );
 					object.name = filename;
 
-					editor.execute( new AddObjectCommand( object ) );
+					editor.execute( new AddObjectCommand( editor, object ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -386,7 +386,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.PlayCanvasLoader();
 					var object = loader.parse( json );
 
-					editor.execute( new AddObjectCommand( object ) );
+					editor.execute( new AddObjectCommand( editor, object ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -408,7 +408,7 @@ var Loader = function ( editor ) {
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.name = filename;
 
-					editor.execute( new AddObjectCommand( mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				}, false );
 				reader.readAsArrayBuffer( file );
@@ -430,7 +430,7 @@ var Loader = function ( editor ) {
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.name = filename;
 
-					editor.execute( new AddObjectCommand( mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				}, false );
 
@@ -485,7 +485,7 @@ var Loader = function ( editor ) {
 
 					}
 
-					editor.execute( new AddObjectCommand( group ) );
+					editor.execute( new AddObjectCommand( editor, group ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -507,7 +507,7 @@ var Loader = function ( editor ) {
 					var mesh = new THREE.Mesh( geometry, material );
 					mesh.name = filename;
 
-					editor.execute( new AddObjectCommand( mesh ) );
+					editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -522,7 +522,7 @@ var Loader = function ( editor ) {
 
 					var result = new THREE.VRMLLoader().parse( contents );
 
-					editor.execute( new SetSceneCommand( result ) );
+					editor.execute( new SetSceneCommand( editor, result ) );
 
 				}, false );
 				reader.readAsText( file );
@@ -579,7 +579,7 @@ var Loader = function ( editor ) {
 
 				var mesh = new THREE.Mesh( result );
 
-				editor.execute( new AddObjectCommand( mesh ) );
+				editor.execute( new AddObjectCommand( editor, mesh ) );
 
 				break;
 
@@ -598,11 +598,11 @@ var Loader = function ( editor ) {
 
 				if ( result.isScene ) {
 
-					editor.execute( new SetSceneCommand( result ) );
+					editor.execute( new SetSceneCommand( editor, result ) );
 
 				} else {
 
-					editor.execute( new AddObjectCommand( result ) );
+					editor.execute( new AddObjectCommand( editor, result ) );
 
 				}
 
@@ -643,7 +643,7 @@ var Loader = function ( editor ) {
 
 			var materials = new THREE.MTLLoader().parse( zip.file( 'materials.mtl' ).asText() );
 			var object = new THREE.OBJLoader().setMaterials( materials ).parse( zip.file( 'model.obj' ).asText() );
-			editor.execute( new AddObjectCommand( object ) );
+			editor.execute( new AddObjectCommand( editor, object ) );
 
 		}
 
@@ -678,7 +678,7 @@ var Loader = function ( editor ) {
 					var loader = new THREE.FBXLoader( manager );
 					var object = loader.parse( file.asArrayBuffer() );
 
-					editor.execute( new AddObjectCommand( object ) );
+					editor.execute( new AddObjectCommand( editor, object ) );
 
 					break;
 
@@ -690,7 +690,7 @@ var Loader = function ( editor ) {
 						var scene = result.scene;
 
 						editor.addAnimation( scene, result.animations );
-						editor.execute( new AddObjectCommand( scene ) );
+						editor.execute( new AddObjectCommand( editor, scene ) );
 
 					} );
 

editor/js/Menubar.Add.js

@@ -28,7 +28,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Group();
 		mesh.name = 'Group';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -48,7 +48,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Box';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -64,7 +64,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Circle';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -80,7 +80,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Cylinder';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -96,7 +96,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Icosahedron';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -126,7 +126,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
 		mesh.name = 'Lathe';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -142,7 +142,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Octahedron';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -159,7 +159,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, material );
 		mesh.name = 'Plane';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option )
@@ -175,7 +175,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Ring';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -191,7 +191,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Sphere';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -206,7 +206,7 @@ Menubar.Add = function ( editor ) {
 		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
 		sprite.name = 'Sprite';
 
-		editor.execute( new AddObjectCommand( sprite ) );
+		editor.execute( new AddObjectCommand( editor, sprite ) );
 
 	} );
 	options.add( option );
@@ -222,7 +222,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Tetrahedron';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -238,7 +238,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Torus';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -254,7 +254,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'TorusKnot';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -277,7 +277,7 @@ Menubar.Add = function ( editor ) {
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		mesh.name = 'Tube';
 
-		editor.execute( new AddObjectCommand( mesh ) );
+		editor.execute( new AddObjectCommand( editor, mesh ) );
 
 	} );
 	options.add( option );
@@ -327,7 +327,7 @@ Menubar.Add = function ( editor ) {
 		var light = new THREE.AmbientLight( color );
 		light.name = 'AmbientLight';
 
-		editor.execute( new AddObjectCommand( light ) );
+		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
 	options.add( option );
@@ -348,7 +348,7 @@ Menubar.Add = function ( editor ) {
 
 		light.position.set( 5, 10, 7.5 );
 
-		editor.execute( new AddObjectCommand( light ) );
+		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
 	options.add( option );
@@ -369,7 +369,7 @@ Menubar.Add = function ( editor ) {
 
 		light.position.set( 0, 10, 0 );
 
-		editor.execute( new AddObjectCommand( light ) );
+		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
 	options.add( option );
@@ -388,7 +388,7 @@ Menubar.Add = function ( editor ) {
 		var light = new THREE.PointLight( color, intensity, distance );
 		light.name = 'PointLight';
 
-		editor.execute( new AddObjectCommand( light ) );
+		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
 	options.add( option );
@@ -412,7 +412,7 @@ Menubar.Add = function ( editor ) {
 
 		light.position.set( 5, 10, 7.5 );
 
-		editor.execute( new AddObjectCommand( light ) );
+		editor.execute( new AddObjectCommand( editor, light ) );
 
 	} );
 	options.add( option );
@@ -431,7 +431,7 @@ Menubar.Add = function ( editor ) {
 		var camera = new THREE.OrthographicCamera();
 		camera.name = 'OrthographicCamera';
 
-		editor.execute( new AddObjectCommand( camera ) );
+		editor.execute( new AddObjectCommand( editor, camera ) );
 
 	} );
 	options.add( option );
@@ -446,7 +446,7 @@ Menubar.Add = function ( editor ) {
 		var camera = new THREE.PerspectiveCamera();
 		camera.name = 'PerspectiveCamera';
 
-		editor.execute( new AddObjectCommand( camera ) );
+		editor.execute( new AddObjectCommand( editor, camera ) );
 
 	} );
 	options.add( option );

editor/js/Menubar.Edit.js

@@ -97,7 +97,7 @@ Menubar.Edit = function ( editor ) {
 
 		object = object.clone();
 
-		editor.execute( new AddObjectCommand( object ) );
+		editor.execute( new AddObjectCommand( editor, object ) );
 
 	} );
 	options.add( option );
@@ -114,7 +114,7 @@ Menubar.Edit = function ( editor ) {
 		var parent = object.parent;
 		if ( parent === undefined ) return; // avoid deleting the camera or scene
 
-		editor.execute( new RemoveObjectCommand( object ) );
+		editor.execute( new RemoveObjectCommand( editor, object ) );
 
 	} );
 	options.add( option );
@@ -158,8 +158,8 @@ Menubar.Edit = function ( editor ) {
 					var shader = glslprep.minifyGlsl( [
 							material.vertexShader, material.fragmentShader ] );
 
-					cmds.push( new SetMaterialValueCommand( object, 'vertexShader', shader[ 0 ] ) );
-					cmds.push( new SetMaterialValueCommand( object, 'fragmentShader', shader[ 1 ] ) );
+					cmds.push( new SetMaterialValueCommand( editor, object, 'vertexShader', shader[ 0 ] ) );
+					cmds.push( new SetMaterialValueCommand( editor, object, 'fragmentShader', shader[ 1 ] ) );
 
 					++nMaterialsChanged;
 
@@ -189,7 +189,7 @@ Menubar.Edit = function ( editor ) {
 
 		if ( nMaterialsChanged > 0 ) {
 
-			editor.execute( new MultiCmdsCommand( cmds ), 'Minify Shaders' );
+			editor.execute( new MultiCmdsCommand( editor, cmds ), 'Minify Shaders' );
 
 		}
 

editor/js/Script.js

@@ -86,7 +86,7 @@ var Script = function ( editor ) {
 
 				if ( value !== currentScript.source ) {
 
-					editor.execute( new SetScriptValueCommand( currentObject, currentScript, 'source', value ) );
+					editor.execute( new SetScriptValueCommand( editor, currentObject, currentScript, 'source', value ) );
 
 				}
 				return;
@@ -99,21 +99,21 @@ var Script = function ( editor ) {
 
 			if ( JSON.stringify( currentObject.material.defines ) !== JSON.stringify( json.defines ) ) {
 
-				var cmd = new SetMaterialValueCommand( currentObject, 'defines', json.defines );
+				var cmd = new SetMaterialValueCommand( editor, currentObject, 'defines', json.defines );
 				cmd.updatable = false;
 				editor.execute( cmd );
 
 			}
 			if ( JSON.stringify( currentObject.material.uniforms ) !== JSON.stringify( json.uniforms ) ) {
 
-				var cmd = new SetMaterialValueCommand( currentObject, 'uniforms', json.uniforms );
+				var cmd = new SetMaterialValueCommand( editor, currentObject, 'uniforms', json.uniforms );
 				cmd.updatable = false;
 				editor.execute( cmd );
 
 			}
 			if ( JSON.stringify( currentObject.material.attributes ) !== JSON.stringify( json.attributes ) ) {
 
-				var cmd = new SetMaterialValueCommand( currentObject, 'attributes', json.attributes );
+				var cmd = new SetMaterialValueCommand( editor, currentObject, 'attributes', json.attributes );
 				cmd.updatable = false;
 				editor.execute( cmd );
 

editor/js/Sidebar.Geometry.BoxGeometry.js

@@ -77,7 +77,7 @@ Sidebar.Geometry.BoxGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			width.getValue(),
 			height.getValue(),
 			depth.getValue(),

editor/js/Sidebar.Geometry.CircleGeometry.js

@@ -57,7 +57,7 @@ Sidebar.Geometry.CircleGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			segments.getValue(),
 			thetaStart.getValue() * THREE.Math.DEG2RAD,

editor/js/Sidebar.Geometry.CylinderGeometry.js

@@ -77,7 +77,7 @@ Sidebar.Geometry.CylinderGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radiusTop.getValue(),
 			radiusBottom.getValue(),
 			height.getValue(),

editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -113,7 +113,7 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			parameters.shapes,
 			{
 				curveSegments: curveSegments.getValue(),
@@ -131,7 +131,7 @@ Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
 
 	function toShape() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE.ShapeBufferGeometry(
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ShapeBufferGeometry(
 			parameters.shapes,
 			options.curveSegments
 		) ) );

editor/js/Sidebar.Geometry.IcosahedronGeometry.js

@@ -38,7 +38,7 @@ Sidebar.Geometry.IcosahedronGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			detail.getValue()
 		) ) );

editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -55,7 +55,7 @@ Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			points.getValue(),
 			segments.getValue(),
 			phiStart.getValue() / 180 * Math.PI,

editor/js/Sidebar.Geometry.OctahedronGeometry.js

@@ -38,7 +38,7 @@ Sidebar.Geometry.OctahedronGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			detail.getValue()
 		) ) );

editor/js/Sidebar.Geometry.PlaneGeometry.js

@@ -58,7 +58,7 @@ Sidebar.Geometry.PlaneGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			width.getValue(),
 			height.getValue(),
 			widthSegments.getValue(),

editor/js/Sidebar.Geometry.RingGeometry.js

@@ -77,7 +77,7 @@ Sidebar.Geometry.RingGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			innerRadius.getValue(),
 			outerRadius.getValue(),
 			thetaSegments.getValue(),

editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -31,7 +31,7 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
 	function changeShape() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			parameters.shapes,
 			curveSegments.getValue()
 		) ) );
@@ -40,7 +40,7 @@ Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
 
 	function toExtrude() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE.ExtrudeBufferGeometry(
+		editor.execute( new SetGeometryCommand( editor, object, new THREE.ExtrudeBufferGeometry(
 			parameters.shapes, {
 				curveSegments: curveSegments.getValue()
 			}

editor/js/Sidebar.Geometry.SphereGeometry.js

@@ -88,7 +88,7 @@ Sidebar.Geometry.SphereGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			widthSegments.getValue(),
 			heightSegments.getValue(),

editor/js/Sidebar.Geometry.TetrahedronGeometry.js

@@ -39,7 +39,7 @@ Sidebar.Geometry.TetrahedronGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			detail.getValue()
 		) ) );

editor/js/Sidebar.Geometry.TorusGeometry.js

@@ -68,7 +68,7 @@ Sidebar.Geometry.TorusGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			tube.getValue(),
 			radialSegments.getValue(),

editor/js/Sidebar.Geometry.TorusKnotGeometry.js

@@ -78,7 +78,7 @@ Sidebar.Geometry.TorusKnotGeometry = function ( editor, object ) {
 
 	function update() {
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			radius.getValue(),
 			tube.getValue(),
 			tubularSegments.getValue(),

editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -87,7 +87,7 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
-		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+		editor.execute( new SetGeometryCommand( editor, object, new THREE[ geometry.type ](
 			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 			tubularSegments.getValue(),
 			radius.getValue(),

editor/js/Sidebar.Geometry.js

@@ -47,7 +47,7 @@ Sidebar.Geometry = function ( editor ) {
 
 				var newPosition = object.position.clone();
 				newPosition.sub( offset );
-				editor.execute( new SetPositionCommand( object, newPosition ) );
+				editor.execute( new SetPositionCommand( editor, object, newPosition ) );
 
 				editor.signals.geometryChanged.dispatch( object );
 
@@ -57,7 +57,7 @@ Sidebar.Geometry = function ( editor ) {
 
 				if ( geometry && geometry.isGeometry ) {
 
-					editor.execute( new SetGeometryCommand( object, new THREE.BufferGeometry().fromGeometry( geometry ) ) );
+					editor.execute( new SetGeometryCommand( editor, object, new THREE.BufferGeometry().fromGeometry( geometry ) ) );
 
 				}
 
@@ -69,12 +69,12 @@ Sidebar.Geometry = function ( editor ) {
 				newGeometry.uuid = geometry.uuid;
 				newGeometry.applyMatrix( object.matrix );
 
-				var cmds = [ new SetGeometryCommand( object, newGeometry ),
-					new SetPositionCommand( object, new THREE.Vector3( 0, 0, 0 ) ),
-					new SetRotationCommand( object, new THREE.Euler( 0, 0, 0 ) ),
-					new SetScaleCommand( object, new THREE.Vector3( 1, 1, 1 ) ) ];
+				var cmds = [ new SetGeometryCommand( editor, object, newGeometry ),
+					new SetPositionCommand( editor, object, new THREE.Vector3( 0, 0, 0 ) ),
+					new SetRotationCommand( editor, object, new THREE.Euler( 0, 0, 0 ) ),
+					new SetScaleCommand( editor, object, new THREE.Vector3( 1, 1, 1 ) ) ];
 
-				editor.execute( new MultiCmdsCommand( cmds ), 'Flatten Geometry' );
+				editor.execute( new MultiCmdsCommand( editor, cmds ), 'Flatten Geometry' );
 
 				break;
 
@@ -104,7 +104,7 @@ Sidebar.Geometry = function ( editor ) {
 
 		geometryUUID.setValue( THREE.Math.generateUUID() );
 
-		editor.execute( new SetGeometryValueCommand( editor.selected, 'uuid', geometryUUID.getValue() ) );
+		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'uuid', geometryUUID.getValue() ) );
 
 	} );
 
@@ -119,7 +119,7 @@ Sidebar.Geometry = function ( editor ) {
 	var geometryNameRow = new UI.Row();
 	var geometryName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
-		editor.execute( new SetGeometryValueCommand( editor.selected, 'name', geometryName.getValue() ) );
+		editor.execute( new SetGeometryValueCommand( editor, editor.selected, 'name', geometryName.getValue() ) );
 
 	} );
 

editor/js/Sidebar.Material.js

@@ -40,7 +40,7 @@ Sidebar.Material = function ( editor ) {
 	managerRow.add( new UI.Button( strings.getKey( 'sidebar/material/new' ) ).onClick( function () {
 
 		var material = new THREE[ materialClass.getValue() ]();
-		editor.execute( new SetMaterialCommand( currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
+		editor.execute( new SetMaterialCommand( editor, currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
 		update();
 
 	} ) );
@@ -63,7 +63,7 @@ Sidebar.Material = function ( editor ) {
 
 		if ( copiedMaterial === undefined ) return;
 
-		editor.execute( new SetMaterialCommand( currentObject, copiedMaterial, currentMaterialSlot ), 'Pasted Material: ' + materialClass.getValue() );
+		editor.execute( new SetMaterialCommand( editor, currentObject, copiedMaterial, currentMaterialSlot ), 'Pasted Material: ' + materialClass.getValue() );
 		refreshUI();
 		update();
 
@@ -122,7 +122,7 @@ Sidebar.Material = function ( editor ) {
 	var materialNameRow = new UI.Row();
 	var materialName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
-		editor.execute( new SetMaterialValueCommand( editor.selected, 'name', materialName.getValue(), currentMaterialSlot ) );
+		editor.execute( new SetMaterialValueCommand( editor, editor.selected, 'name', materialName.getValue(), currentMaterialSlot ) );
 
 	} );
 
@@ -575,7 +575,7 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.uuid !== undefined && material.uuid !== materialUUID.getValue() ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'uuid', materialUUID.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'uuid', materialUUID.getValue(), currentMaterialSlot ) );
 
 			}
 
@@ -589,7 +589,7 @@ Sidebar.Material = function ( editor ) {
 
 				}
 
-				editor.execute( new SetMaterialCommand( currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
+				editor.execute( new SetMaterialCommand( editor, currentObject, material, currentMaterialSlot ), 'New Material: ' + materialClass.getValue() );
 				// TODO Copy other references in the scene graph
 				// keeping name and UUID then.
 				// Also there should be means to create a unique
@@ -600,49 +600,49 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.color !== undefined && material.color.getHex() !== materialColor.getHexValue() ) {
 
-				editor.execute( new SetMaterialColorCommand( currentObject, 'color', materialColor.getHexValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'color', materialColor.getHexValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.roughness !== undefined && Math.abs( material.roughness - materialRoughness.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'roughness', materialRoughness.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'roughness', materialRoughness.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.metalness !== undefined && Math.abs( material.metalness - materialMetalness.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'metalness', materialMetalness.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'metalness', materialMetalness.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.emissive !== undefined && material.emissive.getHex() !== materialEmissive.getHexValue() ) {
 
-				editor.execute( new SetMaterialColorCommand( currentObject, 'emissive', materialEmissive.getHexValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'emissive', materialEmissive.getHexValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.specular !== undefined && material.specular.getHex() !== materialSpecular.getHexValue() ) {
 
-				editor.execute( new SetMaterialColorCommand( currentObject, 'specular', materialSpecular.getHexValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialColorCommand( editor, currentObject, 'specular', materialSpecular.getHexValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.shininess !== undefined && Math.abs( material.shininess - materialShininess.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'shininess', materialShininess.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'shininess', materialShininess.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.clearCoat !== undefined && Math.abs( material.clearCoat - materialClearCoat.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoat', materialClearCoat.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'clearCoat', materialClearCoat.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.clearCoatRoughness !== undefined && Math.abs( material.clearCoatRoughness - materialClearCoatRoughness.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'clearCoatRoughness', materialClearCoatRoughness.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'clearCoatRoughness', materialClearCoatRoughness.getValue(), currentMaterialSlot ) );
 
 			}
 
@@ -652,7 +652,7 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.vertexColors !== vertexColors ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'vertexColors', vertexColors, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'vertexColors', vertexColors, currentMaterialSlot ) );
 
 				}
 
@@ -663,7 +663,7 @@ Sidebar.Material = function ( editor ) {
 				var depthPacking = parseInt( materialDepthPacking.getValue() );
 				if ( material.depthPacking !== depthPacking ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'depthPacking', depthPacking, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'depthPacking', depthPacking, currentMaterialSlot ) );
 
 				}
 
@@ -671,7 +671,7 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.skinning !== undefined && material.skinning !== materialSkinning.getValue() ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'skinning', materialSkinning.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'skinning', materialSkinning.getValue(), currentMaterialSlot ) );
 
 			}
 
@@ -684,7 +684,7 @@ Sidebar.Material = function ( editor ) {
 					var map = mapEnabled ? materialMap.getValue() : null;
 					if ( material.map !== map ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'map', map, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'map', map, currentMaterialSlot ) );
 
 					}
 
@@ -705,7 +705,7 @@ Sidebar.Material = function ( editor ) {
 					var matcap = mapEnabled ? materialMatcapMap.getValue() : null;
 					if ( material.matcap !== matcap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'matcap', matcap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'matcap', matcap, currentMaterialSlot ) );
 
 					}
 
@@ -726,7 +726,7 @@ Sidebar.Material = function ( editor ) {
 					var alphaMap = mapEnabled ? materialAlphaMap.getValue() : null;
 					if ( material.alphaMap !== alphaMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'alphaMap', alphaMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'alphaMap', alphaMap, currentMaterialSlot ) );
 
 					}
 
@@ -747,13 +747,13 @@ Sidebar.Material = function ( editor ) {
 					var bumpMap = bumpMapEnabled ? materialBumpMap.getValue() : null;
 					if ( material.bumpMap !== bumpMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'bumpMap', bumpMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'bumpMap', bumpMap, currentMaterialSlot ) );
 
 					}
 
 					if ( material.bumpScale !== materialBumpScale.getValue() ) {
 
-						editor.execute( new SetMaterialValueCommand( currentObject, 'bumpScale', materialBumpScale.getValue(), currentMaterialSlot ) );
+						editor.execute( new SetMaterialValueCommand( editor, currentObject, 'bumpScale', materialBumpScale.getValue(), currentMaterialSlot ) );
 
 					}
 
@@ -774,7 +774,7 @@ Sidebar.Material = function ( editor ) {
 					var normalMap = normalMapEnabled ? materialNormalMap.getValue() : null;
 					if ( material.normalMap !== normalMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'normalMap', normalMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'normalMap', normalMap, currentMaterialSlot ) );
 
 					}
 
@@ -795,13 +795,13 @@ Sidebar.Material = function ( editor ) {
 					var displacementMap = displacementMapEnabled ? materialDisplacementMap.getValue() : null;
 					if ( material.displacementMap !== displacementMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'displacementMap', displacementMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'displacementMap', displacementMap, currentMaterialSlot ) );
 
 					}
 
 					if ( material.displacementScale !== materialDisplacementScale.getValue() ) {
 
-						editor.execute( new SetMaterialValueCommand( currentObject, 'displacementScale', materialDisplacementScale.getValue(), currentMaterialSlot ) );
+						editor.execute( new SetMaterialValueCommand( editor, currentObject, 'displacementScale', materialDisplacementScale.getValue(), currentMaterialSlot ) );
 
 					}
 
@@ -822,7 +822,7 @@ Sidebar.Material = function ( editor ) {
 					var roughnessMap = roughnessMapEnabled ? materialRoughnessMap.getValue() : null;
 					if ( material.roughnessMap !== roughnessMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'roughnessMap', roughnessMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'roughnessMap', roughnessMap, currentMaterialSlot ) );
 
 					}
 
@@ -843,7 +843,7 @@ Sidebar.Material = function ( editor ) {
 					var metalnessMap = metalnessMapEnabled ? materialMetalnessMap.getValue() : null;
 					if ( material.metalnessMap !== metalnessMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'metalnessMap', metalnessMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'metalnessMap', metalnessMap, currentMaterialSlot ) );
 
 					}
 
@@ -864,7 +864,7 @@ Sidebar.Material = function ( editor ) {
 					var specularMap = specularMapEnabled ? materialSpecularMap.getValue() : null;
 					if ( material.specularMap !== specularMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'specularMap', specularMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'specularMap', specularMap, currentMaterialSlot ) );
 
 					}
 
@@ -884,7 +884,7 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.envMap !== envMap ) {
 
-					editor.execute( new SetMaterialMapCommand( currentObject, 'envMap', envMap, currentMaterialSlot ) );
+					editor.execute( new SetMaterialMapCommand( editor, currentObject, 'envMap', envMap, currentMaterialSlot ) );
 
 				}
 
@@ -896,7 +896,7 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.reflectivity !== reflectivity ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'reflectivity', reflectivity, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'reflectivity', reflectivity, currentMaterialSlot ) );
 
 				}
 
@@ -911,7 +911,7 @@ Sidebar.Material = function ( editor ) {
 					var lightMap = lightMapEnabled ? materialLightMap.getValue() : null;
 					if ( material.lightMap !== lightMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'lightMap', lightMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'lightMap', lightMap, currentMaterialSlot ) );
 
 					}
 
@@ -932,13 +932,13 @@ Sidebar.Material = function ( editor ) {
 					var aoMap = aoMapEnabled ? materialAOMap.getValue() : null;
 					if ( material.aoMap !== aoMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'aoMap', aoMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'aoMap', aoMap, currentMaterialSlot ) );
 
 					}
 
 					if ( material.aoMapIntensity !== materialAOScale.getValue() ) {
 
-						editor.execute( new SetMaterialValueCommand( currentObject, 'aoMapIntensity', materialAOScale.getValue(), currentMaterialSlot ) );
+						editor.execute( new SetMaterialValueCommand( editor, currentObject, 'aoMapIntensity', materialAOScale.getValue(), currentMaterialSlot ) );
 
 					}
 
@@ -959,7 +959,7 @@ Sidebar.Material = function ( editor ) {
 					var emissiveMap = emissiveMapEnabled ? materialEmissiveMap.getValue() : null;
 					if ( material.emissiveMap !== emissiveMap ) {
 
-						editor.execute( new SetMaterialMapCommand( currentObject, 'emissiveMap', emissiveMap, currentMaterialSlot ) );
+						editor.execute( new SetMaterialMapCommand( editor, currentObject, 'emissiveMap', emissiveMap, currentMaterialSlot ) );
 
 					}
 
@@ -979,7 +979,7 @@ Sidebar.Material = function ( editor ) {
 
 				if ( material.gradientMap !== gradientMap ) {
 
-					editor.execute( new SetMaterialMapCommand( currentObject, 'gradientMap', gradientMap, currentMaterialSlot ) );
+					editor.execute( new SetMaterialMapCommand( editor, currentObject, 'gradientMap', gradientMap, currentMaterialSlot ) );
 
 				}
 
@@ -990,7 +990,7 @@ Sidebar.Material = function ( editor ) {
 				var side = parseInt( materialSide.getValue() );
 				if ( material.side !== side ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'side', side, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'side', side, currentMaterialSlot ) );
 
 				}
 
@@ -1002,7 +1002,7 @@ Sidebar.Material = function ( editor ) {
 				var flatShading = materialShading.getValue();
 				if ( material.flatShading != flatShading ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'flatShading', flatShading, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'flatShading', flatShading, currentMaterialSlot ) );
 
 				}
 
@@ -1013,7 +1013,7 @@ Sidebar.Material = function ( editor ) {
 				var blending = parseInt( materialBlending.getValue() );
 				if ( material.blending !== blending ) {
 
-					editor.execute( new SetMaterialValueCommand( currentObject, 'blending', blending, currentMaterialSlot ) );
+					editor.execute( new SetMaterialValueCommand( editor, currentObject, 'blending', blending, currentMaterialSlot ) );
 
 				}
 
@@ -1021,31 +1021,31 @@ Sidebar.Material = function ( editor ) {
 
 			if ( material.opacity !== undefined && Math.abs( material.opacity - materialOpacity.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'opacity', materialOpacity.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'opacity', materialOpacity.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.transparent !== undefined && material.transparent !== materialTransparent.getValue() ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'transparent', materialTransparent.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'transparent', materialTransparent.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.alphaTest !== undefined && Math.abs( material.alphaTest - materialAlphaTest.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'alphaTest', materialAlphaTest.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'alphaTest', materialAlphaTest.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.wireframe !== undefined && material.wireframe !== materialWireframe.getValue() ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'wireframe', materialWireframe.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'wireframe', materialWireframe.getValue(), currentMaterialSlot ) );
 
 			}
 
 			if ( material.wireframeLinewidth !== undefined && Math.abs( material.wireframeLinewidth - materialWireframeLinewidth.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetMaterialValueCommand( currentObject, 'wireframeLinewidth', materialWireframeLinewidth.getValue(), currentMaterialSlot ) );
+				editor.execute( new SetMaterialValueCommand( editor, currentObject, 'wireframeLinewidth', materialWireframeLinewidth.getValue(), currentMaterialSlot ) );
 
 			}
 

editor/js/Sidebar.Object.js

@@ -37,15 +37,15 @@ Sidebar.Object = function ( editor ) {
 		switch ( this.getValue() ) {
 
 			case 'Reset Position':
-				editor.execute( new SetPositionCommand( object, new THREE.Vector3( 0, 0, 0 ) ) );
+				editor.execute( new SetPositionCommand( editor, object, new THREE.Vector3( 0, 0, 0 ) ) );
 				break;
 
 			case 'Reset Rotation':
-				editor.execute( new SetRotationCommand( object, new THREE.Euler( 0, 0, 0 ) ) );
+				editor.execute( new SetRotationCommand( editor, object, new THREE.Euler( 0, 0, 0 ) ) );
 				break;
 
 			case 'Reset Scale':
-				editor.execute( new SetScaleCommand( object, new THREE.Vector3( 1, 1, 1 ) ) );
+				editor.execute( new SetScaleCommand( editor, object, new THREE.Vector3( 1, 1, 1 ) ) );
 				break;
 
 		}
@@ -74,7 +74,7 @@ Sidebar.Object = function ( editor ) {
 
 		objectUUID.setValue( THREE.Math.generateUUID() );
 
-		editor.execute( new SetUuidCommand( editor.selected, objectUUID.getValue() ) );
+		editor.execute( new SetUuidCommand( editor, editor.selected, objectUUID.getValue() ) );
 
 	} );
 
@@ -89,7 +89,7 @@ Sidebar.Object = function ( editor ) {
 	var objectNameRow = new UI.Row();
 	var objectName = new UI.Input().setWidth( '150px' ).setFontSize( '12px' ).onChange( function () {
 
-		editor.execute( new SetValueCommand( editor.selected, 'name', objectName.getValue() ) );
+		editor.execute( new SetValueCommand( editor, editor.selected, 'name', objectName.getValue() ) );
 
 	} );
 
@@ -415,62 +415,62 @@ Sidebar.Object = function ( editor ) {
 			var newPosition = new THREE.Vector3( objectPositionX.getValue(), objectPositionY.getValue(), objectPositionZ.getValue() );
 			if ( object.position.distanceTo( newPosition ) >= 0.01 ) {
 
-				editor.execute( new SetPositionCommand( object, newPosition ) );
+				editor.execute( new SetPositionCommand( editor, object, newPosition ) );
 
 			}
 
 			var newRotation = new THREE.Euler( objectRotationX.getValue() * THREE.Math.DEG2RAD, objectRotationY.getValue() * THREE.Math.DEG2RAD, objectRotationZ.getValue() * THREE.Math.DEG2RAD );
 			if ( object.rotation.toVector3().distanceTo( newRotation.toVector3() ) >= 0.01 ) {
 
-				editor.execute( new SetRotationCommand( object, newRotation ) );
+				editor.execute( new SetRotationCommand( editor, object, newRotation ) );
 
 			}
 
 			var newScale = new THREE.Vector3( objectScaleX.getValue(), objectScaleY.getValue(), objectScaleZ.getValue() );
 			if ( object.scale.distanceTo( newScale ) >= 0.01 ) {
 
-				editor.execute( new SetScaleCommand( object, newScale ) );
+				editor.execute( new SetScaleCommand( editor, object, newScale ) );
 
 			}
 
 			if ( object.fov !== undefined && Math.abs( object.fov - objectFov.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'fov', objectFov.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'fov', objectFov.getValue() ) );
 				object.updateProjectionMatrix();
 
 			}
 
 			if ( object.left !== undefined && Math.abs( object.left - objectLeft.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'left', objectLeft.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'left', objectLeft.getValue() ) );
 				object.updateProjectionMatrix();
 
 			}
 
 			if ( object.right !== undefined && Math.abs( object.right - objectRight.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'right', objectRight.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'right', objectRight.getValue() ) );
 				object.updateProjectionMatrix();
 
 			}
 
 			if ( object.top !== undefined && Math.abs( object.top - objectTop.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'top', objectTop.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'top', objectTop.getValue() ) );
 				object.updateProjectionMatrix();
 
 			}
 
 			if ( object.bottom !== undefined && Math.abs( object.bottom - objectBottom.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'bottom', objectBottom.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'bottom', objectBottom.getValue() ) );
 				object.updateProjectionMatrix();
 
 			}
 
 			if ( object.near !== undefined && Math.abs( object.near - objectNear.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'near', objectNear.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'near', objectNear.getValue() ) );
 				if ( object.isOrthographicCamera ) {
 
 					object.updateProjectionMatrix();
@@ -481,7 +481,7 @@ Sidebar.Object = function ( editor ) {
 
 			if ( object.far !== undefined && Math.abs( object.far - objectFar.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'far', objectFar.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'far', objectFar.getValue() ) );
 				if ( object.isOrthographicCamera ) {
 
 					object.updateProjectionMatrix();
@@ -492,74 +492,74 @@ Sidebar.Object = function ( editor ) {
 
 			if ( object.intensity !== undefined && Math.abs( object.intensity - objectIntensity.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'intensity', objectIntensity.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'intensity', objectIntensity.getValue() ) );
 
 			}
 
 			if ( object.color !== undefined && object.color.getHex() !== objectColor.getHexValue() ) {
 
-				editor.execute( new SetColorCommand( object, 'color', objectColor.getHexValue() ) );
+				editor.execute( new SetColorCommand( editor, object, 'color', objectColor.getHexValue() ) );
 
 			}
 
 			if ( object.groundColor !== undefined && object.groundColor.getHex() !== objectGroundColor.getHexValue() ) {
 
-				editor.execute( new SetColorCommand( object, 'groundColor', objectGroundColor.getHexValue() ) );
+				editor.execute( new SetColorCommand( editor, object, 'groundColor', objectGroundColor.getHexValue() ) );
 
 			}
 
 			if ( object.distance !== undefined && Math.abs( object.distance - objectDistance.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'distance', objectDistance.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'distance', objectDistance.getValue() ) );
 
 			}
 
 			if ( object.angle !== undefined && Math.abs( object.angle - objectAngle.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'angle', objectAngle.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'angle', objectAngle.getValue() ) );
 
 			}
 
 			if ( object.penumbra !== undefined && Math.abs( object.penumbra - objectPenumbra.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'penumbra', objectPenumbra.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'penumbra', objectPenumbra.getValue() ) );
 
 			}
 
 			if ( object.decay !== undefined && Math.abs( object.decay - objectDecay.getValue() ) >= 0.01 ) {
 
-				editor.execute( new SetValueCommand( object, 'decay', objectDecay.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'decay', objectDecay.getValue() ) );
 
 			}
 
 			if ( object.visible !== objectVisible.getValue() ) {
 
-				editor.execute( new SetValueCommand( object, 'visible', objectVisible.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'visible', objectVisible.getValue() ) );
 
 			}
 
 			if ( object.frustumCulled !== objectFrustumCulled.getValue() ) {
 
-				editor.execute( new SetValueCommand( object, 'frustumCulled', objectFrustumCulled.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'frustumCulled', objectFrustumCulled.getValue() ) );
 
 			}
 
 			if ( object.renderOrder !== objectRenderOrder.getValue() ) {
 
-				editor.execute( new SetValueCommand( object, 'renderOrder', objectRenderOrder.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'renderOrder', objectRenderOrder.getValue() ) );
 
 			}
 
 			if ( object.castShadow !== undefined && object.castShadow !== objectCastShadow.getValue() ) {
 
-				editor.execute( new SetValueCommand( object, 'castShadow', objectCastShadow.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'castShadow', objectCastShadow.getValue() ) );
 
 			}
 
 			if ( object.receiveShadow !== undefined && object.receiveShadow !== objectReceiveShadow.getValue() ) {
 
 				object.material.needsUpdate = true;
-				editor.execute( new SetValueCommand( object, 'receiveShadow', objectReceiveShadow.getValue() ) );
+				editor.execute( new SetValueCommand( editor, object, 'receiveShadow', objectReceiveShadow.getValue() ) );
 
 			}
 
@@ -567,7 +567,7 @@ Sidebar.Object = function ( editor ) {
 
 				if ( object.shadow.radius !== objectShadowRadius.getValue() ) {
 
-					editor.execute( new SetValueCommand( object.shadow, 'radius', objectShadowRadius.getValue() ) );
+					editor.execute( new SetValueCommand( editor, object.shadow, 'radius', objectShadowRadius.getValue() ) );
 
 				}
 
@@ -578,7 +578,7 @@ Sidebar.Object = function ( editor ) {
 				var userData = JSON.parse( objectUserData.getValue() );
 				if ( JSON.stringify( object.userData ) != JSON.stringify( userData ) ) {
 
-					editor.execute( new SetValueCommand( object, 'userData', userData ) );
+					editor.execute( new SetValueCommand( editor, object, 'userData', userData ) );
 
 				}
 

editor/js/Sidebar.Script.js

@@ -24,7 +24,7 @@ Sidebar.Script = function ( editor ) {
 	newScript.onClick( function () {
 
 		var script = { name: '', source: 'function update( event ) {}' };
-		editor.execute( new AddScriptCommand( editor.selected, script ) );
+		editor.execute( new AddScriptCommand( editor, editor.selected, script ) );
 
 	} );
 	container.add( newScript );
@@ -63,7 +63,7 @@ Sidebar.Script = function ( editor ) {
 					var name = new UI.Input( script.name ).setWidth( '130px' ).setFontSize( '12px' );
 					name.onChange( function () {
 
-						editor.execute( new SetScriptValueCommand( editor.selected, script, 'name', this.getValue() ) );
+						editor.execute( new SetScriptValueCommand( editor, editor.selected, script, 'name', this.getValue() ) );
 
 					} );
 					scriptsContainer.add( name );
@@ -83,7 +83,7 @@ Sidebar.Script = function ( editor ) {
 
 						if ( confirm( 'Are you sure?' ) ) {
 
-							editor.execute( new RemoveScriptCommand( editor.selected, script ) );
+							editor.execute( new RemoveScriptCommand( editor, editor.selected, script ) );
 
 						}
 

editor/js/Sidebar.Settings.Shortcuts.js

@@ -108,7 +108,7 @@ Sidebar.Settings.Shortcuts = function ( editor ) {
 				if ( object === null ) return;
 
 				var parent = object.parent;
-				if ( parent !== null ) editor.execute( new RemoveObjectCommand( object ) );
+				if ( parent !== null ) editor.execute( new RemoveObjectCommand( editor, object ) );
 
 				break;
 

editor/js/Viewport.js

@@ -99,7 +99,7 @@ var Viewport = function ( editor ) {
 
 					if ( ! objectPositionOnDown.equals( object.position ) ) {
 
-						editor.execute( new SetPositionCommand( object, object.position, objectPositionOnDown ) );
+						editor.execute( new SetPositionCommand( editor, object, object.position, objectPositionOnDown ) );
 
 					}
 
@@ -109,7 +109,7 @@ var Viewport = function ( editor ) {
 
 					if ( ! objectRotationOnDown.equals( object.rotation ) ) {
 
-						editor.execute( new SetRotationCommand( object, object.rotation, objectRotationOnDown ) );
+						editor.execute( new SetRotationCommand( editor, object, object.rotation, objectRotationOnDown ) );
 
 					}
 
@@ -119,7 +119,7 @@ var Viewport = function ( editor ) {
 
 					if ( ! objectScaleOnDown.equals( object.scale ) ) {
 
-						editor.execute( new SetScaleCommand( object, object.scale, objectScaleOnDown ) );
+						editor.execute( new SetScaleCommand( editor, object, object.scale, objectScaleOnDown ) );
 
 					}
 

editor/js/commands/AddObjectCommand.js

@@ -4,13 +4,14 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @constructor
  */
 
-var AddObjectCommand = function ( object ) {
+var AddObjectCommand = function ( editor, object ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'AddObjectCommand';
 

editor/js/commands/AddScriptCommand.js

@@ -4,14 +4,15 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param script javascript object
  * @constructor
  */
 
-var AddScriptCommand = function ( object, script ) {
+var AddScriptCommand = function ( editor, object, script ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'AddScriptCommand';
 	this.name = 'Add Script';

editor/js/commands/MoveObjectCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newParent THREE.Object3D
  * @param newBefore THREE.Object3D
  * @constructor
  */
 
-var MoveObjectCommand = function ( object, newParent, newBefore ) {
+var MoveObjectCommand = function ( editor, object, newParent, newBefore ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'MoveObjectCommand';
 	this.name = 'Move Object';

editor/js/commands/MultiCmdsCommand.js

@@ -4,13 +4,14 @@
  */
 
 /**
+ * @param editor Editor
  * @param cmdArray array containing command objects
  * @constructor
  */
 
-var MultiCmdsCommand = function ( cmdArray ) {
+var MultiCmdsCommand = function ( editor, cmdArray ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'MultiCmdsCommand';
 	this.name = 'Multiple Changes';

editor/js/commands/RemoveObjectCommand.js

@@ -4,13 +4,14 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @constructor
  */
 
-var RemoveObjectCommand = function ( object ) {
+var RemoveObjectCommand = function ( editor, object ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'RemoveObjectCommand';
 	this.name = 'Remove Object';

editor/js/commands/RemoveScriptCommand.js

@@ -4,14 +4,15 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param script javascript object
  * @constructor
  */
 
-var RemoveScriptCommand = function ( object, script ) {
+var RemoveScriptCommand = function ( editor, object, script ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'RemoveScriptCommand';
 	this.name = 'Remove Script';

editor/js/commands/SetColorCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param attributeName string
  * @param newValue integer representing a hex color value
  * @constructor
  */
 
-var SetColorCommand = function ( object, attributeName, newValue ) {
+var SetColorCommand = function ( editor, object, attributeName, newValue ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetColorCommand';
 	this.name = 'Set ' + attributeName;

editor/js/commands/SetGeometryCommand.js

@@ -4,14 +4,15 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newGeometry THREE.Geometry
  * @constructor
  */
 
-var SetGeometryCommand = function ( object, newGeometry ) {
+var SetGeometryCommand = function ( editor, object, newGeometry ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetGeometryCommand';
 	this.name = 'Set Geometry';

editor/js/commands/SetGeometryValueCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param attributeName string
  * @param newValue number, string, boolean or object
  * @constructor
  */
 
-var SetGeometryValueCommand = function ( object, attributeName, newValue ) {
+var SetGeometryValueCommand = function ( editor, object, attributeName, newValue ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetGeometryValueCommand';
 	this.name = 'Set Geometry.' + attributeName;

editor/js/commands/SetMaterialColorCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param attributeName string
  * @param newValue integer representing a hex color value
  * @constructor
  */
 
-var SetMaterialColorCommand = function ( object, attributeName, newValue, materialSlot ) {
+var SetMaterialColorCommand = function ( editor, object, attributeName, newValue, materialSlot ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetMaterialColorCommand';
 	this.name = 'Set Material.' + attributeName;

editor/js/commands/SetMaterialCommand.js

@@ -4,15 +4,15 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newMaterial THREE.Material
  * @constructor
  */
 
+var SetMaterialCommand = function ( editor, object, newMaterial, materialSlot ) {
 
-var SetMaterialCommand = function ( object, newMaterial, materialSlot ) {
-
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetMaterialCommand';
 	this.name = 'New Material';

editor/js/commands/SetMaterialMapCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param mapName string
  * @param newMap THREE.Texture
  * @constructor
  */
 
-var SetMaterialMapCommand = function ( object, mapName, newMap, materialSlot ) {
+var SetMaterialMapCommand = function ( editor, object, mapName, newMap, materialSlot ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetMaterialMapCommand';
 	this.name = 'Set Material.' + mapName;

editor/js/commands/SetMaterialValueCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param attributeName string
  * @param newValue number, string, boolean or object
  * @constructor
  */
 
-var SetMaterialValueCommand = function ( object, attributeName, newValue, materialSlot ) {
+var SetMaterialValueCommand = function ( editor, object, attributeName, newValue, materialSlot ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetMaterialValueCommand';
 	this.name = 'Set Material.' + attributeName;

editor/js/commands/SetPositionCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newPosition THREE.Vector3
  * @param optionalOldPosition THREE.Vector3
  * @constructor
  */
 
-var SetPositionCommand = function ( object, newPosition, optionalOldPosition ) {
+var SetPositionCommand = function ( editor, object, newPosition, optionalOldPosition ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetPositionCommand';
 	this.name = 'Set Position';

editor/js/commands/SetRotationCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newRotation THREE.Euler
  * @param optionalOldRotation THREE.Euler
  * @constructor
  */
 
-var SetRotationCommand = function ( object, newRotation, optionalOldRotation ) {
+var SetRotationCommand = function ( editor, object, newRotation, optionalOldRotation ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetRotationCommand';
 	this.name = 'Set Rotation';

editor/js/commands/SetScaleCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newScale THREE.Vector3
  * @param optionalOldScale THREE.Vector3
  * @constructor
  */
 
-var SetScaleCommand = function ( object, newScale, optionalOldScale ) {
+var SetScaleCommand = function ( editor, object, newScale, optionalOldScale ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetScaleCommand';
 	this.name = 'Set Scale';

editor/js/commands/SetSceneCommand.js

@@ -4,13 +4,14 @@
  */
 
 /**
+ * @param editor Editor
  * @param scene containing children to import
  * @constructor
  */
 
-var SetSceneCommand = function ( scene ) {
+var SetSceneCommand = function ( editor, scene ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetSceneCommand';
 	this.name = 'Set Scene';
@@ -19,14 +20,14 @@ var SetSceneCommand = function ( scene ) {
 
 	if ( scene !== undefined ) {
 
-		this.cmdArray.push( new SetUuidCommand( this.editor.scene, scene.uuid ) );
-		this.cmdArray.push( new SetValueCommand( this.editor.scene, 'name', scene.name ) );
-		this.cmdArray.push( new SetValueCommand( this.editor.scene, 'userData', JSON.parse( JSON.stringify( scene.userData ) ) ) );
+		this.cmdArray.push( new SetUuidCommand( this.editor, this.editor.scene, scene.uuid ) );
+		this.cmdArray.push( new SetValueCommand( this.editor, this.editor.scene, 'name', scene.name ) );
+		this.cmdArray.push( new SetValueCommand( this.editor, this.editor.scene, 'userData', JSON.parse( JSON.stringify( scene.userData ) ) ) );
 
 		while ( scene.children.length > 0 ) {
 
 			var child = scene.children.pop();
-			this.cmdArray.push( new AddObjectCommand( child ) );
+			this.cmdArray.push( new AddObjectCommand( this.editor, child ) );
 
 		}
 

editor/js/commands/SetScriptValueCommand.js

@@ -4,6 +4,7 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param script javascript object
  * @param attributeName string
@@ -11,9 +12,9 @@
  * @constructor
  */
 
-var SetScriptValueCommand = function ( object, script, attributeName, newValue ) {
+var SetScriptValueCommand = function ( editor, object, script, attributeName, newValue ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetScriptValueCommand';
 	this.name = 'Set Script.' + attributeName;

editor/js/commands/SetUuidCommand.js

@@ -4,14 +4,15 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param newUuid string
  * @constructor
  */
 
-var SetUuidCommand = function ( object, newUuid ) {
+var SetUuidCommand = function ( editor, object, newUuid ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetUuidCommand';
 	this.name = 'Update UUID';

editor/js/commands/SetValueCommand.js

@@ -4,15 +4,16 @@
  */
 
 /**
+ * @param editor Editor
  * @param object THREE.Object3D
  * @param attributeName string
  * @param newValue number, string, boolean or object
  * @constructor
  */
 
-var SetValueCommand = function ( object, attributeName, newValue ) {
+var SetValueCommand = function ( editor, object, attributeName, newValue ) {
 
-	Command.call( this );
+	Command.call( this, editor );
 
 	this.type = 'SetValueCommand';
 	this.name = 'Set ' + attributeName;

editor/js/libs/ui.three.js

@@ -365,7 +365,7 @@ UI.Outliner.prototype.setOptions = function ( options ) {
 
 		if ( newParentIsChild ) return;
 
-		editor.execute( new MoveObjectCommand( object, newParent, nextObject ) );
+		editor.execute( new MoveObjectCommand( editor, object, newParent, nextObject ) );
 
 		var changeEvent = document.createEvent( 'HTMLEvents' );
 		changeEvent.initEvent( 'change', true, true );

editor/sw.js

@@ -1,4 +1,4 @@
-// r105
+// r106
 
 const staticAssets = [
 	'./',
@@ -11,8 +11,11 @@ const staticAssets = [
 	'../examples/js/controls/EditorControls.js',
 	'../examples/js/controls/TransformControls.js',
 
+	'../examples/js/libs/chevrotain.min.js',
 	'../examples/js/libs/jszip.min.js',
 	'../examples/js/libs/inflate.min.js',
+	'../examples/js/libs/lzma.js',
+	'../examples/js/libs/ctm.js',
 
 	'../examples/js/loaders/AMFLoader.js',
 	'../examples/js/loaders/AWDLoader.js',
@@ -34,8 +37,6 @@ const staticAssets = [
 	'../examples/js/loaders/TDSLoader.js',
 	'../examples/js/loaders/VRMLLoader.js',
 	'../examples/js/loaders/VTKLoader.js',
-	'../examples/js/loaders/ctm/lzma.js',
-	'../examples/js/loaders/ctm/ctm.js',
 	'../examples/js/loaders/ctm/CTMLoader.js',
 
 	'../examples/js/exporters/ColladaExporter.js',

examples/css2d_label.html

@@ -18,27 +18,16 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 		<script type="module">
-			import {
-				AxesHelper,
-				Clock,
-				DirectionalLight,
-				Mesh,
-				MeshPhongMaterial,
-				PerspectiveCamera,
-				Scene,
-				SphereBufferGeometry,
-				TextureLoader,
-				Vector2,
-				WebGLRenderer
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS2DRenderer, CSS2DObject } from './jsm/renderers/CSS2DRenderer.js';
 
 			var camera, scene, renderer, labelRenderer;
 
-			var clock = new Clock();
-			var textureLoader = new TextureLoader();
+			var clock = new THREE.Clock();
+			var textureLoader = new THREE.TextureLoader();
 
 			var earth, moon;
 
@@ -50,38 +39,38 @@
 				var EARTH_RADIUS = 1;
 				var MOON_RADIUS = 0.27;
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 10, 5, 20 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				var dirLight = new DirectionalLight( 0xffffff );
+				var dirLight = new THREE.DirectionalLight( 0xffffff );
 				dirLight.position.set( 0, 0, 1 );
 				scene.add( dirLight );
 
-				var axesHelper = new AxesHelper( 5 );
+				var axesHelper = new THREE.AxesHelper( 5 );
 				scene.add( axesHelper );
 
 				//
 
-				var earthGeometry = new SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
-				var earthMaterial = new MeshPhongMaterial( {
+				var earthGeometry = new THREE.SphereBufferGeometry( EARTH_RADIUS, 16, 16 );
+				var earthMaterial = new THREE.MeshPhongMaterial( {
 					specular: 0x333333,
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/earth_atmos_2048.jpg' ),
 					specularMap: textureLoader.load( 'textures/planets/earth_specular_2048.jpg' ),
 					normalMap: textureLoader.load( 'textures/planets/earth_normal_2048.jpg' ),
-					normalScale: new Vector2( 0.85, 0.85 )
+					normalScale: new THREE.Vector2( 0.85, 0.85 )
 				} );
-				earth = new Mesh( earthGeometry, earthMaterial );
+				earth = new THREE.Mesh( earthGeometry, earthMaterial );
 				scene.add( earth );
 
-				var moonGeometry = new SphereBufferGeometry( MOON_RADIUS, 16, 16 );
-				var moonMaterial = new MeshPhongMaterial( {
+				var moonGeometry = new THREE.SphereBufferGeometry( MOON_RADIUS, 16, 16 );
+				var moonMaterial = new THREE.MeshPhongMaterial( {
 					shininess: 5,
 					map: textureLoader.load( 'textures/planets/moon_1024.jpg' )
 				} );
-				moon = new Mesh( moonGeometry, moonMaterial );
+				moon = new THREE.Mesh( moonGeometry, moonMaterial );
 				scene.add( moon );
 
 				//
@@ -104,7 +93,7 @@
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/css3d_molecules.html

@@ -65,14 +65,8 @@
 		<div id="menu"></div>
 
 		<script type="module">
-			import {
-				Color,
-				PerspectiveCamera,
-				Matrix4,
-				Object3D,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { PDBLoader } from './jsm/loaders/PDBLoader.js';
@@ -83,11 +77,11 @@
 			var root;
 
 			var objects = [];
-			var tmpVec1 = new Vector3();
-			var tmpVec2 = new Vector3();
-			var tmpVec3 = new Vector3();
-			var tmpVec4 = new Vector3();
-			var offset = new Vector3();
+			var tmpVec1 = new THREE.Vector3();
+			var tmpVec2 = new THREE.Vector3();
+			var tmpVec3 = new THREE.Vector3();
+			var tmpVec4 = new THREE.Vector3();
+			var offset = new THREE.Vector3();
 
 			var visualizationType = 2;
 
@@ -123,12 +117,12 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.z = 1500;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
-				root = new Object3D();
+				root = new THREE.Object3D();
 				scene.add( root );
 
 				//
@@ -343,8 +337,8 @@
 					var positions = geometryAtoms.getAttribute( 'position' );
 					var colors = geometryAtoms.getAttribute( 'color' );
 
-					var position = new Vector3();
-					var color = new Color();
+					var position = new THREE.Vector3();
+					var color = new THREE.Color();
 
 					for ( var i = 0; i < positions.count; i ++ ) {
 
@@ -392,8 +386,8 @@
 
 					positions = geometryBonds.getAttribute( 'position' );
 
-					var start = new Vector3();
-					var end = new Vector3();
+					var start = new THREE.Vector3();
+					var end = new THREE.Vector3();
 
 					for ( var i = 0; i < positions.count; i += 2 ) {
 
@@ -429,7 +423,7 @@
 						var axis = tmpVec2.set( 0, 1, 0 ).cross( tmpVec1 );
 						var radians = Math.acos( tmpVec3.set( 0, 1, 0 ).dot( tmpVec4.copy( tmpVec1 ).normalize() ) );
 
-						var objMatrix = new Matrix4().makeRotationAxis( axis.normalize(), radians );
+						var objMatrix = new THREE.Matrix4().makeRotationAxis( axis.normalize(), radians );
 						object.matrix = objMatrix;
 						object.rotation.setFromRotationMatrix( object.matrix, object.rotation.order );
 
@@ -446,7 +440,7 @@
 						bond.className = "bond";
 						bond.style.height = bondLength + "px";
 
-						var joint = new Object3D( bond );
+						var joint = new THREE.Object3D( bond );
 						joint.position.copy( start );
 						joint.position.lerp( end, 0.5 );
 

examples/css3d_orthographic.html

@@ -21,19 +21,8 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 		<script type="module">
-			import {
-				Color,
-				DoubleSide,
-				Euler,
-				Math as _Math,
-				Mesh,
-				MeshBasicMaterial,
-				OrthographicCamera,
-				PlaneBufferGeometry,
-				Scene,
-				Vector3,
-				WebGLRenderer
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { OrbitControls } from './jsm/controls/OrbitControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -49,49 +38,49 @@
 
 				var frustumSize = 500;
 				var aspect = window.innerWidth / window.innerHeight;
-				camera = new OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
+				camera = new THREE.OrthographicCamera( frustumSize * aspect / - 2, frustumSize * aspect / 2, frustumSize / 2, frustumSize / - 2, 1, 1000 );
 
 				camera.position.set( - 200, 200, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene2 = new Scene();
+				scene2 = new THREE.Scene();
 
-				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				// left
 				createPlane(
 					100, 100,
 					'chocolate',
-					new Vector3( - 50, 0, 0 ),
-					new Euler( 0, - 90 * _Math.DEG2RAD, 0 )
+					new THREE.Vector3( - 50, 0, 0 ),
+					new THREE.Euler( 0, - 90 * THREE.Math.DEG2RAD, 0 )
 				);
 				// right
 				createPlane(
 					100, 100,
 					'saddlebrown',
-					new Vector3( 0, 0, 50 ),
-					new Euler( 0, 0, 0 )
+					new THREE.Vector3( 0, 0, 50 ),
+					new THREE.Euler( 0, 0, 0 )
 				);
 				// top
 				createPlane(
 					100, 100,
 					'yellowgreen',
-					new Vector3( 0, 50, 0 ),
-					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
+					new THREE.Vector3( 0, 50, 0 ),
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 				);
 				// bottom
 				createPlane(
 					300, 300,
 					'seagreen',
-					new Vector3( 0, - 50, 0 ),
-					new Euler( - 90 * _Math.DEG2RAD, 0, 0 )
+					new THREE.Vector3( 0, - 50, 0 ),
+					new THREE.Euler( - 90 * THREE.Math.DEG2RAD, 0, 0 )
 				);
 
 				//
 
-				renderer = new WebGLRenderer();
+				renderer = new THREE.WebGLRenderer();
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );
@@ -117,8 +106,8 @@
 					object.rotation.copy( rot );
 					scene2.add( object );
 
-					var geometry = new PlaneBufferGeometry( width, height );
-					var mesh = new Mesh( geometry, material );
+					var geometry = new THREE.PlaneBufferGeometry( width, height );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					scene.add( mesh );

examples/css3d_panorama.html

@@ -10,17 +10,13 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama demo. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Math as _Math,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
 
 			var camera, scene, renderer;
-			var target = new Vector3();
+			var target = new THREE.Vector3();
 
 			var lon = 90, lat = 0;
 			var phi = 0, theta = 0;
@@ -32,9 +28,9 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var sides = [
 					{
@@ -139,7 +135,7 @@
 
 				var fov = camera.fov + event.deltaY * 0.05;
 
-				camera.fov = _Math.clamp( fov, 10, 75 );
+				camera.fov = THREE.Math.clamp( fov, 10, 75 );
 
 				camera.updateProjectionMatrix();
 
@@ -176,8 +172,8 @@
 
 				lon += 0.1;
 				lat = Math.max( - 85, Math.min( 85, lat ) );
-				phi = _Math.degToRad( 90 - lat );
-				theta = _Math.degToRad( lon );
+				phi = THREE.Math.degToRad( 90 - lat );
+				theta = THREE.Math.degToRad( lon );
 
 				target.x = Math.sin( phi ) * Math.cos( theta );
 				target.y = Math.cos( phi );

examples/css3d_panorama_deviceorientation.html

@@ -10,11 +10,8 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - panorama - device orientation.<br/>cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Object3D,
-				Scene
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { DeviceOrientationControls } from './jsm/controls/DeviceOrientationControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -27,11 +24,11 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1000 );
 
 				controls = new DeviceOrientationControls( camera );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var sides = [
 					{
@@ -66,7 +63,7 @@
 					}
 				];
 
-				var cube = new Object3D();
+				var cube = new THREE.Object3D();
 				scene.add( cube );
 
 				for ( var i = 0; i < sides.length; i ++ ) {

examples/css3d_periodictable.html

@@ -93,12 +93,8 @@
 		</div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Object3D,
-				Scene,
-				Vector3
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -235,10 +231,10 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
+				camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
 				camera.position.z = 3000;
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				// table
 
@@ -273,7 +269,7 @@
 
 					//
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 					object.position.x = ( table[ i + 3 ] * 140 ) - 1330;
 					object.position.y = - ( table[ i + 4 ] * 180 ) + 990;
 
@@ -283,14 +279,14 @@
 
 				// sphere
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 					var phi = Math.acos( - 1 + ( 2 * i ) / l );
 					var theta = Math.sqrt( l * Math.PI ) * phi;
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.setFromSphericalCoords( 800, phi, theta );
 
@@ -304,14 +300,14 @@
 
 				// helix
 
-				var vector = new Vector3();
+				var vector = new THREE.Vector3();
 
 				for ( var i = 0, l = objects.length; i < l; i ++ ) {
 
 					var theta = i * 0.175 + Math.PI;
 					var y = - ( i * 8 ) + 450;
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.setFromCylindricalCoords( 900, theta, y );
 
@@ -329,7 +325,7 @@
 
 				for ( var i = 0; i < objects.length; i ++ ) {
 
-					var object = new Object3D();
+					var object = new THREE.Object3D();
 
 					object.position.x = ( ( i % 5 ) * 400 ) - 800;
 					object.position.y = ( - ( Math.floor( i / 5 ) % 5 ) * 400 ) + 800;

examples/css3d_sandbox.html

@@ -17,16 +17,8 @@
 		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
 
 		<script type="module">
-			import {
-				Color,
-				DoubleSide,
-				PerspectiveCamera,
-				PlaneBufferGeometry,
-				Mesh,
-				MeshBasicMaterial,
-				Scene,
-				WebGLRenderer
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DObject } from './jsm/renderers/CSS3DRenderer.js';
@@ -42,15 +34,15 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
+				camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 1000 );
 				camera.position.set( 200, 200, 200 );
 
-				scene = new Scene();
-				scene.background = new Color( 0xf0f0f0 );
+				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0xf0f0f0 );
 
-				scene2 = new Scene();
+				scene2 = new THREE.Scene();
 
-				var material = new MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: DoubleSide } );
+				var material = new THREE.MeshBasicMaterial( { color: 0x000000, wireframe: true, wireframeLinewidth: 1, side: THREE.DoubleSide } );
 
 				//
 
@@ -60,7 +52,7 @@
 					element.style.width = '100px';
 					element.style.height = '100px';
 					element.style.opacity = ( i < 5 ) ? 0.5 : 1;
-					element.style.background = new Color( Math.random() * 0xffffff ).getStyle();
+					element.style.background = new THREE.Color( Math.random() * 0xffffff ).getStyle();
 
 					var object = new CSS3DObject( element );
 					object.position.x = Math.random() * 200 - 100;
@@ -73,8 +65,8 @@
 					object.scale.y = Math.random() + 0.5;
 					scene2.add( object );
 
-					var geometry = new PlaneBufferGeometry( 100, 100 );
-					var mesh = new Mesh( geometry, material );
+					var geometry = new THREE.PlaneBufferGeometry( 100, 100 );
+					var mesh = new THREE.Mesh( geometry, material );
 					mesh.position.copy( object.position );
 					mesh.rotation.copy( object.rotation );
 					mesh.scale.copy( object.scale );
@@ -84,7 +76,7 @@
 
 				//
 
-				renderer = new WebGLRenderer( { antialias: true } );
+				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				document.body.appendChild( renderer.domElement );

examples/css3d_sprites.html

@@ -22,10 +22,8 @@
 		<div id="container"></div>
 
 		<script type="module">
-			import {
-				PerspectiveCamera,
-				Scene
-			} from "../build/three.module.js";
+
+			import * as THREE from '../build/three.module.js';
 
 			import { TrackballControls } from './jsm/controls/TrackballControls.js';
 			import { CSS3DRenderer, CSS3DSprite } from './jsm/renderers/CSS3DRenderer.js';
@@ -43,11 +41,11 @@
 
 			function init() {
 
-				camera = new PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
+				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 5000 );
 				camera.position.set( 600, 400, 1500 );
 				camera.lookAt( 0, 0, 0 );
 
-				scene = new Scene();
+				scene = new THREE.Scene();
 
 				var image = document.createElement( 'img' );
 				image.addEventListener( 'load', function () {