Mr.doob 6 years ago
parent
commit
e7fee60e7f
100 changed files with 1478 additions and 1894 deletions
  1. 15 5
      build/three.js
  2. 74 300
      build/three.min.js
  3. 15 5
      build/three.module.js
  4. 1 1
      docs/api/en/animation/KeyframeTrack.html
  5. 2 2
      docs/api/en/cameras/ArrayCamera.html
  6. 3 3
      docs/api/en/cameras/OrthographicCamera.html
  7. 3 2
      docs/api/en/cameras/PerspectiveCamera.html
  8. 1 1
      docs/api/en/core/BufferGeometry.html
  9. 2 2
      docs/api/en/core/Clock.html
  10. 4 2
      docs/api/en/core/Geometry.html
  11. 6 2
      docs/api/en/core/Object3D.html
  12. 1 1
      docs/api/en/extras/core/Path.html
  13. 1 1
      docs/api/en/extras/core/Shape.html
  14. 1 1
      docs/api/en/extras/core/ShapePath.html
  15. 1 1
      docs/api/en/extras/curves/ArcCurve.html
  16. 1 1
      docs/api/en/geometries/ConeBufferGeometry.html
  17. 1 1
      docs/api/en/geometries/ConeGeometry.html
  18. 1 1
      docs/api/en/geometries/DodecahedronBufferGeometry.html
  19. 1 1
      docs/api/en/geometries/IcosahedronBufferGeometry.html
  20. 1 1
      docs/api/en/geometries/OctahedronBufferGeometry.html
  21. 1 1
      docs/api/en/geometries/TetrahedronBufferGeometry.html
  22. 1 1
      docs/api/en/geometries/TextBufferGeometry.html
  23. 1 1
      docs/api/en/geometries/TextGeometry.html
  24. 1 1
      docs/api/en/helpers/AxesHelper.html
  25. 1 1
      docs/api/en/helpers/Box3Helper.html
  26. 7 7
      docs/api/en/helpers/BoxHelper.html
  27. 1 1
      docs/api/en/helpers/CameraHelper.html
  28. 1 1
      docs/api/en/helpers/FaceNormalsHelper.html
  29. 2 2
      docs/api/en/helpers/GridHelper.html
  30. 1 1
      docs/api/en/helpers/PlaneHelper.html
  31. 1 1
      docs/api/en/helpers/PointLightHelper.html
  32. 1 1
      docs/api/en/helpers/PolarGridHelper.html
  33. 1 1
      docs/api/en/helpers/VertexNormalsHelper.html
  34. 3 2
      docs/api/en/lights/Light.html
  35. 2 2
      docs/api/en/materials/Material.html
  36. 1 1
      docs/api/en/materials/RawShaderMaterial.html
  37. 22 2
      docs/api/en/math/Box3.html
  38. 1 0
      docs/api/en/math/Matrix4.html
  39. 1 1
      docs/api/en/objects/LOD.html
  40. 15 5
      docs/api/en/renderers/WebGLRenderer.html
  41. 3 2
      docs/api/en/scenes/Scene.html
  42. 2 2
      docs/api/en/textures/Texture.html
  43. 1 1
      docs/api/zh/animation/KeyframeTrack.html
  44. 1 1
      docs/api/zh/cameras/ArrayCamera.html
  45. 2 2
      docs/api/zh/core/Clock.html
  46. 1 1
      docs/api/zh/objects/LOD.html
  47. 2 2
      docs/examples/controls/OrbitControls.html
  48. 1 1
      docs/examples/loaders/MTLLoader.html
  49. 3 3
      docs/examples/loaders/OBJLoader.html
  50. 1 1
      docs/examples/loaders/OBJLoader2.html
  51. 18 18
      docs/examples/math/convexhull/ConvexHull.html
  52. 2 2
      docs/examples/math/convexhull/Face.html
  53. 2 2
      docs/examples/math/convexhull/HalfEdge.html
  54. 2 2
      docs/examples/math/convexhull/VertexList.html
  55. 2 2
      docs/examples/math/convexhull/VertexNode.html
  56. 7 0
      docs/examples/renderers/SVGRenderer.html
  57. 0 20
      docs/examples/utils/SceneUtils.html
  58. 0 214
      docs/index.css
  59. 6 6
      docs/list.js
  60. 1 1
      docs/manual/en/introduction/Creating-a-scene.html
  61. 1 1
      docs/manual/en/introduction/Drawing-lines.html
  62. 0 2
      docs/manual/en/introduction/How-to-update-things.html
  63. 180 3
      docs/manual/en/introduction/Import-via-modules.html
  64. 22 17
      docs/manual/en/introduction/Useful-links.html
  65. 20 12
      docs/manual/zh/introduction/Useful-links.html
  66. 2 2
      docs/prettify/threejs.css
  67. 5 16
      docs/scenes/bones-browser.html
  68. 6 17
      docs/scenes/geometry-browser.html
  69. 5 16
      docs/scenes/material-browser.html
  70. 3 1
      editor/index.html
  71. 123 123
      editor/js/Menubar.Add.js
  72. 145 0
      editor/js/Sidebar.Geometry.ExtrudeGeometry.js
  73. 3 84
      editor/js/Sidebar.Geometry.LatheGeometry.js
  74. 55 0
      editor/js/Sidebar.Geometry.ShapeGeometry.js
  75. 2 83
      editor/js/Sidebar.Geometry.TubeGeometry.js
  76. 18 1
      editor/js/Sidebar.Project.js
  77. 13 0
      editor/js/Strings.js
  78. 256 0
      editor/js/libs/ui.three.js
  79. 5 4
      editor/manifest.json
  80. 5 26
      examples/css2d_label.html
  81. 21 45
      examples/css3d_molecules.html
  82. 8 19
      examples/css3d_orthographic.html
  83. 1 24
      examples/css3d_panorama.html
  84. 3 26
      examples/css3d_panorama_deviceorientation.html
  85. 7 26
      examples/css3d_periodictable.html
  86. 4 20
      examples/css3d_sandbox.html
  87. 5 24
      examples/css3d_sprites.html
  88. 10 9
      examples/css3d_youtube.html
  89. 3 1
      examples/files.js
  90. 0 71
      examples/js/ImprovedNoise.js
  91. 0 23
      examples/js/PRNG.js
  92. 0 324
      examples/js/SimplexNoise.js
  93. 0 0
      examples/js/animation/AnimationClipCreator.js
  94. 21 27
      examples/js/animation/TimelinerController.js
  95. 2 2
      examples/js/cameras/CinematicCamera.js
  96. 1 1
      examples/js/controls/DragControls.js
  97. 14 4
      examples/js/controls/PointerLockControls.js
  98. 1 1
      examples/js/controls/TrackballControls.js
  99. 251 150
      examples/js/controls/TransformControls.js
  100. 0 39
      examples/js/crossfade/gui.js

File diff suppressed because it is too large
+ 15 - 5
build/three.js


File diff suppressed because it is too large
+ 74 - 300
build/three.min.js


File diff suppressed because it is too large
+ 15 - 5
build/three.module.js


+ 1 - 1
docs/api/en/animation/KeyframeTrack.html

@@ -58,7 +58,7 @@
 
 
 		<p>
 		<p>
 			Some examples of how to manually create [page:AnimationClip AnimationClips] with different sorts
 			Some examples of how to manually create [page:AnimationClip AnimationClips] with different sorts
-			of KeyframeTracks can be found in the [link:https://threejs.org/examples/js/AnimationClipCreator.js]
+			of KeyframeTracks can be found in the [link:https://threejs.org/examples/js/animation/AnimationClipCreator.js AnimationClipCreator]
 			file.
 			file.
 		</p>
 		</p>
 
 

+ 2 - 2
docs/api/en/cameras/ArrayCamera.html

@@ -8,13 +8,13 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:PerspectiveCamera] &rarr;
+		[page:Object3D] &rarr; [page:Camera] &rarr; [page:PerspectiveCamera] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">
 		<p class="desc">
 			[name] can be used in order to efficiently render a scene with a predefined set of cameras. This is an important performance aspect for rendering VR scenes.<br />
 			[name] can be used in order to efficiently render a scene with a predefined set of cameras. This is an important performance aspect for rendering VR scenes.<br />
-			An instance of [name] always has an array of sub cameras. It's mandatory to define for each sub camera the *bounds* property which determines the part of the viewport that is rendered with this camera.
+			An instance of [name] always has an array of sub cameras. It's mandatory to define for each sub camera the *viewport* property which determines the part of the viewport that is rendered with this camera.
 		</p>
 		</p>
 
 
 		<h2>Example</h2>
 		<h2>Example</h2>

+ 3 - 3
docs/api/en/cameras/OrthographicCamera.html

@@ -130,12 +130,12 @@ scene.add( camera );</code>
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		</p>
 		</p>
 
 
-		<h3>[method:JSON toJSON]()</h3>
+		<h3>[method:Object toJSON](param:object meta])</h3>
 		<p>
 		<p>
-		Return the camera's data in JSON format.
+		meta -- object containing metadata such as textures or images in objects' descendants.<br />
+		Convert the camera to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
-
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
 		[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]

+ 3 - 2
docs/api/en/cameras/PerspectiveCamera.html

@@ -190,9 +190,10 @@ camera.setViewOffset( fullWidth, fullHeight, w * 2, h * 1, w, h );
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		Updates the camera projection matrix. Must be called after any change of parameters.
 		</p>
 		</p>
 
 
-		<h3>[method:JSON toJSON]()</h3>
+		<h3>[method:Object toJSON](param:object meta])</h3>
 		<p>
 		<p>
-		Return camera data in JSON format.
+		meta -- object containing metadata such as textures or images in objects' descendants.<br />
+		Convert the camera to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>

+ 1 - 1
docs/api/en/core/BufferGeometry.html

@@ -327,7 +327,7 @@
 		<p>Sets the attributes for this BufferGeometry from an array of points.</p>
 		<p>Sets the attributes for this BufferGeometry from an array of points.</p>
 
 
 		<h3>[method:Object toJSON]()</h3>
 		<h3>[method:Object toJSON]()</h3>
-		<p>Returns a JSON object representation of the BufferGeometry.</p>
+		<p>Convert the buffer geometry to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].</p>
 
 
 		<h3>[method:BufferGeometry toNonIndexed]()</h3>
 		<h3>[method:BufferGeometry toNonIndexed]()</h3>
 		<p>Return a non-index version of an indexed BufferGeometry.</p>
 		<p>Return a non-index version of an indexed BufferGeometry.</p>

+ 2 - 2
docs/api/en/core/Clock.html

@@ -11,8 +11,8 @@
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">
 		<p class="desc">
-		Object for keeping track of time. This uses <a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">performance.now()</a>
-		if it is available, otherwise it reverts to the less accurate <a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a>.
+		Object for keeping track of time. This uses [link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]
+		if it is available, otherwise it reverts to the less accurate [link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now Date.now].
 		</p>
 		</p>
 
 
 
 

+ 4 - 2
docs/api/en/core/Geometry.html

@@ -327,8 +327,10 @@
 		Use [page:Object3D.scale] for typical real-time mesh scaling.
 		Use [page:Object3D.scale] for typical real-time mesh scaling.
 		</p>
 		</p>
 
 
-		<h3>[method:JSON toJSON] ( )</h3>
-		<p>Convert the geometry to JSON format.</p>
+		<h3>[method:Object toJSON] ( )</h3>
+		<p>Convert the geometry to JSON format.<br />
+		Convert the geometry to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
+		</p>
 
 
 		<h3>[method:Geometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
 		<h3>[method:Geometry translate] ( [param:Float x], [param:Float y], [param:Float z] )</h3>
 		<p>
 		<p>

+ 6 - 2
docs/api/en/core/Object3D.html

@@ -217,6 +217,9 @@
 		<h3>[method:this applyQuaternion]( [param:Quaternion quaternion] )</h3>
 		<h3>[method:this applyQuaternion]( [param:Quaternion quaternion] )</h3>
 		<p>Applies the rotation represented by the quaternion to the object.</p>
 		<p>Applies the rotation represented by the quaternion to the object.</p>
 
 
+		<h3>[method:this attach]( [param:Object3D object] )</h3>
+		<p>Adds *object* as a child of this, while maintaining the object's world transform.</p>
+
 		<h3>[method:Object3D clone]( [param:Boolean recursive] )</h3>
 		<h3>[method:Object3D clone]( [param:Boolean recursive] )</h3>
 		<p>
 		<p>
 		recursive -- if true, descendants of the object are also cloned. Default is true.<br /><br />
 		recursive -- if true, descendants of the object are also cloned. Default is true.<br /><br />
@@ -389,9 +392,10 @@
 			Copy the given quaternion into [page:.quaternion].
 			Copy the given quaternion into [page:.quaternion].
 		</p>
 		</p>
 
 
-		<h3>[method:null toJSON]( [param:Quaternion q] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
 		<p>
-			Convert the object to JSON format.
+		meta -- object containing metadata such as materials, textures or images for the object.<br />
+		Convert the object to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h3>[method:this translateOnAxis]( [param:Vector3 axis], [param:Float distance] )</h3>
 		<h3>[method:this translateOnAxis]( [param:Vector3 axis], [param:Float distance] )</h3>

+ 1 - 1
docs/api/en/extras/core/Path.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:CurvePath] &rarr;
+		[page:Curve] &rarr; [page:CurvePath] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/extras/core/Shape.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:Path] &rarr;
+		[page:Curve] &rarr; [page:CurvePath] &rarr; [page:Path] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/extras/core/ShapePath.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:CurvePath] &rarr;
+		[page:Curve] &rarr; [page:CurvePath] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/extras/curves/ArcCurve.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:EllipseCurve] &rarr;
+		[page:Curve] &rarr; [page:EllipseCurve] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/ConeBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:CylinderBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:CylinderBufferGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/ConeGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:CylinderGeometry] &rarr;
+		[page:Geometry] &rarr; [page:CylinderGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/DodecahedronBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:PolyhedronBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:PolyhedronBufferGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/IcosahedronBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:PolyhedronBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:PolyhedronBufferGeometry] &rarr;
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">A class for generating an icosahedron geometry.</p>
 		<p class="desc">A class for generating an icosahedron geometry.</p>

+ 1 - 1
docs/api/en/geometries/OctahedronBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:PolyhedronBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:PolyhedronBufferGeometry] &rarr;
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">A class for generating an octahedron geometry.</p>
 		<p class="desc">A class for generating an octahedron geometry.</p>

+ 1 - 1
docs/api/en/geometries/TetrahedronBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:PolyhedronBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:PolyhedronBufferGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/TextBufferGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:ExtrudeBufferGeometry] &rarr;
+		[page:BufferGeometry] &rarr; [page:ExtrudeBufferGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/geometries/TextGeometry.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:ExtrudeGeometry] &rarr;
+		[page:Geometry] &rarr; [page:ExtrudeGeometry] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/AxesHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/Box3Helper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 7 - 7
docs/api/en/helpers/BoxHelper.html

@@ -8,13 +8,13 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">
 		<p class="desc">
-			Helper object to show the world-axis-aligned bounding box around an object.
-
+			Helper object to graphically show the world-axis-aligned bounding box around an object. The actual bounding box is handled with [page:Box3], this is just a visual helper for debugging.
+			It can be automatically resized with the [page:BoxHelper.update] method when the object it's created from is transformed.
 			Note that the object must have a [page:Geometry] or [page:BufferGeometry] for this to work,
 			Note that the object must have a [page:Geometry] or [page:BufferGeometry] for this to work,
 			so it won't work with [page:Sprite Sprites].
 			so it won't work with [page:Sprite Sprites].
 		</p>
 		</p>
@@ -28,10 +28,10 @@
 
 
 
 
 		<code>
 		<code>
-		var sphere = new THREE.SphereGeometry();
-		var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
-		var box = new THREE.BoxHelper( object, 0xffff00 );
-		scene.add( box );
+			var sphere = new THREE.SphereGeometry();
+			var object = new THREE.Mesh( sphere, new THREE.MeshBasicMaterial( 0xff0000 ) );
+			var box = new THREE.BoxHelper( object, 0xffff00 );
+			scene.add( box );
 		</code>
 		</code>
 
 
 
 

+ 1 - 1
docs/api/en/helpers/CameraHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/FaceNormalsHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 2 - 2
docs/api/en/helpers/GridHelper.html

@@ -8,8 +8,8 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:Line] &rarr;
-
+		[page:Object3D] &rarr; [page:Line] &rarr;
+		
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</p>
 		<p class="desc">The GridHelper is an object to define grids. Grids are two-dimensional arrays of lines.</p>

+ 1 - 1
docs/api/en/helpers/PlaneHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:LineSegments] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr; [page:LineSegments] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/PointLightHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:Mesh] &rarr;
+		[page:Object3D] &rarr; [page:Mesh] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/PolarGridHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:Line] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 1 - 1
docs/api/en/helpers/VertexNormalsHelper.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:Line] &rarr;
+		[page:Object3D] &rarr; [page:Line] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 3 - 2
docs/api/en/lights/Light.html

@@ -67,9 +67,10 @@
 		[page:Light source] light into this one.
 		[page:Light source] light into this one.
 		</p>
 		</p>
 
 
