Merge branch 'master' of https://github.com/mrdoob/three.js into zh_doc_20200806

.github/CONTRIBUTING.md

@@ -1,7 +1,7 @@
 
 # Help
-#### The issues section is for bug reports and feature requests only. If you need help, please use the [forum](http://discourse.threejs.org/) or [stackoverflow](http://stackoverflow.com/questions/tagged/three.js).
----
+The issues section is for bug reports and feature requests only. If you need help, please use the [forum](http://discourse.threejs.org/) or [stackoverflow](http://stackoverflow.com/questions/tagged/three.js).
+
 # Bugs
 #### Before reporting a bug
 
@@ -17,13 +17,85 @@
 4. Provide a small test-case (http://jsfiddle.net). [Here is a fiddle](https://jsfiddle.net/3foLr7sn/) you can edit that runs the current version. [And here is a fiddle](https://jsfiddle.net/qgu17w5o/) that uses the dev branch. If a test-case is not possible, provide a link to a live version of your application.
 5. If helpful, include a screenshot. Annotate the screenshot for clarity.
 
----
 # Contribution
-#### How to contribute to three.js
-
-1. Make sure you have a GitHub account.
-2. Fork the repository on GitHub.
-3. Check the [Contribution Guidelines](https://github.com/mrdoob/three.js/wiki/How-to-contribute-to-three.js).
-4. Make changes to your clone of the repository.
-5. If your changes leads to a change in examples, make a new screenshot with `npm run make-screenshot <example_name>`.
-6. Submit a pull request. Don't include build files in the PR.
+#### Introduction
+
+It is assumed that you know a little about node.js and git. If not, [here's some help to get started
+with git](https://help.github.com/en/github/using-git) and [here’s some help to get started with node.js.](https://nodejs.org/en/docs/guides/getting-started-guide/)
+
+* Install [Node.js](https://nodejs.org/)
+* Install [Git](https://git-scm.com/)
+* [Fork](https://help.github.com/en/github/getting-started-with-github/fork-a-repo) three.js 
+* Open your OS’s terminal
+* Change into the directory you’d like
+* Clone your forked repo
+
+        git clone https://github.com/[yourgithubname]/three.js.git
+* Go into the three.js directory.
+        
+        cd ./three.js
+* Install the dependencies
+
+        npm install
+
+#### Next Steps
+
+As per the npm standard, ‘start’ is the place to begin the package.
+
+    npm start
+
+This script will start a local server similar to three.js, but instead will be hosted on your local
+machine. Browse to http://localhost:8080/ to check it out. It also automatically creates the
+‘build/three.js’ and ‘build/three.module.js’ scripts anytime there is a change within your three.js
+directory.
+
+The next most important script runs all the appropriate testing.
+        
+        npm test
+
+The linting is there to keep a consistent code-style across the all of the code and the testing is
+there to help catch bugs and check that the code behaves as expected. It is important that
+neither of these steps comes up with any errors due to your changes.
+* If you’d like the linter to fix any errors that it can change, make the following addition to the “test-lint” script.
+        
+        {
+        ...
+        "test-lint": "eslint src --ext js --ext ts --fix && tsc -p utils/build/tsconfig.lint.json"
+        ...
+        }
+
+If you’d like to make a minified version of the build files i.e. ‘build/three.min.js’ run:
+        
+    npm run-script build-closure
+
+#### Making changes
+
+When you’ve decided to make changes, start with the following:
+* Update your local repo
+        
+        git pull https://github.com/mrdoob/three.js.git
+        git push
+* Make a new branch from the dev branch
+        
+        git checkout dev
+        git branch [mychangesbranch]
+        git checkout [mychangesbranch]
+* Add your changes to your commit.
+* Push the changes to your forked repo.
+* Open a Pull Request (PR)
+
+Important notes:
+* Don't include any build files to your commit.
+* Not all new features will need a new example. Simpler features could be incorporated into an existing example. Bigger features may be asked to add an example demonstrating the feature.
+* Making changes may require changes to the documentation. If so, please make a new PR for the appropriate doc changes. To update the Chinese docs, simply copy the English to begin with.
+* it's good to also add an example and screenshot for it, for showing how it's used and for end-to-end testing.
+* If you modify existing code, run relevant examples to check they didn't break and there wasn't performance regress.
+* If you add some assets for the examples (models, textures, sounds, etc), make sure they have a proper license allowing for their use here, less restrictive the better. It is unlikely for large assets to be accepted.
+* If some issue is relevant to patch / feature, please mention it with hash (e.g. #2774) in a commit message to get cross-reference in GitHub.
+* If you modify files in examples/js directory, then don't perform any changes in the examples/jsm, JavaScript modules are auto-generated via running ‘node utils/modularize.js’.
+* If end-to-end test failed in Travis and you are sure that all is correct, make a new screenshots with npm run make-screenshot <example_1_name> ... <example_N_name> .
+* Watch out for Closure compiler warnings when building the libs, there should not be any.
+* Once done with a patch / feature do not add more commits to a feature branch
+* Create separate branches per patch or feature.
+
+This project is currently contributed to mostly via everyone's spare time. Please keep that in mind as it may take some time for the appropriate feedback to get to you. If you are unsure about adding a new feature, it might be better to ask first to see whether other people think it's a good idea.

.github/ISSUE_TEMPLATE.md

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

.gitignore

@@ -6,5 +6,18 @@
 npm-debug.log
 .jshintrc
 .vs/
-**/node_modules
+
+# The command'npm install --prefix test' adds files in the test folder (https://docs.npmjs.com/configuring-npm/folders.html#executables).
+# There are 2 kinds of files, those without extension and those with cmd extension.
+# To ignore files without a extension, following procedure is nessecary:
+# - ignore all files in the test folder
+# - unignore all files in subdirectories of the test folder
+# - unignore all files with an extension in the test folder
+test/*
+!test/*/
+!test/*.*
+test/*.cmd
 test/unit/build
+
+
+**/node_modules

.npmignore

@@ -1,7 +0,0 @@
-examples/*
-!examples/js/
-test/
-utils/
-docs/
-editor/
-.DS_Store

docs/api/en/cameras/OrthographicCamera.html

@@ -72,7 +72,7 @@
 		<p>
 		Camera frustum far plane. Default is *2000*.<br /><br />
 
-		The valid range is between the current value of the [page:.near near] plane and infinity.
+		Must be greater than the current value of [page:.near near] plane.
 		</p>
 
 		<h3>[property:Float left]</h3>

docs/api/en/cameras/PerspectiveCamera.html

@@ -63,7 +63,7 @@
 		<p>
 			Camera frustum far plane. Default is *2000*.<br /><br />
 
-			The valid range is between the current value of the [page:.near near] plane and infinity.
+			Must be greater than the current value of [page:.near near] plane.
 		</p>
 
 		<h3>[property:Float filmGauge]</h3>

docs/api/en/constants/Renderer.html

@@ -24,16 +24,6 @@
 		[page:constant CullFaceFrontBack] culls both front and back faces.
 		</p>
 
-		<h2>Front Face Direction</h2>
-		<code>
-		THREE.FrontFaceDirectionCW
-		THREE.FrontFaceDirectionCCW
-		</code>
-		<p>
-		[page:constant FrontFaceDirectionCW] sets the winding order for polygons to clockwise.<br />
-		[page:constant FrontFaceDirectionCCW] sets the winding order for polygons to counter-clockwise (default).
-		</p>
-
 		<h2>Shadow Types</h2>
 		<code>
 		THREE.BasicShadowMap
@@ -55,7 +45,6 @@
 		THREE.NoToneMapping
 		THREE.LinearToneMapping
 		THREE.ReinhardToneMapping
-		THREE.Uncharted2ToneMapping
 		THREE.CineonToneMapping
 		THREE.ACESFilmicToneMapping
 		</code>

docs/api/en/constants/Textures.html

@@ -17,7 +17,6 @@
 		THREE.CubeRefractionMapping
 		THREE.EquirectangularReflectionMapping
 		THREE.EquirectangularRefractionMapping
-		THREE.SphericalReflectionMapping
 		THREE.CubeUVReflectionMapping
 		THREE.CubeUVRefractionMapping
 		</code>
@@ -38,10 +37,6 @@
 		vertical axis, with the top and bottom edges of the image corresponding to the north and south poles
 		of a mapped sphere.<br /><br />
 
-		[page:Constant SphericalReflectionMapping] is for use with a spherical reflection map such as may be obtained
-		by cropping a photograph of a mirrored ball.  Sphere maps will be rendered "facing" the camera, irrespective
-		of the position of the camera relative to the cubemapped object or surface.<br /><br />
-
 		See the [example:webgl_materials_envmaps materials / envmaps] example.
 		</p>
 

docs/api/en/core/Geometry.html

@@ -134,8 +134,8 @@
 		</p>
 		<p>
 		The values of the vector should typically be between 0 and 1. For instance when set to 0 the bone
-		transformation will have no affect. When set to 0.5 it will have 50% affect. When set to 100%, it will
-		have 100% affect. If there is only 1 bone associated with the vertex then you only need to worry about
+		transformation will have no effect. When set to 0.5 it will have 50% effect. When set to 100%, it will
+		have 100% effect. If there is only 1 bone associated with the vertex then you only need to worry about
 		the first component of the vector, the rest can be ignored and set to 0.
 		</p>
 
@@ -146,9 +146,9 @@
 		first skinIndex, this will tell you the bones associated with that vertex. For example the first vertex
 		could have a value of <strong>( 10.05, 30.10, 12.12 )</strong>. Then the first skin index could have the
 		value of <strong>( 10, 2, 0, 0 )</strong>. The first skin weight could have the value of
-		<strong>( 0.8, 0.2, 0, 0 )</strong>. In affect this would take the first vertex, and then the bone
+		<strong>( 0.8, 0.2, 0, 0 )</strong>. In effect this would take the first vertex, and then the bone
 		<strong>mesh.bones[10]</strong> and apply it 80% of the way. Then it would take the bone <strong>skeleton.bones[2]</strong>
-		and apply it 20% of the way. The next two values have a weight of 0, so they would have no affect.
+		and apply it 20% of the way. The next two values have a weight of 0, so they would have no effect.
 		</p>
 		<p>
 		In code another example could look like this:

docs/api/en/core/InterleavedBuffer.html

@@ -59,6 +59,11 @@
 		Default is *-1*.
 		</p>
 
+		<h3>[property:String uuid]</h3>
+		<p>
+		[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID] of this instance. This gets automatically assigned, so this shouldn't be edited.
+		</p>
+
 		<h3>[property:Integer version]</h3>
 		<p>
 		A version number, incremented every time the needsUpdate property is set to true.
@@ -93,13 +98,22 @@
 			Stores multiple values in the buffer, reading input values from a specified array.
 		</p>
 
-		<h3>[method:InterleavedBuffer clone]() </h3>
+		<h3>[method:InterleavedBuffer clone]( [param:Object data] ) </h3>
 		<p>
+			data - This object holds shared array buffers required for properly cloning geometries with interleaved attributes.<br/><br />
+
 			Creates a clone of this [name].
 		</p>
 
-		<h3>[method:BufferAttribute setUsage] ( [param:Usage value] ) </h3>
-		<p>Set [page:BufferAttribute.usage usage] to value.</p>
+		<h3>[method:InterleavedBuffer setUsage] ( [param:Usage value] ) </h3>
+		<p>Set [page:InterleavedBuffer.usage usage] to value.</p>
+
+		<h3>[method:InterleavedBuffer toJSON]( [param:Object data] ) </h3>
+		<p>
+			data - This object holds shared array buffers required for properly serializing geometries with interleaved attributes.<br/><br />
+
+			Serializes this [name].
+		</p>
 
 		<h2>Source</h2>
 

docs/api/en/core/InterleavedBufferAttribute.html

@@ -50,9 +50,9 @@
 		Optional name for this attribute instance. Default is an empty string.
 		</p>
 
-		<h3>[property:Integer offset]</h3>
+		<h3>[property:Boolean needsUpdate]</h3>
 		<p>
-			The offset in the underlying array buffer where an item starts.
+			Default is *false*. Setting this to *true* will send the entire interleaved buffer (not just the specific attribute data) to the GPU again.
 		</p>
 
 		<h3>[property:Boolean normalized]</h3>
@@ -60,6 +60,11 @@
 			Default is *false*.
 		</p>
 
+		<h3>[property:Integer offset]</h3>
+		<p>
+			The offset in the underlying array buffer where an item starts.
+		</p>
+
 		<h2>Methods</h2>
 
 		<h3>[method:this applyMatrix4]( [param:Matrix4 m] )</h3>

docs/api/en/extras/core/Curve.html

@@ -79,7 +79,7 @@
 			using [page:.getPoint].
 		 </p>
 
-		<h3>[method:Vector getTangent]( [param:Float t, [param:Vector optionalTarget] ] )</h3>
+		<h3>[method:Vector getTangent]( [param:Float t], [param:Vector optionalTarget] )</h3>
 		<p>
 			[page:Float t] - A position on the curve. Must be in the range [ 0, 1 ]. <br>
 			[page:Vector optionalTarget] — (optional) If specified, the result will be copied into this Vector,
@@ -90,7 +90,7 @@
 			which seems to give a reasonable approximation.
 		</p>
 
-		<h3>[method:Vector getTangentAt]( [param:Float u, [param:Vector optionalTarget] ] )</h3>
+		<h3>[method:Vector getTangentAt]( [param:Float u], [param:Vector optionalTarget] )</h3>
 		<p>
 			[page:Float u] - A position on the curve according to the arc length. Must be in the range [ 0, 1 ]. <br>
 			[page:Vector optionalTarget] — (optional) If specified, the result will be copied into this Vector,

docs/api/en/extras/core/CurvePath.html

@@ -49,8 +49,8 @@
 		<h3>[method:null closePath]()</h3>
 		<p>Adds a [page:LineCurve lineCurve] to close the path.</p>
 
-		<h3>[method:Float getCurveLengths]()</h3>
-		<p>Adds together the lengths of the curves in the [page:.curves] array.</p>
+		<h3>[method:Array getCurveLengths]()</h3>
+		<p>Get list of cumulative curve lengths of the curves in the [page:.curves] array.</p>
 
 		<h3>[method:Vector getPoint]( [param:Float t] )</h3>
 		<p>

docs/api/en/extras/curves/CatmullRomCurve3.html

@@ -66,7 +66,7 @@
 		<p>Possible values are *centripetal*, *chordal* and *catmullrom*.</p>
 
 		<h3>[property:float tension]</h3>
-		<p>When [page:.type] is *catmullrom*, defines catmullrom's tension.</p>
+		<p>When [page:.curveType] is *catmullrom*, defines catmullrom's tension.</p>
 
 
 		<h2>Methods</h2>

docs/api/en/geometries/ExtrudeBufferGeometry.html

@@ -79,7 +79,7 @@
 				<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
 				<li>bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.</li>
 				<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
-				<li>extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded.</li>
+				<li>extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded. Bevels not supported for path extrusion.</li>
 				<li>UVGenerator —  Object. object that provides UV generator functions</li>
 			</ul>
 

docs/api/en/geometries/ExtrudeGeometry.html

@@ -79,7 +79,7 @@
 				<li>bevelSize — float. Distance from the shape outline that the bevel extends. Default is bevelThickness - 2.</li>
 				<li>bevelOffset — float. Distance from the shape outline that the bevel starts. Default is 0.</li>
 				<li>bevelSegments — int. Number of bevel layers. Default is 3.</li>
-				<li>extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded.</li>
+				<li>extrudePath — THREE.Curve. A 3D spline path along which the shape should be extruded. Bevels not supported for path extrusion.</li>
 				<li>UVGenerator —  Object. object that provides UV generator functions</li>
 			</ul>
 

docs/api/en/lights/AmbientLightProbe.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Light] &rarr; [page:LightProbe]
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			Light probes are an alternative way of adding light to a 3D scene. AmbientLightProbe is the light estimation data 
+			of a single ambient light in the scene. For more information about light probes, go to [page:LightProbe].
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Color color], [param:Float intensity] )</h3>
+		<p>
+		[page:Color color] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+		[page:Float intensity] - (optional) Numeric value of the light probe's intensity. Default is 1.<br /><br />
+
+		Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common properties.
+		</p>
+
+		<h2>Methods</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common methods.
+		</p>
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/en/lights/HemisphereLightProbe.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Light] &rarr; [page:LightProbe]
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			Light probes are an alternative way of adding light to a 3D scene. HemisphereLightProbe is the light estimation data 
+			of a single hemisphere light in the scene. For more information about light probes, go to [page:LightProbe].
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Color skyColor], [param:Color groundColor], [param:Float intensity] )</h3>
+		<p>
+			[page:Color skyColor] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+			[page:Color groundColor] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+			[page:Float intensity] - (optional) Numeric value of the light probe's intensity. Default is 1.<br /><br />
+
+			Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common properties.
+		</p>
+
+		<h2>Methods</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common methods.
+		</p>
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/en/lights/shadows/LightShadow.html

@@ -28,6 +28,12 @@
 
 		<h2>Properties</h2>
 
+		<h3>[property:Boolean autoUpdate]</h3>
+		<p>
+			Enables automatic updates of the light's shadow. Default is *true*.
+			If you do not require dynamic lighting / shadows, you may set this to *false*.
+		</p>
+
 		<h3>[property:Camera camera]</h3>
 		<p>
 			The light's view of the world. This is used to generate a depth map of the scene; objects behind
@@ -68,6 +74,18 @@
 			in a [page:Matrix4 Matrix4]. This is computed internally during rendering.
 		</p>
 
+		<h3>[property:Boolean needsUpdate]</h3>
+		<p>
+			When set to *true*, shadow maps will be updated in the next *render* call. Default is *false*.
+			If you have set [page:.autoUpdate] to *false*, you will need to set this property to *true* and then make a render call to update the light's shadow.
+		</p>
+
+		<h3>[property:Float normalBias]</h3>
+		<p>
+			Defines how much the position used to query the shadow map is offset along the object normal.
+			The default is 0. Increasing this value can be used to reduce shadow acne especially in large scenes where light shines onto geometry at a shallow angle. The cost is that shadows may appear distorted.
+		</p>
+
 		<h3>[property:Float radius]</h3>
 		<p>
 			Setting this to values greater than 1 will blur the edges of the shadow.<br />

docs/api/en/loaders/ObjectLoader.html

@@ -55,7 +55,6 @@
 		<h2>Examples</h2>
 
 		<p>
-			[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
 			[example:webgl_materials_lightmap WebGL / materials / lightmap]
 		</p>
 

docs/api/en/materials/Material.html

@@ -125,7 +125,7 @@
 
 		<h3>[property:Boolean stencilWrite]</h3>
 		<p>
-		Whether rendering this material has any effect on the stencil buffer. Default is *false*.
+		Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be *true*. Default is *false*.
 		</p>
 
 		<h3>[property:Integer stencilWriteMask]</h3>
@@ -211,7 +211,7 @@
 		<h3>[property:Boolean premultipliedAlpha]</h3>
 		<p>
 		Whether to premultiply the alpha (transparency) value.
-		See [Example:webgl_materials_transparency WebGL / Materials / Transparency] for an example of the difference.
+		See [Example:webgl_materials_physical_transparency WebGL / Materials / Physical / Transparency] for an example of the difference.
 		Default is *false*.
 		</p>
 
@@ -334,6 +334,36 @@
 		Unlike properties, the callback is not supported by [page:Material.clone .clone](), [page:Material.copy .copy]() and [page:Material.toJSON .toJSON]().
 		</p>
 
+		<h3>[method:String customProgramCacheKey]()</h3>
+		<p>
+		In case onBeforeCompile is used, this callback can be used to identify values of settings used in onBeforeCompile, so three.js can reuse a cached shader or recompile the shader for this material as needed.
+		</p>
+
+		<p>
+		For example, if onBeforeCompile contains a conditional statement like:<br />
+
+		<code>if ( black ) {
+
+			shader.fragmentShader = shader.fragmentShader.replace('gl_FragColor = vec4(1)', 'gl_FragColor = vec4(0)')
+
+		}
+		</code>
+
+		then customProgramCacheKey should be set like this:<br />
+
+		<code>material.customProgramCacheKey = function() {
+
+			return black ? '1' : '0';
+
+		}
+		</code>
+
+		</p>
+
+		<p>
+		Unlike properties, the callback is not supported by [page:Material.clone .clone](), [page:Material.copy .copy]() and [page:Material.toJSON .toJSON]().
+		</p>
+
 		<h3>[method:null setValues]( [param:object values] )</h3>
 		<p>
 		values -- a container with parameters.<br />

docs/api/en/materials/MeshPhysicalMaterial.html

@@ -24,7 +24,7 @@
 			</li>
 			<li>
 				<b>Physically-based transparency:</b> One limitation of [page:Material.opacity .opacity] is
-				that highly transparent materials are less reflective. Physically-based [page:.transparency]
+				that highly transparent materials are less reflective. Physically-based [page:.transmission]
 				provides a more realistic option for thin, transparent surfaces like glass.
 			</li>
 			<li>
@@ -62,7 +62,7 @@
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
-			[example:webgl_materials_physical_transparency materials / physical / transparency]
+			[example:webgl_materials_physical_transmission materials / physical / transmission]
 		</p>
 
 		<h2>Constructor</h2>
@@ -128,15 +128,21 @@
 		This models the reflectivity of non-metallic materials. It has no effect when [page:MeshStandardMaterial.metalness metalness] is *1.0*
 		</p>
 
-		<h3>[property:Float transparency]</h3>
+		<h3>[property:Float transmission]</h3>
 		<p>
-		Degree of transparency, from *0.0* to *1.0*. Default is *0.0*.<br />
+		Degree of transmission (or optical transparency), from *0.0* to *1.0*. Default is *0.0*.<br />
 
-		Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are mostly transparent.
+		Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are fully transmissive.
 
-		The transparency property can be used to model these materials.<br />
+		The transmission property can be used to model these materials.<br />
 
-		When transparency is non-zero, [page:Material.opacity opacity] should be set to *1*.
+		When transmission is non-zero, [page:Material.opacity opacity] should be set to *1*.
+		</p>
+
+		<h3>[property:Texture transmissionMap]</h3>
+		<p>
+			The red channel of this texture is multiplied against [page:.transmission], for per-pixel control
+			over optical transparency. Default is *null*.
 		</p>
 
 		<h2>Methods</h2>

docs/api/en/materials/MeshToonMaterial.html

@@ -164,26 +164,9 @@
 			Default is a [page:Vector2] set to (1,1).
 		</p>
 
-		<h3>[property:Float shininess]</h3>
-		<p>How shiny the [page:.specular] highlight is; a higher value gives a sharper highlight. Default is *30*.</p>
-
-
 		<h3>[property:Boolean skinning]</h3>
 		<p>Define whether the material uses skinning. Default is false.</p>
 
-		<h3>[property:Color specular]</h3>
-		<p>
-			Specular color of the material. Default is a [page:Color] set to *0x111111* (very dark grey).<br /><br />
-
-			This defines how shiny the material is and the color of its shine.
-		</p>
-
-		<h3>[property:Texture specularMap]</h3>
-		<p>
-			The specular map value affects both how much the specular surface highlight
-			contributes and how much of the environment map affects the surface. Default is null.
-		</p>
-
 		<h3>[property:Boolean wireframe]</h3>
 		<p>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</p>
 

docs/api/en/materials/SpriteMaterial.html

@@ -66,9 +66,6 @@
 		<h3>[property:Color color]</h3>
 		<p>[page:Color] of the material, by default set to white (0xffffff). The [page:.map] is mutiplied by the color.</p>
 
-		<h3>[property:boolean fog]</h3>
-		<p>Whether or not this material affected by the scene's fog. Default is false</p>
-
 		<h3>[property:Texture map]</h3>
 		<p>The texture map. Default is null.</p>
 

docs/api/en/math/Box3.html

@@ -42,7 +42,7 @@
 		[page:Vector3 min] - (optional) [page:Vector3] representing the lower (x, y, z) boundary of the box.
 		Default is ( + Infinity, + Infinity, + Infinity ).<br>
 
-		[page:Vector3 max] - (optional) [page:Vector3] representing the lower upper (x, y, z) boundary of the box.
+		[page:Vector3 max] - (optional) [page:Vector3] representing the upper (x, y, z) boundary of the box.
 		Default is ( - Infinity, - Infinity, - Infinity ).<br /><br />
 
 		Creates a [name] bounded by min and max.
@@ -66,7 +66,7 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:Box3 applyMatrix4]( [param:Matrix4 matrix] )</h3>
+		<h3>[method:this applyMatrix4]( [param:Matrix4 matrix] )</h3>
 		<p>
 		[page:Matrix4 matrix] - The [page:Matrix4] to apply<br /><br />
 
@@ -99,7 +99,7 @@
 		Returns true if the specified [page:Vector3 point] lies within or on the boundaries of this box.
 		</p>
 
-		<h3>[method:Box3 copy]( [param:Box3 box] )</h3>
+		<h3>[method:this copy]( [param:Box3 box] )</h3>
 		<p>
 		[page:Box3 box]  - [page:Box3] to copy.<br /><br />
 
@@ -122,7 +122,7 @@
 		Returns true if this box and [page:Box3 box] share the same lower and upper bounds.
 		</p>
 
-		<h3>[method:Box3 expandByObject]( [param:Object3D object] )</h3>
+		<h3>[method:this expandByObject]( [param:Object3D object] )</h3>
 		<p>
 		[page:Object3D object] - [page:Object3D] to expand the box by.<br /><br />
 
@@ -132,14 +132,14 @@
 
 		</p>
 
-		<h3>[method:Box3 expandByPoint]( [param:Vector3 point] )</h3>
+		<h3>[method:this expandByPoint]( [param:Vector3 point] )</h3>
 		<p>
 		[page:Vector3 point] - [page:Vector3] that should be included in the box.<br /><br />
 
 		Expands the boundaries of this box to include [page:Vector3 point].
 		</p>
 
-		<h3>[method:Box3 expandByScalar]( [param:float scalar] )</h3>
+		<h3>[method:this expandByScalar]( [param:float scalar] )</h3>
 		<p>
 		[page:float scalar] - Distance to expand the box by.<br /><br />
 
@@ -147,7 +147,7 @@
 		will be contracted.
 		</p>
 
-		<h3>[method:Box3 expandByVector]( [param:Vector3 vector] )</h3>
+		<h3>[method:this expandByVector]( [param:Vector3 vector] )</h3>
 		<p>
 		[page:Vector3 vector] - [page:Vector3] to expand the box by.<br /><br />
 
@@ -186,13 +186,13 @@
 		Returns the width, height and depth of this box.
 		</p>
 
-		<h3>[method:Box3 intersect]( [param:Box3 box] )</h3>
+		<h3>[method:this intersect]( [param:Box3 box] )</h3>
 		<p>
 		[page:Box3 box] - Box to intersect with.<br /><br />
 
-		Returns the intersection of this and [page:Box3 box], setting the upper bound of this box to the lesser
+		Computes the intersection of this and [page:Box3 box], setting the upper bound of this box to the lesser
 		of the two boxes' upper bounds and the lower bound of this box to the greater of the two boxes'
-		lower bounds.
+		lower bounds. If there's no overlap, makes this box empty.
 		</p>
 
 		<h3>[method:Boolean intersectsBox]( [param:Box3 box] )</h3>
@@ -230,10 +230,10 @@
 		the one both bounds share.
 		</p>
 
-		<h3>[method:Box3 makeEmpty]()</h3>
+		<h3>[method:this makeEmpty]()</h3>
 		<p>Makes this box empty.</p>
 
-		<h3>[method:Box3 set]( [param:Vector3 min], [param:Vector3 max] )</h3>
+		<h3>[method:this set]( [param:Vector3 min], [param:Vector3 max] )</h3>
 		<p>
 		[page:Vector3 min] - [page:Vector3] representing the lower (x, y, z) boundary of the box.<br />
 		[page:Vector3 max] - [page:Vector3] representing the lower upper (x, y, z) boundary of the box.<br /><br />
@@ -242,21 +242,21 @@
 		Please note that this method only copies the values from the given objects.
 		</p>
 
-		<h3>[method:Box3 setFromArray]( [param:Array array] ) [param:Box3 this]</h3>
+		<h3>[method:this setFromArray]( [param:Array array] )</h3>
 		<p>
 		array -- An array of position data that the resulting box will envelop.<br /><br />
 
 		Sets the upper and lower bounds of this box to include all of the data in *array*.
 		</p>
 
-		<h3>[method:Box3 setFromBufferAttribute]( [param:BufferAttribute attribute] ) [param:Box3 this]</h3>
+		<h3>[method:this setFromBufferAttribute]( [param:BufferAttribute attribute] )</h3>
 		<p>
 		[page:BufferAttribute attribute] - A buffer attribute of position data that the resulting box will envelop.<br /><br />
 
 		Sets the upper and lower bounds of this box to include all of the data in [page:BufferAttribute attribute].
 		</p>
 
-		<h3>[method:Box3 setFromCenterAndSize]( [param:Vector3 center], [param:Vector3 size] ) [param:Box3 this]</h3>
+		<h3>[method:this setFromCenterAndSize]( [param:Vector3 center], [param:Vector3 size] )</h3>
 		<p>
 		[page:Vector3 center], - Desired center position of the box. <br>
 		[page:Vector3 size] - Desired x, y and z dimensions of the box.<br /><br />
@@ -265,7 +265,7 @@
 		in [page:Vector3 size]
 		</p>
 
-		<h3>[method:Box3 setFromObject]( [param:Object3D object] )</h3>
+		<h3>[method:this setFromObject]( [param:Object3D object] )</h3>
 		<p>
 		[page:Object3D object] - [page:Object3D] to compute the bounding box of.<br /><br />
 
@@ -275,14 +275,14 @@
 
 		</p>
 
-		<h3>[method:Box3 setFromPoints]( [param:Array points] )</h3>
+		<h3>[method:this setFromPoints]( [param:Array points] )</h3>
 		<p>
 		[page:Array points] - Array of [page:Vector3 Vector3s] that the resulting box will contain.<br /><br />
 
 		Sets the upper and lower bounds of this box to include all of the points in [page:Array points].
 		</p>
 
-		<h3>[method:Box3 translate]( [param:Vector3 offset] )</h3>
+		<h3>[method:this translate]( [param:Vector3 offset] )</h3>
 		<p>
 		[page:Vector3 offset] - Direction and distance of offset.<br /><br />
 
@@ -290,11 +290,11 @@
 		[page:Vector3 offset] units in 3D space.
 		</p>
 
-		<h3>[method:Box3 union]( [param:Box3 box] )</h3>
+		<h3>[method:this union]( [param:Box3 box] )</h3>
 		<p>
 		[page:Box3 box] - Box that will be unioned with this box.<br /><br />
 
-		Unions this box with [page:Box3 box], setting the upper bound of this box to the greater of the
+		Computes the union of this box and [page:Box3 box], setting the upper bound of this box to the greater of the
 		two boxes' upper bounds and the lower bound of this box to the lesser of the two boxes'
 		lower bounds.
 		</p>

docs/api/en/math/Color.html

@@ -179,6 +179,14 @@ var color = new THREE.Color( 1, 0, 0 );
 		Sets this color's components based on an array formatted like [ [page:Float r], [page:Float g], [page:Float b] ].
 		</p>
 
+		<h3>[method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )</h3>
+		<p>
+		[page:BufferAttribute attribute] - the source attribute.<br />
+		[page:Integer index] - index in the attribute.<br /><br />
+
+		Sets this color's components from the [page:BufferAttribute attribute].
+		</p>
+
 		<h3>[method:Integer getHex]()</h3>
 		<p>Returns the hexadecimal value of this color.</p>
 

docs/api/en/math/MathUtils.html

@@ -83,6 +83,9 @@
 		<h3>[method:Integer randInt]( [param:Integer low], [param:Integer high] )</h3>
 		<p>Random integer in the interval [page:Float low] to [page:Float high].</p>
 
+		<h3>[method:Float seededRandom]( [param:Integer seed] )</h3>
+		<p>Deterministic pseudo-random float in the interval [ 0, 1 ]. The integer [page:Integer seed] is optional.</p>
+
 		<h3>[method:Float smoothstep]( [param:Float x], [param:Float min], [param:Float max] )</h3>
 		<p>
 		[page:Float x] - The value to evaluate based on its position between min and max. <br />

docs/api/en/math/Quaternion.html

@@ -98,6 +98,11 @@
 		from an array.
 		</p>
 
+		<h3>[method:Quaternion identity]()</h3>
+		<p>
+			Sets this quaternion to the identity quaternion; that is, to the quaternion that represents "no rotation".
+		</p>
+
 		<h3>[method:Quaternion inverse]()</h3>
 		<p>
 			Inverts this quaternion - calculates the [page:.conjugate conjugate]. The quaternion is assumed to have unit length.

docs/api/en/math/Ray.html

@@ -118,7 +118,7 @@
 		<p>
 		[page:Ray ray] - the [page:Ray] to compare to.<br /><br />
 
-		Returns true if this and the other [page:Ray ray] have equal [page:.offset offset]
+		Returns true if this and the other [page:Ray ray] have equal [page:.origin origin]
 		 and [page:.direction direction].
 		</p>
 

docs/api/en/renderers/WebGL1Renderer.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:WebGLRenderer] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		Since r118 [page:WebGLRenderer] automatically uses a WebGL 2 rendering context. When upgrading an existing project to
+		=> r118, applications might break because of two reasons:
+
+		<ul>
+			<li>Custom shader code needs to be GLSL 3.0 conform.</li>
+			<li>WebGL 1 extension checks have to be changed.</li>
+		</ul>
+
+		If you can't afford the time to upgrade your code but still want to use the latest version, you can use [name]. This
+		version of the renderer will enforce a WebGL 1 rendering context.
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Object parameters] )</h3>
+		<p>
+		Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>See the base [page:WebGLRenderer] class for common properties.</p>
+
+
+		<h2>Methods</h2>
+		<p>See the base [page:WebGLRenderer] class for common methods.</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/en/renderers/WebGLRenderer.html

@@ -275,11 +275,6 @@
 		Exposure level of tone mapping. Default is *1*.
 		</p>
 
-		<h3>[property:Number toneMappingWhitePoint]</h3>
-		<p>
-		Tone mapping white point. Default is *1*.
-		</p>
-
 		<h3>[property:WebXRManager xr]</h3>
 		<p>
 		Provides access to the WebXR related [page:WebXRManager interface] of the renderer.
@@ -303,7 +298,7 @@
 		<h3>[method:null clearStencil]( )</h3>
 		<p>Clear the stencil buffers. Equivalent to calling [page:WebGLRenderer.clear .clear]( false, false, true ).</p>
 
-		<h3>[method:null compile]( [param:Scene scene], [param:Camera camera] )</h3>
+		<h3>[method:null compile]( [param:Object3D scene], [param:Camera camera] )</h3>
 		<p>Compiles all materials in the scene with the camera. This is useful to precompile shaders before the first rendering.</p>
 
 		<h3>[method:null copyFramebufferToTexture]( [param:Vector2 position], [param:Texture texture], [param:Number level] )</h3>
@@ -409,9 +404,9 @@
 		<p>For reading out a [page:WebGLCubeRenderTarget WebGLCubeRenderTarget] 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:Object3D scene], [param:Camera camera] )</h3>
 		<p>
-			Render a [page:Scene scene] using a [page:Camera camera].<br />
+			Render a [page:Scene scene] or another type of [page:Object3D object] using a [page:Camera camera].<br />
 
 			The render is done to a previously specified [page:WebGLRenderTarget renderTarget] set by calling [page:WebGLRenderer.setRenderTarget .setRenderTarget] or to the canvas as usual.<br />
 

docs/api/en/scenes/Scene.html

@@ -39,7 +39,7 @@
 		<h3>[property:Texture environment]</h3>
 		<p>
 		If not null, this texture is set as the environment map for all physical materials in the scene.
-		However, it's not possible to overwrite an existing texture assigned to [page:MeshStandardMaterial.envmap]. Default is null.
+		However, it's not possible to overwrite an existing texture assigned to [page:MeshStandardMaterial.envMap]. Default is null.
 		</p>
 
 		<h3>[property:Fog fog]</h3>
@@ -57,7 +57,7 @@
 		Clears scene related data internally cached by [page:WebGLRenderer].
 		</p>
 
-		<h3>[method:Object toJSON]</h3>
+		<h3>[method:Object toJSON]( [param:Object meta] )</h3>
 		<p>
 		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].

docs/api/en/textures/DataTexture2DArray.html

@@ -0,0 +1,100 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Texture] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">Creates an array of textures directly from raw data, width and height and depth. This type of texture can only be used with a WebGL 2 rendering context.</p>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( data, width, height, depth )</h3>
+		<p>
+			The data argument must be an [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
+			The properties inherited from [page:Texture] are the default, except magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
+		</p>
+		<p>
+			The interpretation of the data depends on type and format:
+			If the type is THREE.UnsignedByteType, a Uint8Array will be useful for addressing the texel data.
+			If the format is THREE.RGBAFormat, data needs four values for one texel; Red, Green, Blue and Alpha (typically the opacity). Similarly, THREE.RGBFormat specifies a format where only three values are used for each texel.<br />
+
+			For the packed types, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, all color components of one texel can be addressed as bitfields within an integer element of a Uint16Array.<br />
+
+			In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.
+		</p>
+
+		<h2>Code Example</h2>
+
+		<p>This creates a [name] where each texture has a different color.</p>
+
+		<code>
+		// create a buffer with color data
+
+		var size = width * height;
+		var data = new Uint8Array( 3 * size * depth );
+
+
+		for ( var i = 0; i < depth; i ++ ) {
+
+			var color = new THREE.Color( Math.random(), Math.random(), Math.random() );
+			var r = Math.floor( color.r * 255 );
+			var g = Math.floor( color.g * 255 );
+			var b = Math.floor( color.b * 255 );
+
+			for ( var j = 0; j < size; j ++ ) {
+
+				var stride = ( i * size + j ) * 3;
+
+				data[ stride ] = r;
+				data[ stride + 1 ] = g;
+				data[ stride + 2 ] = b;
+
+			}
+		}
+
+		// used the buffer to create a [name]
+
+		var texture = new THREE.DataTexture2DArray( data, width, height, depth );
+		texture.format = THREE.RGBFormat;
+		texture.type = THREE.UnsignedByteType;
+		</code>
+
+		<h2>Examples</h2>
+
+		<p>
+			[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]
+		</p>
+
+		<h2>Properties</h2>
+
+		<p>
+		See the base [page:Texture Texture] class for common properties.
+		</p>
+
+		<h3>[property:Image image]</h3>
+		<p>
+		Overridden with a record type holding data, width and height and depth.
+		</p>
+
+		<h2>Methods</h2>
+
+		<p>
+		See the base [page:Texture Texture] class for common methods.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/en/textures/DataTexture3D.html

@@ -30,8 +30,7 @@
 		<h2>Examples</h2>
 
 		<p>
-			[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
-			[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]
+			[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
 		</p>
 
 		<h2>Properties</h2>

docs/api/zh/cameras/OrthographicCamera.html

@@ -74,7 +74,7 @@
 		<h3>[property:Float far]</h3>
 		<p>
 			摄像机视锥体远端面，其默认值为*2000*。<br /><br />
-			其值的有效范围介于[page:.near near]（摄像机视锥体近端面）和无穷大之间。
+			Must be greater than the current value of [page:.near near] plane.
 
 		</p>
 

docs/api/zh/cameras/PerspectiveCamera.html

@@ -62,7 +62,7 @@
 		<p>
 			摄像机的远端面，默认值是*2000*。
 			<br /><br />
-			其有效值范围是在当前摄像机[page:.near near] plane（近端面）的值到无穷远之间。
+			Must be greater than the current value of [page:.near near] plane.
 		</p>
 
 		<h3>[property:Float filmGauge]</h3>

docs/api/zh/constants/Renderer.html

@@ -24,16 +24,6 @@
 		[page:constant CullFaceFrontBack] 剔除正面和背面。
 		</p>
 
-		<h2>正面方向</h2>
-		<code>
-		THREE.FrontFaceDirectionCW
-		THREE.FrontFaceDirectionCCW
-		</code>
-		<p>
-		[page:constant FrontFaceDirectionCW] 将多边形的缠绕顺序设置为顺时针方向。 <br />
-		[page:constant FrontFaceDirectionCCW] 为默认值，将多边形的缠绕顺序设置为逆时针方向。
-		</p>
-
 		<h2>阴影类型</h2>
 		<code>
 		THREE.BasicShadowMap
@@ -55,7 +45,6 @@
 		THREE.NoToneMapping
 		THREE.LinearToneMapping
 		THREE.ReinhardToneMapping
-		THREE.Uncharted2ToneMapping
 		THREE.CineonToneMapping
 		</code>
 		<p>

docs/api/zh/constants/Textures.html

@@ -19,7 +19,6 @@
 		THREE.CubeRefractionMapping
 		THREE.EquirectangularReflectionMapping
 		THREE.EquirectangularRefractionMapping
-		THREE.SphericalReflectionMapping
 		THREE.CubeUVReflectionMapping
 		THREE.CubeUVRefractionMapping
 		</code>
@@ -38,9 +37,6 @@
 		用于等距圆柱投影的环境贴图，也被叫做经纬线映射贴图。等距圆柱投影贴图表示沿着其水平中线360°的视角，以及沿着其垂直轴向180°的视角。贴图顶部和底部的边缘分别对应于它所映射的球体的北极和南极。
 		<br /><br />
 
-		[page:Constant SphericalReflectionMapping] 用球形反射贴图，例如它可以通过剪裁镜面球的照片来获得。
-		无论摄像机相对于立方贴图对象或者表面的位置时怎样的，球形贴图被渲染时将会“面朝”摄像机。<br /><br />
-
 		请查看示例：[example:webgl_materials_envmaps materials / envmaps] 。
 	</p>
 

docs/api/zh/core/InterleavedBuffer.html

@@ -59,6 +59,11 @@
 			默认值为 *-1*。
 		</p>
 
+		<h3>[property:String uuid]</h3>
+		<p>
+		该类所创建的实例的[link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]。它是自动被指定的，因此它不应当被编辑、更改。
+		</p>
+
 		<h3>[property:Integer version]</h3>
 		<p>
 			版本号，每次 needsUpdate 属性设置为 true 时，版本号增加。
@@ -93,13 +98,22 @@
 			将源队列数据拷贝到目标队列缓存中。
 		</p>
 
-		<h3>[method:InterleavedBuffer clone]() </h3>
+		<h3>[method:InterleavedBuffer clone]( [param:Object data] ) </h3>
 		<p>
-			克隆当前 [name]。
+			data - This object holds shared array buffers required for properly cloning geometries with interleaved attributes.<br/><br />
+
+			Creates a clone of this [name].
 		</p>
 
-		<h3>[method:BufferAttribute setUsage] ( [param:Usage value] ) </h3>
-		<p>Set [page:BufferAttribute.usage usage] to value.</p>
+		<h3>[method:InterleavedBuffer setUsage] ( [param:Usage value] ) </h3>
+		<p>Set [page:InterleavedBuffer.usage usage] to value.</p>
+
+		<h3>[method:InterleavedBuffer toJSON]( [param:Object data] ) </h3>
+		<p>
+			data - This object holds shared array buffers required for properly serializing geometries with interleaved attributes.<br/><br />
+
+			Serializes this [name].
+		</p>
 
 		<h2>源代码</h2>
 

docs/api/zh/core/InterleavedBufferAttribute.html

@@ -49,9 +49,9 @@
 		Optional name for this attribute instance. Default is an empty string.
 		</p>
 
-		<h3>[property:Integer offset]</h3>
+		<h3>[property:Boolean needsUpdate]</h3>
 		<p>
-			缓存队列中每个元素的起始位置的偏移量。
+			Default is *false*. Setting this to *true* will send the entire interleaved buffer (not just the specific attribute data) to the GPU again.
 		</p>
 
 		<h3>[property:Boolean normalized]</h3>
@@ -59,6 +59,11 @@
 			默认值为 *false*。
 		</p>
 
+		<h3>[property:Integer offset]</h3>
+		<p>
+			缓存队列中每个元素的起始位置的偏移量。
+		</p>
+
 		<h2>方法</h2>
 
 		<h3>[method:this applyMatrix4]( [param:Matrix4 m] )</h3>

docs/api/zh/extras/core/Curve.html

@@ -79,7 +79,7 @@
 			using [page:.getPoint].
 		</p>
 
-		<h3>[method:Vector getTangent]( [param:Float t, [param:Vector optionalTarget] ] )</h3>
+		<h3>[method:Vector getTangent]( [param:Float t], [param:Vector optionalTarget] )</h3>
 		<p>
 			[page:Float t] - A position on the curve. Must be in the range [ 0, 1 ]. <br>
 			[page:Vector optionalTarget] — (optional) If specified, the result will be copied into this Vector,
@@ -90,7 +90,7 @@
 			which seems to give a reasonable approximation.
 		</p>
 
-		<h3>[method:Vector getTangentAt]( [param:Float u, [param:Vector optionalTarget] ] )</h3>
+		<h3>[method:Vector getTangentAt]( [param:Float u], [param:Vector optionalTarget] )</h3>
 		<p>
 			[page:Float u] - A position on the curve according to the arc length. Must be in the range [ 0, 1 ]. <br>
 			[page:Vector optionalTarget] — (optional) If specified, the result will be copied into this Vector,

docs/api/zh/extras/core/CurvePath.html

@@ -49,8 +49,8 @@
 		<h3>[method:null closePath]()</h3>
 		<p>添加一条[page:LineCurve lineCurve]用于闭合路径。</p>
 
-		<h3>[method:Float getCurveLengths]()</h3>
-		<p>将[page:.curves]数组中曲线的长度相加。</p>
+		<h3>[method:Array getCurveLengths]()</h3>
+		<p>Get list of cumulative curve lengths of the curves in the [page:.curves] array.</p>
 
 		<h3>[method:Vector getPoint]( [param:Float t] )</h3>
 		<p>

docs/api/zh/lights/AmbientLightProbe.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Light] &rarr; [page:LightProbe]
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			Light probes are an alternative way of adding light to a 3D scene. AmbientLightProbe is the light estimation data 
+			of a single ambient light in the scene. For more information about light probes, go to [page:LightProbe].
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Color color], [param:Float intensity] )</h3>
+		<p>
+		[page:Color color] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+		[page:Float intensity] - (optional) Numeric value of the light probe's intensity. Default is 1.<br /><br />
+
+		Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common properties.
+		</p>
+
+		<h2>Methods</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common methods.
+		</p>
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/zh/lights/HemisphereLightProbe.html

@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Object3D] &rarr; [page:Light] &rarr; [page:LightProbe]
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			Light probes are an alternative way of adding light to a 3D scene. HemisphereLightProbe is the light estimation data 
+			of a single hemisphere light in the scene. For more information about light probes, go to [page:LightProbe].
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Color skyColor], [param:Color groundColor], [param:Float intensity] )</h3>
+		<p>
+			[page:Color skyColor] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+			[page:Color groundColor] - (optional) An instance of Color, string representing a color or a number representing a color.<br />
+			[page:Float intensity] - (optional) Numeric value of the light probe's intensity. Default is 1.<br /><br />
+
+			Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common properties.
+		</p>
+
+		<h2>Methods</h2>
+		<p>
+				See the base [page:LightProbe LightProbe] class for common methods.
+		</p>
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/zh/lights/shadows/LightShadow.html

@@ -27,6 +27,12 @@
 
 		<h2>属性</h2>
 
+		<h3>[property:Boolean autoUpdate]</h3>
+		<p>
+			Enables automatic updates of the light's shadow. Default is *true*.
+			If you do not require dynamic lighting / shadows, you may set this to *false*.
+		</p>
+
 		<h3>[property:Camera camera]</h3>
 		<p>
 			光的世界里。这用于生成场景的深度图;从光的角度来看，其他物体背后的物体将处于阴影中。
@@ -45,7 +51,7 @@
 
 		<h3>[property:WebGLRenderTarget mapPass]</h3>
 		<p>
-			The distribution map generated using the internal camera; an occlusion is calculated based 
+			The distribution map generated using the internal camera; an occlusion is calculated based
 			on the distribution of depths. Computed internally during rendering.
 		</p>
 
@@ -64,6 +70,18 @@
 			模拟阴影相机空间，计算阴影贴图中的位置和深度。存储在[page:Matrix4 Matrix4]中。这是在渲染期间内部计算的。
 		</p>
 
+		<h3>[property:Boolean needsUpdate]</h3>
+		<p>
+			When set to *true*, shadow maps will be updated in the next *render* call. Default is *false*.
+			If you have set [page:.autoUpdate] to *false*, you will need to set this property to *true* and then make a render call to update the light's shadow.
+		</p>
+
+		<h3>[property:Float normalBias]</h3>
+		<p>
+			Defines how much the position used to query the shadow map is offset along the object normal.
+			The default is 0. Increasing this value can be used to reduce shadow acne especially in large scenes where light shines onto geometry at a shallow angle. The cost is that shadows may appear distorted.
+		</p>
+
 		<h3>[property:Float radius]</h3>
 		<p>
 			将此值设置为大于1的值将模糊阴影的边缘。<br />
@@ -71,13 +89,13 @@
 			较高的值会在阴影中产生不必要的条带效果 - 更大的[page:.mapSize mapSize]将允许在这些效果变得可见之前使用更高的值。<br />
 			If [page:WebGLRenderer.shadowMap.type] is set to [page:Renderer PCFSoftShadowMap], radius has
 			no effect and it is recommended to increase softness by decreasing [page:.mapSize mapSize] instead.<br /><br />
-			
+
 			请注意，如果[page：WebGLRenderer.shadowMap.type]设置为[page:Renderer BasicShadowMap]，将会无效。
 		</p>
 
 
 		<h2>方法</h2>
-		
+
 		<h3>[method:Vector2 getFrameExtents]()</h3>
 		<p>
 		Used internally by the renderer to extend the shadow map to contain all viewports

docs/api/zh/loaders/ObjectLoader.html

@@ -55,7 +55,6 @@
 		<h2>例子</h2>
 
 		<p>
-			[example:webgl_loader_json_claraio WebGL / loader / json / claraio]<br />
 			[example:webgl_materials_lightmap WebGL / materials / lightmap]
 		</p>
 

docs/api/zh/materials/Material.html

@@ -105,8 +105,7 @@
 
 <h3>[property:Boolean stencilWrite]</h3>
 <p>
-Whether rendering this material has any effect on the stencil buffer. Default is *false*.
-</p>
+Whether stencil operations are performed against the stencil buffer. In order to perform writes or comparisons against the stencil buffer this value must be *true*. Default is *false*.</p>
 
 <h3>[property:Integer stencilWriteMask]</h3>
 <p>
@@ -182,7 +181,7 @@ Which stencil operation to perform when the comparison function returns true and
 </p>
 
 <h3>[property:Boolean premultipliedAlpha]</h3>
-<p> 是否预乘alpha（透明度）值。有关差异的示例，请参阅[Example:webgl_materials_transparency WebGL / Materials / Transparency]。
+<p> 是否预乘alpha（透明度）值。有关差异的示例，请参阅[Example:webgl_materials_physical_transparency WebGL / Materials / Physical / Transparency]。
 	默认值为*false*。
 </p>
 

docs/api/zh/materials/MeshPhysicalMaterial.html

@@ -24,7 +24,7 @@
 			</li>
 			<li>
 				<b>Physically-based transparency:</b> One limitation of [page:Material.opacity .opacity] is
-				that highly transparent materials are less reflective. Physically-based [page:.transparency]
+				that highly transparent materials are less reflective. Physically-based [page:.transmission]
 				provides a more realistic option for thin, transparent surfaces like glass.
 			</li>
 			<li>
@@ -63,7 +63,7 @@
 			[example:webgl_materials_variations_physical materials / variations / physical]<br />
 			[example:webgl_materials_physical_clearcoat materials / physical / clearcoat]<br />
 			[example:webgl_materials_physical_reflectivity materials / physical / reflectivity]<br />
-			[example:webgl_materials_physical_transparency materials / physical / transparency]
+			[example:webgl_materials_physical_transmission materials / physical / transmission]
 		</p>
 
 		<h2>构造函数(Constructor)</h2>
@@ -123,15 +123,21 @@
 			这模拟了非金属材质的反射率。当[page:MeshStandardMaterial]为*1.0*时，此属性无效。
 		</p>
 
-		<h3>[property:Float transparency]</h3>
+		<h3>[property:Float transmission]</h3>
 		<p>
-		Degree of transparency, from *0.0* to *1.0*. Default is *0.0*.<br />
+		Degree of transmission (or optical transparency), from *0.0* to *1.0*. Default is *0.0*.<br />
 
-		Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are mostly transparent.
+		Thin, transparent or semitransparent, plastic or glass materials remain largely reflective even if they are fully transmissive.
 
-		The transparency property can be used to model these materials.<br />
+		The transmission property can be used to model these materials.<br />
 
-		When transparency is non-zero, [page:Material.opacity opacity] should be set to *1*.
+		When transmission is non-zero, [page:Material.opacity opacity] should be set to *1*.
+		</p>
+
+		<h3>[property:Texture transmissionMap]</h3>
+		<p>
+			The red channel of this texture is multiplied against [page:.transmission], for per-pixel control
+			over optical transparency. Default is *null*.
 		</p>
 
 		<h2>方法(Methods)</h2>

docs/api/zh/materials/MeshToonMaterial.html

@@ -164,26 +164,9 @@
 			Default is a [page:Vector2] set to (1,1).
 		</p>
 
-		<h3>[property:Float shininess]</h3>
-		<p>How shiny the [page:.specular] highlight is; a higher value gives a sharper highlight. Default is *30*.</p>
-
-
 		<h3>[property:Boolean skinning]</h3>
 		<p>Define whether the material uses skinning. Default is false.</p>
 
-		<h3>[property:Color specular]</h3>
-		<p>
-			Specular color of the material. Default is a [page:Color] set to *0x111111* (very dark grey).<br /><br />
-
-			This defines how shiny the material is and the color of its shine.
-		</p>
-
-		<h3>[property:Texture specularMap]</h3>
-		<p>
-			The specular map value affects both how much the specular surface highlight
-			contributes and how much of the environment map affects the surface. Default is null.
-		</p>
-
 		<h3>[property:Boolean wireframe]</h3>
 		<p>Render geometry as wireframe. Default is *false* (i.e. render as flat polygons).</p>
 

docs/api/zh/materials/SpriteMaterial.html

@@ -64,9 +64,6 @@
 		<h3>[property:Color color]</h3>
 		<p>材质的颜色([page:Color])，默认值为白色 (0xffffff)。 [page:.map]会和 color 相乘。</p>
 
-		<h3>[property:boolean fog]</h3>
-		<p>材质是否受场景雾的影响。默认值为*false*。</p>
-
 		<h3>[property:Texture map]</h3>
 		<p>颜色贴图。默认为null。</p>
 

docs/api/zh/math/Color.html

@@ -177,6 +177,14 @@
 		从格式为[ [page:Float r], [page:Float g], [page:Float b] ]的数组数据中来创建Color对象。
 		</p>
 
+		<h3>[method:this fromBufferAttribute]( [param:BufferAttribute attribute], [param:Integer index] )</h3>
+		<p>
+		[page:BufferAttribute attribute] - the source attribute.<br />
+		[page:Integer index] - index in the attribute.<br /><br />
+
+		Sets this color's components from the [page:BufferAttribute attribute].
+		</p>
+
 		<h3>[method:Integer getHex]()</h3>
 		<p>返回此颜色的十六进制值。</p>
 

docs/api/zh/math/MathUtils.html

@@ -80,6 +80,9 @@
 		<h3>[method:Integer randInt]( [param:Integer low], [param:Integer high] )</h3>
 		<p>在区间[page:Float low] 到 [page:Float high]随机一个整数。</p>
 
+		<h3>[method:Float seededRandom]( [param:Integer seed] )</h3>
+		<p>Deterministic pseudo-random float in the interval [ 0, 1 ]. The integer [page:Integer seed] is optional.</p>
+
 		<h3>[method:Float smoothstep]( [param:Float x], [param:Float min], [param:Float max] )</h3>
 		<p>
 		[page:Float x] - 根据其在最小值和最大值之间的位置来计算的值。 <br />

docs/api/zh/math/Quaternion.html

@@ -98,6 +98,11 @@
 		from an array.
 		</p>
 
+		<h3>[method:Quaternion identity]()</h3>
+		<p>
+			Sets this quaternion to the identity quaternion; that is, to the quaternion that represents "no rotation".
+		</p>
+
 		<h3>[method:Quaternion inverse]()</h3>
 		<p>
 			Inverts this quaternion - calculates the [page:.conjugate conjugate]. The quaternion is assumed to have unit length.

docs/api/zh/math/Ray.html

@@ -115,7 +115,7 @@
 		<p>
 		[page:Ray ray] - 用于比较的[page:Ray]。<br /><br />
 
-		如果所传入的[page:Ray ray]具有和当前Ray相同的[page:.offset offset]和[page:.direction direction]则返回true。
+		如果所传入的[page:Ray ray]具有和当前Ray相同的[page:.origin origin]和[page:.direction direction]则返回true。
 		</p>
 
 		<h3>[method:Vector3 intersectBox]( [param:Box3 box], [param:Vector3 target] )</h3>

docs/api/zh/renderers/WebGL1Renderer.html

@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:WebGLRenderer] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		Since r118 [page:WebGLRenderer] automatically uses a WebGL 2 rendering context. When upgrading an existing project to
+		=> r118, applications might break because of two reasons:
+
+		<ul>
+			<li>Custom shader code needs to be GLSL 3.0 conform.</li>
+			<li>WebGL 1 extension checks have to be changed.</li>
+		</ul>
+
+		If you can't afford the time to upgrade your code but still want to use the latest version, you can use [name]. This
+		version of the renderer will enforce a WebGL 1 rendering context.
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Object parameters] )</h3>
+		<p>
+		Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+		<p>See the base [page:WebGLRenderer] class for common properties.</p>
+
+
+		<h2>Methods</h2>
+		<p>See the base [page:WebGLRenderer] class for common methods.</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/zh/renderers/WebGLRenderer.html

@@ -252,11 +252,6 @@
 		色调映射的曝光级别。默认是*1*
 		</p>
 
-		<h3>[property:Number toneMappingWhitePoint]</h3>
-		<p>
-		色调映射的白点。默认是*1*
-		</p>
-
 		<h3>[property:WebXRManager xr]</h3>
 		<p>
 		Provides access to the WebXR related [page:WebXRManager interface] of the renderer.
@@ -290,7 +285,7 @@
 		该方法清楚了一个rendertarget。为此它会激活此endertarget
 		</p>
 
-		<h3>[method:null compile]( [param:Scene scene], [param:Camera camera] )</h3>
+		<h3>[method:null compile]( [param:Object3D scene], [param:Camera camera] )</h3>
 		<p>使用相机编译场景中的所有材质。这对于在首次渲染之前预编译着色器很有用。</p>
 
 		<h3>[method:null copyFramebufferToTexture]( [param:Vector2 position], [param:Texture texture], [param:Number level] )</h3>
@@ -366,7 +361,7 @@
 		示例：[example:webgl_interactive_cubes_gpu interactive / cubes / gpu]</p>
 		<p>For reading out a [page:WebGLCubeRenderTarget WebGLCubeRenderTarget] use the optional parameter activeCubeFaceIndex to determine which face should be read.</p>
 
-		<h3>[method:null render]( [param:Scene scene], [param:Camera camera], [param:WebGLRenderTarget renderTarget], [param:Boolean forceClear] )</h3>
+		<h3>[method:null render]( [param:Object3D scene], [param:Camera camera] )</h3>
 		<p>
 			用相机([page:Camera camera])渲染一个场景([page:Scene scene])<br />
 

docs/api/zh/textures/DataTexture2DArray.html

@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		[page:Texture] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">Creates an array of textures directly from raw data, width and height and depth. This type of texture can only be used with a WebGL 2 rendering context.</p>
+
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( data, width, height, depth )</h3>
+		<p>
+			The data argument must be an [link:https://developer.mozilla.org/en-US/docs/Web/API/ArrayBufferView ArrayBufferView].
+			The properties inherited from [page:Texture] are the default, except magFilter and minFilter default to THREE.NearestFilter. The properties flipY and generateMipmaps are intially set to false.
+		</p>
+		<p>
+			The interpretation of the data depends on type and format:
+			If the type is THREE.UnsignedByteType, a Uint8Array will be useful for addressing the texel data.
+			If the format is THREE.RGBAFormat, data needs four values for one texel; Red, Green, Blue and Alpha (typically the opacity). Similarly, THREE.RGBFormat specifies a format where only three values are used for each texel.<br />
+
+			For the packed types, THREE.UnsignedShort4444Type, THREE.UnsignedShort5551Type or THREE.UnsignedShort565Type, all color components of one texel can be addressed as bitfields within an integer element of a Uint16Array.<br />
+
+			In order to use the types THREE.FloatType and THREE.HalfFloatType, the WebGL implementation must support the respective extensions OES_texture_float and OES_texture_half_float. In order to use THREE.LinearFilter for component-wise, bilinear interpolation of the texels based on these types, the WebGL extensions OES_texture_float_linear or OES_texture_half_float_linear must also be present.
+		</p>
+
+		<h2>代码示例</h2>
+
+		<p>This creates a [name] where each texture has a different color.</p>
+
+		<code>
+		// create a buffer with color data
+
+		var size = width * height;
+		var data = new Uint8Array( 3 * size * depth );
+
+
+		for ( var i = 0; i < depth; i ++ ) {
+
+			var color = new THREE.Color( Math.random(), Math.random(), Math.random() );
+			var r = Math.floor( color.r * 255 );
+			var g = Math.floor( color.g * 255 );
+			var b = Math.floor( color.b * 255 );
+
+			for ( var j = 0; j < size; j ++ ) {
+
+				var stride = ( i * size + j ) * 3;
+
+				data[ stride ] = r;
+				data[ stride + 1 ] = g;
+				data[ stride + 2 ] = b;
+
+			}
+		}
+
+		// used the buffer to create a [name]
+
+		var texture = new THREE.DataTexture2DArray( data, width, height, depth );
+		texture.format = THREE.RGBFormat;
+		texture.type = THREE.UnsignedByteType;
+		</code>
+
+		<p>
+			[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
+		</p>
+
+		<h2>Properties</h2>
+
+		<p>
+		See the base [page:Texture Texture] class for common properties.
+		</p>
+
+		<h3>[property:Image image]</h3>
+		<p>
+		Overridden with a record type holding data, width and height and depth.
+		</p>
+
+		<h2>Methods</h2>
+
+		<p>
+		See the base [page:Texture Texture] class for common methods.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/zh/textures/DataTexture3D.html

@@ -30,8 +30,7 @@
 		<h2>例子</h2>
 
 		<p>
-			[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
-			[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]
+			[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]
 		</p>
 
 		<h2>属性</h2>

docs/examples/en/controls/OrbitControls.html

@@ -60,6 +60,22 @@
 			[page:HTMLDOMElement domElement]: The HTML element used for event listeners.
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
+		<h3>start</h3>
+		<p>
+			Fires when an interaction was initiated.
+		</p>
+
+		<h3>end</h3>
+		<p>
+			Fires when an interaction has finished.
+		</p>
 
 		<h2>Properties</h2>
 
@@ -91,7 +107,7 @@
 
 		<h3>[property:Boolean enabled]</h3>
 		<p>
-			Whether or not the controls are enabled.
+			When set to *false*, the controls will not respond to user input. Default is *true*.
 		</p>
 
 		<h3>[property:Boolean enableDamping]</h3>
@@ -144,8 +160,7 @@ controls.keys = {
 
 		<h3>[property:Float maxAzimuthAngle]</h3>
 		<p>
-			How far you can orbit horizontally, upper limit. Range is - Math.PI to Math.PI ( or Infinity for no limit ) and default is
-			Infinity;
+			How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
 		</p>
 
 		<h3>[property:Float maxDistance]</h3>
@@ -165,8 +180,7 @@ controls.keys = {
 
 		<h3>[property:Float minAzimuthAngle]</h3>
 		<p>
-			How far you can orbit horizontally, lower limit. Range is - Math.PI to Math.PI ( or - Infinity for no limit ) and default
-			is - Infinity;
+			How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
 		</p>
 
 		<h3>[property:Float minDistance]</h3>
@@ -220,7 +234,8 @@ controls.mouseButtons = {
 		<h3>[property:Boolean screenSpacePanning]</h3>
 		<p>
 		Defines how the camera's position is translated when panning. If true, the camera pans in screen space.
-		Otherwise, the camera pans in the plane orthogonal to the camera's up direction. Default is false.
+		Otherwise, the camera pans in the plane orthogonal to the camera's up direction.
+		Default is true for OrbitControls; false for MapControls.
 		</p>
 
 		<h3>[property:Vector3 target0]</h3>

docs/examples/en/controls/PointerLockControls.html

@@ -87,6 +87,16 @@
 			Whether or not the controls are locked.
 		</p>
 
+		<h3>[property:Float maxPolarAngle]</h3>
+		<p>
+			Camera pitch, upper limit. Range is 0 to Math.PI radians. Default is Math.PI.
+		</p>
+
+		<h3>[property:Float minPolarAngle]</h3>
+		<p>
+			Camera pitch, lower limit. Range is 0 to Math.PI radians. Default is 0.
+		</p>
+
 		<h2>Methods</h2>
 
 		<p>See the base [page:EventDispatcher] class for common methods.</p>

docs/examples/en/loaders/GLTFLoader.html

@@ -30,10 +30,12 @@
 
 		<ul>
 			<li>KHR_draco_mesh_compression</li>
+			<li>KHR_materials_clearcoat</li>
 			<li>KHR_materials_pbrSpecularGlossiness</li>
 			<li>KHR_materials_unlit</li>
 			<li>KHR_mesh_quantization</li>
 			<li>KHR_lights_punctual<sup>1</sup></li>
+			<li>KHR_texture_basisu <i>(experimental)</i></li>
 			<li>KHR_texture_transform<sup>2</sup></li>
 			<li>MSFT_texture_dds</li>
 		</ul>
@@ -44,7 +46,7 @@
 		<p><i>
 			<sup>2</sup>UV transforms are supported, with several key limitations. Transforms applied to
 			a texture using the first UV slot (all textures except aoMap and lightMap) must share the same
-			transform, or no transfor at all. The aoMap and lightMap textures cannot be transformed. No
+			transform, or no transform at all. The aoMap and lightMap textures cannot be transformed. No
 			more than one transform may be used per material. Each use of a texture with a unique
 			transform will result in an additional GPU texture upload. See
 			#[link:https://github.com/mrdoob/three.js/pull/13831 13831] and

docs/examples/en/math/convexhull/ConvexHull.html

@@ -213,7 +213,7 @@
 		<h2>Source</h2>
 
 		<p>
-			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/ConvexHull.js examples/jsm/ConvexHull.js]
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/ConvexHull.js examples/jsm/math/ConvexHull.js]
 		</p>
 	</body>
 </html>

docs/examples/en/renderers/SVGRenderer.html

@@ -59,6 +59,11 @@
 			Tells the renderer to clear its drawing surface.
 		</p>
 
+		<h3>[method:Object getSize]()</h3>
+		<p>
+			Returns an object containing the width and height of the renderer.
+		</p>
+
 		<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
 		<p>
 			Renders a [page:Scene scene] using a [page:Camera camera].

docs/examples/en/utils/SceneUtils.html

@@ -15,7 +15,7 @@
 
 		<h2>Methods</h2>
 
-		<h3>[method:Group createMultiMaterialObject]( [param:InstancedMesh instancedMesh] )</h3>
+		<h3>[method:Group createMeshesFromInstancedMesh]( [param:InstancedMesh instancedMesh] )</h3>
 		<p>
 		instancedMesh -- The instanced mesh.
 		</p>

docs/examples/zh/controls/OrbitControls.html

@@ -60,6 +60,22 @@
 			[page:HTMLDOMElement domElement]: 用于事件监听的HTML元素。
 		</p>
 
+		<h2>Events</h2>
+
+		<h3>change</h3>
+		<p>
+			Fires when the camera has been transformed by the controls.
+		</p>
+
+		<h3>start</h3>
+		<p>
+			Fires when an interaction was initiated.
+		</p>
+
+		<h3>end</h3>
+		<p>
+			Fires when an interaction has finished.
+		</p>
 
 		<h2>属性</h2>
 
@@ -89,7 +105,7 @@
 
 		<h3>[property:Boolean enabled]</h3>
 		<p>
-			控制器是否被启用。
+			When set to *false*, the controls will not respond to user input. Default is *true*.
 		</p>
 
 		<h3>[property:Boolean enableDamping]</h3>
@@ -141,8 +157,7 @@ controls.keys = {
 
 		<h3>[property:Float maxAzimuthAngle]</h3>
 		<p>
-			你能够水平旋转的角度的上限，范围是-Math.PI到Math.PI（或Infinity无限制），
-			其默认值为Infinity。
+			How far you can orbit horizontally, upper limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
 		</p>
 
 		<h3>[property:Float maxDistance]</h3>
@@ -162,8 +177,7 @@ controls.keys = {
 
 		<h3>[property:Float minAzimuthAngle]</h3>
 		<p>
-			你能够水平旋转的角度的下限，范围是-Math.PI到Math.PI（或-Infinity无限制），
-			其默认值为-Infinity。
+			How far you can orbit horizontally, lower limit. If set, the interval [ min, max ] must be a sub-interval of [ - 2 PI, 2 PI ], with ( max - min < 2 PI ). Default is Infinity.
 		</p>
 
 		<h3>[property:Float minDistance]</h3>
@@ -217,7 +231,10 @@ controls.mouseButtons = {
 		<h3>[property:Boolean screenSpacePanning]</h3>
 		<p>
 			定义当平移的时候摄像机的位置将如何移动。如果为true，摄像机将在屏幕空间内平移。
-			否则，摄像机将在与摄像机向上方向垂直的平面中平移。其默认值为false。
+			否则，摄像机将在与摄像机向上方向垂直的平面中平移。
+			Defines how the camera's position is translated when panning. If true, the camera pans in screen space.
+			Otherwise, the camera pans in the plane orthogonal to the camera's up direction.
+			Default is true for OrbitControls; false for MapControls.
 		</p>
 
 		<h3>[property:Vector3 target0]</h3>

docs/examples/zh/controls/PointerLockControls.html

@@ -86,7 +86,17 @@
 			控制器是否被锁定。
 		</p>
 
-		<h2>方法</h2>
+		<h3>[property:Float maxPolarAngle]</h3>
+		<p>
+			Camera pitch, upper limit. Range is 0 to Math.PI radians. Default is Math.PI.
+		</p>
+
+		<h3>[property:Float minPolarAngle]</h3>
+		<p>
+			Camera pitch, lower limit. Range is 0 to Math.PI radians. Default is 0.
+		</p>
+
+		<h2>Methods</h2>
 
 		<p>共有方法请参见其基类[page:EventDispatcher]。</p>
 

docs/examples/zh/loaders/GLTFLoader.html

@@ -28,10 +28,12 @@
 
 		<ul>
 			<li>KHR_draco_mesh_compression</li>
+			<li>KHR_materials_clearcoat</li>
 			<li>KHR_materials_pbrSpecularGlossiness</li>
 			<li>KHR_materials_unlit</li>
 			<li>KHR_mesh_quantization</li>
 			<li>KHR_lights_punctual<sup>1</sup></li>
+			<li>KHR_texture_basisu <i>(experimental)</i></li>
 			<li>KHR_texture_transform<sup>2</sup></li>
 			<li>MSFT_texture_dds</li>
 		</ul>

docs/examples/zh/math/convexhull/ConvexHull.html

@@ -213,7 +213,7 @@
 		<h2>Source</h2>
 
 		<p>
-			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/ConvexHull.js examples/jsm/ConvexHull.js]
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/ConvexHull.js examples/jsm/math/ConvexHull.js]
 		</p>
 	</body>
 </html>

docs/examples/zh/renderers/SVGRenderer.html

@@ -52,6 +52,11 @@
 			告诉渲染器来清除其绘图表面。
 		</p>
 
+		<h3>[method:Object getSize]()</h3>
+		<p>
+			返回一个包含有渲染器宽和高的对象。
+		</p>
+
 		<h3>[method:null render]( [param:Scene scene], [param:Camera camera] )</h3>
 		<p>
 			使用[page:Camera camera]来渲染一个[page:Scene scene]。

docs/examples/zh/utils/SceneUtils.html

@@ -15,7 +15,14 @@
 
 		<h2>Methods</h2>
 
-
+		<h3>[method:Group createMeshesFromInstancedMesh]( [param:InstancedMesh instancedMesh] )</h3>
+		<p>
+		instancedMesh -- The instanced mesh.
+		</p>
+		<p>
+		Creates a new group object that contains a new mesh for each instance of the given instanced mesh.
+		</p>
+		
 		<h3>[method:Group createMultiMaterialObject]( [param:Geometry geometry], [param:Array materials] )</h3>
 		<p>
 		geometry -- The geometry for the set of materials. <br />

docs/index.html

@@ -31,7 +31,7 @@
 					<div id="exitSearchButton"></div>
 					<select id="language">
 						<option value="en">en</option>
-						<option value="zh">zh</option>
+						<option value="zh">中文</option>
 					</select>
 				</div>
 				<div id="content"></div>
@@ -309,7 +309,7 @@
 							if ( result !== '' ) {
 
 								pageName = pageName.replace( result, '<b>' + result + '</b>' );
-			
+
 							}
 
 						}

docs/list.js

@@ -6,12 +6,11 @@ var list = {
 
 			"Getting Started": {
 				"Creating a scene": "manual/en/introduction/Creating-a-scene",
-				"Import via modules": "manual/en/introduction/Import-via-modules",
+				"Installation": "manual/en/introduction/Installation",
 				"Browser support": "manual/en/introduction/Browser-support",
 				"WebGL compatibility check": "manual/en/introduction/WebGL-compatibility-check",
 				"How to run things locally": "manual/en/introduction/How-to-run-things-locally",
 				"Typescript setup": "manual/en/introduction/Typescript-setup",
-				"How to use WebGL 2": "manual/en/introduction/How-to-use-WebGL2",
 				"Drawing lines": "manual/en/introduction/Drawing-lines",
 				"Creating text": "manual/en/introduction/Creating-text",
 				"Loading 3D models": "manual/en/introduction/Loading-3D-models",
@@ -202,8 +201,10 @@ var list = {
 
 			"Lights": {
 				"AmbientLight": "api/en/lights/AmbientLight",
+				"AmbientLightProbe": "api/en/lights/AmbientLightProbe",
 				"DirectionalLight": "api/en/lights/DirectionalLight",
 				"HemisphereLight": "api/en/lights/HemisphereLight",
+				"HemisphereLightProbe": "api/en/lights/HemisphereLightProbe",
 				"Light": "api/en/lights/Light",
 				"LightProbe": "api/en/lights/LightProbe",
 				"PointLight": "api/en/lights/PointLight",
@@ -312,6 +313,7 @@ var list = {
 			"Renderers": {
 				"WebGLMultisampleRenderTarget": "api/en/renderers/WebGLMultisampleRenderTarget",
 				"WebGLRenderer": "api/en/renderers/WebGLRenderer",
+				"WebGL1Renderer": "api/en/renderers/WebGL1Renderer",
 				"WebGLRenderTarget": "api/en/renderers/WebGLRenderTarget",
 				"WebGLCubeRenderTarget": "api/en/renderers/WebGLCubeRenderTarget"
 			},
@@ -338,6 +340,7 @@ var list = {
 				"CompressedTexture": "api/en/textures/CompressedTexture",
 				"CubeTexture": "api/en/textures/CubeTexture",
 				"DataTexture": "api/en/textures/DataTexture",
+				"DataTexture2DArray": "api/en/textures/DataTexture2DArray",
 				"DataTexture3D": "api/en/textures/DataTexture3D",
 				"DepthTexture": "api/en/textures/DepthTexture",
 				"Texture": "api/en/textures/Texture",
@@ -464,12 +467,11 @@ var list = {
 
 			"起步": {
 				"创建一个场景": "manual/zh/introduction/Creating-a-scene",
-				"通过模块来引入": "manual/zh/introduction/Import-via-modules",
+				"Installation": "manual/zh/introduction/Installation",
 				"浏览器支持": "manual/zh/introduction/Browser-support",
 				"WebGL兼容性检查": "manual/zh/introduction/WebGL-compatibility-check",
 				"如何在本地运行Three.js": "manual/zh/introduction/How-to-run-things-locally",
 				"Typescript设置": "manual/zh/introduction/Typescript-setup",
-				"如何使用WebGL 2": "manual/zh/introduction/How-to-use-WebGL2",
 				"画线": "manual/zh/introduction/Drawing-lines",
 				"创建文字": "manual/zh/introduction/Creating-text",
 				"载入3D模型": "manual/zh/introduction/Loading-3D-models",
@@ -660,8 +662,10 @@ var list = {
 
 			"灯光": {
 				"AmbientLight": "api/zh/lights/AmbientLight",
+				"AmbientLightProbe": "api/zh/lights/AmbientLightProbe",
 				"DirectionalLight": "api/zh/lights/DirectionalLight",
 				"HemisphereLight": "api/zh/lights/HemisphereLight",
+				"HemisphereLightProbe": "api/zh/lights/HemisphereLightProbe",
 				"Light": "api/zh/lights/Light",
 				"LightProbe": "api/zh/lights/LightProbe",
 				"PointLight": "api/zh/lights/PointLight",
@@ -770,6 +774,7 @@ var list = {
 			"渲染器": {
 				"WebGLMultisampleRenderTarget": "api/zh/renderers/WebGLMultisampleRenderTarget",
 				"WebGLRenderer": "api/zh/renderers/WebGLRenderer",
+				"WebGL1Renderer": "api/zh/renderers/WebGL1Renderer",
 				"WebGLRenderTarget": "api/zh/renderers/WebGLRenderTarget",
 				"WebGLCubeRenderTarget": "api/zh/renderers/WebGLCubeRenderTarget"
 			},
@@ -796,6 +801,7 @@ var list = {
 				"CompressedTexture": "api/zh/textures/CompressedTexture",
 				"CubeTexture": "api/zh/textures/CubeTexture",
 				"DataTexture": "api/zh/textures/DataTexture",
+				"DataTexture2DArray": "api/zh/textures/DataTexture2DArray",
 				"DataTexture3D": "api/zh/textures/DataTexture3D",
 				"DepthTexture": "api/zh/textures/DepthTexture",
 				"Texture": "api/zh/textures/Texture",

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

@@ -133,7 +133,7 @@
 				<script src="js/three.js"></script>
 				<script>
 					var scene = new THREE.Scene();
-					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
+					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
 					var renderer = new THREE.WebGLRenderer();
 					renderer.setSize( window.innerWidth, window.innerHeight );

docs/manual/en/introduction/How-to-run-things-locally.html

@@ -48,6 +48,15 @@
 				production servers such as [link:https://www.apache.org/ Apache] or [link:https://nginx.org NGINX], however they should be sufficient for testing your
 				three.js application.
 			</p>
+			
+			<h3>Plugins for popular code editors</h3>
+			<div>
+				<p>Some code editors have plugins which will spawn a simple server on demand.</p>
+				<ul>
+					<li>[link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] for Visual Studio Code.</li>
+					<li>[link:https://atom.io/packages/atom-live-server Live Server] for Atom.</li>
+				</ul>
+			</div>
 
 			<h3>Servez</h3>
 			<div>

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

@@ -1,127 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="list.js"></script>
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>[name]</h1>
-
-	<p>
-		Starting with three.js R95, the engine supports rendering with a WebGL 2 context. By default three.js always uses a
-		WebGL 1 context when creating an instance of *WebGLRenderer*. If you want use a WebGL 2 context, please have a look
-		at the following workflow.
-	</p>
-
-	<h2>Workflow</h2>
-
-	<p>
-		Since WebGL 2 is not supported by all devices that support WebGL 1, it's important to check the respective availability.
-		To do so, please include [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js WebGL.js] into your project.
-	</p>
-
-	<code>
-import { WEBGL } from 'three/examples/jsm/WebGL.js';
-	</code>
-
-	<p>
-		Next, use a code similar to the following in order to perform the availability check.
-	</p>
-
-	<code>
-
-if ( WEBGL.isWebGL2Available() === false ) {
-
-	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
-
-}
-	</code>
-
-	<p>
-		Now it's time to create the renderer by applying the HTML5 canvas element and the respective WebGL 2 context
-		to the constructor of *WebGLRenderer*. As a result, three.js will internally use the given context for rendering and
-		automatically convert the built-in material's shader code to GLSL ES 3.00.
-	</p>
-
-	<p>
-		Since you are manually creating the WebGL 2 rendering context, you also have to pass in all necessary context attributes.
-		Note: It's not possible to modify these attributes after the context has been created, so passing them to the WebGLRenderer won't have any effect.
-	</p>
-
-	<code>
-var canvas = document.createElement( 'canvas' );
-var context = canvas.getContext( 'webgl2', { alpha: false } );
-var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
-	</code>
-
-	<p>
-		Sometimes it is necessary to write custom shader code. Use the following code template as a basis for your own
-		implementation. First, the GLSL ES 3.00 code.
-	</p>
-
-	<code>
-&lt;script id="vs" type="x-shader/x-vertex"&gt;
-#version 300 es
-
-void main() {
-
-	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-
-}
-&lt;/script&gt;
-&lt;script id="fs" type="x-shader/x-fragment"&gt;
-#version 300 es
-
-precision highp float;
-precision highp int;
-out vec4 out_FragColor;
-
-void main() {
-
-	out_FragColor = vec4( 1.0 );
-
-}
-&lt;/script&gt;
-	</code>
-	<p>
-		Second, the corresponding material creation in JavaScript.
-	</p>
-	<code>
-var material = new THREE.ShaderMaterial( {
-	vertexShader: document.getElementById( 'vs' ).textContent.trim(),
-	fragmentShader: document.getElementById( 'fs' ).textContent.trim()
-} );
-	</code>
-
-	<h2>Next Steps</h2>
-
-	<p>
-		Have a look at one of the official examples in order to see WebGL 2 features in action.<br /><br />
-
-		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
-		[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]<br />
-		[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
-	</p>
-
-	<h2>Supported features</h2>
-
-	<p>
-		Right now, the engine does only support a subset of all existing WebGL 2 features. The following list provides an
-		overview about what's already available in the latest version of three.js.
-		<ul>
-			<li>3D Textures</li>
-			<li>2D Texture Arrays</li>
-			<li>Multisampled Renderbuffers</li>
-			<li>Non-power of two (POT) textures work just the same as POT textures now. No resizing is required for best quality.</li>
-		</ul>
-
-	</p>
-
-</body>
-
-</html>

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

@@ -1,81 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>[name]</h1>
-
-		<p>
-			While importing three.js via script tags is a great way to get up and running fast, it has a few drawbacks for longer lived projects, for example:
-			<ul>
-				<li>You have to manually fetch and include a copy of the library as part of your project's source code</li>
-				<li>Updating the library's version is a manual process</li>
-				<li>When checking in a new version of the library your version control diffs are cluttered by the many lines of the build file</li>
-			</ul>
-		</p>
-
-		<p>Using a dependency manager like npm avoids these caveats by allowing you to simply download and import your desired version of the library onto your machine.</p>
-
-		<h2>Installation via npm</h2>
-
-		<p>Three.js is published as an npm module, see: [link:https://www.npmjs.com/package/three npm]. This means all you need to do to include three.js into your project is run "npm install three"</p>
-
-		<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>
-			You should now be able to import the module into your source files and continue to use it as per normal.
-		</p>
-
-		<code>
-		var THREE = require('three');
-
-		var scene = new THREE.Scene();
-		...
-		</code>
-
-		<p>
-			You're also able to leverage [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import ES6 import syntax]:
-		</p>
-
-		<code>
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-		...
-		</code>
-
-		<p>
-			or if you wish to import only select parts of three.js library, for example Scene:
-		</p>
-
-		<code>
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		...
-		</code>
-
-		<h2>Importable Examples</h2>
-		<p>
-			The core of three.js is focused on the most important components of a 3D engine. Many other components like loaders or controls are part of the
-			examples directory. three.js ensures that these files are kept in sync with the core but users have to import them separately if they are required
-			for a project. You can find in the [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm] directory an ES6
-			module version for almost all example files. If you install three.js via npm, you can import them like so:
-		</p>
-		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-		</code>
-		<p>
-			Note: When using code from the examples directory, it's important that all files match the version of
-			your three.js main file. For example, it's not acceptable to use *GLTFLoader* and *OrbitControls* from R96 together
-			with three.js R103.
-		</p>
-	</body>
-</html>

docs/manual/en/introduction/Installation.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<p>
+			You can install three.js with [link:https://www.npmjs.com/ npm] and modern build tools, or get started quickly with just static hosting or a CDN. For most users, installing from npm is the best choice.
+		</p>
+
+		<p>
+			Whichever you choose, be consistent and import all files from the same version of the library. Mixing files from different sources may cause duplicate code to be included, or even break the application in unexpected ways.
+		</p>
+
+		<p>
+			All methods of installing three.js depend on ES modules (see [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), which allow you to include only the parts of the library needed in the final project.
+		</p>
+
+		<h2>Install from npm</h2>
+
+		<p>
+			To install the [link:https://www.npmjs.com/package/three three] npm module, open a terminal window in your project folder and run:
+		</p>
+
+		<code>
+		npm install --save three
+		</code>
+
+		<p>
+			The package will be downloaded and installed. Then you're ready to import it in your code:
+		</p>
+
+		<code>
+		///////////////////////////////////////////////////////
+		// Option 1: Import the entire three.js core library.
+		import * as THREE from 'three';
+
+		const scene = new THREE.Scene();
+
+
+		///////////////////////////////////////////////////////
+		// Option 2: Import just the parts you need.
+		import { Scene } from 'three';
+
+		const scene = new Scene();
+		</code>
+
+		<p>
+			When installing from npm, you'll almost always use some sort of [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] to combine all of the packages your project requires into a single JavaScript file. While any modern JavaScript bundler can be used with three.js, the most popular choice is [link:https://webpack.js.org/ webpack].
+		</p>
+
+		<p>
+			Not all features are accessed directly through the <em>three</em> module (also called a "bare import"). Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] subfolder. To learn more, see <em>Examples</em> below.
+		</p>
+
+		<p>
+			Learn more about npm modules from [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].
+		</p>
+
+		<h2>Install from CDN or static hosting</h2>
+
+		<p>
+			The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use <em>type="module"</em> as shown below:
+		</p>
+
+		<code>
+		&lt;script type="module">
+
+		  // Find the latest version by visiting https://unpkg.com/three. The URL will
+		  // redirect to the newest stable release.
+		  import * as THREE from 'https://unpkg.com/three@&lt;VERSION>/build/three.module.js';
+
+		  const scene = new THREE.Scene();
+
+		&lt;/script>
+		</code>
+
+		<p>
+			Not all features are accessed through the <em>build/three.module.js</em> module. Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] subfolder. To learn more, see <em>Examples</em> below.
+		</p>
+
+
+		<h2>Examples</h2>
+
+		<p>
+			The core of three.js is focused on the most important components of a 3D engine. Many other useful components — such as controls, loaders, and post-processing effects — are part of the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] directory. They are referred to as "examples," because while you can use them off the shelf, they're also meant to be remixed and customized. These components are always kept in sync with the core library, whereas similar third-party packages on npm are maintained by different people and may not be up to date.
+		</p>
+
+		<p>
+			Examples do not need to be <em>installed</em> separately, but do need to be <em>imported</em> separately. If three.js was installed with npm, you can load the [page:OrbitControls] component with:
+		</p>
+
+
+		<code>
+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+		const controls = new OrbitControls();
+		</code>
+
+		<p>
+			If three.js was installed from a CDN, use the same CDN to install other components:
+		</p>
+
+		<code>
+		&lt;script type="module">
+
+		  // Find the latest version by visiting https://unpkg.com/three. The URL will
+		  // redirect to the newest stable release.
+		  import { OrbitControls } from 'https://unpkg.com/three@&lt;VERSION>/examples/jsm/controls/OrbitControls.js';
+
+		  const controls = new OrbitControls();
+
+		&lt;/script>
+		</code>
+
+		<p>
+			It's important that all files use the same version. Do not import different examples from different versions, or use examples from a different version than the three.js library itself.
+		</p>
+
+		<h2>Compatibility</h2>
+
+		<h3>CommonJS imports</h3>
+
+		<p>
+			While most modern JavaScript bundlers now support ES modules by default, some older build tools might not. In those cases you can likely configure the bundler to understand ES modules: [link:http://browserify.org/ Browserify] just needs the [link:https://github.com/babel/babelify babelify] plugin, for example.
+		</p>
+
+		<h3>Import maps</h3>
+
+		<p>
+			Imported paths differ when installing from npm, as compared to installing from static hosting or a CDN. We're aware that this is an ergonomic issue for both groups of users. Developers with build tools and bundlers prefer bare package specifiers (e.g. 'three') rather than relative paths, and files in the <em>examples/</em> folder use relative references to <em>three.module.js</em> that don't follow this expectation. Those who do not use build tools — for fast prototyping, learning, or personal preference — may similarly dislike those relative imports, which require certain folder structures and are less forgiving than a global <em>THREE.*</em> namespace.
+		</p>
+
+		<p>
+			We hope to remove these relative paths when [link:https://github.com/WICG/import-maps import maps] become broadly available, replacing them with bare package specifiers to the npm package name, 'three'. This matches build tool expectations for npm packages more closely, and allows both groups of users to write exactly the same code when importing a file. For users who prefer to avoid build tools, a simple JSON mapping can direct all imports to a CDN or static file folder. Experimentally, you can try using simpler imports today with an import map polyfill, as shown in our [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map example].
+		</p>
+
+		<h3>Node.js</h3>
+
+		<p>
+			Using three.js in [link:https://eloquentjavascript.net/20_node.html Node.js] can be difficult, for two reasons:
+		</p>
+
+		<p>
+			First, because three.js is built for the web, it depends on browser and DOM APIs that don't always exist in Node.js. Some of these issues can be resolved by using shims like [link:https://github.com/stackgl/headless-gl headless-gl], or by replacing components like [page:TextureLoader] with custom alternatives. Other DOM APIs may be deeply intertwined with the code that uses them, and will be harder to work around. We welcome simple and maintainable pull requests to improve Node.js support, but recommend opening an issue to discuss your improvements first.
+		</p>
+
+		<p>
+			Second, Node.js support for ES modules is ... complicated. As of Node.js v12, the core library can be imported as a CommonJS module, with <em>require('three')</em>. However, most example components in <em>examples/jsm</em> cannot. Future versions of Node.js may resolve this, but in the meantime you may need to use workarounds like [link:https://github.com/standard-things/esm esm] to enable your Node.js application to recognize ES modules.
+		</p>
+
+	</body>
+</html>

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

@@ -81,20 +81,11 @@
 
 	<p>
 		Only a few loaders (e.g. [page:ObjectLoader]) are included by default with
-		three.js — others should be added to your page individually. Depending on your
-		preference and comfort with build tools, choose one of the following:
+		three.js — others should be added to your app individually.
 	</p>
 
 	<code>
-		// global script
-		&lt;script src="GLTFLoader.js"&gt;&lt;/script&gt;
-
-		// commonjs
-		var THREE = window.THREE = require('three');
-		require('three/examples/js/loaders/GLTFLoader');
-
-		// ES modules
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 	</code>
 
 	<p>
@@ -104,7 +95,7 @@
 	</p>
 
 	<code>
-		var loader = new THREE.GLTFLoader();
+		var loader = new GLTFLoader();
 
 		loader.load( 'path/to/model.glb', function ( gltf ) {
 

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

@@ -134,7 +134,7 @@
 				<script src="js/three.js"></script>
 				<script>
 					var scene = new THREE.Scene();
-					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
+					var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
 
 					var renderer = new THREE.WebGLRenderer();
 					renderer.setSize( window.innerWidth, window.innerHeight );

docs/manual/zh/introduction/How-to-run-things-locally.html

@@ -47,6 +47,22 @@
                 但对于你来测试three.js应用程序来说，它们就已经足够了。
 			</p>
 
+			<h3>流行的代码编辑器插件</h3>
+			<div>
+				<p>一些代码编辑器具有插件，可以根据需要生成简单的服务器。</p>
+				<ul>
+					<li>Visual Studio Code [link:https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer Live Server] 插件。</li>
+					<li>Atom [link:https://atom.io/packages/atom-live-server Live Server] 插件。</li>
+				</ul>
+			</div>
+
+			<h3>Servez</h3>
+			<div>
+				<p>
+					[link:https://greggman.github.io/servez Servez] 一个具有界面的简单服务器。
+				</p>
+			</div>
+
 			<h3>Node.js server</h3>
 			<div>
 				<p>Node.js 具有一个简单的HTTP服务器包，如需安装，请执行：</p>

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

@@ -1,125 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh">
-
-<head>
-	<meta charset="utf-8">
-	<base href="../../../" />
-	<script src="list.js"></script>
-	<script src="page.js"></script>
-	<link type="text/css" rel="stylesheet" href="page.css" />
-</head>
-
-<body>
-	<h1>如何使用WebGL 2（[name]）</h1>
-
-	<p>
-		从R95版本起，three.js便开始支持使用WebGL 2环境来进行渲染。默认情况下，当创建一个*WebGLRenderer*实例时，
-		three.js总是使用WebGL 1环境。如果你希望来使用WebGL 2环境，请参阅以下的工作流程。
-	</p>
-
-	<h2>工作流程</h2>
-
-	<p>
-		由于WebGL 2并不被所有支持WebGL 1的设备所支持，因此检查各种设备上WebGL 2的可用性是非常重要的。
-		要对其可用性进行检查，请将[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js WebGL.js]包含到你的项目中。
-	</p>
-
-	<code>
-import { WEBGL } from 'three/examples/jsm/WebGL.js';
-	</code>
-
-	<p>
-		接下来，使用和下列代码相似的代码来进行可用性检查。
-	</p>
-
-	<code>
-
-if ( WEBGL.isWebGL2Available() === false ) {
-
-	document.body.appendChild( WEBGL.getWebGL2ErrorMessage() );
-
-}
-	</code>
-
-	<p>
-		现在，你就可以将由*WebGLRenderer*所构造的renderer，应用到HTML5 Canvas元素和对应的WebGL 2绘图环境上了。
-		最终，three.js将在内部使用所给定的绘图环境来渲染，并自动将内置的材质的着色器代码转化为GLSL ES 3.00。
-	</p>
-
-	<p>
-		由于你是手动创建WebGL 2渲染上下文，因此还必须传入所有必需的上下文属性。
-		请注意：在上下文被创建后，将无法修改这些属性，因此将它们传递给WebGLRenderer将不会产生任何影响。
-	</p>
-
-	<code>
-var canvas = document.createElement( 'canvas' );
-var context = canvas.getContext( 'webgl2', { alpha: false } );
-var renderer = new THREE.WebGLRenderer( { canvas: canvas, context: context } );
-	</code>
-
-	<p>
-		有时候，写一些自定义着色器也是非常必要的。请使用下列的代码模板作为你自己来进行实现的基础。
-		首先是GLSL ES 3.00代码。
-	</p>
-
-	<code>
-&lt;script id="vs" type="x-shader/x-vertex"&gt;
-#version 300 es
-
-void main() {
-
-	gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
-
-}
-&lt;/script&gt;
-&lt;script id="fs" type="x-shader/x-fragment"&gt;
-#version 300 es
-
-precision highp float;
-precision highp int;
-out vec4 out_FragColor;
-
-void main() {
-
-	out_FragColor = vec4( 1.0 );
-
-}
-&lt;/script&gt;
-	</code>
-	<p>
-		然后是使用JavaScript来创建的对应的材质。
-	</p>
-	<code>
-var material = new THREE.ShaderMaterial( {
-	vertexShader: document.getElementById( 'vs' ).textContent.trim(),
-	fragmentShader: document.getElementById( 'fs' ).textContent.trim()
-} );
-	</code>
-
-	<h2>接下来</h2>
-
-	<p>
-		请参阅官方示例，来看一看WebGL 2各种特性的运行。<br /><br />
-
-		[example:webgl2_materials_texture3d WebGL2 / materials / texture3d]<br />
-		[example:webgl2_materials_texture2darray WebGL2 / materials / texture2darray]<br />
-		[example:webgl2_multisampled_renderbuffers WebGL2 / multisampled renderbuffers]
-	</p>
-
-	<h2>支持的特性</h2>
-
-	<p>
-		当前，three.js引擎仅支持所有现有的WebGL 2特性的一个子集。
-		下列列表展现了在最新版本three.js中，已可用的特性的概览。
-		<ul>
-			<li>3D Textures</li>
-			<li>2D Texture Arrays</li>
-			<li>Multisampled Renderbuffers</li>
-			<li>Non-power of two (POT) textures work just the same as POT textures now. No resizing is required for best quality.</li>
-		</ul>
-
-	</p>
-
-</body>
-
-</html>

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

@@ -1,80 +0,0 @@
-<!DOCTYPE html>
-<html lang="zh">
-	<head>
-		<meta charset="utf-8">
-		<base href="../../../" />
-		<script src="list.js"></script>
-		<script src="page.js"></script>
-		<link type="text/css" rel="stylesheet" href="page.css" />
-	</head>
-	<body>
-		<h1>通过模块来引入（[name]）</h1>
-
-		<p>
-			虽然通过script标签来引入three.js是一个能够快速起步、快速运行的方式，但这种方式对于一些具有较长生命周期的项目来说是有一些缺点。比如：
-
-			<ul>
-				<li>你必须手动获得并在你的项目源代码中包含这个库的一个拷贝</li>
-				<li>更新库的版本是一个手动操作的过程</li>
-				<li>在检查新版本的库时，你的版本差异对比将会被许多行的构建文件给弄乱。</li>
-			</ul>
-		</p>
-
-		<p>使用像npm这样的依赖包管理器，你只需在你的机器上下载并导入你所需要的版本的库就很好地避免这些需要注意的问题。</p>
-
-		<h2>通过npm来安装</h2>
-
-		<p>Three.js目前已经作为一个npm模块来进行了发布，详情请参阅：[link:https://www.npmjs.com/package/three npm]。这意味着你只需运行"npm install three"就可以使你的项目包含three.js库。</p>
-
-		<h2>导入这个模块</h2>
-
-		<p>假设你正在使用[link:https://webpack.github.io/ Webpack]或者[link:https://github.com/substack/node-browserify Browserify]等允许你“通过打包所有依赖，来在浏览器中使用require('modules')”的打包工具对你的文件进行打包。</p>
-
-		<p>你现在可以在你的源代码中引入模块，并继续像往常一样使用这个库。
-		</p>
-
-		<code>
-		var THREE = require('three');
-
-		var scene = new THREE.Scene();
-		...
-		</code>
-
-		<p>
-			你也可以使用[link:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/import ES6 import]（在ES6标准中新增的import语句）
-		</p>
-
-		<code>
-		import * as THREE from 'three';
-
-		const scene = new THREE.Scene();
-		...
-		</code>
-
-		<p>
-			或者，如果你希望只导入three.js库中的特定部分，例如Scene：
-		</p>
-
-		<code>
-		import { Scene } from 'three';
-
-		const scene = new Scene();
-		...
-		</code>
-
-		<h2>可引入的示例</h2>
-		<p>
-			three.js的核心专注于实现3D引擎中最为重要的组件。其他诸如加载器和控制器等组件，是示例文件夹中的一部分。
-			three.js确保这些文件能够与核心保持同步，但如果在一个项目中这些组件是必要的，用户将必须分别地引入它们。
-			你可以在[link:https://github.com/mrdoob/three.js/tree/master/examples/jsm examples/jsm]文件夹中找到所有示例文件的ES6版本。
-			如果你是通过npm来安装three.js的，那么你可以使用类似下面的代码来引入它们：
-		</p>
-		<code>
-		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
-		</code>
-		<p>
-			请注意：当你在使用来自示例（examples）文件夹中的代码时，其中的所有文件和你的three.js主文件版本相匹配是很重要的。
-			比如说，three.js的R103版本不能够接受和来自R96版本的*GLTFLoader*和*OrbitControls*一起使用。
-		</p>
-	</body>
-</html>

docs/manual/zh/introduction/Installation.html

@@ -0,0 +1,159 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="list.js"></script>
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>通过模块来引入（[name]）</h1>
+
+		<p>
+			You can install three.js with [link:https://www.npmjs.com/ npm] and modern build tools, or get started quickly with just static hosting or a CDN. For most users, installing from npm is the best choice.
+		</p>
+
+		<p>
+			Whichever you choose, be consistent and import all files from the same version of the library. Mixing files from different sources may cause duplicate code to be included, or even break the application in unexpected ways.
+		</p>
+
+		<p>
+			All methods of installing three.js depend on ES modules (see [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent JavaScript: ECMAScript Modules]), which allow you to include only the parts of the library needed in the final project.
+		</p>
+
+		<h2>Install from npm</h2>
+
+		<p>
+			To install the [link:https://www.npmjs.com/package/three three] npm module, open a terminal window in your project folder and run:
+		</p>
+
+		<code>
+		npm install --save three
+		</code>
+
+		<p>
+			The package will be downloaded and installed. Then you're ready to import it in your code:
+		</p>
+
+		<code>
+		///////////////////////////////////////////////////////
+		// Option 1: Import the entire three.js core library.
+		import * as THREE from 'three';
+
+		const scene = new THREE.Scene();
+
+
+		///////////////////////////////////////////////////////
+		// Option 2: Import just the parts you need.
+		import { Scene } from 'three';
+
+		const scene = new Scene();
+		</code>
+
+		<p>
+			When installing from npm, you'll almost always use some sort of [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool] to combine all of the packages your project requires into a single JavaScript file. While any modern JavaScript bundler can be used with three.js, the most popular choice is [link:https://webpack.js.org/ webpack].
+		</p>
+
+		<p>
+			Not all features are accessed directly through the <em>three</em> module (also called a "bare import"). Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] subfolder. To learn more, see <em>Examples</em> below.
+		</p>
+
+		<p>
+			Learn more about npm modules from [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm].
+		</p>
+
+		<h2>Install from CDN or static hosting</h2>
+
+		<p>
+			The three.js library can be used without any build system, either by uploading files to your own web server or by using an existing CDN. Because the library relies on ES modules, any script that references it must use <em>type="module"</em> as shown below:
+		</p>
+
+		<code>
+		&lt;script type="module">
+
+		  // Find the latest version by visiting https://unpkg.com/three. The URL will
+		  // redirect to the newest stable release.
+		  import * as THREE from 'https://unpkg.com/three@&lt;VERSION>/build/three.module.js';
+
+		  const scene = new THREE.Scene();
+
+		&lt;/script>
+		</code>
+
+		<p>
+			Not all features are accessed through the <em>build/three.module.js</em> module. Other popular parts of the library — such as controls, loaders, and post-processing effects — must be imported from the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] subfolder. To learn more, see <em>Examples</em> below.
+		</p>
+
+
+		<h2>Examples</h2>
+
+		<p>
+			The core of three.js is focused on the most important components of a 3D engine. Many other useful components — such as controls, loaders, and post-processing effects — are part of the [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] directory. They are referred to as "examples," because while you can use them off the shelf, they're also meant to be remixed and customized. These components are always kept in sync with the core library, whereas similar third-party packages on npm are maintained by different people and may not be up to date.
+		</p>
+
+		<p>
+			Examples do not need to be <em>installed</em> separately, but do need to be <em>imported</em> separately. If three.js was installed with npm, you can load the [page:OrbitControls] component with:
+		</p>
+
+
+		<code>
+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+		const controls = new OrbitControls();
+		</code>
+
+		<p>
+			If three.js was installed from a CDN, use the same CDN to install other components:
+		</p>
+
+		<code>
+		&lt;script type="module">
+
+		  // Find the latest version by visiting https://unpkg.com/three. The URL will
+		  // redirect to the newest stable release.
+		  import { OrbitControls } from 'https://unpkg.com/three@&lt;VERSION>/examples/jsm/controls/OrbitControls.js';
+
+		  const controls = new OrbitControls();
+
+		&lt;/script>
+		</code>
+
+		<p>
+			It's important that all files use the same version. Do not import different examples from different versions, or use examples from a different version than the three.js library itself.
+		</p>
+
+		<h2>Compatibility</h2>
+
+		<h3>CommonJS imports</h3>
+
+		<p>
+			While most modern JavaScript bundlers now support ES modules by default, some older build tools might not. In those cases you can likely configure the bundler to understand ES modules: [link:http://browserify.org/ Browserify] just needs the [link:https://github.com/babel/babelify babelify] plugin, for example.
+		</p>
+
+		<h3>Import maps</h3>
+
+		<p>
+			Imported paths differ when installing from npm, as compared to installing from static hosting or a CDN. We're aware that this is an ergonomic issue for both groups of users. Developers with build tools and bundlers prefer bare package specifiers (e.g. 'three') rather than relative paths, and files in the <em>examples/</em> folder use relative references to <em>three.module.js</em> that don't follow this expectation. Those who do not use build tools — for fast prototyping, learning, or personal preference — may similarly dislike those relative imports, which require certain folder structures and are less forgiving than a global <em>THREE.*</em> namespace.
+		</p>
+
+		<p>
+			We hope to remove these relative paths when [link:https://github.com/WICG/import-maps import maps] become broadly available, replacing them with bare package specifiers to the npm package name, 'three'. This matches build tool expectations for npm packages more closely, and allows both groups of users to write exactly the same code when importing a file. For users who prefer to avoid build tools, a simple JSON mapping can direct all imports to a CDN or static file folder. Experimentally, you can try using simpler imports today with an import map polyfill, as shown in our [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map example].
+		</p>
+
+		<h3>Node.js</h3>
+
+		<p>
+			Using three.js in [link:https://eloquentjavascript.net/20_node.html Node.js] can be difficult, for two reasons:
+		</p>
+
+		<p>
+			First, because three.js is built for the web, it depends on browser and DOM APIs that don't always exist in Node.js. Some of these issues can be resolved by using shims like [link:https://github.com/stackgl/headless-gl headless-gl], or by replacing components like [page:TextureLoader] with custom alternatives. Other DOM APIs may be deeply intertwined with the code that uses them, and will be harder to work around. We welcome simple and maintainable pull requests to improve Node.js support, but recommend opening an issue to discuss your improvements first.
+		</p>
+
+		<p>
+			Second, Node.js support for ES modules is ... complicated. As of Node.js v12, the core library can be imported as a CommonJS module, with <em>require('three')</em>. However, most example components in <em>examples/jsm</em> cannot. Future versions of Node.js may resolve this, but in the meantime you may need to use workarounds like [link:https://github.com/standard-things/esm esm] to enable your Node.js application to recognize ES modules.
+		</p>
+
+	</body>
+</html>

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

@@ -70,20 +70,12 @@
 	<h2>加载</h2>
 
 	<p>
-		three.js中默认仅包含了几个加载器（例如：[page:ObjectLoader]）——其它加载器需要你分别地添加到页面中。
-		取决于你对构建工具的偏好，选择以下任意一种方式：
+		Only a few loaders (e.g. [page:ObjectLoader]) are included by default with
+		three.js — others should be added to your app individually.
 	</p>
 
 	<code>
-		// global script
-		&lt;script src="GLTFLoader.js"&gt;&lt;/script&gt;
-
-		// commonjs
-		var THREE = window.THREE = require('three');
-		require('three/examples/js/loaders/GLTFLoader');
-
-		// ES modules
-		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
 	</code>
 
 	<p>
@@ -92,7 +84,7 @@
 	</p>
 
 	<code>
-		var loader = new THREE.GLTFLoader();
+		var loader = new GLTFLoader();
 
 		loader.load( 'path/to/model.glb', function ( gltf ) {
 

docs/page.js

@@ -68,7 +68,7 @@ function onDocumentLoad( event ) {
 	text = text.replace( /\[param:([\w\.]+) ([\w\.\s]+)\]/gi, "$2 : <a class=\"param\" onclick=\"window.parent.setUrlFragment('$1')\">$1</a>" ); // [param:name title]
 
 	text = text.replace( /\[link:([\w|\:|\/|\.|\-|\_]+)\]/gi, "[link:$1 $1]" ); // [link:url] to [link:url title]
-	text = text.replace( /\[link:([\w|\:|\/|\.|\-|\_|\(|\)|\?|\#|\=]+) ([\w|\:|\/|\.|\-|\_|\s]+)\]/gi, "<a href=\"$1\"  target=\"_blank\">$2</a>" ); // [link:url title]
+	text = text.replace( /\[link:([\w|\:|\/|\.|\-|\_|\(|\)|\?|\#|\=|\!]+) ([\w|\:|\/|\.|\-|\_|\s]+)\]/gi, "<a href=\"$1\"  target=\"_blank\">$2</a>" ); // [link:url title]
 	text = text.replace( /\*([\w|\d|\"|\-|\(][\w|\d|\ |\-|\/|\+|\-|\(|\)|\=|\,|\.\"]*[\w|\d|\"|\)]|\w)\*/gi, "<strong>$1</strong>" ); // *
 
 	text = text.replace( /\[example:([\w\_]+)\]/gi, "[example:$1 $1]" ); // [example:name] to [example:name title]

docs/scenes/geometry-browser.html

@@ -71,10 +71,6 @@
 			import { OrbitControls } from '../../examples/jsm/controls/OrbitControls.js';
 			import { ParametricGeometries } from '../../examples/jsm/geometries/ParametricGeometries.js';
 
-			/**
-			 * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
-			 */
-
 			var twoPi = Math.PI * 2;
 
 			function updateGroupGeometry( mesh, geometry ) {

docs/scenes/material-browser.html

@@ -62,10 +62,6 @@
 
 			import { GUI } from '../../examples/jsm/libs/dat.gui.module.js';
 
-			/**
-			 * @author TatumCreative (Greg Tatum) / http://gregtatum.com/
-			 */
-
 			var constants = {
 
 				combine: {
@@ -297,6 +293,17 @@
 
 			}
 
+			function updateCombine( material ) {
+
+				return function ( combine ) {
+
+					material.combine = parseInt( combine );
+					material.needsUpdate = true;
+
+				};
+
+			}
+
 			function updateTexture( material, materialKey, textures ) {
 
 				return function ( key ) {
@@ -395,7 +402,7 @@
 				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
 				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
 				folder.add( material, 'reflectivity', 0, 1 );
 				folder.add( material, 'refractionRatio', 0, 1 );
 
@@ -466,7 +473,7 @@
 				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
 				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
-				folder.add( material, 'combine', constants.combine );
+				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
 				folder.add( material, 'reflectivity', 0, 1 );
 				folder.add( material, 'refractionRatio', 0, 1 );
 
@@ -514,6 +521,9 @@
 				folder.add( data, 'envMaps', envMapKeys ).onChange( updateTexture( material, 'envMap', envMaps ) );
 				folder.add( data, 'map', diffuseMapKeys ).onChange( updateTexture( material, 'map', diffuseMaps ) );
 				folder.add( data, 'alphaMap', alphaMapKeys ).onChange( updateTexture( material, 'alphaMap', alphaMaps ) );
+				folder.add( material, 'combine', constants.combine ).onChange( updateCombine( material ) );
+				folder.add( material, 'reflectivity', 0, 1 );
+				folder.add( material, 'refractionRatio', 0, 1 );
 
 			}
 

editor/css/main.css

@@ -22,10 +22,22 @@ button {
 	position: relative;
 }
 
+input {
+	vertical-align: middle;
+}
+
+	input[type="color"]::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+	input[type="color"]::-webkit-color-swatch {
+		border: none;
+	}
+
 textarea {
 	tab-size: 4;
 	white-space: pre;
 	word-wrap: normal;
+	vertical-align: middle;
 }
 
 	textarea.success {
@@ -130,9 +142,27 @@ textarea, input { outline: none; } /* osx */
 
 /* outliner */
 
+#outliner .opener {
+	display: inline-block;
+	width: 14px;
+	height: 14px;
+	margin: 0px 4px;
+	vertical-align: top;
+	text-align: center;
+}
+
+	#outliner .opener.open:after {
+		content: '−';
+	}
+
+	#outliner .opener.closed:after {
+		content: '+';
+	}
+
 #outliner .option {
 
 	border: 1px solid transparent;
+
 }
 
 #outliner .option.drag {
@@ -154,20 +184,33 @@ textarea, input { outline: none; } /* osx */
 }
 
 #outliner .type {
-	position:relative;
-	top:-2px;
-	padding: 0 2px;
+	display: inline-block;
+	width: 14px;
+	height: 14px;
 	color: #ddd;
+	text-align: center;
 }
 
 #outliner .type:after {
-	content: '■';
+	content: '●';
 }
 
+/* */
+
 #outliner .Scene {
-	color: #ccccff;
+	color: #8888dd;
+}
+
+#outliner .Camera {
+	color: #dd8888;
 }
 
+#outliner .Light {
+	color: #dddd88;
+}
+
+/* */
+
 #outliner .Object3D {
 	color: #aaaaee;
 }
@@ -190,32 +233,12 @@ textarea, input { outline: none; } /* osx */
 
 /* */
 
-#outliner .PointLight {
-	color: #dddd00;
-}
-
-/* */
-
 #outliner .Geometry {
-	color: #88ff88;
-}
-
-#outliner .BoxGeometry {
-	color: #bbeebb;
-}
-
-#outliner .TorusGeometry {
 	color: #aaeeaa;
 }
 
-/* */
-
 #outliner .Material {
-	color: #ff8888;
-}
-
-#outliner .MeshPhongMaterial {
-	color: #ffaa88;
+	color: #eeaaee;
 }
 
 /* */
@@ -230,6 +253,7 @@ button {
 	color: #555;
 	background-color: #ddd;
 	border: 0px;
+	margin: 0px; /* GNOME Web */
 	padding: 5px 8px;
 	text-transform: uppercase;
 	cursor: pointer;
@@ -386,10 +410,6 @@ select {
 	overflow: auto;
 }
 
-	#sidebar * {
-		vertical-align: middle;
-	}
-
 	#sidebar .Panel {
 		color: #888;
 		padding: 10px;
@@ -405,6 +425,10 @@ select {
 		margin-bottom: 10px;
 	}
 
+	#sidebar canvas {
+		vertical-align: middle;
+	}
+
 #tabs {
 	background-color: #ddd;
 	border-top: 1px solid #ccc;