-		<h3>[method:JSON toJSON]( [param:String meta] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
 		<p>
-		Return Light data in JSON format.
+		meta -- object containing metadata such as materials, textures for objects.<br />
+		Convert the light to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>

+ 2 - 2
docs/api/en/materials/Material.html

@@ -307,10 +307,10 @@
 		Sets the properties based on the *values*.
 		Sets the properties based on the *values*.
 		</p>
 		</p>
 
 
-		<h3>[method:null toJSON]( [param:object meta] )</h3>
+		<h3>[method:Object toJSON]( [param:object meta] )</h3>
 		<p>
 		<p>
 		meta -- object containing metadata such as textures or images for the material.<br />
 		meta -- object containing metadata such as textures or images for the material.<br />
-		Convert the material to three.js JSON format.
+		Convert the material to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>

+ 1 - 1
docs/api/en/materials/RawShaderMaterial.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		[page:ShaderMaterial] &rarr;
+		[page:Material] &rarr; [page:ShaderMaterial] &rarr;
 
 
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 

+ 22 - 2
docs/api/en/math/Box3.html

@@ -12,11 +12,31 @@
 
 
 		<p class="desc">
 		<p class="desc">
 			Represents a box or cube in 3D space. The main purpose of this is to represent
 			Represents a box or cube in 3D space. The main purpose of this is to represent
-			the [link:https://en.wikipedia.org/wiki/Minimum_bounding_box Minimum Bounding Boxes]
-			for objects.
+			the world-axis-aligned bounding boxes for objects. 
 		</p>
 		</p>
 
 
+		
+		<h2>Example</h2>
 
 
+		<code>
+		// Creating the object whose bounding box we want to compute
+		var sphereObject = new THREE.Mesh( 
+			new THREE.SphereGeometry(), 
+			new THREE.MeshBasicMaterial( 0xff0000 ) 
+		);
+		// Creating the actual bounding box with Box3
+		sphereObject.geometry.computeBoundingBox();
+		var box = sphereObject.geometry.boundingBox.clone();
+
+		// ...
+		
+		// In the animation loop, to keep the bounding box updated after move/rotate/scale operations
+		sphereObject.updateMatrixWorld( true );
+		box.copy( sphereObject.geometry.boundingBox ).applyMatrix4( sphereObject.matrixWorld );
+		</code>
+
+
+		
 		<h2>Constructor</h2>
 		<h2>Constructor</h2>
 
 
 
 

+ 1 - 0
docs/api/en/math/Matrix4.html

@@ -375,6 +375,7 @@ x, y, 1, 0,
 		</p>
 		</p>
 
 
 		<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
 		<h3>[method:this setPosition]( [param:Vector3 v] )</h3>
+		<h3>[method:this setPosition]( [param:Float x], [param:Float y], [param:Float z] ) // optional API</h3>
 		<p>
 		<p>
 			Sets the position component for this matrix from vector [page:Vector3 v], without affecting the
 			Sets the position component for this matrix from vector [page:Vector3 v], without affecting the
 			rest of the matrix - i.e. if the matrix is currently:
 			rest of the matrix - i.e. if the matrix is currently:

+ 1 - 1
docs/api/en/objects/LOD.html

@@ -100,7 +100,7 @@ scene.add( lod );
 
 
 
 
 
 
-		<h3>[method:null toJSON]( meta )</h3>
+		<h3>[method:Object toJSON]( meta )</h3>
 		<p>
 		<p>
 		Create a JSON structure with details of this LOD object.
 		Create a JSON structure with details of this LOD object.
 		</p>
 		</p>

+ 15 - 5
docs/api/en/renderers/WebGLRenderer.html

@@ -55,7 +55,10 @@
 
 
 		[page:String powerPreference] - Provides a hint to the user agent indicating what configuration
 		[page:String powerPreference] - Provides a hint to the user agent indicating what configuration
 		of GPU is suitable for this WebGL context. Can be *"high-performance"*, *"low-power"* or *"default"*. Default is *"default"*.
 		of GPU is suitable for this WebGL context. Can be *"high-performance"*, *"low-power"* or *"default"*. Default is *"default"*.
-		See the [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.2 WebGL spec] for more information.<br />
+		See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.<br />
+
+		[page:Boolean failIfMajorPerformanceCaveat] - whether the renderer creation will fail upon low perfomance is detected. Default is *false*.
+		See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.<br />
 
 
 		[page:Boolean depth] - whether the drawing buffer has a
 		[page:Boolean depth] - whether the drawing buffer has a
 		[link:https://en.wikipedia.org/wiki/Z-buffering depth buffer] of at least 16 bits.
 		[link:https://en.wikipedia.org/wiki/Z-buffering depth buffer] of at least 16 bits.
@@ -110,6 +113,7 @@
 		- [page:Boolean floatVertexTextures]: *true* if [page:Boolean floatFragmentTextures] and [page:Boolean vertexTextures] are both true.<br />
 		- [page:Boolean floatVertexTextures]: *true* if [page:Boolean floatFragmentTextures] and [page:Boolean vertexTextures] are both true.<br />
 		- [page:Method getMaxAnisotropy](): Returns the maximum available anisotropy.<br />
 		- [page:Method getMaxAnisotropy](): Returns the maximum available anisotropy.<br />
 		- [page:Method getMaxPrecision](): Returns the maximum available precision for vertex and fragment shaders. <br />
 		- [page:Method getMaxPrecision](): Returns the maximum available precision for vertex and fragment shaders. <br />
+		- [page:Boolean isWebGL2: *true* if the context in use is a WebGL2RenderingContext object.<br />
 		- [page:Boolean logarithmicDepthBuffer]: *true* if the [page:parameter logarithmicDepthBuffer] was set to true in the constructor and
 		- [page:Boolean logarithmicDepthBuffer]: *true* if the [page:parameter logarithmicDepthBuffer] was set to true in the constructor and
 		the context supports the [link:https://developer.mozilla.org/en-US/docs/Web/API/EXT_frag_depth EXT_frag_depth] extension.
 		the context supports the [link:https://developer.mozilla.org/en-US/docs/Web/API/EXT_frag_depth EXT_frag_depth] extension.
 			According to [link:https://webglstats.com/ WebGLStats], as of February 2016 around 66% of WebGL enabled devices support this.<br />
 			According to [link:https://webglstats.com/ WebGLStats], as of February 2016 around 66% of WebGL enabled devices support this.<br />
@@ -347,6 +351,12 @@
 		<h3>[method:WebGLContextAttributes getContextAttributes]()</h3>
 		<h3>[method:WebGLContextAttributes getContextAttributes]()</h3>
 		<p>Returns an object that describes the attributes set on the WebGL context when it was created.</p>
 		<p>Returns an object that describes the attributes set on the WebGL context when it was created.</p>
 
 
+		<h3>[method:Integer getActiveCubeFace]()</h3>
+		<p>Returns the current active cube face.</p>
+
+		<h3>[method:Integer getActiveMipMapLevel]()</h3>
+		<p>Returns the current active mipmap level.</p>
+
 		<h3>[method:RenderTarget getRenderTarget]()</h3>
 		<h3>[method:RenderTarget getRenderTarget]()</h3>
 		<p>Returns the current [page:RenderTarget RenderTarget] if there are; returns *null* otherwise.</p>
 		<p>Returns the current [page:RenderTarget RenderTarget] if there are; returns *null* otherwise.</p>
 
 
@@ -394,11 +404,11 @@
 		<h3>[method:null resetGLState]( )</h3>
 		<h3>[method:null resetGLState]( )</h3>
 		<p>Reset the GL state to default. Called internally if the WebGL context is lost.</p>
 		<p>Reset the GL state to default. Called internally if the WebGL context is lost.</p>
 
 
-		<h3>[method:null readRenderTargetPixels]( [param:WebGLRenderTarget renderTarget], [param:Float x], [param:Float y], [param:Float width], [param:Float height], [param:TypedArray buffer] )</h3>
+		<h3>[method:null readRenderTargetPixels]( [param:WebGLRenderTarget renderTarget], [param:Float x], [param:Float y], [param:Float width], [param:Float height], [param:TypedArray buffer], [param:Integer activeCubeFaceIndex] )</h3>
 		<p>buffer - Uint8Array is the only destination type supported in all cases, other types are renderTarget and platform dependent. See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.</p>
 		<p>buffer - Uint8Array is the only destination type supported in all cases, other types are renderTarget and platform dependent. See [link:https://www.khronos.org/registry/webgl/specs/latest/1.0/#5.14.12 WebGL spec] for details.</p>
 		<p>Reads the pixel data from the renderTarget into the buffer you pass in. This is a wrapper around [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels WebGLRenderingContext.readPixels]().</p>
 		<p>Reads the pixel data from the renderTarget into the buffer you pass in. This is a wrapper around [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/readPixels WebGLRenderingContext.readPixels]().</p>
-		<p>See the [example:webgl_interactive_cubes_gpu interactive / cubes / gpu] example.
-		</p>
+		<p>See the [example:webgl_interactive_cubes_gpu interactive / cubes / gpu] example.</p>
+		<p>For reading out a [page:WebGLRenderTargetCube WebGLRenderTargetCube] use the optional parameter activeCubeFaceIndex to determine which face should be read.</p>
 
 
 
 
 		<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
 		<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
@@ -425,7 +435,7 @@
 
 
 		<h3>[method:null setAnimationLoop]( [param:Function callback] )</h3>
 		<h3>[method:null setAnimationLoop]( [param:Function callback] )</h3>
 		<p>[page:Function callback] — The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.</p>
 		<p>[page:Function callback] — The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.</p>
-		<p>A build in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebVR projects this function must be used.</p>
+		<p>A built in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebVR projects this function must be used.</p>
 
 
 		<h3>[method:null setClearAlpha]( [param:Float alpha] )</h3>
 		<h3>[method:null setClearAlpha]( [param:Float alpha] )</h3>
 		<p>Sets the clear alpha. Valid input is a float between *0.0* and *1.0*.</p>
 		<p>Sets the clear alpha. Valid input is a float between *0.0* and *1.0*.</p>

+ 3 - 2
docs/api/en/scenes/Scene.html

@@ -46,9 +46,10 @@
 
 
 		<h2>Methods</h2>
 		<h2>Methods</h2>
 
 
-		<h3>[method:JSON toJSON]</h3>
+		<h3>[method:Object toJSON]</h3>
 		<p>
 		<p>
-		Return the scene data in JSON format.
+		meta -- object containing metadata such as textures or images for the scene.<br />
+		Convert the scene to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h3>[method:null dispose]()</h3>
 		<h3>[method:null dispose]()</h3>

+ 2 - 2
docs/api/en/textures/Texture.html

@@ -251,10 +251,10 @@
 		Make copy of the texture. Note this is not a "deep copy", the image is shared.
 		Make copy of the texture. Note this is not a "deep copy", the image is shared.
 		</p>
 		</p>
 
 
-		<h3>[method:Texture toJSON]( [param:Object meta] )</h3>
+		<h3>[method:Object toJSON]( [param:Object meta] )</h3>
 		<p>
 		<p>
 		meta -- optional object containing metadata.<br />
 		meta -- optional object containing metadata.<br />
-		Convert the material to three.js JSON format.
+		Convert the texture to three.js [link:https://github.com/mrdoob/three.js/wiki/JSON-Object-Scene-format-4 JSON Object/Scene format].
 		</p>
 		</p>
 
 
 		<h3>[method:null dispose]()</h3>
 		<h3>[method:null dispose]()</h3>

+ 1 - 1
docs/api/zh/animation/KeyframeTrack.html

@@ -49,7 +49,7 @@
 		</ul>
 		</ul>
 
 
 		<p>
 		<p>
-            可以在[link:https://threejs.org/examples/js/AnimationClipCreator.js]文件中找到用不同类型的关键帧轨道创建动画剪辑([page:AnimationClip AnimationClips])的示例。
+            可以在[link:https://threejs.org/examples/js/animation/AnimationClipCreator.js AnimationClipCreator]文件中找到用不同类型的关键帧轨道创建动画剪辑([page:AnimationClip AnimationClips])的示例。
 		</p>
 		</p>
 
 
 		<p>
 		<p>

+ 1 - 1
docs/api/zh/cameras/ArrayCamera.html

@@ -15,7 +15,7 @@
 		<p class="desc">
 		<p class="desc">
 
 
 			[name] 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能。<br />
 			[name] 用于更加高效地使用一组已经预定义的摄像机来渲染一个场景。这将能够更好地提升VR场景的渲染性能。<br />
-			一个 [name] 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义*bound*(边界)这个属性,这一属性决定了由该子摄像机所渲染的视口区域的大小。
+			一个 [name] 的实例中总是包含着一组子摄像机,应当为每一个子摄像机定义*viewport*(边界)这个属性,这一属性决定了由该子摄像机所渲染的视口区域的大小。
 		</p>
 		</p>
 
 
 		<h2>示例</h2>
 		<h2>示例</h2>

+ 2 - 2
docs/api/zh/core/Clock.html

@@ -10,8 +10,8 @@
 	<body>
 	<body>
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 		<p class="desc">
 		<p class="desc">
-			该对象用于跟踪时间。如果<a href="https://developer.mozilla.org/en-US/docs/Web/API/Performance/now">performance.now()</a>可用,则
-			Clock 对象通过该方法实现,否则通过歉精准的<a href="https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now">Date.now()</a>实现。
+			该对象用于跟踪时间。如果[link:https://developer.mozilla.org/en-US/docs/Web/API/Performance/now performance.now]可用,则
+			Clock 对象通过该方法实现,否则通过歉精准的[link:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Date/now Date.now]实现。
 		</p>
 		</p>
 
 
 
 

+ 1 - 1
docs/api/zh/objects/LOD.html

@@ -96,7 +96,7 @@ scene.add( lod );
 
 
 
 
 
 
-		<h3>[method:null toJSON]( meta )</h3>
+		<h3>[method:Object toJSON]( meta )</h3>
 		<p>
 		<p>
 			使用这个方法,为LOD对象中的每个细节层次创建一个JSON结构。
 			使用这个方法,为LOD对象中的每个细节层次创建一个JSON结构。
 		</p>
 		</p>

+ 2 - 2
docs/examples/controls/OrbitControls.html

@@ -32,7 +32,7 @@ var scene = new THREE.Scene();
 
 
 var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 var camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
 
 
-var controls = new THREE.OrbitControls( camera );
+var controls = new THREE.OrbitControls( camera, renderer.domElement );
 
 
 //controls.update() must be called after any manual changes to the camera's transform
 //controls.update() must be called after any manual changes to the camera's transform
 camera.position.set( 0, 20, 100 );
 camera.position.set( 0, 20, 100 );
@@ -54,7 +54,7 @@ function animate() {
 
 
 		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
 		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
 		<p>
 		<p>
-			[page:Camera object]: (required) The camera to be controlled.<br><br>
+			[page:Camera object]: (required) The camera to be controlled. The camera must not be a child of another object, unless that object is the scene itself.<br><br>
 
 
 			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
 			[page:HTMLDOMElement domElement]: (optional) The HTML element used for event listeners. By default this is the whole document,
 			however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.
 			however if you only want the controls to work over a specific element (e.g. the canvas) you can specify that here.

+ 1 - 1
docs/examples/loaders/MTLLoader.html

@@ -94,7 +94,7 @@
 			[page:String path] — The path to the MTL file.
 			[page:String path] — The path to the MTL file.
 		</p>
 		</p>
 		<p>
 		<p>
-			Parse a <em>mtl</em> text structure and return a [page:MTLLoaderMaterialCreator] instance.<br />
+			Parse a <em>mtl</em> text structure and return a [page:MTLLoaderMaterialCreator MTLLoader.MaterialCreator] instance.<br />
 		</p>
 		</p>
 
 
 
 

+ 3 - 3
docs/examples/loaders/OBJLoader.html

@@ -89,12 +89,12 @@
 		If an <em>obj</em> object or group uses multiple materials while declaring faces, geometry groups and an array of materials are used.
 		If an <em>obj</em> object or group uses multiple materials while declaring faces, geometry groups and an array of materials are used.
 		</p>
 		</p>
 
 
-		<h3>[method:OBJLoader setMaterials]( [param:Array materials] )</h3>
+		<h3>[method:OBJLoader setMaterials]( [param:MTLLoader.MaterialCreator materials] )</h3>
 		<p>
 		<p>
-		[page:Array materials] - Array of [page:Material Materials].
+		[page:MTLLoaderMaterialCreator MTLLoader.MaterialCreator materials] - A MaterialCreator instance.
 		</p>
 		</p>
 		<p>
 		<p>
-		Sets materials loaded by MTLLoader or any other supplier of an Array of [page:Material Materials].
+		Sets materials loaded by MTLLoader or any other supplier of a [page:MTLLoaderMaterialCreator MTLLoader.MaterialCreator].
 		</p>
 		</p>
 
 
 		<h3>[method:OBJLoader setPath]( [param:String path] )</h3>
 		<h3>[method:OBJLoader setPath]( [param:String path] )</h3>

+ 1 - 1
docs/examples/loaders/OBJLoader2.html

@@ -13,7 +13,7 @@
 
 
 		<p class="desc">A loader for loading a <em>.obj</em> resource.<br />
 		<p class="desc">A loader for loading a <em>.obj</em> resource.<br />
 			The <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">OBJ file format</a> is a simple data-format
 			The <a href="https://en.wikipedia.org/wiki/Wavefront_.obj_file">OBJ file format</a> is a simple data-format
-			that represents 3D geometry in a human redeable format as, the position of each vertex, the UV position of
+			that represents 3D geometry in a human readable format as, the position of each vertex, the UV position of
 			each texture coordinate vertex, vertex normals, and the faces that make each polygon defined as a list of
 			each texture coordinate vertex, vertex normals, and the faces that make each polygon defined as a list of
 			vertices, and texture vertices.
 			vertices, and texture vertices.
 		</p>
 		</p>

+ 18 - 18
docs/examples/quickhull/QuickHull.html → docs/examples/math/convexhull/ConvexHull.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<base href="../../../" />
 		<script src="list.js"></script>
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -11,7 +11,7 @@
 		<h1>[name]</h1>
 		<h1>[name]</h1>
 
 
 		<p class="desc">
 		<p class="desc">
-			General information about the Quickhull algorithm: Dirk Gregorius. March 2014, Game Developers Conference: [link:http://media.steampowered.com/apps/valve/2014/DirkGregorius_ImplementingQuickHull.pdf Implementing QuickHull].
+			A convex hull class. Implements the Quickhull algorithm by: Dirk Gregorius. March 2014, Game Developers Conference: [link:http://media.steampowered.com/apps/valve/2014/DirkGregorius_ImplementingQuickHull.pdf Implementing QuickHull].
 		</p>
 		</p>
 
 
 
 
@@ -63,19 +63,19 @@
 		<p>Creates a face with the vertices 'eyeVertex.point', 'horizonEdge.tail' and 'horizonEdge.head' in CCW order.
 		<p>Creates a face with the vertices 'eyeVertex.point', 'horizonEdge.tail' and 'horizonEdge.head' in CCW order.
 			All the half edges are created in CCW order thus the face is always pointing outside the hull</p>
 			All the half edges are created in CCW order thus the face is always pointing outside the hull</p>
 
 
-		<h3>[method:QuickHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
+		<h3>[method:ConvexHull addNewFaces]( [param:VertexNode eyeVertex], [param:HalfEdge horizonEdge] )</h3>
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 		[page:HalfEdge horizon] - An array of half-edges that form the horizon.<br /><br />
 		[page:HalfEdge horizon] - An array of half-edges that form the horizon.<br /><br />
 
 
 		<p>Adds 'horizon.length' faces to the hull, each face will be linked with the horizon opposite face and the face on the left/right.</p>
 		<p>Adds 'horizon.length' faces to the hull, each face will be linked with the horizon opposite face and the face on the left/right.</p>
 
 
-		<h3>[method:QuickHull addVertexToFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
+		<h3>[method:ConvexHull addVertexToFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
 		[page:VertexNodeNode vertex] - The vertex to add.<br /><br />
 		[page:VertexNodeNode vertex] - The vertex to add.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 
 
 		<p>Adds a vertex to the 'assigned' list of vertices and assigns it to the given face.</p>
 		<p>Adds a vertex to the 'assigned' list of vertices and assigns it to the given face.</p>
 
 
-		<h3>[method:QuickHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
+		<h3>[method:ConvexHull addVertexToHull]( [param:VertexNode eyeVertex] )</h3>
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 		[page:VertexNode eyeVertex] - The vertex that is added to the hull.<br /><br />
 
 
 		<p>Adds a vertex to the hull with the following algorithm
 		<p>Adds a vertex to the hull with the following algorithm
@@ -87,11 +87,11 @@
 			</ul>
 			</ul>
 		</p>
 		</p>
 
 
-		<h3>[method:QuickHull cleanup]()</h3>
+		<h3>[method:ConvexHull cleanup]()</h3>
 
 
 		<p>Cleans up internal properties after computing the convex hull.</p>
 		<p>Cleans up internal properties after computing the convex hull.</p>
 
 
-		<h3>[method:QuickHull compute]()</h3>
+		<h3>[method:ConvexHull compute]()</h3>
 
 
 		<p>Starts the execution of the quick hull algorithm.</p>
 		<p>Starts the execution of the quick hull algorithm.</p>
 
 
@@ -99,7 +99,7 @@
 
 
 		<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
 		<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
 
 
-		<h3>[method:QuickHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon]	)</h3>
+		<h3>[method:ConvexHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon]	)</h3>
 		[page:Vector3 eyePoint] - The 3D-coordinates of a point.<br /><br />
 		[page:Vector3 eyePoint] - The 3D-coordinates of a point.<br /><br />
 		[page:HalfEdge crossEdge] - The edge used to jump to the current face.<br /><br />
 		[page:HalfEdge crossEdge] - The edge used to jump to the current face.<br /><br />
 		[page:Face face] - The current face being tested.<br /><br />
 		[page:Face face] - The current face being tested.<br /><br />
@@ -107,16 +107,16 @@
 
 
 		<p>Computes a chain of half edges in CCW order called the 'horizon'. For an edge to be part of the horizon it must join a face that can see 'eyePoint' and a face that cannot see 'eyePoint'.</p>
 		<p>Computes a chain of half edges in CCW order called the 'horizon'. For an edge to be part of the horizon it must join a face that can see 'eyePoint' and a face that cannot see 'eyePoint'.</p>
 
 
-		<h3>[method:QuickHull computeInitialHull]()</h3>
+		<h3>[method:ConvexHull computeInitialHull]()</h3>
 
 
 		<p>Computes the initial simplex assigning to its faces all the points that are candidates to form part of the hull.</p>
 		<p>Computes the initial simplex assigning to its faces all the points that are candidates to form part of the hull.</p>
 
 
-		<h3>[method:QuickHull containsPoint]( [param:Vector3 point] )</h3>
+		<h3>[method:ConvexHull containsPoint]( [param:Vector3 point] )</h3>
 		[page:Vector3 point] - A point in 3D space.<br /><br />
 		[page:Vector3 point] - A point in 3D space.<br /><br />
 
 
 		<p>Returns *true* if the given point is inside this convex hull.</p>
 		<p>Returns *true* if the given point is inside this convex hull.</p>
 
 
-		<h3>[method:QuickHull deleteFaceVertices]( [param:Face face], [param:Face absorbingFace]	)</h3>
+		<h3>[method:ConvexHull deleteFaceVertices]( [param:Face face], [param:Face absorbingFace]	)</h3>
 		[page:Face face] - The given face.<br /><br />
 		[page:Face face] - The given face.<br /><br />
 		[page:Face absorbingFace] - An optional face that tries to absorb the vertices of the first face.<br /><br />
 		[page:Face absorbingFace] - An optional face that tries to absorb the vertices of the first face.<br /><br />
 
 
@@ -139,7 +139,7 @@
 
 
 		<p>Returns *true* if the given ray intersects with this convex hull.</p>
 		<p>Returns *true* if the given ray intersects with this convex hull.</p>
 
 
-		<h3>[method:QuickHull makeEmpty]()</h3>
+		<h3>[method:ConvexHull makeEmpty]()</h3>
 
 
 		<p>Makes this convex hull empty.</p>
 		<p>Makes this convex hull empty.</p>
 
 
@@ -153,7 +153,7 @@
 			</ul>
 			</ul>
 		</p>
 		</p>
 
 
-		<h3>[method:QuickHull reindexFaces]()</h3>
+		<h3>[method:ConvexHull reindexFaces]()</h3>
 
 
 		<p>Removes inactive (e.g. deleted) faces from the internal face list.</p>
 		<p>Removes inactive (e.g. deleted) faces from the internal face list.</p>
 
 
@@ -162,30 +162,30 @@
 
 
 		<p>Removes all the visible vertices that a given face is able to see which are stored in the 'assigned' vertext list.</p>
 		<p>Removes all the visible vertices that a given face is able to see which are stored in the 'assigned' vertext list.</p>
 
 
-		<h3>[method:QuickHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
+		<h3>[method:ConvexHull removeVertexFromFace]( [param:VertexNode vertex], [param:Face face]	)</h3>
 		[page:VertexNode vertex] - The vertex to remove.<br /><br />
 		[page:VertexNode vertex] - The vertex to remove.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 		[page:Face face] - The target face.<br /><br />
 
 
 		<p>Removes a vertex from the 'assigned' list of vertices and from the given face. It also makes sure that the link from 'face' to the first vertex it sees in 'assigned' is linked correctly after the removal.</p>
 		<p>Removes a vertex from the 'assigned' list of vertices and from the given face. It also makes sure that the link from 'face' to the first vertex it sees in 'assigned' is linked correctly after the removal.</p>
 
 
-		<h3>[method:QuickHull resolveUnassignedPoints]( [param:Array newFaces]	)</h3>
+		<h3>[method:ConvexHull resolveUnassignedPoints]( [param:Array newFaces]	)</h3>
 		[page:Face newFaces] - An array of new faces.<br /><br />
 		[page:Face newFaces] - An array of new faces.<br /><br />
 
 
 		<p>Reassigns as many vertices as possible from the unassigned list to the new faces.</p>
 		<p>Reassigns as many vertices as possible from the unassigned list to the new faces.</p>
 
 
-		<h3>[method:QuickHull setFromObject]( [param:Object3D object] )</h3>
+		<h3>[method:ConvexHull setFromObject]( [param:Object3D object] )</h3>
 		[page:Object3D object] - [page:Object3D] to compute the convex hull of.<br /><br />
 		[page:Object3D object] - [page:Object3D] to compute the convex hull of.<br /><br />
 
 
 		<p>Computes the convex hull of an [page:Object3D] (including its children),
 		<p>Computes the convex hull of an [page:Object3D] (including its children),
 		accounting for the world transforms of both the object and its childrens.</p>
 		accounting for the world transforms of both the object and its childrens.</p>
 
 
-		<h3>[method:QuickHull setFromPoints]( [param:Array points] )</h3>
+		<h3>[method:ConvexHull setFromPoints]( [param:Array points] )</h3>
 		[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting convex hull will contain.<br /><br />
 		[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting convex hull will contain.<br /><br />
 
 
 		<p>Computes to convex hull for the given array of points.</p>
 		<p>Computes to convex hull for the given array of points.</p>
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/ConvexHull.js]
 	</body>
 	</body>
 </html>
 </html>

+ 2 - 2
docs/examples/quickhull/Face.html → docs/examples/math/convexhull/Face.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<base href="../../../" />
 		<script src="list.js"></script>
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -84,6 +84,6 @@
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 	</body>
 </html>
 </html>

+ 2 - 2
docs/examples/quickhull/HalfEdge.html → docs/examples/math/convexhull/HalfEdge.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<base href="../../../" />
 		<script src="list.js"></script>
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -74,6 +74,6 @@
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 	</body>
 </html>
 </html>

+ 2 - 2
docs/examples/quickhull/VertexList.html → docs/examples/math/convexhull/VertexList.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<base href="../../../" />
 		<script src="list.js"></script>
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -86,6 +86,6 @@
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 	</body>
 </html>
 </html>

+ 2 - 2
docs/examples/quickhull/VertexNode.html → docs/examples/math/convexhull/VertexNode.html

@@ -2,7 +2,7 @@
 <html lang="en">
 <html lang="en">
 	<head>
 	<head>
 		<meta charset="utf-8" />
 		<meta charset="utf-8" />
-		<base href="../../" />
+		<base href="../../../" />
 		<script src="list.js"></script>
 		<script src="list.js"></script>
 		<script src="page.js"></script>
 		<script src="page.js"></script>
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
@@ -47,6 +47,6 @@
 
 
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
-		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/QuickHull.js examples/js/QuickHull.js]
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/math/ConvexHull.js examples/js/math/ConvexHull.js]
 	</body>
 	</body>
 </html>
 </html>

+ 7 - 0
docs/examples/renderers/SVGRenderer.html

@@ -61,6 +61,13 @@
 
 
 		<h3>[name]()</h3>
 		<h3>[name]()</h3>
 
 
+		<h2>Properties</h2>
+
+		<h3>[property:Number overdraw]</h3>
+		<p>
+		Number of fractional pixels to enlarge polygons in order to prevent anti-aliasing gaps. Range is [0..1]. Default is *0.5*.
+		</p>
+
 		<h2>Methods</h2>
 		<h2>Methods</h2>
 
 
 		<h3>[method:null clear]()</h3>
 		<h3>[method:null clear]()</h3>

+ 0 - 20
docs/examples/utils/SceneUtils.html

@@ -26,26 +26,6 @@
 		This is mostly useful for objects that need both a material and a wireframe implementation.
 		This is mostly useful for objects that need both a material and a wireframe implementation.
 		</p>
 		</p>
 
 
-		<h3>[method:null attach]( [param:Object3D child], [param:Object3D scene], [param:Object3D parent] )</h3>
-		<p>
-		child -- The object to add to the parent  <br />
-		scene -- The scene to detach the object from. <br />
-		parent -- The parent to attach the object to.
-		</p>
-		<p>
-		Attaches the object to the parent without the moving the object in the worldspace. Beware that to do this the matrixWorld needs to be updated. This can be done by calling the updateMatrixWorld method on the parent object.
-		</p>
-
-		<h3>[method:null detach]( [param:Object3D child], [param:Object3D parent], [param:Object3D scene] )</h3>
-		<p>
-		child -- The object to remove from the parent  <br />
-		scene -- The scene to attach the object on. <br />
-		parent -- The parent to detach the object from.
-		</p>
-		<p>
-		Detaches the object from the parent and adds it back to the scene without moving in worldspace. Beware that to do this the matrixWorld needs to be updated. This can be done by calling the updateMatrixWorld method on the parent object.
-		</p>
-
 		<h2>Source</h2>
 		<h2>Source</h2>
 
 
 		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/utils/SceneUtils.js examples/js/utils/SceneUtils.js]
 		[link:https://github.com/mrdoob/three.js/blob/master/examples/js/utils/SceneUtils.js examples/js/utils/SceneUtils.js]

+ 0 - 214
docs/index.css

@@ -1,214 +0,0 @@
-@font-face {
-	font-family: 'inconsolata';
-	src: url('files/inconsolata.woff') format('woff');
-	font-weight: normal;
-	font-style: normal;
-}
-
-* {
-	box-sizing: border-box;
-}
-
-html {
-	height: 100%;
-}
-
-body {
-	background-color: #ffffff;
-	margin: 0px;
-	height: 100%;
-	color: #555;
-	font-family: 'inconsolata';
-	font-size: 15px;
-	line-height: 18px;
-	overflow: hidden;
-}
-
-h1 {
-	margin-top: 30px;
-	margin-bottom: 40px;
-	font-size: 25px;
-	font-weight: normal;
-}
-
-h2 {
-	color: #454545;
-	font-size: 18px;
-	font-weight: normal;
-
-	margin-top: 20px;
-}
-
-h3 {
-	color: #666;
-	font-size: 16px;
-	font-weight: normal;
-
-	margin-top: 20px;
-}
-
-a {
-	color: #2194CE;
-	text-decoration: none;
-}
-
-#panel {
-	position: fixed;
-	left: 0px;
-	width: 260px;
-	height: 100%;
-	overflow: auto;
-	padding: 0px 20px 0px 20px;
-	background: #fafafa;
-}
-
-#panel ul {
-	list-style-type: none;
-	padding: 0px;
-}
-
-iframe {
-	position: absolute;
-	border: 0px;
-	left: 260px;
-	width: calc(100% - 260px);
-	height: 100%;
-	overflow: auto;
-}
-
-.filterBlock {
-	position: relative;
-}
-
-.filterBlock p {
-	margin: 0;
-}
-
-#filterInput {
-	width: 100%;
-	padding: 5px;
-	font-family: inherit;
-	font-size: 15px;
-	outline: none;
-	border: 1px solid #dedede;
-}
-
-#filterInput:focus{
-	border: 1px solid #2194CE;
-}
-
-#clearFilterButton {
-	position: absolute;
-	right: 6px;
-	top: 50%;
-	margin-top: -8px;
-	width: 16px;
-	height: 16px;
-	font-size: 14px;
-	color: grey;
-	text-align: center;
-	line-height: 0;
-	padding-top: 7px;
-	opacity: .5;
-}
-
-#clearFilterButton:hover {
-	opacity: 1;
-}
-
-.hidden {
-	display: none;
-}
-
-#panel li b {
-	font-weight: bold;
-}
-
-/* mobile */
-
-#expandButton {
-	display: none;
-	position: absolute;
-	right: 20px;
-	top: 12px;
-	width: 32px;
-	height: 32px;
-	background-image: url(files/ic_menu_black_24dp.svg);
-}
-
-#expandButton span {
-	height: 2px;
-	background-color: #2194CE;
-	width: 16px;
-	position: absolute;
-	left: 8px;
-	top: 10px;
-}
-
-#expandButton span:nth-child(1) {
-	top: 16px;
-}
-
-#expandButton span:nth-child(2) {
-	top: 22px;
-}
-
-@media all and ( max-width: 640px ) {
-
-	h1 {
-		margin-top: 20px;
-		margin-bottom: 20px;
-	}
-
-	#panel {
-		position: absolute;
-		left: 0;
-		top: 0;
-		height: 100%;
-		width: 100%;
-		right: 0;
-		z-index: 100;
-		overflow: hidden;
-		border-bottom: 1px solid #dedede;
-	}
-
-	#content {
-		position: absolute;
-		left: 0;
-		top: 120px;
-		right: 0;
-		bottom: 0;
-		font-size: 17px;
-		line-height: 22px;
-		padding-left: 20px;
-		overflow: auto;
-	}
-
-	#navigation {
-		position: absolute;
-		left: 0;
-		top: 90px;
-		right: 0;
-		bottom: 0;
-		font-size: 17px;
-		line-height: 22px;
-		overflow: auto;
-	}
-
-	iframe {
-		position: absolute;
-		left: 0;
-		top: 56px;
-		width: 100%;
-		height: calc(100% - 56px);
-	}
-
-	#expandButton {
-		display: block;
-	}
-
-	#panel.collapsed {
-		height: 56px;
-	}
-
-}

+ 6 - 6
docs/list.js

@@ -393,12 +393,12 @@ var list = {
 				"LookupTable": "examples/Lut",
 				"LookupTable": "examples/Lut",
 			},
 			},
 
 
-			"QuickHull": {
-				"Face": "examples/quickhull/Face",
-				"HalfEdge": "examples/quickhull/HalfEdge",
-				"QuickHull": "examples/quickhull/QuickHull",
-				"VertexNode": "examples/quickhull/VertexNode",
-				"VertexList": "examples/quickhull/VertexList"
+			"ConvexHull": {
+				"Face": "examples/math/convexhull/Face",
+				"HalfEdge": "examples/math/convexhull/HalfEdge",
+				"ConvexHull": "examples/math/convexhull/ConvexHull",
+				"VertexNode": "examples/math/convexhull/VertexNode",
+				"VertexList": "examples/math/convexhull/VertexList"
 			},
 			},
 
 
 			"Renderers": {
 			"Renderers": {

+ 1 - 1
docs/manual/en/introduction/Creating-a-scene.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		<h1>[name]</h1>
+		<h1>[name]</h1><br />
 
 
 		<p>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</p>
 		<p>The goal of this section is to give a brief introduction to three.js. We will start by setting up a scene, with a spinning cube. A working example is provided at the bottom of the page in case you get stuck and need help.</p>
 
 

+ 1 - 1
docs/manual/en/introduction/Drawing-lines.html

@@ -12,7 +12,7 @@
 		<div>
 		<div>
 			<p>
 			<p>
 				Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
 				Let's say you want to draw a line or a circle, not a wireframe [page:Mesh].
-				First we need to setup the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
+				First we need to set up the [page:WebGLRenderer renderer], [page:Scene scene] and camera (see the Creating a scene page).
 			</p>
 			</p>
 
 
 			<p>Here is the code that we will use:</p>
 			<p>Here is the code that we will use:</p>

+ 0 - 2
docs/manual/en/introduction/How-to-update-things.html

@@ -178,8 +178,6 @@ geometry.tangentsNeedUpdate = true;
 
 
 			<p>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
 			<p>Also GLstate related parameters can change any time (depthTest, blending, polygonOffset, etc).</p>
 
 
-			<p>Flat / smooth shading is baked into normals. You need to reset normals buffer (see above).</p>
-
 			<p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
 			<p>The following properties can't be easily changed at runtime (once the material is rendered at least once):</p>
 			<ul>
 			<ul>
 				<li>numbers and types of uniforms</li>
 				<li>numbers and types of uniforms</li>

+ 180 - 3
docs/manual/en/introduction/Import-via-modules.html

@@ -8,7 +8,7 @@
 		<link type="text/css" rel="stylesheet" href="page.css" />
 		<link type="text/css" rel="stylesheet" href="page.css" />
 	</head>
 	</head>
 	<body>
 	<body>
-		<h1>[name]</h1>
+		<h1>[name]</h1><br />
 
 
 		<p>
 		<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:
 			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:
@@ -27,7 +27,7 @@
 
 
 		<h2>Importing the module</h2>
 		<h2>Importing the module</h2>
 
 
-		<p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules') in the browser by bundling up all of your dependencies."</p>
+		<p>Assuming that you're bundling your files with a tool such as [link:https://webpack.github.io/ Webpack] or [link:https://github.com/substack/node-browserify Browserify], which allow you to "require('modules')" in the browser by bundling up all of your dependencies.</p>
 
 
 		<p>
 		<p>
 			You should now be able to import the module into your source files and continue to use it as per normal.
 			You should now be able to import the module into your source files and continue to use it as per normal.
@@ -76,11 +76,41 @@
 		<p>
 		<p>
 			The following examples files are already available as modules:
 			The following examples files are already available as modules:
 			<ul>
 			<ul>
+				<li>cameras
+					<ul>
+						<li>CinematicCamera</li>
+					</ul>
+				</li>
 				<li>controls
 				<li>controls
 					<ul>
 					<ul>
+						<li>DeviceOrientationControls</li>
+						<li>DragControls</li>
+						<li>EditorControls</li>
+						<li>FirstPersonControls</li>
+						<li>FlyControls</li>
 						<li>MapControls</li>
 						<li>MapControls</li>
 						<li>OrbitControls</li>
 						<li>OrbitControls</li>
+						<li>OrthographicTrackballControls</li>
+						<li>PointerLockControls</li>
 						<li>TrackballControls</li>
 						<li>TrackballControls</li>
+						<li>TransformControls</li>
+					</ul>
+				</li>
+				<li>curves
+					<ul>
+						<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>
 					</ul>
 				</li>
 				</li>
 				<li>exporters
 				<li>exporters
@@ -94,12 +124,71 @@
 						<li>TypedGeometryExporter</li>
 						<li>TypedGeometryExporter</li>
 					</ul>
 					</ul>
 				</li>
 				</li>
+				<li>geometries
+					<ul>
+						<li>BoxLineGeometry</li>
+						<li>ConvexGeometry</li>
+						<li>DecalGeometry</li>
+						<li>ParametricGeometries</li>
+						<li>TeapotBufferGeometry</li>
+					</ul>
+				</li>
 				<li>loaders
 				<li>loaders
 					<ul>
 					<ul>
+						<li>3MFLoader</li>
+						<li>AMFLoader</li>
+						<li>AssimpJSONLoader</li>
+						<li>AssimpLoader</li>
+						<li>BabylonLoader</li>
+						<li>BVHLoader</li>
+						<li>ColladaLoader</li>
+						<li>DDSLoader</li>
+						<li>EXRLoader</li>
+						<li>FBXLoader</li>
+						<li>GCodeLoader</li>
 						<li>GLTFLoader</li>
 						<li>GLTFLoader</li>
+						<li>KMZLoader</li>
+						<li>KTXLoader</li>
 						<li>MTLLoader</li>
 						<li>MTLLoader</li>
 						<li>OBJLoader</li>
 						<li>OBJLoader</li>
+						<li>PCDLoader</li>
+						<li>PDBLoader</li>
+						<li>PlayCanvasLoader</li>
+						<li>PLYLoader</li>
+						<li>RGBELoader</li>
 						<li>STLLoader</li>
 						<li>STLLoader</li>
+						<li>SVGLoader</li>
+						<li>TGALoader</li>
+						<li>VRMLLoader</li>
+					</ul>
+				</li>
+				<li>math
+					<ul>
+						<li>ColorConverter</li>
+						<li>ConvexHull</li>
+						<li>ImprovedNoise</li>
+						<li>Lut</li>
+						<li>SimplexNoise</li>
+					</ul>
+				</li>
+				<li>modifiers
+					<ul>
+						<li>ExplodeModifier</li>
+						<li>SimplifyModifier</li>
+						<li>SubdivisionModifier</li>
+						<li>TessellateModifier</li>
+					</ul>
+				</li>
+				<li>objects
+					<ul>
+						<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>
 					</ul>
 				</li>
 				</li>
 				<li>pmrem
 				<li>pmrem
@@ -108,6 +197,94 @@
 						<li>PMREMGenerator</li>
 						<li>PMREMGenerator</li>
 					</ul>
 					</ul>
 				</li>
 				</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>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>ParallaxShader</li>
+						<li>PixelShader</li>
+						<li>RGBShiftShader</li>
+						<li>SAOShader</li>
+						<li>SepiaShader</li>
+						<li>SMAAShader</li>
+						<li>SobelOperatorShader</li>
+						<li>SSAOShader</li>
+						<li>TechnicolorShader</li>
+						<li>ToneMapShader</li>
+						<li>TriangleBlurShader</li>
+						<li>UnpackDepthRGBAShader</li>
+						<li>VerticalBlurShader</li>
+						<li>VerticalTiltShiftShader</li>
+						<li>VignetteShader</li>
+						<li>WaterRefractionShader</li>
+					</ul>
+				</li>
 				<li>utils
 				<li>utils
 					<ul>
 					<ul>
 						<li>BufferGeometryUtils</li>
 						<li>BufferGeometryUtils</li>
@@ -124,7 +301,7 @@
 		</p>
 		</p>
 		<p>
 		<p>
 			Note: When using code from the examples directory, it's important that all files match the version of
 			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 no good approach to use *GLTFLoader* and *OrbitControls* from R96 together
+			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
 			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.
 			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.
 			In both cases, ensure the code is compatible with your three.js main file.

+ 22 - 17
docs/manual/en/introduction/Useful-links.html

@@ -17,15 +17,12 @@
 
 
 			Note also that as three.js is under rapid development, a lot of these links will contain information that is
 			Note also that as three.js is under rapid development, a lot of these links will contain information that is
 			out of date - if something isn't working as you'd expect or as one of these links says it should,
 			out of date - if something isn't working as you'd expect or as one of these links says it should,
-			check the browser console for warnings or errors, the relevant docs pages and especially the [page:DeprecatedList].<br /><br />
-
-			In addition to this page, mrdoob maintains a collection of links related to three.js over on Google+.
-			Check them out <a href="https://plus.google.com/+ThreejsOrg">here</a>.
+			check the browser console for warnings or errors, the relevant docs pages and especially the [page:DeprecatedList].
 		</p>
 		</p>
 
 
 		<h2>Help forums</h2>
 		<h2>Help forums</h2>
 		<p>
 		<p>
-			Three.js officially uses [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
+			Three.js officially uses the [link:https://discourse.threejs.org/ forum] and [link:http://stackoverflow.com/tags/three.js/info Stack Overflow] for help requests.
 			If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
 			If you need assistance with something, that's the place to go. Do NOT open an issue on Github for help requests.
 		</p>
 		</p>
 
 
@@ -33,6 +30,9 @@
 
 
 		<h3>Getting started with three.js</h3>
 		<h3>Getting started with three.js</h3>
 		<ul>
 		<ul>
+			<li>
+				[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
+			</li>
 			<li>
 			<li>
 				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
 				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
 			</li>
 			</li>
@@ -43,6 +43,12 @@
 
 
 		<h3>More extensive / advanced articles and courses</h3>
 		<h3>More extensive / advanced articles and courses</h3>
 		<ul>
 		<ul>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:https://threejsfundamentals.org/ Three.js Fundamentals]
+			</li>
 			<li>
 			<li>
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 			</li>
 			</li>
@@ -60,21 +66,16 @@
 			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
 			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
 		 </li>
 		 </li>
 		 <li>
 		 <li>
-			 [link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			 by [link:https://github.com/BKcore BKcore]
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
+			 Check out the selection of literature recommended by the community.
 		 </li>
 		 </li>
 		</ul>
 		</ul>
 
 
-		<h3>Tutorials in other languages</h3>
+		<h2>News and Updates</h2>
 		<ul>
 		<ul>
 			<li>
 			<li>
-				[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 			</li>
 			</li>
-
-		</ul>
-
-		<h2>News and Updates</h2>
-		<ul>
 			<li>
 			<li>
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 			</li>
 			</li>
@@ -84,9 +85,6 @@
 			<li>
 			<li>
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 			</li>
 			</li>
-			<li>
-				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
-			</li>
 		</ul>
 		</ul>
 
 
 		<h2>Examples</h2>
 		<h2>Examples</h2>
@@ -173,6 +171,13 @@
 			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 			by [link:http://github.com/nrocy Paul King]
 			by [link:http://github.com/nrocy Paul King]
 		</li>
 		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
 	 </ul>
 	 </ul>
 
 
 	</body>
 	</body>

+ 20 - 12
docs/manual/zh/introduction/Useful-links.html

@@ -31,6 +31,9 @@
 
 
 		<h3>three.js入门</h3>
 		<h3>three.js入门</h3>
 		<ul>
 		<ul>
+			<li>
+				[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
+			</li>
 			<li>
 			<li>
 				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
 				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] by [link:https://codepen.io/rachsmith/ Rachel Smith].
 			</li>
 			</li>
@@ -41,6 +44,12 @@
 
 
 		<h3>更加广泛、高级的文章与教程</h3>
 		<h3>更加广泛、高级的文章与教程</h3>
 		<ul>
 		<ul>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:https://threejsfundamentals.org/ Three.js Fundamentals]
+			</li>
 			<li>
 			<li>
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
 			</li>
 			</li>
@@ -58,21 +67,16 @@
 			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
 			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
 		 </li>
 		 </li>
 		 <li>
 		 <li>
-			 [link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
-			 by [link:https://github.com/BKcore BKcore]
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
+			 Check out the selection of literature recommended by the community.
 		 </li>
 		 </li>
 		</ul>
 		</ul>
 
 
-		<h3>其它非英语的教程</h3>
+		<h2>新闻与更新</h2>
 		<ul>
 		<ul>
 			<li>
 			<li>
-				[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
 			</li>
 			</li>
-
-		</ul>
-
-		<h2>新闻与更新</h2>
-		<ul>
 			<li>
 			<li>
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
 			</li>
 			</li>
@@ -82,9 +86,6 @@
 			<li>
 			<li>
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
 			</li>
 			</li>
-			<li>
-				[link:https://plus.google.com/104300307601542851567/posts Three.js posts] on Google+ – frequent posts on Three.js
-			</li>
 		</ul>
 		</ul>
 		<h2>示例</h2>
 		<h2>示例</h2>
 		<ul>
 		<ul>
@@ -165,6 +166,13 @@
 			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
 			by [link:http://github.com/nrocy Paul King]
 			by [link:http://github.com/nrocy Paul King]
 		</li>
 		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
 	 </ul>
 	 </ul>
 
 
 	</body>
 	</body>

+ 2 - 2
docs/prettify/threejs.css

@@ -12,6 +12,6 @@ pre .dec, code .dec { color: #22c0c4; } /* decimal */
 pre.prettyprint, code.prettyprint {
 pre.prettyprint, code.prettyprint {
 	background-color: #F5F5F5;
 	background-color: #F5F5F5;
 	font-family: 'Roboto Mono', monospace;
 	font-family: 'Roboto Mono', monospace;
-	font-size: var(--font-size);
-	line-height: var(--line-height);
+	font-size: 14px;
+	line-height: 24px;
 }
 }

+ 5 - 16
docs/scenes/bones-browser.html

@@ -3,22 +3,9 @@
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<title>Three.js Bones Browser</title>
 		<title>Three.js Bones Browser</title>
+		<link rel="shortcut icon" href="../../files/favicon.ico" />
+		<link rel="stylesheet" type="text/css" href="../../files/main.css">
 		<style>
 		<style>
-			@font-face {
-				font-family: 'inconsolata';
-				src: url('../files/inconsolata.woff') format('woff');
-				font-weight: normal;
-				font-style: normal;
-			}
-
-			body {
-				margin:0;
-				font-family: 'inconsolata';
-				font-size: 15px;
-				line-height: 18px;
-				overflow: hidden;
-			}
-
 			canvas { width: 100%; height: 100% }
 			canvas { width: 100%; height: 100% }
 
 
 			#newWindow {
 			#newWindow {
@@ -49,7 +36,10 @@
 			function initScene() {
 			function initScene() {
 
 
 				gui = new dat.GUI();
 				gui = new dat.GUI();
+
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
+				scene.background = new THREE.Color( 0x444444 );
+
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 200 );
 				camera.position.z = 30;
 				camera.position.z = 30;
 				camera.position.y = 30;
 				camera.position.y = 30;
@@ -57,7 +47,6 @@
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer = new THREE.WebGLRenderer( { antialias: true } );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setPixelRatio( window.devicePixelRatio );
 				renderer.setSize( window.innerWidth, window.innerHeight );
 				renderer.setSize( window.innerWidth, window.innerHeight );
-				renderer.setClearColor( 0x000000, 1 );
 				document.body.appendChild( renderer.domElement );
 				document.body.appendChild( renderer.domElement );
 
 
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );
 				orbit = new THREE.OrbitControls( camera, renderer.domElement );

+ 6 - 17
docs/scenes/geometry-browser.html

@@ -3,22 +3,9 @@
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<title>Three.js Geometry Browser</title>
 		<title>Three.js Geometry Browser</title>
+		<link rel="shortcut icon" href="../../files/favicon.ico" />
+		<link rel="stylesheet" type="text/css" href="../../files/main.css">
 		<style>
 		<style>
-			@font-face {
-				font-family: 'inconsolata';
-				src: url('../files/inconsolata.woff') format('woff');
-				font-weight: normal;
-				font-style: normal;
-			}
-
-			body {
-				margin:0;
-				font-family: 'inconsolata';
-				font-size: 15px;
-				line-height: 18px;
-				overflow: hidden;
-			}
-
 			canvas { width: 100%; height: 100% }
 			canvas { width: 100%; height: 100% }
 
 
 			#newWindow {
 			#newWindow {
@@ -37,7 +24,7 @@
 		<script src="../../build/three.min.js"></script>
 		<script src="../../build/three.min.js"></script>
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 		<script src='../../examples/js/libs/dat.gui.min.js'></script>
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
 		<script src="../../examples/js/controls/OrbitControls.js"></script>
-		<script src="../../examples/js/ParametricGeometries.js"></script>
+		<script src="../../examples/js/geometries/ParametricGeometries.js"></script>
 
 
 		<script src='js/geometry.js'></script>
 		<script src='js/geometry.js'></script>
 
 
@@ -46,14 +33,16 @@
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 
 			var gui = new dat.GUI();
 			var gui = new dat.GUI();
+
 			var scene = new THREE.Scene();
 			var scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x444444 );
+
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 50 );
 			camera.position.z = 30;
 			camera.position.z = 30;
 
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setClearColor( 0x000000, 1 );
 			document.body.appendChild( renderer.domElement );
 			document.body.appendChild( renderer.domElement );
 
 
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );
 			var orbit = new THREE.OrbitControls( camera, renderer.domElement );

+ 5 - 16
docs/scenes/material-browser.html

@@ -3,22 +3,9 @@
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<title>Three.js Material Browser</title>
 		<title>Three.js Material Browser</title>
+		<link rel="shortcut icon" href="../../files/favicon.ico" />
+		<link rel="stylesheet" type="text/css" href="../../files/main.css">
 		<style>
 		<style>
-			@font-face {
-				font-family: 'inconsolata';
-				src: url('../files/inconsolata.woff') format('woff');
-				font-weight: normal;
-				font-style: normal;
-			}
-
-			body {
-				margin:0;
-				font-family: 'inconsolata';
-				font-size: 15px;
-				line-height: 18px;
-				overflow: hidden;
-			}
-
 			canvas { width: 100%; height: 100% }
 			canvas { width: 100%; height: 100% }
 
 
 			#newWindow {
 			#newWindow {
@@ -43,14 +30,16 @@
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 			document.getElementById( 'newWindow' ).href += window.location.hash;
 
 
 			var gui = new dat.GUI();
 			var gui = new dat.GUI();
+
 			var scene = new THREE.Scene();
 			var scene = new THREE.Scene();
+			scene.background = new THREE.Color( 0x444444 );
+
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 10, 50 );
 			camera.position.z = 30;
 			camera.position.z = 30;
 
 
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			var renderer = new THREE.WebGLRenderer( { antialias: true } );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setPixelRatio( window.devicePixelRatio );
 			renderer.setSize( window.innerWidth, window.innerHeight );
 			renderer.setSize( window.innerWidth, window.innerHeight );
-			renderer.setClearColor( 0x000000, 1 );
 			document.body.appendChild( renderer.domElement );
 			document.body.appendChild( renderer.domElement );
 
 
 			var ambientLight = new THREE.AmbientLight( 0x000000 );
 			var ambientLight = new THREE.AmbientLight( 0x000000 );

+ 3 - 1
editor/index.html

@@ -6,7 +6,7 @@
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<link rel="apple-touch-icon" href="images/icon.png">
 		<link rel="apple-touch-icon" href="images/icon.png">
 		<link rel="manifest" href="manifest.json">
 		<link rel="manifest" href="manifest.json">
-		<link rel="shortcut icon" href="../favicon.ico" />
+		<link rel="shortcut icon" href="../files/favicon.ico" />
 	</head>
 	</head>
 	<body ontouchstart="">
 	<body ontouchstart="">
 		<script type="text/javascript">
 		<script type="text/javascript">
@@ -140,11 +140,13 @@
 		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.BoxGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CircleGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.CylinderGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.ExtrudeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.IcosahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.OctahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.PlaneGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.RingGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.SphereGeometry.js"></script>
+		<script src="js/Sidebar.Geometry.ShapeGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TetrahedronGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>
 		<script src="js/Sidebar.Geometry.TorusKnotGeometry.js"></script>

+ 123 - 123
editor/js/Menubar.Add.js

@@ -37,135 +37,180 @@ Menubar.Add = function ( editor ) {
 
 
 	options.add( new UI.HorizontalRule() );
 	options.add( new UI.HorizontalRule() );
 
 
-	// Plane
+	// Box
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/box' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
-		var material = new THREE.MeshStandardMaterial();
-		var mesh = new THREE.Mesh( geometry, material );
-		mesh.name = 'Plane';
+		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
+		mesh.name = 'Box';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Box
+	// Circle
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/box' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.BoxBufferGeometry( 1, 1, 1, 1, 1, 1 );
+		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Box';
+		mesh.name = 'Circle';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Circle
+	// Cylinder
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/circle' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.CircleBufferGeometry( 1, 8, 0, Math.PI * 2 );
+		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Circle';
+		mesh.name = 'Cylinder';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Ring
+	// Icosahedron
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
+		var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Ring';
+		mesh.name = 'Icosahedron';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Cylinder
+	// Lathe
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/cylinder' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.CylinderBufferGeometry( 1, 1, 1, 8, 1, false, 0, Math.PI * 2 );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Cylinder';
+		var points = [
+			new THREE.Vector2( 0, 0 ),
+			new THREE.Vector2( 0.4, 0 ),
+			new THREE.Vector2( 0.35, 0.05 ),
+			new THREE.Vector2( 0.1, 0.075 ),
+			new THREE.Vector2( 0.08, 0.1 ),
+			new THREE.Vector2( 0.08, 0.4 ),
+			new THREE.Vector2( 0.1, 0.42 ),
+			new THREE.Vector2( 0.14, 0.48 ),
+			new THREE.Vector2( 0.2, 0.5 ),
+			new THREE.Vector2( 0.25, 0.54 ),
+			new THREE.Vector2( 0.3, 1.2 )
+		];
+
+		var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
+		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
+		mesh.name = 'Lathe';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Sphere
+	// Octahedron
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
+		var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Sphere';
+		mesh.name = 'Octahedron';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Icosahedron
+	// Plane
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/icosahedron' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/plane' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.IcosahedronBufferGeometry( 1, 0 );
+		var geometry = new THREE.PlaneBufferGeometry( 1, 1, 1, 1 );
+		var material = new THREE.MeshStandardMaterial();
+		var mesh = new THREE.Mesh( geometry, material );
+		mesh.name = 'Plane';
+
+		editor.execute( new AddObjectCommand( mesh ) );
+
+	} );
+	options.add( option )
+
+	// Ring
+
+	var option = new UI.Row();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/add/ring' ) );
+	option.onClick( function () {
+
+		var geometry = new THREE.RingBufferGeometry( 0.5, 1, 8, 1, 0, Math.PI * 2 );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Icosahedron';
+		mesh.name = 'Ring';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// Octahedron
+	// Sphere
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/octahedron' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/sphere' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var geometry = new THREE.OctahedronBufferGeometry( 1, 0 );
+		var geometry = new THREE.SphereBufferGeometry( 1, 8, 6, 0, Math.PI * 2, 0, Math.PI );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
 		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial() );
-		mesh.name = 'Octahedron';
+		mesh.name = 'Sphere';
 
 
 		editor.execute( new AddObjectCommand( mesh ) );
 		editor.execute( new AddObjectCommand( mesh ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
+	// Sprite
+
+	var option = new UI.Row();
+	option.setClass( 'option' );
+	option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
+	option.onClick( function () {
+
+		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
+		sprite.name = 'Sprite';
+
+		editor.execute( new AddObjectCommand( sprite ) );
+
+	} );
+	options.add( option );
+
 	// Tetrahedron
 	// Tetrahedron
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
@@ -266,90 +311,40 @@ Menubar.Add = function ( editor ) {
 	options.add( option );
 	options.add( option );
 	*/
 	*/
 
 
-	// Lathe
-
-	var option = new UI.Row();
-	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/lathe' ) );
-	option.onClick( function () {
-
-		var points = [
-			new THREE.Vector2( 0, 0 ),
-			new THREE.Vector2( 0.4, 0 ),
-			new THREE.Vector2( 0.35, 0.05 ),
-			new THREE.Vector2( 0.1, 0.075 ),
-			new THREE.Vector2( 0.08, 0.1 ),
-			new THREE.Vector2( 0.08, 0.4 ),
-			new THREE.Vector2( 0.1, 0.42 ),
-			new THREE.Vector2( 0.14, 0.48 ),
-			new THREE.Vector2( 0.2, 0.5 ),
-			new THREE.Vector2( 0.25, 0.54 ),
-			new THREE.Vector2( 0.3, 1.2 )
-		];
-
-		var geometry = new THREE.LatheBufferGeometry( points, 12, 0, Math.PI * 2 );
-		var mesh = new THREE.Mesh( geometry, new THREE.MeshStandardMaterial( { side: THREE.DoubleSide } ) );
-		mesh.name = 'Lathe';
-
-		editor.execute( new AddObjectCommand( mesh ) );
-
-	} );
-	options.add( option );
-
-	// Sprite
-
-	var option = new UI.Row();
-	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/sprite' ) );
-	option.onClick( function () {
-
-		var sprite = new THREE.Sprite( new THREE.SpriteMaterial() );
-		sprite.name = 'Sprite';
-
-		editor.execute( new AddObjectCommand( sprite ) );
-
-	} );
-	options.add( option );
-
 	//
 	//
 
 
 	options.add( new UI.HorizontalRule() );
 	options.add( new UI.HorizontalRule() );
 
 
-	// PointLight
+	// AmbientLight
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var color = 0xffffff;
-		var intensity = 1;
-		var distance = 0;
+		var color = 0x222222;
 
 
-		var light = new THREE.PointLight( color, intensity, distance );
-		light.name = 'PointLight';
+		var light = new THREE.AmbientLight( color );
+		light.name = 'AmbientLight';
 
 
 		editor.execute( new AddObjectCommand( light ) );
 		editor.execute( new AddObjectCommand( light ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// SpotLight
+	// DirectionalLight
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
 		var color = 0xffffff;
 		var color = 0xffffff;
 		var intensity = 1;
 		var intensity = 1;
-		var distance = 0;
-		var angle = Math.PI * 0.1;
-		var penumbra = 0;
 
 
-		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
-		light.name = 'SpotLight';
-		light.target.name = 'SpotLight Target';
+		var light = new THREE.DirectionalLight( color, intensity );
+		light.name = 'DirectionalLight';
+		light.target.name = 'DirectionalLight Target';
 
 
 		light.position.set( 5, 10, 7.5 );
 		light.position.set( 5, 10, 7.5 );
 
 
@@ -358,59 +353,64 @@ Menubar.Add = function ( editor ) {
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// DirectionalLight
+	// HemisphereLight
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/directionallight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var color = 0xffffff;
+		var skyColor = 0x00aaff;
+		var groundColor = 0xffaa00;
 		var intensity = 1;
 		var intensity = 1;
 
 
-		var light = new THREE.DirectionalLight( color, intensity );
-		light.name = 'DirectionalLight';
-		light.target.name = 'DirectionalLight Target';
+		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
+		light.name = 'HemisphereLight';
 
 
-		light.position.set( 5, 10, 7.5 );
+		light.position.set( 0, 10, 0 );
 
 
 		editor.execute( new AddObjectCommand( light ) );
 		editor.execute( new AddObjectCommand( light ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// HemisphereLight
+	// PointLight
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/hemispherelight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/pointlight' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var skyColor = 0x00aaff;
-		var groundColor = 0xffaa00;
+		var color = 0xffffff;
 		var intensity = 1;
 		var intensity = 1;
+		var distance = 0;
 
 
-		var light = new THREE.HemisphereLight( skyColor, groundColor, intensity );
-		light.name = 'HemisphereLight';
-
-		light.position.set( 0, 10, 0 );
+		var light = new THREE.PointLight( color, intensity, distance );
+		light.name = 'PointLight';
 
 
 		editor.execute( new AddObjectCommand( light ) );
 		editor.execute( new AddObjectCommand( light ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// AmbientLight
+	// SpotLight
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/ambientlight' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/spotlight' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var color = 0x222222;
+		var color = 0xffffff;
+		var intensity = 1;
+		var distance = 0;
+		var angle = Math.PI * 0.1;
+		var penumbra = 0;
 
 
-		var light = new THREE.AmbientLight( color );
-		light.name = 'AmbientLight';
+		var light = new THREE.SpotLight( color, intensity, distance, angle, penumbra );
+		light.name = 'SpotLight';
+		light.target.name = 'SpotLight Target';
+
+		light.position.set( 5, 10, 7.5 );
 
 
 		editor.execute( new AddObjectCommand( light ) );
 		editor.execute( new AddObjectCommand( light ) );
 
 
@@ -421,30 +421,30 @@ Menubar.Add = function ( editor ) {
 
 
 	options.add( new UI.HorizontalRule() );
 	options.add( new UI.HorizontalRule() );
 
 
-	// PerspectiveCamera
+	// OrthographicCamera
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var camera = new THREE.PerspectiveCamera();
-		camera.name = 'PerspectiveCamera';
+		var camera = new THREE.OrthographicCamera();
+		camera.name = 'OrthographicCamera';
 
 
 		editor.execute( new AddObjectCommand( camera ) );
 		editor.execute( new AddObjectCommand( camera ) );
 
 
 	} );
 	} );
 	options.add( option );
 	options.add( option );
 
 
-	// OrthographicCamera
+	// PerspectiveCamera
 
 
 	var option = new UI.Row();
 	var option = new UI.Row();
 	option.setClass( 'option' );
 	option.setClass( 'option' );
-	option.setTextContent( strings.getKey( 'menubar/add/orthographiccamera' ) );
+	option.setTextContent( strings.getKey( 'menubar/add/perspectivecamera' ) );
 	option.onClick( function () {
 	option.onClick( function () {
 
 
-		var camera = new THREE.OrthographicCamera();
-		camera.name = 'OrthographicCamera';
+		var camera = new THREE.PerspectiveCamera();
+		camera.name = 'PerspectiveCamera';
 
 
 		editor.execute( new AddObjectCommand( camera ) );
 		editor.execute( new AddObjectCommand( camera ) );
 
 

+ 145 - 0
editor/js/Sidebar.Geometry.ExtrudeGeometry.js

@@ -0,0 +1,145 @@
+/**
+ * @author Temdog007 / http://github.com/Temdog007
+ */
+
+Sidebar.Geometry.ExtrudeGeometry = function ( editor, object ) {
+
+	var strings = editor.strings;
+
+	var signals = editor.signals;
+
+	var container = new UI.Row();
+
+	var geometry = object.geometry;
+	var parameters = geometry.parameters;
+	var options = parameters.options;
+	options.curveSegments = options.curveSegments != undefined ? options.curveSegments : 12;
+	options.steps = options.steps != undefined ? options.steps : 1;
+	options.depth = options.depth != undefined ? options.depth : 100;
+	options.bevelThickness = options.bevelThickness !== undefined ? options.bevelThickness : 6;
+	options.bevelSize = options.bevelSize !== undefined ? options.bevelSize : 4;
+	options.bevelOffset = options.bevelOffset !== undefined ? options.bevelOffset : 0;
+	options.bevelSegments = options.bevelSegments !== undefined ? options.bevelSegments : 3;
+
+
+	// curveSegments
+
+	var curveSegmentsRow = new UI.Row();
+	var curveSegments = new UI.Integer( options.curveSegments ).onChange( update ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/curveSegments' ) ).setWidth( '90px' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// steps
+
+	var stepsRow = new UI.Row();
+	var steps = new UI.Integer( options.steps ).onChange( update ).setRange( 1, Infinity );
+
+	stepsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/steps' ) ).setWidth( '90px' ) );
+	stepsRow.add( steps );
+
+	container.add( stepsRow );
+
+	// depth
+
+	var depthRow = new UI.Row();
+	var depth = new UI.Number( options.depth ).onChange( update ).setRange( 1, Infinity );
+
+	depthRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/depth' ) ).setWidth( '90px' ) );
+	depthRow.add( depth );
+
+	container.add( depthRow );
+
+	// enabled
+
+	var enabledRow = new UI.Row();
+	var enabled = new UI.Checkbox( options.bevelEnabled ).onChange( update );
+
+	enabledRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelEnabled' ) ).setWidth( '90px' ) );
+	enabledRow.add( enabled );
+
+	container.add( enabledRow );
+
+	if ( options.bevelEnabled === true ) {
+
+		// thickness
+
+		var thicknessRow = new UI.Row();
+		var thickness = new UI.Number( options.bevelThickness ).onChange( update );
+
+		thicknessRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelThickness' ) ).setWidth( '90px' ) );
+		thicknessRow.add( thickness );
+
+		container.add( thicknessRow );
+
+		// size
+
+		var sizeRow = new UI.Row();
+		var size = new UI.Number( options.bevelSize ).onChange( update );
+
+		sizeRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSize' ) ).setWidth( '90px' ) );
+		sizeRow.add( size );
+
+		container.add( sizeRow );
+
+		// offset
+
+		var offsetRow = new UI.Row();
+		var offset = new UI.Number( options.bevelOffset ).onChange( update );
+
+		offsetRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelOffset' ) ).setWidth( '90px' ) );
+		offsetRow.add( offset );
+
+		container.add( offsetRow );
+
+		// segments
+
+		var segmentsRow = new UI.Row();
+		var segments = new UI.Integer( options.bevelSegments ).onChange( update ).setRange( 0, Infinity );
+
+		segmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/extrude_geometry/bevelSegments' ) ).setWidth( '90px' ) );
+		segmentsRow.add( segments );
+
+		container.add( segmentsRow );
+
+	}
+
+	var button = new UI.Button( strings.getKey( 'sidebar/geometry/extrude_geometry/shape' ) ).onClick( toShape ).setWidth( '90px' ).setMarginLeft( '90px' );
+	container.add( button );
+
+	//
+
+	function update() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+			parameters.shapes,
+			{
+				curveSegments: curveSegments.getValue(),
+				steps: steps.getValue(),
+				depth: depth.getValue(),
+				bevelEnabled: enabled.getValue(),
+				bevelThickness: thickness !== undefined ? thickness.getValue() : options.bevelThickness,
+				bevelSize: size !== undefined ? size.getValue() : options.bevelSize,
+				bevelOffset: offset !== undefined ? offset.getValue() : options.bevelOffset,
+				bevelSegments: segments !== undefined ? segments.getValue() : options.bevelSegments
+			}
+		) ) );
+
+	}
+
+	function toShape() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE.ShapeBufferGeometry(
+			parameters.shapes,
+			options.curveSegments
+		) ) );
+
+	}
+
+	return container;
+
+};
+
+Sidebar.Geometry.ExtrudeBufferGeometry = Sidebar.Geometry.ExtrudeGeometry;

+ 3 - 84
editor/js/Sidebar.Geometry.LatheGeometry.js

@@ -2,7 +2,7 @@
  * @author rfm1201
  * @author rfm1201
  */
  */
 
 
-Sidebar.Geometry.LatheGeometry = function( editor, object ) {
+Sidebar.Geometry.LatheGeometry = function ( editor, object ) {
 
 
 	var strings = editor.strings;
 	var strings = editor.strings;
 
 
@@ -45,99 +45,18 @@ Sidebar.Geometry.LatheGeometry = function( editor, object ) {
 
 
 	// points
 	// points
 
 
-	var lastPointIdx = 0;
-	var pointsUI = [];
-
 	var pointsRow = new UI.Row();
 	var pointsRow = new UI.Row();
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/lathe_geometry/points' ) ).setWidth( '90px' ) );
 
 
-	var points = new UI.Span().setDisplay( 'inline-block' );
+	var points = new UI.Points2().setValue( parameters.points ).onChange( update );
 	pointsRow.add( points );
 	pointsRow.add( points );
 
 
-	var pointsList = new UI.Div();
-	points.add( pointsList );
-
-	for ( var i = 0; i < parameters.points.length; i ++ ) {
-
-		var point = parameters.points[ i ];
-		pointsList.add( createPointRow( point.x, point.y ) );
-
-	}
-
-	var addPointButton = new UI.Button( '+' ).onClick( function() {
-
-		if( pointsUI.length === 0 ){
-
-			pointsList.add( createPointRow( 0, 0 ) );
-
-		} else {
-
-			var point = pointsUI[ pointsUI.length - 1 ];
-
-			pointsList.add( createPointRow( point.x.getValue(), point.y.getValue() ) );
-
-		}
-
-		update();
-
-	} );
-	points.add( addPointButton );
-
 	container.add( pointsRow );
 	container.add( pointsRow );
 
 
-	//
-
-	function createPointRow( x, y ) {
-
-		var pointRow = new UI.Div();
-		var lbl = new UI.Text( lastPointIdx + 1 ).setWidth( '20px' );
-		var txtX = new UI.Number( x ).setRange( 0, Infinity ).setWidth( '40px' ).onChange( update );
-		var txtY = new UI.Number( y ).setWidth( '40px' ).onChange( update );
-		var idx = lastPointIdx;
-		var btn = new UI.Button( '-' ).onClick( function() {
-
-			deletePointRow( idx );
-
-		} );
-
-		pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
-		lastPointIdx ++;
-		pointRow.add( lbl, txtX, txtY, btn );
-
-		return pointRow;
-
-	}
-
-	function deletePointRow( idx ) {
-
-		if ( ! pointsUI[ idx ] ) return;
-
-		pointsList.remove( pointsUI[ idx ].row );
-		pointsUI[ idx ] = null;
-
-		update();
-
-	}
-
 	function update() {
 	function update() {
 
 
-		var points = [];
-		var count = 0;
-
-		for ( var i = 0; i < pointsUI.length; i ++ ) {
-
-			var pointUI = pointsUI[ i ];
-
-			if ( ! pointUI ) continue;
-
-			points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
-			count ++;
-			pointUI.lbl.setValue( count );
-
-		}
-
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
-			points,
+			points.getValue(),
 			segments.getValue(),
 			segments.getValue(),
 			phiStart.getValue() / 180 * Math.PI,
 			phiStart.getValue() / 180 * Math.PI,
 			phiLength.getValue() / 180 * Math.PI
 			phiLength.getValue() / 180 * Math.PI

+ 55 - 0
editor/js/Sidebar.Geometry.ShapeGeometry.js

@@ -0,0 +1,55 @@
+/**
+ * @author Temdog007 / http://github.com/Temdog007
+ */
+
+Sidebar.Geometry.ShapeGeometry = function ( editor, object ) {
+
+	var strings = editor.strings;
+
+	var signals = editor.signals;
+
+	var container = new UI.Row();
+
+	var geometry = object.geometry;
+	var parameters = geometry.parameters;
+
+	// curveSegments
+
+	var curveSegmentsRow = new UI.Row();
+	var curveSegments = new UI.Integer( parameters.curveSegments || 12 ).onChange( changeShape ).setRange( 1, Infinity );
+
+	curveSegmentsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/shape_geometry/curveSegments' ) ).setWidth( '90px' ) );
+	curveSegmentsRow.add( curveSegments );
+
+	container.add( curveSegmentsRow );
+
+	// to extrude
+	var button = new UI.Button( strings.getKey( 'sidebar/geometry/shape_geometry/extrude' ) ).onClick( toExtrude ).setWidth( '90px' ).setMarginLeft( '90px' );
+	container.add( button );
+
+	//
+
+	function changeShape() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
+			parameters.shapes,
+			curveSegments.getValue()
+		) ) );
+
+	}
+
+	function toExtrude() {
+
+		editor.execute( new SetGeometryCommand( object, new THREE.ExtrudeBufferGeometry(
+			parameters.shapes, {
+				curveSegments: curveSegments.getValue()
+			}
+		) ) );
+
+	}
+
+	return container;
+
+};
+
+Sidebar.Geometry.ShapeBufferGeometry = Sidebar.Geometry.ShapeGeometry;

+ 2 - 83
editor/js/Sidebar.Geometry.TubeGeometry.js

@@ -15,45 +15,12 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 
 	// points
 	// points
 
 
-	var lastPointIdx = 0;
-	var pointsUI = [];
-
 	var pointsRow = new UI.Row();
 	var pointsRow = new UI.Row();
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
 	pointsRow.add( new UI.Text( strings.getKey( 'sidebar/geometry/tube_geometry/path' ) ).setWidth( '90px' ) );
 
 
-	var points = new UI.Span().setDisplay( 'inline-block' );
+	var points = new UI.Points3().setValue( parameters.path.points ).onChange( update );
 	pointsRow.add( points );
 	pointsRow.add( points );
 
 
-	var pointsList = new UI.Div();
-	points.add( pointsList );
-
-	var parameterPoints = parameters.path.points;
-	for ( var i = 0; i < parameterPoints.length; i ++ ) {
-
-		var point = parameterPoints[ i ];
-		pointsList.add( createPointRow( point.x, point.y, point.z ) );
-
-	}
-
-	var addPointButton = new UI.Button( '+' ).onClick( function () {
-
-		if ( pointsUI.length === 0 ) {
-
-			pointsList.add( createPointRow( 0, 0, 0 ) );
-
-		} else {
-
-			var point = pointsUI[ pointsUI.length - 1 ];
-
-			pointsList.add( createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
-
-		}
-
-		update();
-
-	} );
-	points.add( addPointButton );
-
 	container.add( pointsRow );
 	container.add( pointsRow );
 
 
 	// radius
 	// radius
@@ -118,25 +85,10 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 
 	function update() {
 	function update() {
 
 
-		var points = [];
-		var count = 0;
-
-		for ( var i = 0; i < pointsUI.length; i ++ ) {
-
-			var pointUI = pointsUI[ i ];
-
-			if ( ! pointUI ) continue;
-
-			points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
-			count ++;
-			pointUI.lbl.setValue( count );
-
-		}
-
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 		tensionRow.setDisplay( curveType.getValue() == 'catmullrom' ? '' : 'none' );
 
 
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
 		editor.execute( new SetGeometryCommand( object, new THREE[ geometry.type ](
-			new THREE.CatmullRomCurve3( points, closed.getValue(), curveType.getValue(), tension.getValue() ),
+			new THREE.CatmullRomCurve3( points.getValue(), closed.getValue(), curveType.getValue(), tension.getValue() ),
 			tubularSegments.getValue(),
 			tubularSegments.getValue(),
 			radius.getValue(),
 			radius.getValue(),
 			radialSegments.getValue(),
 			radialSegments.getValue(),
@@ -145,39 +97,6 @@ Sidebar.Geometry.TubeGeometry = function ( editor, object ) {
 
 
 	}
 	}
 
 
-	function createPointRow( x, y, z ) {
-
-		var pointRow = new UI.Div();
-		var lbl = new UI.Text( lastPointIdx + 1 ).setWidth( '20px' );
-		var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( update );
-		var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( update );
-		var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( update );
-		var idx = lastPointIdx;
-		var btn = new UI.Button( '-' ).onClick( function () {
-
-			deletePointRow( idx );
-
-		} );
-
-		pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
-		lastPointIdx ++;
-		pointRow.add( lbl, txtX, txtY, txtZ, btn );
-
-		return pointRow;
-
-	}
-
-	function deletePointRow( idx ) {
-
-		if ( ! pointsUI[ idx ] ) return;
-
-		pointsList.remove( pointsUI[ idx ].row );
-		pointsUI[ idx ] = null;
-
-		update();
-
-	}
-
 	return container;
 	return container;
 
 
 };
 };

+ 18 - 1
editor/js/Sidebar.Project.js

@@ -133,7 +133,24 @@ Sidebar.Project = function ( editor ) {
 
 
 		rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
 		rendererPropertiesRow.setDisplay( type === 'WebGLRenderer' ? '' : 'none' );
 
 
-		var renderer = new rendererTypes[ type ]( { antialias: antialias } );
+		var parameters = {};
+
+		switch ( type ) {
+
+			case 'WebGLRenderer':
+				parameters.antialias = antialias;
+				break;
+
+			case 'RaytracingRenderer':
+				parameters.workers = navigator.hardwareConcurrency || 4;
+				parameters.workerPath = '../examples/js/renderers/RaytracingWorker.js';
+				parameters.randomize = true;
+				parameters.blockSize = 64;
+				break;
+
+		}
+
+		var renderer = new rendererTypes[ type ]( parameters );
 
 
 		if ( shadows && renderer.shadowMap ) {
 		if ( shadows && renderer.shadowMap ) {
 
 

+ 13 - 0
editor/js/Strings.js

@@ -135,6 +135,16 @@ var Strings = function ( config ) {
 			'sidebar/geometry/cylinder_geometry/heightsegments': 'Height segments',
 			'sidebar/geometry/cylinder_geometry/heightsegments': 'Height segments',
 			'sidebar/geometry/cylinder_geometry/openended': 'Open ended',
 			'sidebar/geometry/cylinder_geometry/openended': 'Open ended',
 
 
+			'sidebar/geometry/extrude_geometry/curveSegments': 'Curve Segments',
+			'sidebar/geometry/extrude_geometry/steps': 'Steps',
+			'sidebar/geometry/extrude_geometry/depth': 'Depth',
+			'sidebar/geometry/extrude_geometry/bevelEnabled': 'Bevel?',
+			'sidebar/geometry/extrude_geometry/bevelThickness': 'Thickness',
+			'sidebar/geometry/extrude_geometry/bevelSize': 'Size',
+			'sidebar/geometry/extrude_geometry/bevelOffset': 'Offset',
+			'sidebar/geometry/extrude_geometry/bevelSegments': 'Segments',
+			'sidebar/geometry/extrude_geometry/shape': 'Convert to Shape',
+
 			'sidebar/geometry/geometry/vertices': 'Vertices',
 			'sidebar/geometry/geometry/vertices': 'Vertices',
 			'sidebar/geometry/geometry/faces': 'Faces',
 			'sidebar/geometry/geometry/faces': 'Faces',
 
 
@@ -164,6 +174,9 @@ var Strings = function ( config ) {
 			'sidebar/geometry/ring_geometry/thetastart': 'Theta start',
 			'sidebar/geometry/ring_geometry/thetastart': 'Theta start',
 			'sidebar/geometry/ring_geometry/thetalength': 'Theta length',
 			'sidebar/geometry/ring_geometry/thetalength': 'Theta length',
 
 
+			'sidebar/geometry/shape_geometry/curveSegments': 'Curve Segments',
+			'sidebar/geometry/shape_geometry/extrude': 'Extrude',
+
 			'sidebar/geometry/sphere_geometry/radius': 'Radius',
 			'sidebar/geometry/sphere_geometry/radius': 'Radius',
 			'sidebar/geometry/sphere_geometry/widthsegments': 'Width segments',
 			'sidebar/geometry/sphere_geometry/widthsegments': 'Width segments',
 			'sidebar/geometry/sphere_geometry/heightsegments': 'Height segments',
 			'sidebar/geometry/sphere_geometry/heightsegments': 'Height segments',

+ 256 - 0
editor/js/libs/ui.three.js

@@ -453,6 +453,262 @@ UI.Outliner.prototype.setValue = function ( value ) {
 
 
 };
 };
 
 
+var Points = function ( onAddClicked ) {
+
+	UI.Element.call( this );
+
+	var span = new UI.Span().setDisplay( 'inline-block' );
+
+	this.pointsList = new UI.Div();
+	span.add( this.pointsList );
+
+	var row = new UI.Row();
+	span.add( row );
+
+	var addPointButton = new UI.Button( '+' ).onClick( onAddClicked );
+	row.add( addPointButton );
+
+	this.update = function () {
+
+		if ( this.onChangeCallback !== null ) {
+
+			this.onChangeCallback();
+
+		}
+
+	}.bind( this );
+
+	this.dom = span.dom;
+	this.pointsUI = [];
+	this.lastPointIdx = 0;
+	this.onChangeCallback = null;
+	return this;
+
+};
+
+Points.prototype = Object.create( UI.Element.prototype );
+Points.prototype.constructor = Points;
+
+Points.prototype.onChange = function ( callback ) {
+
+	this.onChangeCallback = callback;
+
+	return this;
+
+};
+
+Points.prototype.clear = function () {
+
+	for ( var i = 0; i < this.pointsUI.length; ++ i ) {
+
+		if ( this.pointsUI[ i ] ) {
+
+			this.deletePointRow( i, true );
+
+		}
+
+	}
+
+	this.lastPointIdx = 0;
+
+};
+
+Points.prototype.deletePointRow = function ( idx, dontUpdate ) {
+
+	if ( ! this.pointsUI[ idx ] ) return;
+
+	this.pointsList.remove( this.pointsUI[ idx ].row );
+	this.pointsUI[ idx ] = null;
+
+	if ( dontUpdate !== true ) {
+
+		this.update();
+
+	}
+
+};
+
+UI.Points2 = function () {
+
+	Points.call( this, UI.Points2.addRow.bind( this ) );
+
+	return this;
+
+};
+
+UI.Points2.prototype = Object.create( Points.prototype );
+UI.Points2.prototype.constructor = UI.Points2;
+
+UI.Points2.addRow = function () {
+
+	if ( this.pointsUI.length === 0 ) {
+
+		this.pointsList.add( this.createPointRow( 0, 0 ) );
+
+	} else {
+
+		var point = this.pointsUI[ this.pointsUI.length - 1 ];
+
+		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue() ) );
+
+	}
+
+	this.update();
+
+};
+
+UI.Points2.prototype.getValue = function () {
+
+	var points = [];
+	var count = 0;
+
+	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
+
+		var pointUI = this.pointsUI[ i ];
+
+		if ( ! pointUI ) continue;
+
+		points.push( new THREE.Vector2( pointUI.x.getValue(), pointUI.y.getValue() ) );
+		++ count;
+		pointUI.lbl.setValue( count );
+
+	}
+
+	return points;
+
+};
+
+UI.Points2.prototype.setValue = function ( points ) {
+
+	this.clear();
+
+	for ( var i = 0; i < points.length; i ++ ) {
+
+		var point = points[ i ];
+		this.pointsList.add( this.createPointRow( point.x, point.y ) );
+
+	}
+
+	this.update();
+	return this;
+
+};
+
+UI.Points2.prototype.createPointRow = function ( x, y ) {
+
+	var pointRow = new UI.Div();
+	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
+	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
+	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
+
+	var idx = this.lastPointIdx;
+	var scope = this;
+	var btn = new UI.Button( '-' ).onClick( function () {
+
+		if ( scope.isEditing ) return;
+		scope.deletePointRow( idx );
+
+	} );
+
+	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY } );
+	++ this.lastPointIdx;
+	pointRow.add( lbl, txtX, txtY, btn );
+
+	return pointRow;
+
+};
+
+UI.Points3 = function () {
+
+	Points.call( this, UI.Points3.addRow.bind( this ) );
+
+	return this;
+
+};
+
+UI.Points3.prototype = Object.create( Points.prototype );
+UI.Points3.prototype.constructor = UI.Points3;
+
+UI.Points3.addRow = function () {
+
+	if ( this.pointsUI.length === 0 ) {
+
+		this.pointsList.add( this.createPointRow( 0, 0, 0 ) );
+
+	} else {
+
+		var point = this.pointsUI[ this.pointsUI.length - 1 ];
+
+		this.pointsList.add( this.createPointRow( point.x.getValue(), point.y.getValue(), point.z.getValue() ) );
+
+	}
+
+	this.update();
+
+};
+
+UI.Points3.prototype.getValue = function () {
+
+	var points = [];
+	var count = 0;
+
+	for ( var i = 0; i < this.pointsUI.length; i ++ ) {
+
+		var pointUI = this.pointsUI[ i ];
+
+		if ( ! pointUI ) continue;
+
+		points.push( new THREE.Vector3( pointUI.x.getValue(), pointUI.y.getValue(), pointUI.z.getValue() ) );
+		++ count;
+		pointUI.lbl.setValue( count );
+
+	}
+
+	return points;
+
+};
+
+UI.Points3.prototype.setValue = function ( points ) {
+
+	this.clear();
+
+	for ( var i = 0; i < points.length; i ++ ) {
+
+		var point = points[ i ];
+		this.pointsList.add( this.createPointRow( point.x, point.y, point.z ) );
+
+	}
+
+	this.update();
+	return this;
+
+};
+
+UI.Points3.prototype.createPointRow = function ( x, y, z ) {
+
+	var pointRow = new UI.Div();
+	var lbl = new UI.Text( this.lastPointIdx + 1 ).setWidth( '20px' );
+	var txtX = new UI.Number( x ).setWidth( '30px' ).onChange( this.update );
+	var txtY = new UI.Number( y ).setWidth( '30px' ).onChange( this.update );
+	var txtZ = new UI.Number( z ).setWidth( '30px' ).onChange( this.update );
+
+	var idx = this.lastPointIdx;
+	var scope = this;
+	var btn = new UI.Button( '-' ).onClick( function () {
+
+		if ( scope.isEditing ) return;
+		scope.deletePointRow( idx );
+
+	} );
+
+	this.pointsUI.push( { row: pointRow, lbl: lbl, x: txtX, y: txtY, z: txtZ } );
+	++ this.lastPointIdx;
+	pointRow.add( lbl, txtX, txtY, txtZ, btn );
+
+	return pointRow;
+
+};
+
 UI.THREE = {};
 UI.THREE = {};
 
 
 UI.THREE.Boolean = function ( boolean, text ) {
 UI.THREE.Boolean = function ( boolean, text ) {

+ 5 - 4
editor/manifest.json

@@ -1,13 +1,14 @@
 {
 {
-  "short_name": "Editor",
   "name": "Three.js Editor",
   "name": "Three.js Editor",
+  "short_name": "Three.js",
+  "start_url": ".",
+  "scope": ".",
+  "display": "standalone",
   "icons": [
   "icons": [
     {
     {
       "src": "./images/icon.png",
       "src": "./images/icon.png",
       "type": "image/png",
       "type": "image/png",
       "sizes": "144x144"
       "sizes": "144x144"
     }
     }
-  ],
-  "start_url": ".",
-  "display": "standalone"
+  ]
 }
 }

+ 5 - 26
examples/css2d_label.html

@@ -4,39 +4,18 @@
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<title>three.js css2d - label</title>
 		<title>three.js css2d - label</title>
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
-			body {
-				background-color: #000;
-				margin: 0;
-				overflow: hidden;
-			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #FFF;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
-			.label{
+			.label {
 				color: #FFF;
 				color: #FFF;
 				font-family: sans-serif;
 				font-family: sans-serif;
 				padding: 2px;
 				padding: 2px;
 				background: rgba( 0, 0, 0, .6 );
 				background: rgba( 0, 0, 0, .6 );
 			}
 			}
-
-			a {
-				color: #000000;
-			}
-
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - three.js css2d - label</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css2d - label</div>
 
 
 		<script src="../build/three.js"></script>
 		<script src="../build/three.js"></script>
 
 
@@ -64,8 +43,6 @@
 				camera = new THREE.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 );
 				camera.position.set( 10, 5, 20 );
 
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 
 
 				var dirLight = new THREE.DirectionalLight( 0xffffff );
 				var dirLight = new THREE.DirectionalLight( 0xffffff );
@@ -128,6 +105,8 @@
 				labelRenderer.domElement.style.top = 0;
 				labelRenderer.domElement.style.top = 0;
 				document.body.appendChild( labelRenderer.domElement );
 				document.body.appendChild( labelRenderer.domElement );
 
 
+				var controls = new THREE.OrbitControls( camera, labelRenderer.domElement );
+
 			}
 			}
 
 
 			function animate() {
 			function animate() {

+ 21 - 45
examples/css3d_molecules.html

@@ -4,71 +4,49 @@
 		<title>three.js css3d - molecules</title>
 		<title>three.js css3d - molecules</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
-			html, body {
-				height: 100%;
-			}
-
 			body {
 			body {
 				background-color: #050505;
 				background-color: #050505;
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
 				background: radial-gradient(ellipse at center,  rgba(43,45,48,1) 0%,rgba(0,0,0,1) 100%);
-
-				margin: 0;
-				font-family: Arial;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
 			}
 			}
 
 
-			#info {
+			#topmenu {
 				position: absolute;
 				position: absolute;
-				top: 0px;
+				top: 50px;
 				width: 100%;
 				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
+				padding: 10px;
+				box-sizing: border-box;
 				text-align: center;
 				text-align: center;
-				z-index: 1;
 			}
 			}
 
 
 			#menu {
 			#menu {
 				position: absolute;
 				position: absolute;
 				bottom: 20px;
 				bottom: 20px;
 				width: 100%;
 				width: 100%;
+				padding: 10px;
+				box-sizing: border-box;
 				text-align: center;
 				text-align: center;
-				padding: 0;
-				margin: 0;
-			}
-
-			#topmenu {
-				position: absolute;
-				top: 10px;
-				right: 10px;
-				width: 100%;
-				text-align: right;
-				padding: 0;
-				margin: 0;
-				z-index: 1;
 			}
 			}
 
 
 			button {
 			button {
 				color: rgb(255,255,255);
 				color: rgb(255,255,255);
-				background: transparent;
+				background: rgb(255,255,255,0.1);
 				border: 0px;
 				border: 0px;
 				padding: 5px 10px;
 				padding: 5px 10px;
+				margin: 2px;
+				font-size: 14px;
 				cursor: pointer;
 				cursor: pointer;
 			}
 			}
-			button:hover {
-				background-color: rgba(0,255,255,0.5);
-			}
-			button:active {
-				color: #000000;
-				background-color: rgba(0,255,255,1);
-			}
+
+				button:hover {
+					background-color: rgba(0,255,255,0.5);
+				}
+
+				button:active {
+					color: #000000;
+					background-color: rgba(0,255,255,1);
+				}
 
 
 			.bond {
 			.bond {
 				width: 5px;
 				width: 5px;
@@ -85,11 +63,9 @@
 		<script src="js/loaders/PDBLoader.js"></script>
 		<script src="js/loaders/PDBLoader.js"></script>
 
 
 		<div id="container"></div>
 		<div id="container"></div>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - molecules</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - molecules</div>
 		<div id="topmenu">
 		<div id="topmenu">
-			<button id="b_a">Atoms</button>
-			<button id="b_b">Bonds</button>
-			<button id="b_ab">Atoms + Bonds</button>
+			<button id="b_a">Atoms</button><button id="b_b">Bonds</button><button id="b_ab">Atoms + Bonds</button>
 		</div>
 		</div>
 		<div id="menu"></div>
 		<div id="menu"></div>
 
 

+ 8 - 19
examples/css3d_orthographic.html

@@ -3,32 +3,21 @@
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
 			body {
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				overflow: hidden;
+				background-color: #f0f0f0;
 			}
 			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
 			a {
 			a {
+				color: #f00;
+			}
+			#info {
 				color: #000000;
 				color: #000000;
 			}
 			}
-
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d orthographic</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - orthographic</div>
 
 
 		<script src="../build/three.js"></script>
 		<script src="../build/three.js"></script>
 
 
@@ -53,8 +42,6 @@
 
 
 				camera.position.set( - 200, 200, 200 );
 				camera.position.set( - 200, 200, 200 );
 
 
-				var controls = new THREE.OrbitControls( camera );
-
 				scene = new THREE.Scene();
 				scene = new THREE.Scene();
 				scene.background = new THREE.Color( 0xf0f0f0 );
 				scene.background = new THREE.Color( 0xf0f0f0 );
 
 
@@ -104,6 +91,8 @@
 				renderer2.domElement.style.top = 0;
 				renderer2.domElement.style.top = 0;
 				document.body.appendChild( renderer2.domElement );
 				document.body.appendChild( renderer2.domElement );
 
 
+				var controls = new THREE.OrbitControls( camera, renderer2.domElement );
+
 				function createPlane( width, height, cssColor, pos, rot ) {
 				function createPlane( width, height, cssColor, pos, rot ) {
 
 
 					var element = document.createElement( 'div' );
 					var element = document.createElement( 'div' );

+ 1 - 24
examples/css3d_panorama.html

@@ -4,30 +4,7 @@
 		<title>three.js css3d - panorama</title>
 		<title>three.js css3d - panorama</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background-color: #000000;
-				margin: 0;
-				cursor: move;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
-			}
-		</style>
+		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	</head>
 	<body>
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="../build/three.js"></script>

+ 3 - 26
examples/css3d_panorama_deviceorientation.html

@@ -1,40 +1,17 @@
 <!DOCTYPE html>
 <!DOCTYPE html>
 <html>
 <html>
 	<head>
 	<head>
-		<title>three.js css3d - panorama - deviceorientation</title>
+		<title>three.js css3d - panorama - device orientation</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
-		<style>
-			body {
-				background-color: #000000;
-				margin: 0;
-				cursor: move;
-				overflow: hidden;
-			}
-
-			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
-			}
-		</style>
+		<link type="text/css" rel="stylesheet" href="main.css">
 	</head>
 	</head>
 	<body>
 	<body>
 		<script src="../build/three.js"></script>
 		<script src="../build/three.js"></script>
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 		<script src="js/controls/DeviceOrientationControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - panorama - decideorientation. cubemap by <a href="http://www.humus.name/index.php?page=Textures" target="_blank" rel="noopener">Humus</a>.</div>
+		<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>
 		<script>
 
 

+ 7 - 26
examples/css3d_periodictable.html

@@ -4,32 +4,10 @@
 		<title>three.js css3d - periodic table</title>
 		<title>three.js css3d - periodic table</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
-			html, body {
-				height: 100%;
-			}
-
-			body {
-				background-color: #000000;
-				margin: 0;
-				font-family: Helvetica, sans-serif;;
-				overflow: hidden;
-			}
-
 			a {
 			a {
-				color: #ffffff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #ffffff;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
+				color: #8ff;
 			}
 			}
 
 
 			#menu {
 			#menu {
@@ -44,7 +22,9 @@
 				height: 160px;
 				height: 160px;
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 				box-shadow: 0px 0px 12px rgba(0,255,255,0.5);
 				border: 1px solid rgba(127,255,255,0.25);
 				border: 1px solid rgba(127,255,255,0.25);
+				font-family: Helvetica, sans-serif;
 				text-align: center;
 				text-align: center;
+				line-height: normal;
 				cursor: default;
 				cursor: default;
 			}
 			}
 
 
@@ -89,9 +69,11 @@
 				padding: 5px 10px;
 				padding: 5px 10px;
 				cursor: pointer;
 				cursor: pointer;
 			}
 			}
+
 			button:hover {
 			button:hover {
 				background-color: rgba(0,255,255,0.5);
 				background-color: rgba(0,255,255,0.5);
 			}
 			}
+
 			button:active {
 			button:active {
 				color: #000000;
 				color: #000000;
 				background-color: rgba(0,255,255,0.75);
 				background-color: rgba(0,255,255,0.75);
@@ -104,7 +86,7 @@
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - periodic table. <a href="https://plus.google.com/113862800338869870683/posts/QcFk5HrWran" target="_blank" rel="noopener">info</a>.</div>
 		<div id="container"></div>
 		<div id="container"></div>
 		<div id="menu">
 		<div id="menu">
 			<button id="table">TABLE</button>
 			<button id="table">TABLE</button>
@@ -360,7 +342,6 @@
 				//
 				//
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
-				controls.rotateSpeed = 0.5;
 				controls.minDistance = 500;
 				controls.minDistance = 500;
 				controls.maxDistance = 6000;
 				controls.maxDistance = 6000;
 				controls.addEventListener( 'change', render );
 				controls.addEventListener( 'change', render );

+ 4 - 20
examples/css3d_sandbox.html

@@ -3,37 +3,21 @@
 	<head>
 	<head>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
 			body {
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				overflow: hidden;
+				color: #000;
 			}
 			}
-			#info {
-				position: absolute;
-				top: 0px;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				text-align: center;
-				z-index: 1;
-			}
-
 			a {
 			a {
-				color: #000000;
+				color: #080;
 			}
 			}
-
 		</style>
 		</style>
 	</head>
 	</head>
 	<body>
 	<body>
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> - css3d sandbox</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sandbox</div>
 
 
 		<script src="../build/three.js"></script>
 		<script src="../build/three.js"></script>
-
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/controls/TrackballControls.js"></script>
-
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
 		<script>
 		<script>

+ 5 - 24
examples/css3d_sprites.html

@@ -4,32 +4,14 @@
 		<title>three.js css3d - sprites</title>
 		<title>three.js css3d - sprites</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
-			html, body {
-				height: 100%;
-			}
-
 			body {
 			body {
-				background-color: #ffffff;
-				margin: 0;
-				font-family: Arial;
-				overflow: hidden;
+				background-color: #fff;
+				color: #000;
 			}
 			}
-
 			a {
 			a {
-				color: #8888ff;
-			}
-
-			#info {
-				position: absolute;
-				width: 100%;
-				color: #000000;
-				padding: 5px;
-				font-family: Monospace;
-				font-size: 13px;
-				font-weight: bold;
-				text-align: center;
-				z-index: 1;
+				color: #48f;
 			}
 			}
 		</style>
 		</style>
 	</head>
 	</head>
@@ -39,7 +21,7 @@
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/controls/TrackballControls.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 		<script src="js/renderers/CSS3DRenderer.js"></script>
 
 
-		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js css3d</a> - sprites.</div>
+		<div id="info"><a href="http://threejs.org" target="_blank" rel="noopener">three.js</a> css3d - sprites</div>
 		<div id="container"></div>
 		<div id="container"></div>
 
 
 		<script>
 		<script>
@@ -155,7 +137,6 @@
 				//
 				//
 
 
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
 				controls = new THREE.TrackballControls( camera, renderer.domElement );
-				controls.rotateSpeed = 0.5;
 
 
 				//
 				//
 
 

+ 10 - 9
examples/css3d_youtube.html

@@ -4,17 +4,18 @@
 		<title>three.js css3d - youtube</title>
 		<title>three.js css3d - youtube</title>
 		<meta charset="utf-8">
 		<meta charset="utf-8">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
 		<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+		<link type="text/css" rel="stylesheet" href="main.css">
 		<style>
 		<style>
-			html, body {
-				height: 100%;
-				overflow: hidden;
+			body {
+				background-color: #ffffff;
 			}
 			}
+
 			#blocker {
 			#blocker {
 				position: absolute;
 				position: absolute;
-				top: 0px;
-				left: 0px;
-				width: 100%;
-				height: 100%;
+				top: 0;
+				left: 0;
+				bottom: 0;
+				right: 0;
 			}
 			}
 		</style>
 		</style>
 	</head>
 	</head>
@@ -86,12 +87,12 @@
 				var blocker = document.getElementById( 'blocker' );
 				var blocker = document.getElementById( 'blocker' );
 				blocker.style.display = 'none';
 				blocker.style.display = 'none';
 
 
-				document.addEventListener( 'mousedown', function () {
+				controls.addEventListener( 'start', function () {
 
 
 					blocker.style.display = '';
 					blocker.style.display = '';
 
 
 				} );
 				} );
-				document.addEventListener( 'mouseup', function () {
+				controls.addEventListener( 'end', function () {
 
 
 					blocker.style.display = 'none';
 					blocker.style.display = 'none';
 
 

+ 3 - 1
examples/files.js

@@ -45,7 +45,6 @@ var files = {
 		"webgl_geometry_text",
 		"webgl_geometry_text",
 		"webgl_geometry_text_shapes",
 		"webgl_geometry_text_shapes",
 		"webgl_geometry_text_stroke",
 		"webgl_geometry_text_stroke",
-		"webgl_hdr",
 		"webgl_helpers",
 		"webgl_helpers",
 		"webgl_interactive_buffergeometry",
 		"webgl_interactive_buffergeometry",
 		"webgl_interactive_cubes",
 		"webgl_interactive_cubes",
@@ -75,6 +74,7 @@ var files = {
 		"webgl_lines_sphere",
 		"webgl_lines_sphere",
 		"webgl_loader_3ds",
 		"webgl_loader_3ds",
 		"webgl_loader_3mf",
 		"webgl_loader_3mf",
+		"webgl_loader_3mf_materials",
 		"webgl_loader_amf",
 		"webgl_loader_amf",
 		"webgl_loader_assimp",
 		"webgl_loader_assimp",
 		"webgl_loader_assimp2json",
 		"webgl_loader_assimp2json",
@@ -126,11 +126,13 @@ var files = {
 		"webgl_loader_sea3d_sound",
 		"webgl_loader_sea3d_sound",
 		"webgl_loader_stl",
 		"webgl_loader_stl",
 		"webgl_loader_svg",
 		"webgl_loader_svg",
+		"webgl_loader_texture_basis",
 		"webgl_loader_texture_dds",
 		"webgl_loader_texture_dds",
 		"webgl_loader_texture_exr",
 		"webgl_loader_texture_exr",
 		"webgl_loader_texture_hdr",
 		"webgl_loader_texture_hdr",
 		"webgl_loader_texture_ktx",
 		"webgl_loader_texture_ktx",
 		"webgl_loader_texture_pvrtc",
 		"webgl_loader_texture_pvrtc",
+		"webgl_loader_texture_rgbm",
 		"webgl_loader_texture_tga",
 		"webgl_loader_texture_tga",
 		"webgl_loader_ttf",
 		"webgl_loader_ttf",
 		"webgl_loader_vrm",
 		"webgl_loader_vrm",

+ 0 - 71
examples/js/ImprovedNoise.js

@@ -1,71 +0,0 @@
-// http://mrl.nyu.edu/~perlin/noise/
-
-var ImprovedNoise = function () {
-
-	var p = [ 151,160,137,91,90,15,131,13,201,95,96,53,194,233,7,225,140,36,103,30,69,142,8,99,37,240,21,10,
-		 23,190,6,148,247,120,234,75,0,26,197,62,94,252,219,203,117,35,11,32,57,177,33,88,237,149,56,87,
-		 174,20,125,136,171,168,68,175,74,165,71,134,139,48,27,166,77,146,158,231,83,111,229,122,60,211,
-		 133,230,220,105,92,41,55,46,245,40,244,102,143,54,65,25,63,161,1,216,80,73,209,76,132,187,208,
-		 89,18,169,200,196,135,130,116,188,159,86,164,100,109,198,173,186,3,64,52,217,226,250,124,123,5,
-		 202,38,147,118,126,255,82,85,212,207,206,59,227,47,16,58,17,182,189,28,42,223,183,170,213,119,
-		 248,152,2,44,154,163,70,221,153,101,155,167,43,172,9,129,22,39,253,19,98,108,110,79,113,224,232,
-		 178,185,112,104,218,246,97,228,251,34,242,193,238,210,144,12,191,179,162,241,81,51,145,235,249,
-		 14,239,107,49,192,214,31,181,199,106,157,184,84,204,176,115,121,50,45,127,4,150,254,138,236,205,
-		 93,222,114,67,29,24,72,243,141,128,195,78,66,215,61,156,180 ];
-
-	for (var i = 0; i < 256 ; i ++) {
-
-		p[256 + i] = p[i];
-
-	}
-
-	function fade(t) {
-
-		return t * t * t * (t * (t * 6 - 15) + 10);
-
-	}
-
-	function lerp(t, a, b) {
-
-		return a + t * (b - a);
-
-	}
-
-	function grad(hash, x, y, z) {
-
-		var h = hash & 15;
-		var u = h < 8 ? x : y, v = h < 4 ? y : h == 12 || h == 14 ? x : z;
-		return ((h&1) == 0 ? u : -u) + ((h&2) == 0 ? v : -v);
-
-	}
-
-	return {
-
-		noise: function (x, y, z) {
-
-			var floorX = Math.floor(x), floorY = Math.floor(y), floorZ = Math.floor(z);
-
-			var X = floorX & 255, Y = floorY & 255, Z = floorZ & 255;
-
-			x -= floorX;
-			y -= floorY;
-			z -= floorZ;
-
-			var xMinus1 = x - 1, yMinus1 = y - 1, zMinus1 = z - 1;
-
-			var u = fade(x), v = fade(y), w = fade(z);
-
-			var A = p[X] + Y, AA = p[A] + Z, AB = p[A + 1] + Z, B = p[X + 1] + Y, BA = p[B] + Z, BB = p[B + 1] + Z;
-
-			return lerp(w, lerp(v, lerp(u, grad(p[AA], x, y, z),
-							grad(p[BA], xMinus1, y, z)),
-						lerp(u, grad(p[AB], x, yMinus1, z),
-							grad(p[BB], xMinus1, yMinus1, z))),
-					lerp(v, lerp(u, grad(p[AA + 1], x, y, zMinus1),
-							grad(p[BA + 1], xMinus1, y, z - 1)),
-						lerp(u, grad(p[AB + 1], x, yMinus1, zMinus1),
-							grad(p[BB + 1], xMinus1, yMinus1, zMinus1))));
-
-		}
-	}
-};

+ 0 - 23
examples/js/PRNG.js

@@ -1,23 +0,0 @@
-// Park-Miller-Carta Pseudo-Random Number Generator
-// https://github.com/pnitsch/BitmapData.js/blob/master/js/BitmapData.js
-
-var PRNG = function () {
-
-	this.seed = 1;
-	this.next = function() {
-
-		return ( this.gen() / 2147483647 );
-
-	};
-	this.nextRange = function( min, max )	{
-
-		return min + ( ( max - min ) * this.next() )
-
-	};
-	this.gen = function() {
-
-		return this.seed = ( this.seed * 16807 ) % 2147483647;
-
-	};
-
-};

+ 0 - 324
examples/js/SimplexNoise.js

@@ -1,324 +0,0 @@
-// Ported from Stefan Gustavson's java implementation
-// http://staffwww.itn.liu.se/~stegu/simplexnoise/simplexnoise.pdf
-// Read Stefan's excellent paper for details on how this code works.
-//
-// Sean McCullough [email protected]
-//
-// Added 4D noise
-// Joshua Koo [email protected] 
-
-/**
- * You can pass in a random number generator object if you like.
- * It is assumed to have a random() method.
- */
-var SimplexNoise = function(r) {
-	if (r == undefined) r = Math;
-	this.grad3 = [[ 1,1,0 ],[ -1,1,0 ],[ 1,-1,0 ],[ -1,-1,0 ], 
-                                 [ 1,0,1 ],[ -1,0,1 ],[ 1,0,-1 ],[ -1,0,-1 ], 
-                                 [ 0,1,1 ],[ 0,-1,1 ],[ 0,1,-1 ],[ 0,-1,-1 ]]; 
-
-	this.grad4 = [[ 0,1,1,1 ], [ 0,1,1,-1 ], [ 0,1,-1,1 ], [ 0,1,-1,-1 ],
-	     [ 0,-1,1,1 ], [ 0,-1,1,-1 ], [ 0,-1,-1,1 ], [ 0,-1,-1,-1 ],
-	     [ 1,0,1,1 ], [ 1,0,1,-1 ], [ 1,0,-1,1 ], [ 1,0,-1,-1 ],
-	     [ -1,0,1,1 ], [ -1,0,1,-1 ], [ -1,0,-1,1 ], [ -1,0,-1,-1 ],
-	     [ 1,1,0,1 ], [ 1,1,0,-1 ], [ 1,-1,0,1 ], [ 1,-1,0,-1 ],
-	     [ -1,1,0,1 ], [ -1,1,0,-1 ], [ -1,-1,0,1 ], [ -1,-1,0,-1 ],
-	     [ 1,1,1,0 ], [ 1,1,-1,0 ], [ 1,-1,1,0 ], [ 1,-1,-1,0 ],
-	     [ -1,1,1,0 ], [ -1,1,-1,0 ], [ -1,-1,1,0 ], [ -1,-1,-1,0 ]];
-
-	this.p = [];
-	for (var i = 0; i < 256; i ++) {
-		this.p[i] = Math.floor(r.random() * 256);
-	}
-  // To remove the need for index wrapping, double the permutation table length 
-	this.perm = []; 
-	for (var i = 0; i < 512; i ++) {
-		this.perm[i] = this.p[i & 255];
-	} 
-
-  // A lookup table to traverse the simplex around a given point in 4D. 
-  // Details can be found where this table is used, in the 4D noise method. 
-	this.simplex = [ 
-    [ 0,1,2,3 ],[ 0,1,3,2 ],[ 0,0,0,0 ],[ 0,2,3,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,2,3,0 ], 
-    [ 0,2,1,3 ],[ 0,0,0,0 ],[ 0,3,1,2 ],[ 0,3,2,1 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 1,3,2,0 ], 
-    [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
-    [ 1,2,0,3 ],[ 0,0,0,0 ],[ 1,3,0,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,3,0,1 ],[ 2,3,1,0 ], 
-    [ 1,0,2,3 ],[ 1,0,3,2 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 2,0,3,1 ],[ 0,0,0,0 ],[ 2,1,3,0 ], 
-    [ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ], 
-    [ 2,0,1,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,0,1,2 ],[ 3,0,2,1 ],[ 0,0,0,0 ],[ 3,1,2,0 ], 
-    [ 2,1,0,3 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 0,0,0,0 ],[ 3,1,0,2 ],[ 0,0,0,0 ],[ 3,2,0,1 ],[ 3,2,1,0 ]]; 
-};
-
-SimplexNoise.prototype.dot = function(g, x, y) { 
-	return g[0] * x + g[1] * y;
-};
-
-SimplexNoise.prototype.dot3 = function(g, x, y, z) {
-	return g[0] * x + g[1] * y + g[2] * z; 
-};
-
-SimplexNoise.prototype.dot4 = function(g, x, y, z, w) {
-	return g[0] * x + g[1] * y + g[2] * z + g[3] * w;
-};
-
-SimplexNoise.prototype.noise = function(xin, yin) { 
-	var n0, n1, n2; // Noise contributions from the three corners 
-  // Skew the input space to determine which simplex cell we're in 
-	var F2 = 0.5 * (Math.sqrt(3.0) - 1.0); 
-	var s = (xin + yin) * F2; // Hairy factor for 2D 
-	var i = Math.floor(xin + s); 
-	var j = Math.floor(yin + s); 
-	var G2 = (3.0 - Math.sqrt(3.0)) / 6.0; 
-	var t = (i + j) * G2; 
-	var X0 = i - t; // Unskew the cell origin back to (x,y) space 
-	var Y0 = j - t; 
-	var x0 = xin - X0; // The x,y distances from the cell origin 
-	var y0 = yin - Y0; 
-  // For the 2D case, the simplex shape is an equilateral triangle. 
-  // Determine which simplex we are in. 
-	var i1, j1; // Offsets for second (middle) corner of simplex in (i,j) coords 
-	if (x0 > y0) {i1 = 1; j1 = 0;} // lower triangle, XY order: (0,0)->(1,0)->(1,1) 
-	else {i1 = 0; j1 = 1;}      // upper triangle, YX order: (0,0)->(0,1)->(1,1) 
-  // A step of (1,0) in (i,j) means a step of (1-c,-c) in (x,y), and 
-  // a step of (0,1) in (i,j) means a step of (-c,1-c) in (x,y), where 
-  // c = (3-sqrt(3))/6 
-	var x1 = x0 - i1 + G2; // Offsets for middle corner in (x,y) unskewed coords 
-	var y1 = y0 - j1 + G2; 
-	var x2 = x0 - 1.0 + 2.0 * G2; // Offsets for last corner in (x,y) unskewed coords 
-	var y2 = y0 - 1.0 + 2.0 * G2; 
-  // Work out the hashed gradient indices of the three simplex corners 
-	var ii = i & 255; 
-	var jj = j & 255; 
-	var gi0 = this.perm[ii + this.perm[jj]] % 12; 
-	var gi1 = this.perm[ii + i1 + this.perm[jj + j1]] % 12; 
-	var gi2 = this.perm[ii + 1 + this.perm[jj + 1]] % 12; 
-  // Calculate the contribution from the three corners 
-	var t0 = 0.5 - x0 * x0 - y0 * y0; 
-	if (t0 < 0) n0 = 0.0; 
-	else { 
-		t0 *= t0; 
-		n0 = t0 * t0 * this.dot(this.grad3[gi0], x0, y0);  // (x,y) of grad3 used for 2D gradient 
-	} 
-	var t1 = 0.5 - x1 * x1 - y1 * y1; 
-	if (t1 < 0) n1 = 0.0; 
-	else { 
-		t1 *= t1; 
-		n1 = t1 * t1 * this.dot(this.grad3[gi1], x1, y1); 
-	}
-	var t2 = 0.5 - x2 * x2 - y2 * y2; 
-	if (t2 < 0) n2 = 0.0; 
-	else { 
-		t2 *= t2; 
-		n2 = t2 * t2 * this.dot(this.grad3[gi2], x2, y2); 
-	} 
-  // Add contributions from each corner to get the final noise value. 
-  // The result is scaled to return values in the interval [-1,1]. 
-	return 70.0 * (n0 + n1 + n2); 
-};
-
-// 3D simplex noise 
-SimplexNoise.prototype.noise3d = function(xin, yin, zin) { 
-	var n0, n1, n2, n3; // Noise contributions from the four corners 
-  // Skew the input space to determine which simplex cell we're in 
-	var F3 = 1.0 / 3.0; 
-	var s = (xin + yin + zin) * F3; // Very nice and simple skew factor for 3D 
-	var i = Math.floor(xin + s); 
-	var j = Math.floor(yin + s); 
-	var k = Math.floor(zin + s); 
-	var G3 = 1.0 / 6.0; // Very nice and simple unskew factor, too 
-	var t = (i + j + k) * G3; 
-	var X0 = i - t; // Unskew the cell origin back to (x,y,z) space 
-	var Y0 = j - t; 
-	var Z0 = k - t; 
-	var x0 = xin - X0; // The x,y,z distances from the cell origin 
-	var y0 = yin - Y0; 
-	var z0 = zin - Z0; 
-  // For the 3D case, the simplex shape is a slightly irregular tetrahedron. 
-  // Determine which simplex we are in. 
-	var i1, j1, k1; // Offsets for second corner of simplex in (i,j,k) coords 
-	var i2, j2, k2; // Offsets for third corner of simplex in (i,j,k) coords 
-	if (x0 >= y0) { 
-		if (y0 >= z0) 
-      { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // X Y Z order 
-      else if (x0 >= z0) { i1 = 1; j1 = 0; k1 = 0; i2 = 1; j2 = 0; k2 = 1; } // X Z Y order 
-		else { i1 = 0; j1 = 0; k1 = 1; i2 = 1; j2 = 0; k2 = 1; } // Z X Y order 
-	} 
-	else { // x0<y0 
-		if (y0 < z0) { i1 = 0; j1 = 0; k1 = 1; i2 = 0; j2 = 1; k2 = 1; } // Z Y X order 
-    else if (x0 < z0) { i1 = 0; j1 = 1; k1 = 0; i2 = 0; j2 = 1; k2 = 1; } // Y Z X order 
-		else { i1 = 0; j1 = 1; k1 = 0; i2 = 1; j2 = 1; k2 = 0; } // Y X Z order 
-	} 
-  // A step of (1,0,0) in (i,j,k) means a step of (1-c,-c,-c) in (x,y,z), 
-  // a step of (0,1,0) in (i,j,k) means a step of (-c,1-c,-c) in (x,y,z), and 
-  // a step of (0,0,1) in (i,j,k) means a step of (-c,-c,1-c) in (x,y,z), where 
-  // c = 1/6.
-	var x1 = x0 - i1 + G3; // Offsets for second corner in (x,y,z) coords 
-	var y1 = y0 - j1 + G3; 
-	var z1 = z0 - k1 + G3; 
-	var x2 = x0 - i2 + 2.0 * G3; // Offsets for third corner in (x,y,z) coords 
-	var y2 = y0 - j2 + 2.0 * G3; 
-	var z2 = z0 - k2 + 2.0 * G3; 
-	var x3 = x0 - 1.0 + 3.0 * G3; // Offsets for last corner in (x,y,z) coords 
-	var y3 = y0 - 1.0 + 3.0 * G3; 
-	var z3 = z0 - 1.0 + 3.0 * G3; 
-  // Work out the hashed gradient indices of the four simplex corners 
-	var ii = i & 255; 
-	var jj = j & 255; 
-	var kk = k & 255; 
-	var gi0 = this.perm[ii + this.perm[jj + this.perm[kk]]] % 12; 
-	var gi1 = this.perm[ii + i1 + this.perm[jj + j1 + this.perm[kk + k1]]] % 12; 
-	var gi2 = this.perm[ii + i2 + this.perm[jj + j2 + this.perm[kk + k2]]] % 12; 
-	var gi3 = this.perm[ii + 1 + this.perm[jj + 1 + this.perm[kk + 1]]] % 12; 
-  // Calculate the contribution from the four corners 
-	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0; 
-	if (t0 < 0) n0 = 0.0; 
-	else { 
-		t0 *= t0; 
-		n0 = t0 * t0 * this.dot3(this.grad3[gi0], x0, y0, z0); 
-	}
-	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1; 
-	if (t1 < 0) n1 = 0.0; 
-	else { 
-		t1 *= t1; 
-		n1 = t1 * t1 * this.dot3(this.grad3[gi1], x1, y1, z1); 
-	} 
-	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2; 
-	if (t2 < 0) n2 = 0.0; 
-	else { 
-		t2 *= t2; 
-		n2 = t2 * t2 * this.dot3(this.grad3[gi2], x2, y2, z2); 
-	} 
-	var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3; 
-	if (t3 < 0) n3 = 0.0; 
-	else { 
-		t3 *= t3; 
-		n3 = t3 * t3 * this.dot3(this.grad3[gi3], x3, y3, z3); 
-	} 
-  // Add contributions from each corner to get the final noise value. 
-  // The result is scaled to stay just inside [-1,1] 
-	return 32.0 * (n0 + n1 + n2 + n3); 
-};
-
-// 4D simplex noise
-SimplexNoise.prototype.noise4d = function( x, y, z, w ) {
-	// For faster and easier lookups
-	var grad4 = this.grad4;
-	var simplex = this.simplex;
-	var perm = this.perm;
-	
-   // The skewing and unskewing factors are hairy again for the 4D case
-	var F4 = (Math.sqrt(5.0) - 1.0) / 4.0;
-	var G4 = (5.0 - Math.sqrt(5.0)) / 20.0;
-	var n0, n1, n2, n3, n4; // Noise contributions from the five corners
-   // Skew the (x,y,z,w) space to determine which cell of 24 simplices we're in
-	var s = (x + y + z + w) * F4; // Factor for 4D skewing
-	var i = Math.floor(x + s);
-	var j = Math.floor(y + s);
-	var k = Math.floor(z + s);
-	var l = Math.floor(w + s);
-	var t = (i + j + k + l) * G4; // Factor for 4D unskewing
-	var X0 = i - t; // Unskew the cell origin back to (x,y,z,w) space
-	var Y0 = j - t;
-	var Z0 = k - t;
-	var W0 = l - t;
-	var x0 = x - X0;  // The x,y,z,w distances from the cell origin
-	var y0 = y - Y0;
-	var z0 = z - Z0;
-	var w0 = w - W0;
-
-   // For the 4D case, the simplex is a 4D shape I won't even try to describe.
-   // To find out which of the 24 possible simplices we're in, we need to
-   // determine the magnitude ordering of x0, y0, z0 and w0.
-   // The method below is a good way of finding the ordering of x,y,z,w and
-   // then find the correct traversal order for the simplex we’re in.
-   // First, six pair-wise comparisons are performed between each possible pair
-   // of the four coordinates, and the results are used to add up binary bits
-   // for an integer index.
-	var c1 = (x0 > y0) ? 32 : 0;
-	var c2 = (x0 > z0) ? 16 : 0;
-	var c3 = (y0 > z0) ? 8 : 0;
-	var c4 = (x0 > w0) ? 4 : 0;
-	var c5 = (y0 > w0) ? 2 : 0;
-	var c6 = (z0 > w0) ? 1 : 0;
-	var c = c1 + c2 + c3 + c4 + c5 + c6;
-	var i1, j1, k1, l1; // The integer offsets for the second simplex corner
-	var i2, j2, k2, l2; // The integer offsets for the third simplex corner
-	var i3, j3, k3, l3; // The integer offsets for the fourth simplex corner
-   // simplex[c] is a 4-vector with the numbers 0, 1, 2 and 3 in some order.
-   // Many values of c will never occur, since e.g. x>y>z>w makes x<z, y<w and x<w
-   // impossible. Only the 24 indices which have non-zero entries make any sense.
-   // We use a thresholding to set the coordinates in turn from the largest magnitude.
-   // The number 3 in the "simplex" array is at the position of the largest coordinate.
-	i1 = simplex[c][0] >= 3 ? 1 : 0;
-	j1 = simplex[c][1] >= 3 ? 1 : 0;
-	k1 = simplex[c][2] >= 3 ? 1 : 0;
-	l1 = simplex[c][3] >= 3 ? 1 : 0;
-   // The number 2 in the "simplex" array is at the second largest coordinate.
-	i2 = simplex[c][0] >= 2 ? 1 : 0;
-	j2 = simplex[c][1] >= 2 ? 1 : 0;    k2 = simplex[c][2] >= 2 ? 1 : 0;
-	l2 = simplex[c][3] >= 2 ? 1 : 0;
-   // The number 1 in the "simplex" array is at the second smallest coordinate.
-	i3 = simplex[c][0] >= 1 ? 1 : 0;
-	j3 = simplex[c][1] >= 1 ? 1 : 0;
-	k3 = simplex[c][2] >= 1 ? 1 : 0;
-	l3 = simplex[c][3] >= 1 ? 1 : 0;
-   // The fifth corner has all coordinate offsets = 1, so no need to look that up.
-	var x1 = x0 - i1 + G4; // Offsets for second corner in (x,y,z,w) coords
-	var y1 = y0 - j1 + G4;
-	var z1 = z0 - k1 + G4;
-	var w1 = w0 - l1 + G4;
-	var x2 = x0 - i2 + 2.0 * G4; // Offsets for third corner in (x,y,z,w) coords
-	var y2 = y0 - j2 + 2.0 * G4;
-	var z2 = z0 - k2 + 2.0 * G4;
-	var w2 = w0 - l2 + 2.0 * G4;
-	var x3 = x0 - i3 + 3.0 * G4; // Offsets for fourth corner in (x,y,z,w) coords
-	var y3 = y0 - j3 + 3.0 * G4;
-	var z3 = z0 - k3 + 3.0 * G4;
-	var w3 = w0 - l3 + 3.0 * G4;
-	var x4 = x0 - 1.0 + 4.0 * G4; // Offsets for last corner in (x,y,z,w) coords
-	var y4 = y0 - 1.0 + 4.0 * G4;
-	var z4 = z0 - 1.0 + 4.0 * G4;
-	var w4 = w0 - 1.0 + 4.0 * G4;
-   // Work out the hashed gradient indices of the five simplex corners
-	var ii = i & 255;
-	var jj = j & 255;
-	var kk = k & 255;
-	var ll = l & 255;
-	var gi0 = perm[ii + perm[jj + perm[kk + perm[ll]]]] % 32;
-	var gi1 = perm[ii + i1 + perm[jj + j1 + perm[kk + k1 + perm[ll + l1]]]] % 32;
-	var gi2 = perm[ii + i2 + perm[jj + j2 + perm[kk + k2 + perm[ll + l2]]]] % 32;
-	var gi3 = perm[ii + i3 + perm[jj + j3 + perm[kk + k3 + perm[ll + l3]]]] % 32;
-	var gi4 = perm[ii + 1 + perm[jj + 1 + perm[kk + 1 + perm[ll + 1]]]] % 32;
-   // Calculate the contribution from the five corners
-	var t0 = 0.6 - x0 * x0 - y0 * y0 - z0 * z0 - w0 * w0;
-	if (t0 < 0) n0 = 0.0;
-	else {
-		t0 *= t0;
-		n0 = t0 * t0 * this.dot4(grad4[gi0], x0, y0, z0, w0);
-	}
-	var t1 = 0.6 - x1 * x1 - y1 * y1 - z1 * z1 - w1 * w1;
-	if (t1 < 0) n1 = 0.0;
-	else {
-		t1 *= t1;
-		n1 = t1 * t1 * this.dot4(grad4[gi1], x1, y1, z1, w1);
-	}
-	var t2 = 0.6 - x2 * x2 - y2 * y2 - z2 * z2 - w2 * w2;
-	if (t2 < 0) n2 = 0.0;
-	else {
-		t2 *= t2;
-		n2 = t2 * t2 * this.dot4(grad4[gi2], x2, y2, z2, w2);
-	}   var t3 = 0.6 - x3 * x3 - y3 * y3 - z3 * z3 - w3 * w3;
-	if (t3 < 0) n3 = 0.0;
-	else {
-		t3 *= t3;
-		n3 = t3 * t3 * this.dot4(grad4[gi3], x3, y3, z3, w3);
-	}
-	var t4 = 0.6 - x4 * x4 - y4 * y4 - z4 * z4 - w4 * w4;
-	if (t4 < 0) n4 = 0.0;
-	else {
-		t4 *= t4;
-		n4 = t4 * t4 * this.dot4(grad4[gi4], x4, y4, z4, w4);
-	}
-   // Sum up and scale the result to cover the range [-1,1]
-	return 27.0 * (n0 + n1 + n2 + n3 + n4);
-};

+ 0 - 0
examples/js/AnimationClipCreator.js → examples/js/animation/AnimationClipCreator.js


+ 21 - 27
examples/js/TimelinerController.js → examples/js/animation/TimelinerController.js

@@ -3,7 +3,7 @@
  *
  *
  * Timeliner GUI library (required to use this class):
  * Timeliner GUI library (required to use this class):
  *
  *
- * 		./libs/timeliner_gui.min.js
+ * 		../libs/timeliner_gui.min.js
  *
  *
  * Source code:
  * Source code:
  *
  *
@@ -35,7 +35,7 @@ THREE.TimelinerController.prototype = {
 
 
 	constructor: THREE.TimelinerController,
 	constructor: THREE.TimelinerController,
 
 
-	init: function( timeliner ) {
+	init: function () {
 
 
 		var tracks = [],
 		var tracks = [],
 			trackInfo = this._trackInfo;
 			trackInfo = this._trackInfo;
@@ -44,9 +44,8 @@ THREE.TimelinerController.prototype = {
 
 
 			var spec = trackInfo[ i ];
 			var spec = trackInfo[ i ];
 
 
-			tracks.push( this._addTrack(
-					spec.type, spec.propertyPath,
-					spec.initialValue, spec.interpolation ) );
+			tracks.push( this._addTrack( spec.type, spec.propertyPath, spec.initialValue, spec.interpolation ) );
+
 		}
 		}
 
 
 		this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
 		this._clip = new THREE.AnimationClip( 'editclip', 0, tracks );
@@ -54,7 +53,7 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	setDisplayTime: function( time ) {
+	setDisplayTime: function ( time ) {
 
 
 		this._action.time = time;
 		this._action.time = time;
 		this._mixer.update( 0 );
 		this._mixer.update( 0 );
@@ -63,25 +62,25 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	setDuration: function( duration ) {
+	setDuration: function ( duration ) {
 
 
 		this._clip.duration = duration;
 		this._clip.duration = duration;
 
 
 	},
 	},
 
 
-	getChannelNames: function() {
+	getChannelNames: function () {
 
 
 		return this._channelNames;
 		return this._channelNames;
 
 
 	},
 	},
 
 
-	getChannelKeyTimes: function( channelName ) {
+	getChannelKeyTimes: function ( channelName ) {
 
 
 		return this._tracks[ channelName ].times;
 		return this._tracks[ channelName ].times;
 
 
 	},
 	},
 
 
-	setKeyframe: function( channelName, time ) {
+	setKeyframe: function ( channelName, time ) {
 
 
 		var track = this._tracks[ channelName ],
 		var track = this._tracks[ channelName ],
 			times = track.times,
 			times = track.times,
@@ -106,8 +105,7 @@ THREE.TimelinerController.prototype = {
 
 
 			}
 			}
 
 
-			for ( var i = nValues - 1,
-					e = offset + stride - 1; i !== e; -- i ) {
+			for ( var i = nValues - 1, e = offset + stride - 1; i !== e; -- i ) {
 
 
 				values[ i ] = values[ i - stride ];
 				values[ i ] = values[ i - stride ];
 
 
@@ -120,7 +118,7 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	delKeyframe: function( channelName, time ) {
+	delKeyframe: function ( channelName, time ) {
 
 
 		var track = this._tracks[ channelName ],
 		var track = this._tracks[ channelName ],
 			times = track.times,
 			times = track.times,
@@ -159,7 +157,7 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	moveKeyframe: function( channelName, time, delta, moveRemaining ) {
+	moveKeyframe: function ( channelName, time, delta, moveRemaining ) {
 
 
 		var track = this._tracks[ channelName ],
 		var track = this._tracks[ channelName ],
 			times = track.times,
 			times = track.times,
@@ -179,7 +177,7 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	serialize: function() {
+	serialize: function () {
 
 
 		var result = {
 		var result = {
 				duration: this._clip.duration,
 				duration: this._clip.duration,
@@ -209,7 +207,7 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	deserialize: function( structs ) {
+	deserialize: function ( structs ) {
 
 
 		var names = this._channelNames,
 		var names = this._channelNames,
 			tracks = this._tracks,
 			tracks = this._tracks,
@@ -234,33 +232,29 @@ THREE.TimelinerController.prototype = {
 
 
 	},
 	},
 
 
-	_sort: function( track ) {
+	_sort: function ( track ) {
 
 
-		var times = track.times,
-			order = THREE.AnimationUtils.getKeyframeOrder( times );
+		var times = track.times, order = THREE.AnimationUtils.getKeyframeOrder( times );
 
 
-		this._setArray( times,
-				THREE.AnimationUtils.sortedArray( times, 1, order ) );
+		this._setArray( times, THREE.AnimationUtils.sortedArray( times, 1, order ) );
 
 
 		var values = track.values,
 		var values = track.values,
 			stride = track.getValueSize();
 			stride = track.getValueSize();
 
 
-		this._setArray( values,
-				THREE.AnimationUtils.sortedArray( values, stride, order ) );
+		this._setArray( values, THREE.AnimationUtils.sortedArray( values, stride, order ) );
 
 
 	},
 	},
 
 
-	_setArray: function( dst, src ) {
+	_setArray: function ( dst, src ) {
 
 
 		dst.length = 0;
 		dst.length = 0;
 		dst.push.apply( dst, src );
 		dst.push.apply( dst, src );
 
 
 	},
 	},
 
 
-	_addTrack: function( type, prop, initialValue, interpolation ) {
+	_addTrack: function ( type, prop, initialValue, interpolation ) {
 
 
-		var track = new type(
-				prop, [ 0 ], initialValue, interpolation );
+		var track = new type( prop, [ 0 ], initialValue, interpolation );
 
 
 		// data must be in JS arrays so it can be resized
 		// data must be in JS arrays so it can be resized
 		track.times = Array.prototype.slice.call( track.times );
 		track.times = Array.prototype.slice.call( track.times );

+ 2 - 2
examples/js/cameras/CinematicCamera.js

@@ -186,14 +186,14 @@ THREE.CinematicCamera.prototype.renderCinematic = function ( scene, renderer ) {
 		scene.overrideMaterial = null;
 		scene.overrideMaterial = null;
 		renderer.setRenderTarget( this.postprocessing.rtTextureColor );
 		renderer.setRenderTarget( this.postprocessing.rtTextureColor );
 		renderer.clear();
 		renderer.clear();
-		renderer.render( scene, camera );
+		renderer.render( scene, this );
 
 
 		// Render depth into texture
 		// Render depth into texture
 
 
 		scene.overrideMaterial = this.materialDepth;
 		scene.overrideMaterial = this.materialDepth;
 		renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
 		renderer.setRenderTarget( this.postprocessing.rtTextureDepth );
 		renderer.clear();
 		renderer.clear();
-		renderer.render( scene, camera );
+		renderer.render( scene, this );
 
 
 		// Render bokeh composite
 		// Render bokeh composite
 
 

+ 1 - 1
examples/js/controls/DragControls.js

@@ -21,7 +21,7 @@ THREE.DragControls = function ( _objects, _camera, _domElement ) {
 	var _intersection = new THREE.Vector3();
 	var _intersection = new THREE.Vector3();
 	var _worldPosition = new THREE.Vector3();
 	var _worldPosition = new THREE.Vector3();
 	var _inverseMatrix = new THREE.Matrix4();
 	var _inverseMatrix = new THREE.Matrix4();
-	
+
 	var _selected = null, _hovered = null;
 	var _selected = null, _hovered = null;
 
 
 	//
 	//

+ 14 - 4
examples/js/controls/PointerLockControls.js

@@ -5,11 +5,19 @@
 
 
 THREE.PointerLockControls = function ( camera, domElement ) {
 THREE.PointerLockControls = function ( camera, domElement ) {
 
 
-	var scope = this;
-
 	this.domElement = domElement || document.body;
 	this.domElement = domElement || document.body;
 	this.isLocked = false;
 	this.isLocked = false;
 
 
+	//
+	// internals
+	//
+
+	var scope = this;
+
+	var changeEvent = { type: 'change' };
+	var lockEvent = { type: 'lock' };
+	var unlockEvent = { type: 'unlock' };
+
 	var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
 	var euler = new THREE.Euler( 0, 0, 0, 'YXZ' );
 
 
 	var PI_2 = Math.PI / 2;
 	var PI_2 = Math.PI / 2;
@@ -30,19 +38,21 @@ THREE.PointerLockControls = function ( camera, domElement ) {
 
 
 		camera.quaternion.setFromEuler( euler );
 		camera.quaternion.setFromEuler( euler );
 
 
+		scope.dispatchEvent( changeEvent );
+
 	}
 	}
 
 
 	function onPointerlockChange() {
 	function onPointerlockChange() {
 
 
 		if ( document.pointerLockElement === scope.domElement ) {
 		if ( document.pointerLockElement === scope.domElement ) {
 
 
-			scope.dispatchEvent( { type: 'lock' } );
+			scope.dispatchEvent( lockEvent );
 
 
 			scope.isLocked = true;
 			scope.isLocked = true;
 
 
 		} else {
 		} else {
 
 
-			scope.dispatchEvent( { type: 'unlock' } );
+			scope.dispatchEvent( unlockEvent );
 
 
 			scope.isLocked = false;
 			scope.isLocked = false;
 
 

+ 1 - 1
examples/js/controls/TrackballControls.js

@@ -492,7 +492,7 @@ THREE.TrackballControls = function ( object, domElement ) {
 	function touchstart( event ) {
 	function touchstart( event ) {
 
 
 		if ( _this.enabled === false ) return;
 		if ( _this.enabled === false ) return;
-		
+
 		event.preventDefault();
 		event.preventDefault();
 
 
 		switch ( event.touches.length ) {
 		switch ( event.touches.length ) {

File diff suppressed because it is too large
+ 251 - 150
examples/js/controls/TransformControls.js


+ 0 - 39
examples/js/crossfade/gui.js

@@ -1,39 +0,0 @@
-var transitionParams = {
-	"useTexture": true,
-	"transition": 0.5,
-	"transitionSpeed": 2.0,
-	"texture": 5,
-	"loopTexture": true,
-	"animateTransition": true,
-	"textureThreshold": 0.3
-};
-
-function initGUI() {
-	
-	var gui = new dat.GUI();
-
-	gui.add( transitionParams, "useTexture" ).onChange( function( value ) {
-		
-		transition.useTexture( value );
-		
-	} );
-	
-	gui.add( transitionParams, 'loopTexture' );
-	
-	gui.add( transitionParams, 'texture', { Perlin: 0, Squares: 1, Cells: 2, Distort: 3, Gradient: 4, Radial: 5 } ).onChange( function( value ) {
-		
-		transition.setTexture( value );
-		
-	} ).listen();
-		
-	gui.add( transitionParams, "textureThreshold", 0, 1, 0.01 ).onChange( function( value ) {
-		
-		transition.setTextureThreshold( value );
-		
-	} );
-
-	gui.add( transitionParams, "animateTransition" );
-	gui.add( transitionParams, "transition", 0, 1, 0.01 ).listen();
-	gui.add( transitionParams, "transitionSpeed", 0.5, 5, 0.01 );
-	
-}

Some files were not shown because too many files changed in this diff