@@ -423,28 +447,21 @@ select {
 
 #toolbar {
 	position: absolute;
-	left: calc(50% - 290px); /* ( ( 100% - 300px ) / 2.0 ) - 140px */
-	width: 280px;
-	bottom: 16px;
-	height: 32px;
+	left: 10px;
+	top: 42px;
+	width: 32px;
 	background: #eee;
-	color: #333;
+	text-align: center;
 }
 
-	#toolbar * {
-		vertical-align: middle;
+	#toolbar button, #toolbar input {
+		height: 32px;
 	}
 
-	#toolbar .Panel {
-		padding: 4px;
-		color: #888;
-	}
-
-	#toolbar button {
-		margin-right: 6px;
-		line-height: 14px;
-		height: 24px;
-	}
+		#toolbar button img {
+			width: 16px;
+			opacity: 0.5;
+		}
 
 .Outliner {
 	color: #444;
@@ -538,12 +555,6 @@ select {
 		bottom: 0;
 	}
 
-	#toolbar {
-		left: calc(50% - 140px);
-		width: 280px;
-		top: 68px;
-	}
-
 }
 
 /* DARK MODE */
@@ -633,6 +644,10 @@ select {
 		background-color: #111;
 	}
 
+		#toolbar img {
+			filter: invert(1);
+		}
+
 	.Outliner {
 		color: #888;
 		background: #222;

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

@@ -26,7 +26,7 @@ Every command needs a constructor. In the constructor
 
 ```javascript
 
-var DoSomethingCommand = function ( editor ) {
+function DoSomethingCommand( editor ) {
 
 	Command.call( this, editor ); // Required: Call default constructor
 
@@ -36,7 +36,7 @@ var DoSomethingCommand = function ( editor ) {
 	// TODO: store all the relevant information needed to
 	// restore the old and the new state
 
-};
+}
 ```
 
 And as part of the prototype you need to implement four functions

editor/images/rotate.svg

@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg version="1.1" viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
+ <path d="m247.8 474.12c61.315 0 112.09-26.692 147.65-59.495l-1.6947 75.58c-0.17697 10.509 8.2063 19.178 18.721 19.349h0.32318c10.364 0 18.855-8.3198 19.033-18.721l2.5382-126.18c0.0827-5.1592-1.9294-10.135-5.5843-13.784-3.6492-3.6492-8.5987-5.6603-13.784-5.5718l-126.73 2.5383c-10.509 0.18371-18.885 8.8469-18.708 19.362 0.17794 10.401 8.6689 18.714 19.032 18.714h0.32991l83.195-1.7957c-29.35 27.815-72.656 51.93-124.33 51.93-105.91 0-177.05-91.548-177.05-177.05-0.31704-10.248-6.2951-19.251-18.532-19.479-12.237-0.22764-19.196 8.1831-19.543 19.486 0 103.89 86.446 215.13 215.13 215.13zm4.3538-435.25c-61.315 0-112.09 26.692-147.65 59.495l1.6947-75.579c0.17698-10.509-8.2063-19.178-18.721-19.349h-0.32317c-10.364 0-18.855 8.3198-19.033 18.721l-2.5383 126.18c-0.08272 5.1592 1.9294 10.135 5.5844 13.784 3.6492 3.6492 8.5987 5.6603 13.784 5.5719l126.73-2.5383c10.509-0.18371 18.885-8.8469 18.708-19.362-0.17794-10.401-8.6689-18.714-19.032-18.714h-0.32991l-83.195 1.7957c29.35-27.815 72.656-51.93 124.33-51.93 105.91 0 177.05 91.548 177.05 177.05 0.31703 10.248 6.2951 19.251 18.532 19.479 12.237 0.22763 19.196-8.1831 19.543-19.486 0-103.89-86.446-215.13-215.13-215.13z"/>
+</svg>

editor/index.html

@@ -42,7 +42,6 @@
 		<script src="js/libs/ternjs/doc_comment.js"></script>
 		<script src="js/libs/tern-threejs/threejs.js"></script>
 		<script src="js/libs/signals.min.js"></script>
-		<script src="../examples/js/vr/HelioWebXRPolyfill.js"></script>
 
 		<script type="module">
 
@@ -240,15 +239,6 @@
 
 			}
 
-			/*
-			window.addEventListener( 'message', function ( event ) {
-
-				editor.clear();
-				editor.fromJSON( event.data );
-
-			}, false );
-			*/
-
 		</script>
 	</body>
 </html>

editor/js/Command.js

@@ -1,7 +1,3 @@
-/**
- * @author dforrer / https://github.com/dforrer
- * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch)
- */
 
 /**
  * @param editor pointer to main editor object used to initialize
@@ -9,7 +5,7 @@
  * @constructor
  */
 
-var Command = function ( editor ) {
+function Command( editor ) {
 
 	this.id = - 1;
 	this.inMemory = false;
@@ -18,7 +14,7 @@ var Command = function ( editor ) {
 	this.name = '';
 	this.editor = editor;
 
-};
+}
 
 Command.prototype.toJSON = function () {
 

editor/js/Config.js

@@ -1,8 +1,4 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
-var Config = function () {
+function Config() {
 
 	var name = 'threejs-editor';
 
@@ -22,7 +18,6 @@ var Config = function () {
 		'project/renderer/physicallyCorrectLights': false,
 		'project/renderer/toneMapping': 0, // NoToneMapping
 		'project/renderer/toneMappingExposure': 1,
-		'project/renderer/toneMappingWhitePoint': 1,
 
 		'settings/history': false,
 
@@ -79,6 +74,6 @@ var Config = function () {
 
 	};
 
-};
+}
 
 export { Config };

editor/js/Editor.js

@@ -1,7 +1,3 @@
-/**
- * @author mrdoob / http://mrdoob.com/
- */
-
 import * as THREE from '../../build/three.module.js';
 
 import { Config } from './Config.js';
@@ -10,12 +6,12 @@ import { History as _History } from './History.js';
 import { Strings } from './Strings.js';
 import { Storage as _Storage } from './Storage.js';
 
-var Editor = function () {
+var _DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
+_DEFAULT_CAMERA.name = 'Camera';
+_DEFAULT_CAMERA.position.set( 0, 5, 10 );
+_DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
 
-	this.DEFAULT_CAMERA = new THREE.PerspectiveCamera( 50, 1, 0.01, 1000 );
-	this.DEFAULT_CAMERA.name = 'Camera';
-	this.DEFAULT_CAMERA.position.set( 0, 5, 10 );
-	this.DEFAULT_CAMERA.lookAt( new THREE.Vector3() );
+function Editor() {
 
 	var Signal = signals.Signal;
 
@@ -44,11 +40,14 @@ var Editor = function () {
 		rendererUpdated: new Signal(),
 
 		sceneBackgroundChanged: new Signal(),
+		sceneEnvironmentChanged: new Signal(),
 		sceneFogChanged: new Signal(),
+		sceneFogSettingsChanged: new Signal(),
 		sceneGraphChanged: new Signal(),
 		sceneRendered: new Signal(),
 
 		cameraChanged: new Signal(),
+		cameraResetted: new Signal(),
 
 		geometryChanged: new Signal(),
 
@@ -76,6 +75,7 @@ var Editor = function () {
 		windowResize: new Signal(),
 
 		showGridChanged: new Signal(),
+		showHelpersChanged: new Signal(),
 		refreshSidebarObject3D: new Signal(),
 		historyChanged: new Signal(),
 
@@ -90,11 +90,10 @@ var Editor = function () {
 
 	this.loader = new Loader( this );
 
-	this.camera = this.DEFAULT_CAMERA.clone();
+	this.camera = _DEFAULT_CAMERA.clone();
 
 	this.scene = new THREE.Scene();
 	this.scene.name = 'Scene';
-	this.scene.background = new THREE.Color( 0xaaaaaa );
 
 	this.sceneHelpers = new THREE.Scene();
 
@@ -117,7 +116,7 @@ var Editor = function () {
 
 	this.addCamera( this.camera );
 
-};
+}
 
 Editor.prototype = {
 
@@ -530,7 +529,7 @@ Editor.prototype = {
 	setViewportCamera: function ( uuid ) {
 
 		this.viewportCamera = this.cameras[ uuid ];
-		this.signals.viewportCameraChanged.dispatch( this.viewportCamera );
+		this.signals.viewportCameraChanged.dispatch();
 
 	},
 
@@ -611,10 +610,13 @@ Editor.prototype = {
 		this.history.clear();
 		this.storage.clear();
 
-		this.camera.copy( this.DEFAULT_CAMERA );
+		this.camera.copy( _DEFAULT_CAMERA );
+		this.signals.cameraResetted.dispatch();
+
 		this.scene.name = "Scene";
 		this.scene.userData = {};
-		this.scene.background = new THREE.Color( 0xaaaaaa );
+		this.scene.background = null;
+		this.scene.environment = null;
 		this.scene.fog = null;
 
 		var objects = this.scene.children;
@@ -651,8 +653,7 @@ Editor.prototype = {
 		var camera = loader.parse( json.camera );
 
 		this.camera.copy( camera );
-		this.camera.aspect = this.DEFAULT_CAMERA.aspect;
-		this.camera.updateProjectionMatrix();
+		this.signals.cameraResetted.dispatch();
 
 		this.history.fromJSON( json.history );
 		this.scripts = json.scripts;
@@ -691,7 +692,11 @@ Editor.prototype = {
 			metadata: {},
 			project: {
 				shadows: this.config.getKey( 'project/renderer/shadows' ),
-				vr: this.config.getKey( 'project/vr' )
+				shadowType: this.config.getKey( 'project/renderer/shadowType' ),
+				vr: this.config.getKey( 'project/vr' ),
+				physicallyCorrectLights: this.config.getKey( 'project/renderer/physicallyCorrectLights' ),
+				toneMapping: this.config.getKey( 'project/renderer/toneMapping' ),
+				toneMappingExposure: this.config.getKey( 'project/renderer/toneMappingExposure' )
 			},
 			camera: this.camera.toJSON(),
 			scene: this.scene.toJSON(),