Merge branch 'dev' into dev

build/three.js

@@ -63,7 +63,7 @@
 		};
 	}
 
-	var REVISION = '123';
+	var REVISION = '124dev';
 	var MOUSE = {
 		LEFT: 0,
 		MIDDLE: 1,
@@ -11787,13 +11787,11 @@
 						if (image && image.height > 0) {
 							var currentRenderList = renderer.getRenderList();
 							var currentRenderTarget = renderer.getRenderTarget();
-							var currentRenderState = renderer.getRenderState();
 							var renderTarget = new WebGLCubeRenderTarget(image.height / 2);
 							renderTarget.fromEquirectangularTexture(renderer, texture);
 							cubemaps.set(texture, renderTarget);
 							renderer.setRenderTarget(currentRenderTarget);
 							renderer.setRenderList(currentRenderList);
-							renderer.setRenderState(currentRenderState);
 							texture.addEventListener('dispose', onTextureDispose);
 							return mapTextureMapping(renderTarget.texture, texture.mapping);
 						} else {
@@ -12241,6 +12239,10 @@
 			}
 
 			if (object.isInstancedMesh) {
+				if (object.hasEventListener('dispose', onInstancedMeshDispose) === false) {
+					object.addEventListener('dispose', onInstancedMeshDispose);
+				}
+
 				attributes.update(object.instanceMatrix, 34962);
 
 				if (object.instanceColor !== null) {
@@ -12255,6 +12257,13 @@
 			updateMap = new WeakMap();
 		}
 
+		function onInstancedMeshDispose(event) {
+			var instancedMesh = event.target;
+			instancedMesh.removeEventListener('dispose', onInstancedMeshDispose);
+			attributes.remove(instancedMesh.instanceMatrix);
+			if (instancedMesh.instanceColor !== null) attributes.remove(instancedMesh.instanceColor);
+		}
+
 		return {
 			update: update,
 			dispose: dispose
@@ -14083,7 +14092,7 @@
 		var matrix4 = new Matrix4();
 		var matrix42 = new Matrix4();
 
-		function setup(lights, shadows, camera) {
+		function setup(lights) {
 			var r = 0,
 					g = 0,
 					b = 0;
@@ -14100,7 +14109,6 @@
 			var numDirectionalShadows = 0;
 			var numPointShadows = 0;
 			var numSpotShadows = 0;
-			var viewMatrix = camera.matrixWorldInverse;
 			lights.sort(shadowCastingLightsFirst);
 
 			for (var _i2 = 0, l = lights.length; _i2 < l; _i2++) {
@@ -14121,10 +14129,6 @@
 				} else if (light.isDirectionalLight) {
 					var uniforms = cache.get(light);
 					uniforms.color.copy(light.color).multiplyScalar(light.intensity);
-					uniforms.direction.setFromMatrixPosition(light.matrixWorld);
-					vector3.setFromMatrixPosition(light.target.matrixWorld);
-					uniforms.direction.sub(vector3);
-					uniforms.direction.transformDirection(viewMatrix);
 
 					if (light.castShadow) {
 						var shadow = light.shadow;
@@ -14146,20 +14150,9 @@
 
 					_uniforms.position.setFromMatrixPosition(light.matrixWorld);
 
-					_uniforms.position.applyMatrix4(viewMatrix);
-
 					_uniforms.color.copy(color).multiplyScalar(intensity);
 
 					_uniforms.distance = distance;
-
-					_uniforms.direction.setFromMatrixPosition(light.matrixWorld);
-
-					vector3.setFromMatrixPosition(light.target.matrixWorld);
-
-					_uniforms.direction.sub(vector3);
-
-					_uniforms.direction.transformDirection(viewMatrix);
-
 					_uniforms.coneCos = Math.cos(light.angle);
 					_uniforms.penumbraCos = Math.cos(light.angle * (1 - light.penumbra));
 					_uniforms.decay = light.decay;
@@ -14189,35 +14182,15 @@
 
 					_uniforms2.color.copy(color).multiplyScalar(intensity);
 
-					_uniforms2.position.setFromMatrixPosition(light.matrixWorld);
-
-					_uniforms2.position.applyMatrix4(viewMatrix); // extract local rotation of light to derive width/height half vectors
-
-
-					matrix42.identity();
-					matrix4.copy(light.matrixWorld);
-					matrix4.premultiply(viewMatrix);
-					matrix42.extractRotation(matrix4);
-
 					_uniforms2.halfWidth.set(light.width * 0.5, 0.0, 0.0);
 
 					_uniforms2.halfHeight.set(0.0, light.height * 0.5, 0.0);
 
-					_uniforms2.halfWidth.applyMatrix4(matrix42);
-
-					_uniforms2.halfHeight.applyMatrix4(matrix42); // TODO (abelnation): RectAreaLight distance?
-					// uniforms.distance = distance;
-
-
 					state.rectArea[rectAreaLength] = _uniforms2;
 					rectAreaLength++;
 				} else if (light.isPointLight) {
 					var _uniforms3 = cache.get(light);
 
-					_uniforms3.position.setFromMatrixPosition(light.matrixWorld);
-
-					_uniforms3.position.applyMatrix4(viewMatrix);
-
 					_uniforms3.color.copy(light.color).multiplyScalar(light.intensity);
 
 					_uniforms3.distance = light.distance;
@@ -14245,12 +14218,6 @@
 				} else if (light.isHemisphereLight) {
 					var _uniforms4 = cache.get(light);
 
-					_uniforms4.direction.setFromMatrixPosition(light.matrixWorld);
-
-					_uniforms4.direction.transformDirection(viewMatrix);
-
-					_uniforms4.direction.normalize();
-
 					_uniforms4.skyColor.copy(light.color).multiplyScalar(intensity);
 
 					_uniforms4.groundColor.copy(light.groundColor).multiplyScalar(intensity);
@@ -14311,8 +14278,87 @@
 			}
 		}
 
+		function setupView(lights, camera) {
+			var directionalLength = 0;
+			var pointLength = 0;
+			var spotLength = 0;
+			var rectAreaLength = 0;
+			var hemiLength = 0;
+			var viewMatrix = camera.matrixWorldInverse;
+
+			for (var _i3 = 0, l = lights.length; _i3 < l; _i3++) {
+				var light = lights[_i3];
+
+				if (light.isDirectionalLight) {
+					var uniforms = state.directional[directionalLength];
+					uniforms.direction.setFromMatrixPosition(light.matrixWorld);
+					vector3.setFromMatrixPosition(light.target.matrixWorld);
+					uniforms.direction.sub(vector3);
+					uniforms.direction.transformDirection(viewMatrix);
+					directionalLength++;
+				} else if (light.isSpotLight) {
+					var _uniforms5 = state.spot[spotLength];
+
+					_uniforms5.position.setFromMatrixPosition(light.matrixWorld);
+
+					_uniforms5.position.applyMatrix4(viewMatrix);
+
+					_uniforms5.direction.setFromMatrixPosition(light.matrixWorld);
+
+					vector3.setFromMatrixPosition(light.target.matrixWorld);
+
+					_uniforms5.direction.sub(vector3);
+
+					_uniforms5.direction.transformDirection(viewMatrix);
+
+					spotLength++;
+				} else if (light.isRectAreaLight) {
+					var _uniforms6 = state.rectArea[rectAreaLength];
+
+					_uniforms6.position.setFromMatrixPosition(light.matrixWorld);
+
+					_uniforms6.position.applyMatrix4(viewMatrix); // extract local rotation of light to derive width/height half vectors
+
+
+					matrix42.identity();
+					matrix4.copy(light.matrixWorld);
+					matrix4.premultiply(viewMatrix);
+					matrix42.extractRotation(matrix4);
+
+					_uniforms6.halfWidth.set(light.width * 0.5, 0.0, 0.0);
+
+					_uniforms6.halfHeight.set(0.0, light.height * 0.5, 0.0);
+
+					_uniforms6.halfWidth.applyMatrix4(matrix42);
+
+					_uniforms6.halfHeight.applyMatrix4(matrix42);
+
+					rectAreaLength++;
+				} else if (light.isPointLight) {
+					var _uniforms7 = state.point[pointLength];
+
+					_uniforms7.position.setFromMatrixPosition(light.matrixWorld);
+
+					_uniforms7.position.applyMatrix4(viewMatrix);
+
+					pointLength++;
+				} else if (light.isHemisphereLight) {
+					var _uniforms8 = state.hemi[hemiLength];
+
+					_uniforms8.direction.setFromMatrixPosition(light.matrixWorld);
+
+					_uniforms8.direction.transformDirection(viewMatrix);
+
+					_uniforms8.direction.normalize();
+
+					hemiLength++;
+				}
+			}
+		}
+
 		return {
 			setup: setup,
+			setupView: setupView,
 			state: state
 		};
 	}
@@ -14335,8 +14381,12 @@
 			shadowsArray.push(shadowLight);
 		}
 
-		function setupLights(camera) {
-			lights.setup(lightsArray, shadowsArray, camera);
+		function setupLights() {
+			lights.setup(lightsArray);
+		}
+
+		function setupLightsView(camera) {
+			lights.setupView(lightsArray, camera);
 		}
 
 		var state = {
@@ -14348,6 +14398,7 @@
 			init: init,
 			state: state,
 			setupLights: setupLights,
+			setupLightsView: setupLightsView,
 			pushLight: pushLight,
 			pushShadow: pushShadow
 		};
@@ -14356,19 +14407,23 @@
 	function WebGLRenderStates(extensions, capabilities) {
 		var renderStates = new WeakMap();
 
-		function get(scene, camera) {
+		function get(scene, renderCallDepth) {
+			if (renderCallDepth === void 0) {
+				renderCallDepth = 0;
+			}
+
 			var renderState;
 
 			if (renderStates.has(scene) === false) {
 				renderState = new WebGLRenderState(extensions, capabilities);
-				renderStates.set(scene, new WeakMap());
-				renderStates.get(scene).set(camera, renderState);
+				renderStates.set(scene, []);
+				renderStates.get(scene).push(renderState);
 			} else {
-				if (renderStates.get(scene).has(camera) === false) {
+				if (renderCallDepth >= renderStates.get(scene).length) {
 					renderState = new WebGLRenderState(extensions, capabilities);
-					renderStates.get(scene).set(camera, renderState);
+					renderStates.get(scene).push(renderState);
 				} else {
-					renderState = renderStates.get(scene).get(camera);
+					renderState = renderStates.get(scene)[renderCallDepth];
 				}
 			}
 
@@ -17481,7 +17536,10 @@
 				_failIfMajorPerformanceCaveat = parameters.failIfMajorPerformanceCaveat !== undefined ? parameters.failIfMajorPerformanceCaveat : false;
 
 		var currentRenderList = null;
-		var currentRenderState = null; // public properties
+		var currentRenderState = null; // render() can be called from within a callback triggered by another render.
+		// We track this so that the nested render call gets its state isolated from the parent render call.
+
+		var renderStateStack = []; // public properties
 
 		this.domElement = _canvas; // Debug configuration container
 
@@ -17528,7 +17586,6 @@
 		var _currentMaterialId = -1;
 
 		var _currentCamera = null;
-		var _currentArrayCamera = null;
 
 		var _currentViewport = new Vector4();
 
@@ -18065,7 +18122,7 @@
 
 
 		this.compile = function (scene, camera) {
-			currentRenderState = renderStates.get(scene, camera);
+			currentRenderState = renderStates.get(scene);
 			currentRenderState.init();
 			scene.traverseVisible(function (object) {
 				if (object.isLight && object.layers.test(camera.layers)) {
@@ -18076,7 +18133,7 @@
 					}
 				}
 			});
-			currentRenderState.setupLights(camera);
+			currentRenderState.setupLights();
 			var compiled = new WeakMap();
 			scene.traverse(function (object) {
 				var material = object.material;
@@ -18152,8 +18209,9 @@
 
 
 			if (scene.isScene === true) scene.onBeforeRender(_this, scene, camera, renderTarget || _currentRenderTarget);
-			currentRenderState = renderStates.get(scene, camera);
+			currentRenderState = renderStates.get(scene, renderStateStack.length);
 			currentRenderState.init();
+			renderStateStack.push(currentRenderState);
 
 			_projScreenMatrix.multiplyMatrices(camera.projectionMatrix, camera.matrixWorldInverse);
 
@@ -18174,7 +18232,8 @@
 			if (_clippingEnabled === true) clipping.beginShadows();
 			var shadowsArray = currentRenderState.state.shadowsArray;
 			shadowMap.render(shadowsArray, scene, camera);
-			currentRenderState.setupLights(camera);
+			currentRenderState.setupLights();
+			currentRenderState.setupLightsView(camera);
 			if (_clippingEnabled === true) clipping.endShadows(); //
 
 			if (this.info.autoReset === true) this.info.reset();
@@ -18206,8 +18265,15 @@
 			state.buffers.color.setMask(true);
 			state.setPolygonOffset(false); // _gl.finish();
 
+			renderStateStack.pop();
+
+			if (renderStateStack.length > 0) {
+				currentRenderState = renderStateStack[renderStateStack.length - 1];
+			} else {
+				currentRenderState = null;
+			}
+
 			currentRenderList = null;
-			currentRenderState = null;
 		};
 
 		function projectObject(object, camera, groupOrder, sortObjects) {
@@ -18298,7 +18364,6 @@
 				var group = renderItem.group;
 
 				if (camera.isArrayCamera) {
-					_currentArrayCamera = camera;
 					var cameras = camera.cameras;
 
 					for (var j = 0, jl = cameras.length; j < jl; j++) {
@@ -18306,12 +18371,11 @@
 
 						if (object.layers.test(camera2.layers)) {
 							state.viewport(_currentViewport.copy(camera2.viewport));
-							currentRenderState.setupLights(camera2);
+							currentRenderState.setupLightsView(camera2);
 							renderObject(object, scene, camera2, geometry, material, group);
 						}
 					}
 				} else {
-					_currentArrayCamera = null;
 					renderObject(object, scene, camera, geometry, material, group);
 				}
 			}
@@ -18319,7 +18383,6 @@
 
 		function renderObject(object, scene, camera, geometry, material, group) {
 			object.onBeforeRender(_this, scene, camera, geometry, material, group);
-			currentRenderState = renderStates.get(scene, _currentArrayCamera || camera);
 			object.modelViewMatrix.multiplyMatrices(camera.matrixWorldInverse, object.matrixWorld);
 			object.normalMatrix.getNormalMatrix(object.modelViewMatrix);
 
@@ -18333,7 +18396,6 @@
 			}
 
 			object.onAfterRender(_this, scene, camera, geometry, material, group);
-			currentRenderState = renderStates.get(scene, _currentArrayCamera || camera);
 		}
 
 		function initMaterial(material, scene, object) {
@@ -18636,14 +18698,6 @@
 			currentRenderList = renderList;
 		};
 
-		this.getRenderState = function () {
-			return currentRenderState;
-		};
-
-		this.setRenderState = function (renderState) {
-			currentRenderState = renderState;
-		};
-
 		this.getRenderTarget = function () {
 			return _currentRenderTarget;
 		};
@@ -18818,6 +18872,11 @@
 			state.unbindTexture();
 		};
 
+		this.resetState = function () {
+			state.reset();
+			bindingStates.reset();
+		};
+
 		if (typeof __THREE_DEVTOOLS__ !== 'undefined') {
 			__THREE_DEVTOOLS__.dispatchEvent(new CustomEvent('observe', {
 				detail: this
@@ -19507,6 +19566,16 @@
 		}
 	});
 
+	var _basePosition = new Vector3();
+
+	var _skinIndex = new Vector4();
+
+	var _skinWeight = new Vector4();
+
+	var _vector$7 = new Vector3();
+
+	var _matrix$1 = new Matrix4();
+
 	function SkinnedMesh(geometry, material) {
 		if (geometry && geometry.isGeometry) {
 			console.error('THREE.SkinnedMesh no longer supports THREE.Geometry. Use THREE.BufferGeometry instead.');
@@ -19576,33 +19645,32 @@
 				console.warn('THREE.SkinnedMesh: Unrecognized bindMode: ' + this.bindMode);
 			}
 		},
-		boneTransform: function () {
-			var basePosition = new Vector3();
-			var skinIndex = new Vector4();
-			var skinWeight = new Vector4();
-			var vector = new Vector3();
-			var matrix = new Matrix4();
-			return function (index, target) {
-				var skeleton = this.skeleton;
-				var geometry = this.geometry;
-				skinIndex.fromBufferAttribute(geometry.attributes.skinIndex, index);
-				skinWeight.fromBufferAttribute(geometry.attributes.skinWeight, index);
-				basePosition.fromBufferAttribute(geometry.attributes.position, index).applyMatrix4(this.bindMatrix);
-				target.set(0, 0, 0);
-
-				for (var i = 0; i < 4; i++) {
-					var weight = skinWeight.getComponent(i);
-
-					if (weight !== 0) {
-						var boneIndex = skinIndex.getComponent(i);
-						matrix.multiplyMatrices(skeleton.bones[boneIndex].matrixWorld, skeleton.boneInverses[boneIndex]);
-						target.addScaledVector(vector.copy(basePosition).applyMatrix4(matrix), weight);
-					}
+		boneTransform: function boneTransform(index, target) {
+			var skeleton = this.skeleton;
+			var geometry = this.geometry;
+
+			_skinIndex.fromBufferAttribute(geometry.attributes.skinIndex, index);
+
+			_skinWeight.fromBufferAttribute(geometry.attributes.skinWeight, index);
+
+			_basePosition.fromBufferAttribute(geometry.attributes.position, index).applyMatrix4(this.bindMatrix);
+
+			target.set(0, 0, 0);
+
+			for (var i = 0; i < 4; i++) {
+				var weight = _skinWeight.getComponent(i);
+
+				if (weight !== 0) {
+					var boneIndex = _skinIndex.getComponent(i);
+
+					_matrix$1.multiplyMatrices(skeleton.bones[boneIndex].matrixWorld, skeleton.boneInverses[boneIndex]);
+
+					target.addScaledVector(_vector$7.copy(_basePosition).applyMatrix4(_matrix$1), weight);
 				}
+			}
 
-				return target.applyMatrix4(this.bindMatrixInverse);
-			};
-		}()
+			return target.applyMatrix4(this.bindMatrixInverse);
+		}
 	});
 
 	function Bone() {
@@ -19851,7 +19919,12 @@
 		setMatrixAt: function setMatrixAt(index, matrix) {
 			matrix.toArray(this.instanceMatrix.array, index * 16);
 		},
-		updateMorphTargets: function updateMorphTargets() {}
+		updateMorphTargets: function updateMorphTargets() {},
+		dispose: function dispose() {
+			this.dispatchEvent({
+				type: 'dispose'
+			});
+		}
 	});
 
 	/**
@@ -34371,7 +34444,7 @@
 		return Cylindrical;
 	}();
 
-	var _vector$7 = /*@__PURE__*/new Vector2();
+	var _vector$8 = /*@__PURE__*/new Vector2();
 
 	var Box2 = /*#__PURE__*/function () {
 		function Box2(min, max) {
@@ -34401,7 +34474,7 @@
 		};
 
 		_proto.setFromCenterAndSize = function setFromCenterAndSize(center, size) {
-			var halfSize = _vector$7.copy(size).multiplyScalar(0.5);
+			var halfSize = _vector$8.copy(size).multiplyScalar(0.5);
 
 			this.min.copy(center).sub(halfSize);
 			this.max.copy(center).add(halfSize);
@@ -34499,7 +34572,7 @@
 		};
 
 		_proto.distanceToPoint = function distanceToPoint(point) {
-			var clampedPoint = _vector$7.copy(point).clamp(this.min, this.max);
+			var clampedPoint = _vector$8.copy(point).clamp(this.min, this.max);
 
 			return clampedPoint.sub(point).length();
 		};
@@ -34657,7 +34730,7 @@
 	ImmediateRenderObject.prototype.constructor = ImmediateRenderObject;
 	ImmediateRenderObject.prototype.isImmediateRenderObject = true;
 
-	var _vector$8 = /*@__PURE__*/new Vector3();
+	var _vector$9 = /*@__PURE__*/new Vector3();
 
 	var SpotLightHelper = /*#__PURE__*/function (_Object3D) {
 		_inheritsLoose(SpotLightHelper, _Object3D);
@@ -34709,9 +34782,9 @@
 			var coneWidth = coneLength * Math.tan(this.light.angle);
 			this.cone.scale.set(coneWidth, coneWidth, coneLength);
 
-			_vector$8.setFromMatrixPosition(this.light.target.matrixWorld);
+			_vector$9.setFromMatrixPosition(this.light.target.matrixWorld);
 
-			this.cone.lookAt(_vector$8);
+			this.cone.lookAt(_vector$9);
 
 			if (this.color !== undefined) {
 				this.cone.material.color.set(this.color);
@@ -34723,7 +34796,7 @@
 		return SpotLightHelper;
 	}(Object3D);
 
-	var _vector$9 = /*@__PURE__*/new Vector3();
+	var _vector$a = /*@__PURE__*/new Vector3();
 
 	var _boneMatrix = /*@__PURE__*/new Matrix4();
 
@@ -34787,15 +34860,15 @@
 				if (bone.parent && bone.parent.isBone) {
 					_boneMatrix.multiplyMatrices(_matrixWorldInv, bone.matrixWorld);
 
-					_vector$9.setFromMatrixPosition(_boneMatrix);
+					_vector$a.setFromMatrixPosition(_boneMatrix);
 
-					position.setXYZ(j, _vector$9.x, _vector$9.y, _vector$9.z);
+					position.setXYZ(j, _vector$a.x, _vector$a.y, _vector$a.z);
 
 					_boneMatrix.multiplyMatrices(_matrixWorldInv, bone.parent.matrixWorld);
 
-					_vector$9.setFromMatrixPosition(_boneMatrix);
+					_vector$a.setFromMatrixPosition(_boneMatrix);
 
-					position.setXYZ(j + 1, _vector$9.x, _vector$9.y, _vector$9.z);
+					position.setXYZ(j + 1, _vector$a.x, _vector$a.y, _vector$a.z);
 					j += 2;
 				}
 			}
@@ -34892,7 +34965,7 @@
 		return PointLightHelper;
 	}(Mesh);
 
-	var _vector$a = /*@__PURE__*/new Vector3();
+	var _vector$b = /*@__PURE__*/new Vector3();
 
 	var _color1 = /*@__PURE__*/new Color();
 
@@ -34958,7 +35031,7 @@
 				colors.needsUpdate = true;
 			}
 
-			mesh.lookAt(_vector$a.setFromMatrixPosition(this.light.matrixWorld).negate());
+			mesh.lookAt(_vector$b.setFromMatrixPosition(this.light.matrixWorld).negate());
 		};
 
 		return HemisphereLightHelper;
@@ -35184,7 +35257,7 @@
 		return DirectionalLightHelper;
 	}(Object3D);
 
-	var _vector$b = /*@__PURE__*/new Vector3();
+	var _vector$c = /*@__PURE__*/new Vector3();
 
 	var _camera = /*@__PURE__*/new Camera();
 	/**
@@ -35324,7 +35397,7 @@
 	}(LineSegments);
 
 	function setPoint(point, pointMap, geometry, camera, x, y, z) {
-		_vector$b.set(x, y, z).unproject(camera);
+		_vector$c.set(x, y, z).unproject(camera);
 
 		var points = pointMap[point];
 
@@ -35332,7 +35405,7 @@
 			var position = geometry.getAttribute('position');
 
 			for (var i = 0, l = points.length; i < l; i++) {
-				position.setXYZ(points[i], _vector$b.x, _vector$b.y, _vector$b.z);
+				position.setXYZ(points[i], _vector$c.x, _vector$c.y, _vector$c.z);
 			}
 		}
 	}

build/three.module.js

@@ -1,5 +1,5 @@
 // threejs.org/license
-const REVISION = '123';
+const REVISION = '124dev';
 const MOUSE = { LEFT: 0, MIDDLE: 1, RIGHT: 2, ROTATE: 0, DOLLY: 1, PAN: 2 };
 const TOUCH = { ROTATE: 0, PAN: 1, DOLLY_PAN: 2, DOLLY_ROTATE: 3 };
 const CullFaceNone = 0;
@@ -15064,7 +15064,6 @@ function WebGLCubeMaps( renderer ) {
 
 						const currentRenderList = renderer.getRenderList();
 						const currentRenderTarget = renderer.getRenderTarget();
-						const currentRenderState = renderer.getRenderState();
 
 						const renderTarget = new WebGLCubeRenderTarget( image.height / 2 );
 						renderTarget.fromEquirectangularTexture( renderer, texture );
@@ -15072,7 +15071,6 @@ function WebGLCubeMaps( renderer ) {
 
 						renderer.setRenderTarget( currentRenderTarget );
 						renderer.setRenderList( currentRenderList );
-						renderer.setRenderState( currentRenderState );
 
 						texture.addEventListener( 'dispose', onTextureDispose );
 
@@ -15713,6 +15711,12 @@ function WebGLObjects( gl, geometries, attributes, info ) {
 
 		if ( object.isInstancedMesh ) {
 
+			if ( object.hasEventListener( 'dispose', onInstancedMeshDispose ) === false ) {
+
+				object.addEventListener( 'dispose', onInstancedMeshDispose );
+
+			}
+
 			attributes.update( object.instanceMatrix, 34962 );
 
 			if ( object.instanceColor !== null ) {
@@ -15733,6 +15737,18 @@ function WebGLObjects( gl, geometries, attributes, info ) {
 
 	}
 
+	function onInstancedMeshDispose( event ) {
+
+		const instancedMesh = event.target;
+
+		instancedMesh.removeEventListener( 'dispose', onInstancedMeshDispose );
+
+		attributes.remove( instancedMesh.instanceMatrix );
+
+		if ( instancedMesh.instanceColor !== null ) attributes.remove( instancedMesh.instanceColor );
+
+	}
+
 	return {
 
 		update: update,
@@ -18393,7 +18409,7 @@ function WebGLLights( extensions, capabilities ) {
 	const matrix4 = new Matrix4();
 	const matrix42 = new Matrix4();
 
-	function setup( lights, shadows, camera ) {
+	function setup( lights ) {
 
 		let r = 0, g = 0, b = 0;
 
@@ -18409,8 +18425,6 @@ function WebGLLights( extensions, capabilities ) {
 		let numPointShadows = 0;
 		let numSpotShadows = 0;
 
-		const viewMatrix = camera.matrixWorldInverse;
-
 		lights.sort( shadowCastingLightsFirst );
 
 		for ( let i = 0, l = lights.length; i < l; i ++ ) {
@@ -18442,10 +18456,6 @@ function WebGLLights( extensions, capabilities ) {
 				const uniforms = cache.get( light );
 
 				uniforms.color.copy( light.color ).multiplyScalar( light.intensity );
-				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
-				vector3.setFromMatrixPosition( light.target.matrixWorld );
-				uniforms.direction.sub( vector3 );
-				uniforms.direction.transformDirection( viewMatrix );
 
 				if ( light.castShadow ) {
 
@@ -18475,16 +18485,10 @@ function WebGLLights( extensions, capabilities ) {
 				const uniforms = cache.get( light );
 
 				uniforms.position.setFromMatrixPosition( light.matrixWorld );
-				uniforms.position.applyMatrix4( viewMatrix );
 
 				uniforms.color.copy( color ).multiplyScalar( intensity );
 				uniforms.distance = distance;
 
-				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
-				vector3.setFromMatrixPosition( light.target.matrixWorld );
-				uniforms.direction.sub( vector3 );
-				uniforms.direction.transformDirection( viewMatrix );
-
 				uniforms.coneCos = Math.cos( light.angle );
 				uniforms.penumbraCos = Math.cos( light.angle * ( 1 - light.penumbra ) );
 				uniforms.decay = light.decay;
@@ -18522,24 +18526,9 @@ function WebGLLights( extensions, capabilities ) {
 				// (b) intensity is the brightness of the light
 				uniforms.color.copy( color ).multiplyScalar( intensity );
 
-				uniforms.position.setFromMatrixPosition( light.matrixWorld );
-				uniforms.position.applyMatrix4( viewMatrix );
-
-				// extract local rotation of light to derive width/height half vectors
-				matrix42.identity();
-				matrix4.copy( light.matrixWorld );
-				matrix4.premultiply( viewMatrix );
-				matrix42.extractRotation( matrix4 );
-
 				uniforms.halfWidth.set( light.width * 0.5, 0.0, 0.0 );
 				uniforms.halfHeight.set( 0.0, light.height * 0.5, 0.0 );
 
-				uniforms.halfWidth.applyMatrix4( matrix42 );
-				uniforms.halfHeight.applyMatrix4( matrix42 );
-
-				// TODO (abelnation): RectAreaLight distance?
-				// uniforms.distance = distance;
-
 				state.rectArea[ rectAreaLength ] = uniforms;
 
 				rectAreaLength ++;
@@ -18548,9 +18537,6 @@ function WebGLLights( extensions, capabilities ) {
 
 				const uniforms = cache.get( light );
 
-				uniforms.position.setFromMatrixPosition( light.matrixWorld );
-				uniforms.position.applyMatrix4( viewMatrix );
-
 				uniforms.color.copy( light.color ).multiplyScalar( light.intensity );
 				uniforms.distance = light.distance;
 				uniforms.decay = light.decay;
@@ -18584,10 +18570,6 @@ function WebGLLights( extensions, capabilities ) {
 
 				const uniforms = cache.get( light );
 
-				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
-				uniforms.direction.transformDirection( viewMatrix );
-				uniforms.direction.normalize();
-
 				uniforms.skyColor.copy( light.color ).multiplyScalar( intensity );
 				uniforms.groundColor.copy( light.groundColor ).multiplyScalar( intensity );
 
@@ -18679,8 +18661,94 @@ function WebGLLights( extensions, capabilities ) {
 
 	}
 
+	function setupView( lights, camera ) {
+
+		let directionalLength = 0;
+		let pointLength = 0;
+		let spotLength = 0;
+		let rectAreaLength = 0;
+		let hemiLength = 0;
+
+		const viewMatrix = camera.matrixWorldInverse;
+
+		for ( let i = 0, l = lights.length; i < l; i ++ ) {
+
+			const light = lights[ i ];
+
+			if ( light.isDirectionalLight ) {
+
+				const uniforms = state.directional[ directionalLength ];
+
+				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
+				vector3.setFromMatrixPosition( light.target.matrixWorld );
+				uniforms.direction.sub( vector3 );
+				uniforms.direction.transformDirection( viewMatrix );
+
+				directionalLength ++;
+
+			} else if ( light.isSpotLight ) {
+
+				const uniforms = state.spot[ spotLength ];
+
+				uniforms.position.setFromMatrixPosition( light.matrixWorld );
+				uniforms.position.applyMatrix4( viewMatrix );
+
+				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
+				vector3.setFromMatrixPosition( light.target.matrixWorld );
+				uniforms.direction.sub( vector3 );
+				uniforms.direction.transformDirection( viewMatrix );
+
+				spotLength ++;
+
+			} else if ( light.isRectAreaLight ) {
+
+				const uniforms = state.rectArea[ rectAreaLength ];
+
+				uniforms.position.setFromMatrixPosition( light.matrixWorld );
+				uniforms.position.applyMatrix4( viewMatrix );
+
+				// extract local rotation of light to derive width/height half vectors
+				matrix42.identity();
+				matrix4.copy( light.matrixWorld );
+				matrix4.premultiply( viewMatrix );
+				matrix42.extractRotation( matrix4 );
+
+				uniforms.halfWidth.set( light.width * 0.5, 0.0, 0.0 );
+				uniforms.halfHeight.set( 0.0, light.height * 0.5, 0.0 );
+
+				uniforms.halfWidth.applyMatrix4( matrix42 );
+				uniforms.halfHeight.applyMatrix4( matrix42 );
+
+				rectAreaLength ++;
+
+			} else if ( light.isPointLight ) {
+
+				const uniforms = state.point[ pointLength ];
+
+				uniforms.position.setFromMatrixPosition( light.matrixWorld );
+				uniforms.position.applyMatrix4( viewMatrix );
+
+				pointLength ++;
+
+			} else if ( light.isHemisphereLight ) {
+
+				const uniforms = state.hemi[ hemiLength ];
+
+				uniforms.direction.setFromMatrixPosition( light.matrixWorld );
+				uniforms.direction.transformDirection( viewMatrix );
+				uniforms.direction.normalize();
+
+				hemiLength ++;
+
+			}
+
+		}
+
+	}
+
 	return {
 		setup: setup,
+		setupView: setupView,
 		state: state
 	};
 
@@ -18712,9 +18780,15 @@ function WebGLRenderState( extensions, capabilities ) {
 
 	}
 
-	function setupLights( camera ) {
+	function setupLights() {
 
-		lights.setup( lightsArray, shadowsArray, camera );
+		lights.setup( lightsArray );
+
+	}
+
+	function setupLightsView( camera ) {
+
+		lights.setupView( lightsArray, camera );
 
 	}
 
@@ -18729,6 +18803,7 @@ function WebGLRenderState( extensions, capabilities ) {
 		init: init,
 		state: state,
 		setupLights: setupLights,
+		setupLightsView: setupLightsView,
 
 		pushLight: pushLight,
 		pushShadow: pushShadow
@@ -18740,26 +18815,26 @@ function WebGLRenderStates( extensions, capabilities ) {
 
 	let renderStates = new WeakMap();
 
-	function get( scene, camera ) {
+	function get( scene, renderCallDepth = 0 ) {
 
 		let renderState;
 
 		if ( renderStates.has( scene ) === false ) {
 
 			renderState = new WebGLRenderState( extensions, capabilities );
-			renderStates.set( scene, new WeakMap() );
-			renderStates.get( scene ).set( camera, renderState );
+			renderStates.set( scene, [] );
+			renderStates.get( scene ).push( renderState );
 
 		} else {
 
-			if ( renderStates.get( scene ).has( camera ) === false ) {
+			if ( renderCallDepth >= renderStates.get( scene ).length ) {
 
 				renderState = new WebGLRenderState( extensions, capabilities );
-				renderStates.get( scene ).set( camera, renderState );
+				renderStates.get( scene ).push( renderState );
 
 			} else {
 
-				renderState = renderStates.get( scene ).get( camera );
+				renderState = renderStates.get( scene )[ renderCallDepth ];
 
 			}
 
@@ -23258,6 +23333,11 @@ function WebGLRenderer( parameters ) {
 	let currentRenderList = null;
 	let currentRenderState = null;
 
+	// render() can be called from within a callback triggered by another render.
+	// We track this so that the nested render call gets its state isolated from the parent render call.
+
+	const renderStateStack = [];
+
 	// public properties
 
 	this.domElement = _canvas;
@@ -23324,7 +23404,6 @@ function WebGLRenderer( parameters ) {
 	let _currentMaterialId = - 1;
 
 	let _currentCamera = null;
-	let _currentArrayCamera = null;
 
 	const _currentViewport = new Vector4();
 	const _currentScissor = new Vector4();
@@ -24078,7 +24157,7 @@ function WebGLRenderer( parameters ) {
 
 	this.compile = function ( scene, camera ) {
 
-		currentRenderState = renderStates.get( scene, camera );
+		currentRenderState = renderStates.get( scene );
 		currentRenderState.init();
 
 		scene.traverseVisible( function ( object ) {
@@ -24097,7 +24176,7 @@ function WebGLRenderer( parameters ) {
 
 		} );
 
-		currentRenderState.setupLights( camera );
+		currentRenderState.setupLights();
 
 		const compiled = new WeakMap();
 
@@ -24212,9 +24291,11 @@ function WebGLRenderer( parameters ) {
 		//
 		if ( scene.isScene === true ) scene.onBeforeRender( _this, scene, camera, renderTarget || _currentRenderTarget );
 
-		currentRenderState = renderStates.get( scene, camera );
+		currentRenderState = renderStates.get( scene, renderStateStack.length );
 		currentRenderState.init();
 
+		renderStateStack.push( currentRenderState );
+
 		_projScreenMatrix.multiplyMatrices( camera.projectionMatrix, camera.matrixWorldInverse );
 		_frustum.setFromProjectionMatrix( _projScreenMatrix );
 
@@ -24242,7 +24323,8 @@ function WebGLRenderer( parameters ) {
 
 		shadowMap.render( shadowsArray, scene, camera );
 
-		currentRenderState.setupLights( camera );
+		currentRenderState.setupLights();
+		currentRenderState.setupLightsView( camera );
 
 		if ( _clippingEnabled === true ) clipping.endShadows();
 
@@ -24296,8 +24378,18 @@ function WebGLRenderer( parameters ) {
 
 		// _gl.finish();
 
+		renderStateStack.pop();
+		if ( renderStateStack.length > 0 ) {
+
+			currentRenderState = renderStateStack[ renderStateStack.length - 1 ];
+
+		} else {
+
+			currentRenderState = null;
+
+		}
+
 		currentRenderList = null;
-		currentRenderState = null;
 
 	};
 
@@ -24441,8 +24533,6 @@ function WebGLRenderer( parameters ) {
 
 			if ( camera.isArrayCamera ) {
 
-				_currentArrayCamera = camera;
-
 				const cameras = camera.cameras;
 
 				for ( let j = 0, jl = cameras.length; j < jl; j ++ ) {
@@ -24453,7 +24543,7 @@ function WebGLRenderer( parameters ) {
 
 						state.viewport( _currentViewport.copy( camera2.viewport ) );
 
-						currentRenderState.setupLights( camera2 );
+						currentRenderState.setupLightsView( camera2 );
 
 						renderObject( object, scene, camera2, geometry, material, group );
 
@@ -24463,8 +24553,6 @@ function WebGLRenderer( parameters ) {
 
 			} else {
 
-				_currentArrayCamera = null;
-
 				renderObject( object, scene, camera, geometry, material, group );
 
 			}
@@ -24476,7 +24564,6 @@ function WebGLRenderer( parameters ) {
 	function renderObject( object, scene, camera, geometry, material, group ) {
 
 		object.onBeforeRender( _this, scene, camera, geometry, material, group );
-		currentRenderState = renderStates.get( scene, _currentArrayCamera || camera );
 
 		object.modelViewMatrix.multiplyMatrices( camera.matrixWorldInverse, object.matrixWorld );
 		object.normalMatrix.getNormalMatrix( object.modelViewMatrix );
@@ -24498,7 +24585,6 @@ function WebGLRenderer( parameters ) {
 		}
 
 		object.onAfterRender( _this, scene, camera, geometry, material, group );
-		currentRenderState = renderStates.get( scene, _currentArrayCamera || camera );
 
 	}
 
@@ -24957,18 +25043,6 @@ function WebGLRenderer( parameters ) {
 
 	};
 
-	this.getRenderState = function () {
-
-		return currentRenderState;
-
-	};
-
-	this.setRenderState = function ( renderState ) {
-
-		currentRenderState = renderState;
-
-	};
-
 	this.getRenderTarget = function () {
 
 		return _currentRenderTarget;
@@ -25185,6 +25259,13 @@ function WebGLRenderer( parameters ) {
 
 	};
 
+	this.resetState = function () {
+
+		state.reset();
+		bindingStates.reset();
+
+	};
+
 	if ( typeof __THREE_DEVTOOLS__ !== 'undefined' ) {
 
 		__THREE_DEVTOOLS__.dispatchEvent( new CustomEvent( 'observe', { detail: this } ) ); // eslint-disable-line no-undef
@@ -26154,6 +26235,14 @@ LOD.prototype = Object.assign( Object.create( Object3D.prototype ), {
 
 } );
 
+const _basePosition = new Vector3();
+
+const _skinIndex = new Vector4();
+const _skinWeight = new Vector4();
+
+const _vector$7 = new Vector3();
+const _matrix$1 = new Matrix4();
+
 function SkinnedMesh( geometry, material ) {
 
 	if ( geometry && geometry.isGeometry ) {
@@ -26268,49 +26357,37 @@ SkinnedMesh.prototype = Object.assign( Object.create( Mesh.prototype ), {
 
 	},
 
-	boneTransform: ( function () {
-
-		const basePosition = new Vector3();
+	boneTransform: function ( index, target ) {
 
-		const skinIndex = new Vector4();
-		const skinWeight = new Vector4();
-
-		const vector = new Vector3();
-		const matrix = new Matrix4();
-
-		return function ( index, target ) {
-
-			const skeleton = this.skeleton;
-			const geometry = this.geometry;
+		const skeleton = this.skeleton;
+		const geometry = this.geometry;
 
-			skinIndex.fromBufferAttribute( geometry.attributes.skinIndex, index );
-			skinWeight.fromBufferAttribute( geometry.attributes.skinWeight, index );
+		_skinIndex.fromBufferAttribute( geometry.attributes.skinIndex, index );
+		_skinWeight.fromBufferAttribute( geometry.attributes.skinWeight, index );
 
-			basePosition.fromBufferAttribute( geometry.attributes.position, index ).applyMatrix4( this.bindMatrix );
+		_basePosition.fromBufferAttribute( geometry.attributes.position, index ).applyMatrix4( this.bindMatrix );
 
-			target.set( 0, 0, 0 );
+		target.set( 0, 0, 0 );
 
-			for ( let i = 0; i < 4; i ++ ) {
+		for ( let i = 0; i < 4; i ++ ) {
 
-				const weight = skinWeight.getComponent( i );
+			const weight = _skinWeight.getComponent( i );
 
-				if ( weight !== 0 ) {
+			if ( weight !== 0 ) {
 
-					const boneIndex = skinIndex.getComponent( i );
+				const boneIndex = _skinIndex.getComponent( i );
 
-					matrix.multiplyMatrices( skeleton.bones[ boneIndex ].matrixWorld, skeleton.boneInverses[ boneIndex ] );
+				_matrix$1.multiplyMatrices( skeleton.bones[ boneIndex ].matrixWorld, skeleton.boneInverses[ boneIndex ] );
 
-					target.addScaledVector( vector.copy( basePosition ).applyMatrix4( matrix ), weight );
-
-				}
+				target.addScaledVector( _vector$7.copy( _basePosition ).applyMatrix4( _matrix$1 ), weight );
 
 			}
 
-			return target.applyMatrix4( this.bindMatrixInverse );
+		}
 
-		};
+		return target.applyMatrix4( this.bindMatrixInverse );
 
-	}() )
+	}
 
 } );
 
@@ -26684,6 +26761,12 @@ InstancedMesh.prototype = Object.assign( Object.create( Mesh.prototype ), {
 
 	updateMorphTargets: function () {
 
+	},
+
+	dispose: function () {
+
+		this.dispatchEvent( { type: 'dispose' } );
+
 	}
 
 } );
@@ -46762,7 +46845,7 @@ class Cylindrical {
 
 }
 
-const _vector$7 = /*@__PURE__*/ new Vector2();
+const _vector$8 = /*@__PURE__*/ new Vector2();
 
 class Box2 {
 
@@ -46800,7 +46883,7 @@ class Box2 {
 
 	setFromCenterAndSize( center, size ) {
 
-		const halfSize = _vector$7.copy( size ).multiplyScalar( 0.5 );
+		const halfSize = _vector$8.copy( size ).multiplyScalar( 0.5 );
 		this.min.copy( center ).sub( halfSize );
 		this.max.copy( center ).add( halfSize );
 
@@ -46950,7 +47033,7 @@ class Box2 {
 
 	distanceToPoint( point ) {
 
-		const clampedPoint = _vector$7.copy( point ).clamp( this.min, this.max );
+		const clampedPoint = _vector$8.copy( point ).clamp( this.min, this.max );
 		return clampedPoint.sub( point ).length();
 
 	}
@@ -47155,7 +47238,7 @@ ImmediateRenderObject.prototype.constructor = ImmediateRenderObject;
 
 ImmediateRenderObject.prototype.isImmediateRenderObject = true;
 
-const _vector$8 = /*@__PURE__*/ new Vector3();
+const _vector$9 = /*@__PURE__*/ new Vector3();
 
 class SpotLightHelper extends Object3D {
 
@@ -47219,9 +47302,9 @@ class SpotLightHelper extends Object3D {
 
 		this.cone.scale.set( coneWidth, coneWidth, coneLength );
 
-		_vector$8.setFromMatrixPosition( this.light.target.matrixWorld );
+		_vector$9.setFromMatrixPosition( this.light.target.matrixWorld );
 
-		this.cone.lookAt( _vector$8 );
+		this.cone.lookAt( _vector$9 );
 
 		if ( this.color !== undefined ) {
 
@@ -47237,7 +47320,7 @@ class SpotLightHelper extends Object3D {
 
 }
 
-const _vector$9 = /*@__PURE__*/ new Vector3();
+const _vector$a = /*@__PURE__*/ new Vector3();
 const _boneMatrix = /*@__PURE__*/ new Matrix4();
 const _matrixWorldInv = /*@__PURE__*/ new Matrix4();
 
@@ -47305,12 +47388,12 @@ class SkeletonHelper extends LineSegments {
 			if ( bone.parent && bone.parent.isBone ) {
 
 				_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.matrixWorld );
-				_vector$9.setFromMatrixPosition( _boneMatrix );
-				position.setXYZ( j, _vector$9.x, _vector$9.y, _vector$9.z );
+				_vector$a.setFromMatrixPosition( _boneMatrix );
+				position.setXYZ( j, _vector$a.x, _vector$a.y, _vector$a.z );
 
 				_boneMatrix.multiplyMatrices( _matrixWorldInv, bone.parent.matrixWorld );
-				_vector$9.setFromMatrixPosition( _boneMatrix );
-				position.setXYZ( j + 1, _vector$9.x, _vector$9.y, _vector$9.z );
+				_vector$a.setFromMatrixPosition( _boneMatrix );
+				position.setXYZ( j + 1, _vector$a.x, _vector$a.y, _vector$a.z );
 
 				j += 2;
 
@@ -47432,7 +47515,7 @@ class PointLightHelper extends Mesh {
 
 }
 
-const _vector$a = /*@__PURE__*/ new Vector3();
+const _vector$b = /*@__PURE__*/ new Vector3();
 const _color1 = /*@__PURE__*/ new Color();
 const _color2 = /*@__PURE__*/ new Color();
 
@@ -47500,7 +47583,7 @@ class HemisphereLightHelper extends Object3D {
 
 		}
 
-		mesh.lookAt( _vector$a.setFromMatrixPosition( this.light.matrixWorld ).negate() );
+		mesh.lookAt( _vector$b.setFromMatrixPosition( this.light.matrixWorld ).negate() );
 
 	}
 
@@ -47703,7 +47786,7 @@ class DirectionalLightHelper extends Object3D {
 
 }
 
-const _vector$b = /*@__PURE__*/ new Vector3();
+const _vector$c = /*@__PURE__*/ new Vector3();
 const _camera = /*@__PURE__*/ new Camera();
 
 /**
@@ -47879,7 +47962,7 @@ class CameraHelper extends LineSegments {
 
 function setPoint( point, pointMap, geometry, camera, x, y, z ) {
 
-	_vector$b.set( x, y, z ).unproject( camera );
+	_vector$c.set( x, y, z ).unproject( camera );
 
 	const points = pointMap[ point ];
 
@@ -47889,7 +47972,7 @@ function setPoint( point, pointMap, geometry, camera, x, y, z ) {
 
 		for ( let i = 0, l = points.length; i < l; i ++ ) {
 
-			position.setXYZ( points[ i ], _vector$b.x, _vector$b.y, _vector$b.z );
+			position.setXYZ( points[ i ], _vector$c.x, _vector$c.y, _vector$c.z );
 
 		}
 

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

@@ -16,16 +16,13 @@
 		but retains the api of a curve.
 		</p>
 
-
 		<h2>Constructor</h2>
 
-
 		<h3>[name]()</h3>
 		<p>
 		The constructor take no parameters.
 		</p>
 
-
 		<h2>Properties</h2>
 		<p>See the base [page:Curve] class for common properties.</p>
 
@@ -35,10 +32,6 @@
 		<h3>[property:Boolean autoClose]</h3>
 		<p>Whether or not to automatically close the path.</p>
 
-
-
-
-
 		<h2>Methods</h2>
 		<p>See the base [page:Curve] class for common methods.</p>
 
@@ -62,7 +55,10 @@
 		<p>
 			divisions -- number of pieces to divide the curve into. Default is *12*.<br /><br />
 
-			Returns a set of divisions + 1 points using getPoint( t ).
+			Returns an array of points representing a sequence of curves. The *division* parameter defines
+			the number of pieces each curve is divided into. However, for optimization and quality purposes,
+			the actual sampling resolution for each curve depends on its type. For example, for a [page:LineCurve],
+			the returned number of points is always just 2.
 		</p>
 
 		<h3>[method:Array getSpacedPoints]( [param:Integer divisions] )</h3>

docs/api/en/materials/MeshBasicMaterial.html

@@ -80,7 +80,7 @@
 			blend between the two colors.
 		</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p>The environment map. Default is null.</p>
 
 		<h3>[property:Texture lightMap]</h3>

docs/api/en/materials/MeshLambertMaterial.html

@@ -107,7 +107,7 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p>Intensity of the emissive light. Modulates the emissive color. Default is 1.</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p>The environment map. Default is null.</p>
 
 		<h3>[property:Texture lightMap]</h3>

docs/api/en/materials/MeshPhongMaterial.html

@@ -139,10 +139,9 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p>Intensity of the emissive light. Modulates the emissive color. Default is 1.</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p>The environment map. Default is null.</p>
 
-
 		<h3>[property:Texture lightMap]</h3>
 		<p>The light map. Default is null. The lightMap requires a second set of UVs.</p>
 

docs/api/en/materials/MeshStandardMaterial.html

@@ -164,17 +164,9 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p>Intensity of the emissive light. Modulates the emissive color. Default is 1.</p>
 
-		<h3>[property:TextureCube envMap]</h3>
-		<p>The environment map. Default is null.  Note that in order for the material roughness
-		property to correctly blur out the environment map, the shader must have access to mipmaps
-		of the env texture.  TextureCubes created with default settings are correctly configured;
-		if adjusting texture parameters manually, ensure minFilter is set to one of the MipMap options,
-		and that mip maps have not been otherwise forcibly disabled.</p>
-		<p>
-		Note: only [link:https://threejs.org/docs/#api/textures/CubeTexture cube environment maps] are supported
-		for MeshStandardMaterial. If you want to use an equirectangular map you will need to use
-		[page:WebGLCubeRenderTarget.fromEquirectangularTexture WebGLCubeRenderTarget.fromEquirectangularTexture]().
-		See this [link:https://threejs.org/examples/webgl_materials_envmaps_exr.html example] for details.
+		<h3>[property:Texture envMap]</h3>
+		<p>The environment map. To ensure a physically correct rendering, you should only add
+			environment maps which were preprocessed by [page:PMREMGenerator]. Default is null.
 		</p>
 
 		<h3>[property:Float envMapIntensity]</h3>

docs/api/en/materials/ShaderMaterial.html

@@ -117,7 +117,6 @@
 			[example:webgl_materials_skin webgl / materials / skin]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
-			[example:webgl_nearestneighbour webgl / nearestneighbour]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />
 			[example:webgl_postprocessing_godrays webgl / postprocessing / godrays]
 		</p>

docs/api/en/math/Matrix3.html

@@ -105,7 +105,7 @@ zAxis = (c, f, i)
 		[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
 		</p>
 
-		<h3>[method:this invert()]()</h3>
+		<h3>[method:this invert]()</h3>
 		<p>
 		Inverts this matrix, using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
 

docs/api/en/math/Matrix4.html

@@ -186,7 +186,7 @@ zAxis = (c, g, k)
 		[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major] format.
 		</p>
 
-		<h3>[method:this invert()]()</h3>
+		<h3>[method:this invert]()</h3>
 		<p>
 		Inverts this matrix, using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
 

docs/api/en/objects/InstancedMesh.html

@@ -66,6 +66,11 @@
 		<h2>Methods</h2>
 		<p>See the base [page:Mesh] class for common methods.</p>
 
+		<h3>[method:null dispose]()</h3>
+		<p>
+			Frees the internal resources of this instance.
+		</p>
+
 		<h3>[method:null getColorAt]( [param:Integer index], [param:Color color] )</h3>
 		<p>
 			[page:Integer index]: The index of an instance. Values have to be in the range [0, count].

docs/api/en/renderers/WebGLRenderer.html

@@ -428,6 +428,9 @@
 		Renders an instance of [page:ImmediateRenderObject]. Gets called by renderObjectImmediate().
 		</p>
 
+		<h3>[method:null resetState]()</h3>
+		<p>Can be used to reset the internal WebGL state. This method is mostly relevant for applications which share a single WebGL context across multiple WebGL libraries.</p>
+
 		<h3>[method:null setAnimationLoop]( [param:Function callback] )</h3>
 		<p>[page:Function callback] — The function will be called every available frame. If `null` is passed it will stop any already ongoing animation.</p>
 		<p>A built in function that can be used instead of [link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]. For WebXR projects this function must be used.</p>

docs/api/zh/materials/MeshBasicMaterial.html

@@ -70,7 +70,7 @@
 			[page:Materials THREE.AddOperation]。如果选择多个，则使用[page:.reflectivity]在两种颜色之间进行混合。
 		</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p>环境贴图。默认值为null。</p>
 
 		<h3>[property:Texture lightMap]</h3>

docs/api/zh/materials/MeshLambertMaterial.html

@@ -89,7 +89,7 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p> 放射光强度。调节发光颜色。默认为1。</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p> 环境贴图。默认值为null。</p>
 
 		<h3>[property:Texture lightMap]</h3>

docs/api/zh/materials/MeshPhongMaterial.html

@@ -109,7 +109,7 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p>放射光强度。调节发光颜色。默认为1。</p>
 
-		<h3>[property:TextureCube envMap]</h3>
+		<h3>[property:Texture envMap]</h3>
 		<p>环境贴图。默认值为null。</p>
 
 

docs/api/zh/materials/MeshStandardMaterial.html

@@ -132,15 +132,9 @@
 		<h3>[property:Float emissiveIntensity]</h3>
 		<p>放射光强度。调节发光颜色。默认为1。</p>
 
-		<h3>[property:TextureCube envMap]</h3>
-		<p> 环境贴图。默认值为null。
-			请注意，为了使材质粗糙度属性能够正确地模糊环境贴图，shader必须能够访问环境纹理的mipmaps。
-			使用默认设置创建的TextureCubes已正确配置; 如果手动调整纹理参数，
-			请确保将minFilter设置为其中一个MipMap选项，并且未强制禁用mip贴图。</p>
-		<p>
-			注意：MeshStandardMaterial 仅支持[link:https://threejs.org/docs/#api/textures/CubeTexture cube environment maps]。
-			如果要使用equirectangular贴图，则需要使用 [page:WebGLCubeRenderTarget.fromEquirectangularTexture WebGLCubeRenderTarget.fromEquirectangularTexture]()。
-			详细信息请参阅此示例[link:https://threejs.org/examples/webgl_materials_envmaps_exr.html example]。
+		<h3>[property:Texture envMap]</h3>
+		<p>The environment map. To ensure a physically correct rendering, you should only add
+			environment maps which were preprocessed by [page:PMREMGenerator]. Default is null.
 		</p>
 
 		<h3>[property:Float envMapIntensity]</h3>

docs/api/zh/materials/ShaderMaterial.html

@@ -107,7 +107,6 @@
 			[example:webgl_materials_texture_hdr webgl / materials / texture / hdr]<br />
 			[example:webgl_materials_wireframe webgl / materials / wireframe]<br />
 			[example:webgl_modifier_tessellation webgl / modifier / tessellation]<br />
-			[example:webgl_nearestneighbour webgl / nearestneighbour]<br />
 			[example:webgl_postprocessing_dof2 webgl / postprocessing / dof2]<br />
 			[example:webgl_postprocessing_godrays webgl / postprocessing / godrays]
 		</p>

docs/api/zh/math/Matrix3.html

@@ -100,7 +100,7 @@ zAxis = (c, f, i)
 		使用基于列优先格式[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major]的数组来设置该矩阵。
 		</p>
 
-		<h3>[method:this invert()]()</h3>
+		<h3>[method:this invert]()</h3>
 		<p>
 		Inverts this matrix, using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
 

docs/api/zh/math/Matrix4.html

@@ -172,7 +172,7 @@ zAxis = (c, g, k)
 			使用基于列优先格式[link:https://en.wikipedia.org/wiki/Row-_and_column-major_order#Column-major_order column-major]的数组来设置该矩阵。
 		</p>
 
-		<h3>[method:this invert()]()</h3>
+		<h3>[method:this invert]()</h3>
 		<p>
 		Inverts this matrix, using the [link:https://en.wikipedia.org/wiki/Invertible_matrix#Analytic_solution analytic method].
 

docs/api/zh/objects/InstancedMesh.html

@@ -65,6 +65,11 @@
 		<h2>方法</h2>
 		<p>See the base [page:Mesh] class for common methods.</p>
 
+		<h3>[method:null dispose]()</h3>
+		<p>
+			Frees the internal resources of this instance.
+		</p>
+
 		<h3>[method:null getColorAt]( [param:Integer index], [param:Color color] )</h3>
 		<p>
 			[page:Integer index]: The index of an instance. Values have to be in the range [0, count].

docs/api/zh/renderers/WebGLRenderer.html

@@ -385,6 +385,9 @@
 		Renders an instance of [page:ImmediateRenderObject]，由renderObjectImmediate对象调用。
 		</p>
 
+		<h3>[method:null resetState]()</h3>
+		<p>Can be used to reset the internal WebGL state. This method is mostly relevant for applications which share a single WebGL context across multiple WebGL libraries.</p>
+
 		<h3>[method:null setAnimationLoop]( [param:Function callback] )</h3>
 		<p>[page:Function callback] — 每个可用帧都会调用的函数。 如果传入‘null’,所有正在进行的动画都会停止。</p>
 		<p>可用来代替[link:https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame requestAnimationFrame]的内置函数. 对于WebXR项目，必须使用此函数。</p>

docs/examples/en/math/MeshSurfaceSampler.html

@@ -24,14 +24,13 @@
 		const sampleMesh = new THREE.InstancedMesh( sampleGeometry, sampleMaterial, 100 );
 
 		const _position = new THREE.Vector3();
-		const _normal = new THREE.Vector3();
 		const _matrix = new THREE.Matrix4();
 
 		// Sample randomly from the surface, creating an instance of the sample
 		// geometry at each sample point.
 		for ( let i = 0; i < 100; i ++ ) {
 
-			sampler.sample( _position, _normal );
+			sampler.sample( _position );
 
 			_matrix.makeTranslation( _position.x, _position.y, _position.z );
 

docs/examples/en/postprocessing/EffectComposer.html

@@ -108,6 +108,14 @@
 			Used by [name] to determine when a pass should be rendered to screen.
 		</p>
 
+		<h3>[method:void removePass]( [param:Pass pass] )</h3>
+
+		<p>
+			pass -- The pass to remove from the pass chain.<br /><br />
+
+			Removes the given pass from the pass chain.
+		</p>
+
 		<h3>[method:void render]( [param:Float deltaTime] )</h3>
 
 		<p>

docs/examples/zh/math/MeshSurfaceSampler.html

@@ -24,14 +24,13 @@
 		const sampleMesh = new THREE.InstancedMesh( sampleGeometry, sampleMaterial, 100 );
 
 		const _position = new THREE.Vector3();
-		const _normal = new THREE.Vector3();
 		const _matrix = new THREE.Matrix4();
 
 		// Sample randomly from the surface, creating an instance of the sample
 		// geometry at each sample point.
 		for ( let i = 0; i < 100; i ++ ) {
 
-			sampler.sample( _position, _normal );
+			sampler.sample( _position );
 
 			_matrix.makeTranslation( _position.x, _position.y, _position.z );
 

docs/examples/zh/postprocessing/EffectComposer.html

@@ -107,6 +107,14 @@
 			由[name]所使用，来决定哪一个过程应当被渲染到屏幕上。
 		</p>
 
+		<h3>[method:void removePass]( [param:Pass pass] )</h3>
+
+		<p>
+			pass -- The pass to remove from the pass chain.<br /><br />
+
+			Removes the given pass from the pass chain.
+		</p>
+
 		<h3>[method:void render]( [param:Float deltaTime] )</h3>
 
 		<p>

docs/index.html

@@ -32,6 +32,7 @@
 					<select id="language">
 						<option value="en">en</option>
 						<option value="ar">ar</option>
+						<option value="ko">한국어</option>
 						<option value="zh">中文</option>
 					</select>
 				</div>
@@ -72,7 +73,7 @@
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
-				const hashLanguage = /^(api|manual|examples)\/(en|ar|zh)\//.exec( hash );
+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh)\//.exec( hash );
 
 				if ( hashLanguage === null ) {
 

docs/list.json

@@ -999,365 +999,50 @@
 		}
 
 	},
+  
 		"ko": {
-
-		"Manual": {
-
-			"Getting Started": {
-				"Creating a scene": "manual/ko/introduction/Creating-a-scene",
-				"Installation": "manual/ko/introduction/Installation",
-				"Browser support": "manual/ko/introduction/Browser-support",
-				"WebGL compatibility check": "manual/ko/introduction/WebGL-compatibility-check",
-				"How to run things locally": "manual/ko/introduction/How-to-run-things-locally",
-				"Typescript setup": "manual/ko/introduction/Typescript-setup",
-				"Drawing lines": "manual/ko/introduction/Drawing-lines",
-				"Creating text": "manual/ko/introduction/Creating-text",
-				"Loading 3D models": "manual/ko/introduction/Loading-3D-models",
+	
+		"매뉴얼": {
+	
+			"시작하기": {
+				"장면 만들기": "manual/ko/introduction/Creating-a-scene",
+				"설치": "manual/ko/introduction/Installation",
+				"브라우저 지원": "manual/ko/introduction/Browser-support",
+				"WebGL 호환성 검사": "manual/ko/introduction/WebGL-compatibility-check",
+				"로컬 환경에서 구동 방법": "manual/ko/introduction/How-to-run-things-locally",
+				"Typescript 설정": "manual/ko/introduction/Typescript-setup",
+				"선 그리기": "manual/ko/introduction/Drawing-lines",
+				"텍스트 만들기": "manual/ko/introduction/Creating-text",
+				"3D 모델 불러오기": "manual/ko/introduction/Loading-3D-models",
 				"FAQ": "manual/ko/introduction/FAQ",
-				"Useful links": "manual/ko/introduction/Useful-links"
-			},
-
-			"Next Steps": {
-				"How to update things": "manual/ko/introduction/How-to-update-things",
-				"How to dispose of objects": "manual/ko/introduction/How-to-dispose-of-objects",
-				"How to create VR content": "manual/ko/introduction/How-to-create-VR-content",
-				"How to use post-processing": "manual/ko/introduction/How-to-use-post-processing",
-				"Matrix transformations": "manual/ko/introduction/Matrix-transformations",
-				"Animation system": "manual/ko/introduction/Animation-system"
-			},
-
-			"Build Tools": {
-				"Testing with NPM": "manual/ko/buildTools/Testing-with-NPM"
+				"참고 링크": "manual/ko/introduction/Useful-links"
+			},
+	
+			"심화 과정": {
+				"오브젝트를 업데이트하는 방법": "manual/ko/introduction/How-to-update-things",
+				"오브젝트를 폐기하는 방법": "manual/ko/introduction/How-to-dispose-of-objects",
+				"VR 컨텐츠를 만드는 방법": "manual/ko/introduction/How-to-create-VR-content",
+				"후처리 사용 방법": "manual/ko/introduction/How-to-use-post-processing",
+				"행렬 변환": "manual/ko/introduction/Matrix-transformations",
+				"애니메이션 시스템": "manual/ko/introduction/Animation-system"
+			},
+	
+			"빌드 도구": {
+				"NPM 테스트": "manual/ko/buildTools/Testing-with-NPM"
+				
 			}
-
+	
 		},
 
 		"레퍼런스": {
 
 			"애니메이션": {
 				"AnimationAction": "api/ko/animation/AnimationAction",
-				"AnimationClip": "api/ko/animation/AnimationClip",
-				"AnimationMixer": "api/ko/animation/AnimationMixer",
-				"AnimationObjectGroup": "api/ko/animation/AnimationObjectGroup",
-				"AnimationUtils": "api/ko/animation/AnimationUtils",
-				"KeyframeTrack": "api/ko/animation/KeyframeTrack",
-				"PropertyBinding": "api/ko/animation/PropertyBinding",
-				"PropertyMixer": "api/ko/animation/PropertyMixer"
-			},
-
-			"Animation / Tracks": {
-				"BooleanKeyframeTrack": "api/ko/animation/tracks/BooleanKeyframeTrack",
-				"ColorKeyframeTrack": "api/ko/animation/tracks/ColorKeyframeTrack",
-				"NumberKeyframeTrack": "api/ko/animation/tracks/NumberKeyframeTrack",
-				"QuaternionKeyframeTrack": "api/ko/animation/tracks/QuaternionKeyframeTrack",
-				"StringKeyframeTrack": "api/ko/animation/tracks/StringKeyframeTrack",
-				"VectorKeyframeTrack": "api/ko/animation/tracks/VectorKeyframeTrack"
-			},
-
-			"Audio": {
-				"Audio": "api/ko/audio/Audio",
-				"AudioAnalyser": "api/ko/audio/AudioAnalyser",
-				"AudioContext": "api/ko/audio/AudioContext",
-				"AudioListener": "api/ko/audio/AudioListener",
-				"PositionalAudio": "api/ko/audio/PositionalAudio"
-			},
-
-			"Cameras": {
-				"ArrayCamera": "api/ko/cameras/ArrayCamera",
-				"Camera": "api/ko/cameras/Camera",
-				"CubeCamera": "api/ko/cameras/CubeCamera",
-				"OrthographicCamera": "api/ko/cameras/OrthographicCamera",
-				"PerspectiveCamera": "api/ko/cameras/PerspectiveCamera",
-				"StereoCamera": "api/ko/cameras/StereoCamera"
-			},
-
-			"Constants": {
-				"Animation": "api/ko/constants/Animation",
-				"Core": "api/ko/constants/Core",
-				"CustomBlendingEquation": "api/ko/constants/CustomBlendingEquations",
-				"Materials": "api/ko/constants/Materials",
-				"Renderer": "api/ko/constants/Renderer",
-				"Textures": "api/ko/constants/Textures"
-			},
-
-			"Core": {
-				"BufferAttribute": "api/ko/core/BufferAttribute",
-				"BufferGeometry": "api/ko/core/BufferGeometry",
-				"Clock": "api/ko/core/Clock",
-				"DirectGeometry": "api/ko/core/DirectGeometry",
-				"EventDispatcher": "api/ko/core/EventDispatcher",
-				"Face3": "api/ko/core/Face3",
-				"Geometry": "api/ko/core/Geometry",
-				"GLBufferAttribute": "api/ko/core/GLBufferAttribute",
-				"InstancedBufferAttribute": "api/ko/core/InstancedBufferAttribute",
-				"InstancedBufferGeometry": "api/ko/core/InstancedBufferGeometry",
-				"InstancedInterleavedBuffer": "api/ko/core/InstancedInterleavedBuffer",
-				"InterleavedBuffer": "api/ko/core/InterleavedBuffer",
-				"InterleavedBufferAttribute": "api/ko/core/InterleavedBufferAttribute",
-				"Layers": "api/ko/core/Layers",
-				"Object3D": "api/ko/core/Object3D",
-				"Raycaster": "api/ko/core/Raycaster",
-				"Uniform": "api/ko/core/Uniform"
-			},
-
-			"Core / BufferAttributes": {
-				"BufferAttribute Types": "api/ko/core/bufferAttributeTypes/BufferAttributeTypes"
-			},
-
-			"Extras": {
-				"DataUtils": "api/ko/extras/DataUtils",
-				"Earcut": "api/ko/extras/Earcut",
-				"ImageUtils": "api/ko/extras/ImageUtils",
-				"PMREMGenerator": "api/ko/extras/PMREMGenerator",
-				"ShapeUtils": "api/ko/extras/ShapeUtils"
-			},
-
-			"Extras / Core": {
-				"Curve": "api/ko/extras/core/Curve",
-				"CurvePath": "api/ko/extras/core/CurvePath",
-				"Font": "api/ko/extras/core/Font",
-				"Interpolations": "api/ko/extras/core/Interpolations",
-				"Path": "api/ko/extras/core/Path",
-				"Shape": "api/ko/extras/core/Shape",
-				"ShapePath": "api/ko/extras/core/ShapePath"
-			},
-
-			"Extras / Curves": {
-				"ArcCurve": "api/ko/extras/curves/ArcCurve",
-				"CatmullRomCurve3": "api/ko/extras/curves/CatmullRomCurve3",
-				"CubicBezierCurve": "api/ko/extras/curves/CubicBezierCurve",
-				"CubicBezierCurve3": "api/ko/extras/curves/CubicBezierCurve3",
-				"EllipseCurve": "api/ko/extras/curves/EllipseCurve",
-				"LineCurve": "api/ko/extras/curves/LineCurve",
-				"LineCurve3": "api/ko/extras/curves/LineCurve3",
-				"QuadraticBezierCurve": "api/ko/extras/curves/QuadraticBezierCurve",
-				"QuadraticBezierCurve3": "api/ko/extras/curves/QuadraticBezierCurve3",
-				"SplineCurve": "api/ko/extras/curves/SplineCurve"
-			},
-
-			"Extras / Objects": {
-				"ImmediateRenderObject": "api/ko/extras/objects/ImmediateRenderObject"
-			},
-
-			"Geometries": {
-				"BoxBufferGeometry": "api/ko/geometries/BoxBufferGeometry",
-				"BoxGeometry": "api/ko/geometries/BoxGeometry",
-				"CircleBufferGeometry": "api/ko/geometries/CircleBufferGeometry",
-				"CircleGeometry": "api/ko/geometries/CircleGeometry",
-				"ConeBufferGeometry": "api/ko/geometries/ConeBufferGeometry",
-				"ConeGeometry": "api/ko/geometries/ConeGeometry",
-				"CylinderBufferGeometry": "api/ko/geometries/CylinderBufferGeometry",
-				"CylinderGeometry": "api/ko/geometries/CylinderGeometry",
-				"DodecahedronBufferGeometry": "api/ko/geometries/DodecahedronBufferGeometry",
-				"DodecahedronGeometry": "api/ko/geometries/DodecahedronGeometry",
-				"EdgesGeometry": "api/ko/geometries/EdgesGeometry",
-				"ExtrudeBufferGeometry": "api/ko/geometries/ExtrudeBufferGeometry",
-				"ExtrudeGeometry": "api/ko/geometries/ExtrudeGeometry",
-				"IcosahedronBufferGeometry": "api/ko/geometries/IcosahedronBufferGeometry",
-				"IcosahedronGeometry": "api/ko/geometries/IcosahedronGeometry",
-				"LatheBufferGeometry": "api/ko/geometries/LatheBufferGeometry",
-				"LatheGeometry": "api/ko/geometries/LatheGeometry",
-				"OctahedronBufferGeometry": "api/ko/geometries/OctahedronBufferGeometry",
-				"OctahedronGeometry": "api/ko/geometries/OctahedronGeometry",
-				"ParametricBufferGeometry": "api/ko/geometries/ParametricBufferGeometry",
-				"ParametricGeometry": "api/ko/geometries/ParametricGeometry",
-				"PlaneBufferGeometry": "api/ko/geometries/PlaneBufferGeometry",
-				"PlaneGeometry": "api/ko/geometries/PlaneGeometry",
-				"PolyhedronBufferGeometry": "api/ko/geometries/PolyhedronBufferGeometry",
-				"PolyhedronGeometry": "api/ko/geometries/PolyhedronGeometry",
-				"RingBufferGeometry": "api/ko/geometries/RingBufferGeometry",
-				"RingGeometry": "api/ko/geometries/RingGeometry",
-				"ShapeBufferGeometry": "api/ko/geometries/ShapeBufferGeometry",
-				"ShapeGeometry": "api/ko/geometries/ShapeGeometry",
-				"SphereBufferGeometry": "api/ko/geometries/SphereBufferGeometry",
-				"SphereGeometry": "api/ko/geometries/SphereGeometry",
-				"TetrahedronBufferGeometry": "api/ko/geometries/TetrahedronBufferGeometry",
-				"TetrahedronGeometry": "api/ko/geometries/TetrahedronGeometry",
-				"TextBufferGeometry": "api/ko/geometries/TextBufferGeometry",
-				"TextGeometry": "api/ko/geometries/TextGeometry",
-				"TorusBufferGeometry": "api/ko/geometries/TorusBufferGeometry",
-				"TorusGeometry": "api/ko/geometries/TorusGeometry",
-				"TorusKnotBufferGeometry": "api/ko/geometries/TorusKnotBufferGeometry",
-				"TorusKnotGeometry": "api/ko/geometries/TorusKnotGeometry",
-				"TubeBufferGeometry": "api/ko/geometries/TubeBufferGeometry",
-				"TubeGeometry": "api/ko/geometries/TubeGeometry",
-				"WireframeGeometry": "api/ko/geometries/WireframeGeometry"
-			},
-
-			"Helpers": {
-				"ArrowHelper": "api/ko/helpers/ArrowHelper",
-				"AxesHelper": "api/ko/helpers/AxesHelper",
-				"BoxHelper": "api/ko/helpers/BoxHelper",
-				"Box3Helper": "api/ko/helpers/Box3Helper",
-				"CameraHelper": "api/ko/helpers/CameraHelper",
-				"DirectionalLightHelper": "api/ko/helpers/DirectionalLightHelper",
-				"GridHelper": "api/ko/helpers/GridHelper",
-				"PolarGridHelper": "api/ko/helpers/PolarGridHelper",
-				"HemisphereLightHelper": "api/ko/helpers/HemisphereLightHelper",
-				"PlaneHelper": "api/ko/helpers/PlaneHelper",
-				"PointLightHelper": "api/ko/helpers/PointLightHelper",
-				"SkeletonHelper": "api/ko/helpers/SkeletonHelper",
-				"SpotLightHelper": "api/ko/helpers/SpotLightHelper"
-			},
-
-			"Lights": {
-				"AmbientLight": "api/ko/lights/AmbientLight",
-				"AmbientLightProbe": "api/ko/lights/AmbientLightProbe",
-				"DirectionalLight": "api/ko/lights/DirectionalLight",
-				"HemisphereLight": "api/ko/lights/HemisphereLight",
-				"HemisphereLightProbe": "api/ko/lights/HemisphereLightProbe",
-				"Light": "api/ko/lights/Light",
-				"LightProbe": "api/ko/lights/LightProbe",
-				"PointLight": "api/ko/lights/PointLight",
-				"RectAreaLight": "api/ko/lights/RectAreaLight",
-				"SpotLight": "api/ko/lights/SpotLight"
-			},
 
-			"Lights / Shadows": {
-				"LightShadow": "api/ko/lights/shadows/LightShadow",
-				"PointLightShadow": "api/ko/lights/shadows/PointLightShadow",
-				"DirectionalLightShadow": "api/ko/lights/shadows/DirectionalLightShadow",
-				"SpotLightShadow": "api/ko/lights/shadows/SpotLightShadow"
 			},
 
-			"Loaders": {
-				"AnimationLoader": "api/ko/loaders/AnimationLoader",
-				"AudioLoader": "api/ko/loaders/AudioLoader",
-				"BufferGeometryLoader": "api/ko/loaders/BufferGeometryLoader",
-				"Cache": "api/ko/loaders/Cache",
-				"CompressedTextureLoader": "api/ko/loaders/CompressedTextureLoader",
-				"CubeTextureLoader": "api/ko/loaders/CubeTextureLoader",
-				"DataTextureLoader": "api/ko/loaders/DataTextureLoader",
-				"FileLoader": "api/ko/loaders/FileLoader",
-				"FontLoader": "api/ko/loaders/FontLoader",
-				"ImageBitmapLoader": "api/ko/loaders/ImageBitmapLoader",
-				"ImageLoader": "api/ko/loaders/ImageLoader",
-				"Loader": "api/ko/loaders/Loader",
-				"LoaderUtils": "api/ko/loaders/LoaderUtils",
-				"MaterialLoader": "api/ko/loaders/MaterialLoader",
-				"ObjectLoader": "api/ko/loaders/ObjectLoader",
-				"TextureLoader": "api/ko/loaders/TextureLoader"
-			},
-
-			"Loaders / Managers": {
-				"DefaultLoadingManager": "api/ko/loaders/managers/DefaultLoadingManager",
-				"LoadingManager": "api/ko/loaders/managers/LoadingManager"
-			},
-
-			"Materials": {
-				"LineBasicMaterial": "api/ko/materials/LineBasicMaterial",
-				"LineDashedMaterial": "api/ko/materials/LineDashedMaterial",
-				"Material": "api/ko/materials/Material",
-				"MeshBasicMaterial": "api/ko/materials/MeshBasicMaterial",
-				"MeshDepthMaterial": "api/ko/materials/MeshDepthMaterial",
-				"MeshDistanceMaterial": "api/ko/materials/MeshDistanceMaterial",
-				"MeshLambertMaterial": "api/ko/materials/MeshLambertMaterial",
-				"MeshMatcapMaterial": "api/ko/materials/MeshMatcapMaterial",
-				"MeshNormalMaterial": "api/ko/materials/MeshNormalMaterial",
-				"MeshPhongMaterial": "api/ko/materials/MeshPhongMaterial",
-				"MeshPhysicalMaterial": "api/ko/materials/MeshPhysicalMaterial",
-				"MeshStandardMaterial": "api/ko/materials/MeshStandardMaterial",
-				"MeshToonMaterial": "api/ko/materials/MeshToonMaterial",
-				"PointsMaterial": "api/ko/materials/PointsMaterial",
-				"RawShaderMaterial": "api/ko/materials/RawShaderMaterial",
-				"ShaderMaterial": "api/ko/materials/ShaderMaterial",
-				"ShadowMaterial": "api/ko/materials/ShadowMaterial",
-				"SpriteMaterial": "api/ko/materials/SpriteMaterial"
-			},
-
-			"Math": {
-				"Box2": "api/ko/math/Box2",
-				"Box3": "api/ko/math/Box3",
-				"Color": "api/ko/math/Color",
-				"Cylindrical": "api/ko/math/Cylindrical",
-				"Euler": "api/ko/math/Euler",
-				"Frustum": "api/ko/math/Frustum",
-				"Interpolant": "api/ko/math/Interpolant",
-				"Line3": "api/ko/math/Line3",
-				"MathUtils": "api/ko/math/MathUtils",
-				"Matrix3": "api/ko/math/Matrix3",
-				"Matrix4": "api/ko/math/Matrix4",
-				"Plane": "api/ko/math/Plane",
-				"Quaternion": "api/ko/math/Quaternion",
-				"Ray": "api/ko/math/Ray",
-				"Sphere": "api/ko/math/Sphere",
-				"Spherical": "api/ko/math/Spherical",
-				"SphericalHarmonics3": "api/ko/math/SphericalHarmonics3",
-				"Triangle": "api/ko/math/Triangle",
-				"Vector2": "api/ko/math/Vector2",
-				"Vector3": "api/ko/math/Vector3",
-				"Vector4": "api/ko/math/Vector4"
-			},
-
-			"Math / Interpolants": {
-				"CubicInterpolant": "api/ko/math/interpolants/CubicInterpolant",
-				"DiscreteInterpolant": "api/ko/math/interpolants/DiscreteInterpolant",
-				"LinearInterpolant": "api/ko/math/interpolants/LinearInterpolant",
-				"QuaternionLinearInterpolant": "api/ko/math/interpolants/QuaternionLinearInterpolant"
-			},
-
-			"Objects": {
-				"Bone": "api/ko/objects/Bone",
-				"Group": "api/ko/objects/Group",
-				"InstancedMesh": "api/ko/objects/InstancedMesh",
-				"Line": "api/ko/objects/Line",
-				"LineLoop": "api/ko/objects/LineLoop",
-				"LineSegments": "api/ko/objects/LineSegments",
-				"LOD": "api/ko/objects/LOD",
-				"Mesh": "api/ko/objects/Mesh",
-				"Points": "api/ko/objects/Points",
-				"Skeleton": "api/ko/objects/Skeleton",
-				"SkinnedMesh": "api/ko/objects/SkinnedMesh",
-				"Sprite": "api/ko/objects/Sprite"
-			},
-
-			"Renderers": {
-				"WebGLMultisampleRenderTarget": "api/ko/renderers/WebGLMultisampleRenderTarget",
-				"WebGLRenderer": "api/ko/renderers/WebGLRenderer",
-				"WebGL1Renderer": "api/ko/renderers/WebGL1Renderer",
-				"WebGLRenderTarget": "api/ko/renderers/WebGLRenderTarget",
-				"WebGLCubeRenderTarget": "api/ko/renderers/WebGLCubeRenderTarget"
-			},
-
-			"Renderers / Shaders": {
-				"ShaderChunk": "api/ko/renderers/shaders/ShaderChunk",
-				"ShaderLib": "api/ko/renderers/shaders/ShaderLib",
-				"UniformsLib": "api/ko/renderers/shaders/UniformsLib",
-				"UniformsUtils": "api/ko/renderers/shaders/UniformsUtils"
-			},
-
-			"Renderers / WebXR": {
-				"WebXRManager": "api/ko/renderers/webxr/WebXRManager"
-			},
-
-			"Scenes": {
-				"Fog": "api/ko/scenes/Fog",
-				"FogExp2": "api/ko/scenes/FogExp2",
-				"Scene": "api/ko/scenes/Scene"
-			},
-
-			"Textures": {
-				"CanvasTexture": "api/ko/textures/CanvasTexture",
-				"CompressedTexture": "api/ko/textures/CompressedTexture",
-				"CubeTexture": "api/ko/textures/CubeTexture",
-				"DataTexture": "api/ko/textures/DataTexture",
-				"DataTexture2DArray": "api/ko/textures/DataTexture2DArray",
-				"DataTexture3D": "api/ko/textures/DataTexture3D",
-				"DepthTexture": "api/ko/textures/DepthTexture",
-				"Texture": "api/ko/textures/Texture",
-				"VideoTexture": "api/ko/textures/VideoTexture"
-			}
-
-		},
-
 		"예제": {
 
-			"Animations": {
-				"CCDIKSolver": "examples/ko/animations/CCDIKSolver",
-				"MMDAnimationHelper": "examples/ko/animations/MMDAnimationHelper",
-				"MMDPhysics": "examples/ko/animations/MMDPhysics"
-			},
-
 			"컨트롤": {
 				"DeviceOrientationControls": "examples/ko/controls/DeviceOrientationControls",
 				"DragControls": "examples/ko/controls/DragControls",
@@ -1367,101 +1052,10 @@
 				"PointerLockControls": "examples/ko/controls/PointerLockControls",
 				"TrackballControls": "examples/ko/controls/TrackballControls",
 				"TransformControls": "examples/ko/controls/TransformControls"
-			},
-
-			"Geometries": {
-				"ConvexBufferGeometry": "examples/ko/geometries/ConvexBufferGeometry",
-				"ConvexGeometry": "examples/ko/geometries/ConvexGeometry",
-				"DecalGeometry": "examples/ko/geometries/DecalGeometry"
-			},
-
-			"Helpers": {
-				"FaceNormalsHelper": "examples/ko/helpers/FaceNormalsHelper",
-				"LightProbeHelper": "examples/ko/helpers/LightProbeHelper",
-				"PositionalAudioHelper": "examples/ko/helpers/PositionalAudioHelper",
-				"RectAreaLightHelper": "examples/ko/helpers/RectAreaLightHelper",
-				"VertexNormalsHelper": "examples/ko/helpers/VertexNormalsHelper",
-				"VertexTangentsHelper": "examples/ko/helpers/VertexTangentsHelper"
-			},
-
-			"Lights": {
-				"LightProbeGenerator": "examples/ko/lights/LightProbeGenerator"
-			},
-
-			"Loaders": {
-				"3DMLoader": "examples/ko/loaders/3DMLoader",
-				"BasisTextureLoader": "examples/ko/loaders/BasisTextureLoader",
-				"DRACOLoader": "examples/ko/loaders/DRACOLoader",
-				"GLTFLoader": "examples/ko/loaders/GLTFLoader",
-				"MMDLoader": "examples/ko/loaders/MMDLoader",
-				"MTLLoader": "examples/ko/loaders/MTLLoader",
-				"OBJLoader": "examples/ko/loaders/OBJLoader",
-				"OBJLoader2": "examples/ko/loaders/OBJLoader2",
-				"OBJLoader2Parallel": "examples/ko/loaders/OBJLoader2Parallel",
-				"PCDLoader": "examples/ko/loaders/PCDLoader",
-				"PDBLoader": "examples/ko/loaders/PDBLoader",
-				"PRWMLoader": "examples/ko/loaders/PRWMLoader",
-				"SVGLoader": "examples/ko/loaders/SVGLoader",
-				"TGALoader": "examples/ko/loaders/TGALoader"
-			},
-
-			"Objects": {
-				"Lensflare": "examples/ko/objects/Lensflare"
-			},
-
-			"Post-Processing": {
-				"EffectComposer": "examples/ko/postprocessing/EffectComposer"
-			},
-
-			"Exporters": {
-				"GLTFExporter": "examples/ko/exporters/GLTFExporter",
-				"PLYExporter": "examples/ko/exporters/PLYExporter",
-				"ColladaExporter": "examples/ko/exporters/ColladaExporter"
-			},
-
-			"Math": {
-				"LookupTable": "examples/ko/math/Lut",
-				"MeshSurfaceSampler": "examples/ko/math/MeshSurfaceSampler",
-				"OBB": "examples/ko/math/OBB"
-			},
-
-			"ConvexHull": {
-				"Face": "examples/ko/math/convexhull/Face",
-				"HalfEdge": "examples/ko/math/convexhull/HalfEdge",
-				"ConvexHull": "examples/ko/math/convexhull/ConvexHull",
-				"VertexNode": "examples/ko/math/convexhull/VertexNode",
-				"VertexList": "examples/ko/math/convexhull/VertexList"
-			},
-
-			"Renderers": {
-				"CSS2DRenderer": "examples/ko/renderers/CSS2DRenderer",
-				"CSS3DRenderer": "examples/ko/renderers/CSS3DRenderer",
-				"SVGRenderer": "examples/ko/renderers/SVGRenderer"
-
-			},
-
-			"Utils": {
-				"BufferGeometryUtils": "examples/ko/utils/BufferGeometryUtils",
-				"SceneUtils": "examples/ko/utils/SceneUtils",
-				"SkeletonUtils": "examples/ko/utils/SkeletonUtils"
-			}
-
-		},
-
-		"Developer Reference": {
-
-			"Polyfills": {
-				"Polyfills": "api/ko/Polyfills"
-			},
-
-			"WebGLRenderer": {
-				"WebGLProgram": "api/ko/renderers/webgl/WebGLProgram",
-				"WebGLShader": "api/ko/renderers/webgl/WebGLShader",
-				"WebGLState": "api/ko/renderers/webgl/WebGLState"
 			}
-
+	
 		}
 
 	}
 
-}
+}

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

@@ -24,7 +24,7 @@ scene.add( object1 ); //object1 and object2 will automatically update their matr
 			</code>
 		</div>
 
-		<p>However, if you know object will be static, you can disable this and update the transform matrix manually just when needed.</p>
+		<p>However, if you know the object will be static, you can disable this and update the transform matrix manually just when needed.</p>
 
 		<code>
 object.matrixAutoUpdate  = false;

docs/manual/ko/buildTools/Testing-with-NPM.html

@@ -0,0 +1,250 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>NPM 테스트([name])</h1>
+
+		<p class="desc">
+            이 문서에서는 [link:https://nodejs.org/en/ node.js] 환경에서 three.js를 사용해 자동 테스트를 진행해보는 방법을 알려드립니다. 
+            테스트는 커맨드 라인으로 실행이 가능하며 [link:https://travis-ci.org/ Travis]같은 CI 툴을 통해 자동으로 실행이 가능합니다.
+		</p>
+
+		<h2>간단한 버전</h2>
+
+		<p>
+			node와 npm이 친숙하다면,
+			<code>
+				$ npm install three --save-dev
+			</code>
+			그리고 여기에
+		<code>
+			const THREE = require('three');
+		</code>
+			를 추가합니다.
+		</p>
+
+		<h2>scratch에서 테스트 가능한 예제 만들기</h2>
+		<p>
+			이 툴들에 익숙치 않다면, 아래의 간단한 가이드(리눅스 기반으로, 윈도우에서의 설치 절차와는 조금 다릅니다. 하지만 NPM 커맨드는 같습니다)를 따라주세요.
+		</p>
+
+		<h3>기본 설치</h3>
+		<div>
+			<ol>
+				<li>
+					[link:https://www.npmjs.org/ npm] 과 nodejs를 설치합니다. 가장 짧은 설치 명령어는 다음과 같습니다.
+					<code>
+$ sudo apt-get install -y npm nodejs-legacy
+# 기본 레지스트리 URL에서 SSL 문제가 생기면 수정해주세요
+$ npm config set registry http://registry.npmjs.org/
+					</code>
+				</li>
+
+				<li>
+					새 프로젝트 폴더를 만듭니다.
+					<code>
+						 $ mkdir test-example; cd test-example
+					</code>
+				</li>
+
+				<li>
+					npm에게 새 프로젝트 파일을 만들게 합니다:
+					<code>
+					 $ npm init
+                    </code>
+                    엔터를 계속 쳐서 기본 설정으로 동의 후 진행하세요.
+                    이 절차가 끝나면 package.json 파일이 생길 것입니다.
+				</li><br />
+
+				<li>
+					다음 코드로 테스트를 시작해 보세요
+					<code>
+$ npm test
+					</code>
+					아마 실패가 뜰 것입니다.
+					package.json 파일을 보면, test 스크립트의 경로가 다음과 같이 되어 있을 것입니다.
+					<code>
+						"test": "echo \"Error: no test specified\" && exit 1"
+					</code>
+				</li>
+
+			</ol>
+		</div>
+
+		<h2>mocha 추가하기</h2>
+		<div>
+			[link:https://mochajs.org/ mocha]를 사용할 것입니다.
+
+			<ol>
+				<li>
+					mocha는 아래 명령어로 설치합니다.
+					<code>
+$ npm install mocha --save-dev
+					</code>
+                    node_modules/이 생성되어 있고 파일들이 있어야 합니다.
+                    그리고 package.json의 내용이 업데이트 되었는지도 확인해봐야 합니다. 
+                    --save-dev를 통해 devDependencies 속성에 업데이트가 되어있어야 합니다.
+				</li><br />
+
+				<li>
+                    mocha가 동작하는지 확인하기 위해 package.json을 수정합니다. 우리가 하고자 하는 것은 test를 치면 mocha를 동작하고 여러 리포터를 확인하는 것입니다.
+                    기본적으로 이 명령어는 test/ 의 모든 것을 실행할 것입니다.
+					(test/ 폴더가 없다면 npm ERR!가 나올 것입니다, mkdir test로 만들어주세요)
+					<code>
+						"test": "mocha --reporter list"
+					</code>
+				</li>
+
+				<li>
+					test를 다시 실행시킵니다.
+					<code>
+						$ npm test
+					</code>
+
+					아마 성공 메세지가 뜨고 0 passing (1ms)와 비슷한 문구가 뜰 것입니다.
+				</li>
+
+			</ol>
+		</div>
+
+		<h2>three.js 추가</h2>
+		<div>
+			<ol>
+				<li>
+					three.js를 다음과 같이 추가합니다.
+					<code>
+$ npm install three --save-dev
+					</code>
+					<ul>
+						<li>
+							다른 three 버전을 사용하려면, 아래 명령어를 입력하고
+							<code>
+								$ npm show three versions
+							</code>
+						  사용 가능한 버전을 확인해, npm에게 특정 버전을 사용하라고 합니다.
+							<code>
+ $ npm install [email protected] --save
+							</code>
+                            (이 예제에서는 0.84.0 버전을 사용했습니다.). --save 는 dev 설정이 아닌 이 프로젝트의 의존성으로 추가하는 명령어입니다.
+                            [link:https://www.npmjs.org/doc/json.html 여기]에서 더 많은 내용을 확인하세요.
+						</li>
+					</ul>
+				</li>
+
+				<li>
+					Mocha 는 test/에서 test를 찾을 것이기 때문에, 아래 명령어를 입력합니다.
+					<code>
+					$ mkdir test
+					</code>
+				</li>
+
+				<li>
+                    이제 마지막으로 JS 테스트가 남았습니다. three.js가 잘 작동하는지 간단한 테스트를 통해 확인해 봅시다.
+                    test/verify-three.js 파일을 만들고 안에 다음 내용을 넣어주세요:
+<code>
+const THREE = require('three');
+const assert = require('assert');
+
+describe('The THREE object', function() {
+  it('should have a defined BasicShadowMap constant', function() {
+    assert.notEqual('undefined', THREE.BasicShadowMap);
+  }),
+
+  it('should be able to construct a Vector3 with default of x=0', function() {
+    const vec3 = new THREE.Vector3();
+    assert.equal(0, vec3.x);
+  })
+})
+</code>
+				</li>
+
+				<li>
+				마지막으로 $ npm test로 확인해봅시다. 위의 테스트 파일을 성공적으로 실행시키고 다음과 같은 내용이 나올 것입니다.
+				<code>
+The THREE object should have a defined BasicShadowMap constant: 0ms
+The THREE object should be able to construct a Vector3 with default of x=0: 0ms
+2 passing (8ms)
+				</code>
+				</li>
+			</ol>
+		</div>
+
+		<h2>자신의 코드 추가하기</h2>
+		<div>
+			세 가지를 수행해야 합니다:
+
+			<ol>
+				<li>
+					자신의 코드의 예상 결과가 들어있는 예제를 만들어, test/ 폴더 안에 두세요.
+					[link:https://github.com/air/encounter/blob/master/test/Physics-test.js 여기]에서 진짜 프로젝트의 예제를 확인할 수 있습니다.
+				</li>
+
+				<li>
+                    nodeJS에서 알아볼 수 있는, require를 사용해 기능들을 내보내기 하세요. 
+                    [link:https://github.com/air/encounter/blob/master/js/Physics.js 여기]를 참고하세요.
+				</li>
+
+				<li>
+					테스트 파일에서 코드를 불러오세요. 같은 방식으로 우리는 위의 예제에서 require('three')를 불러왔습니다.
+				</li>
+			</ol>
+
+			<p>
+                2번과 3번 과정은 자신의 코드를 어떻게 관리하는지에 따라 달려 있습니다. 위의 Physics.js 예제에서는 내보내기 부분이 맨 마지막에 있습니다.
+                module.exports에 할당했습니다.
+			</p>
+			<code>
+//=============================================================================
+// make available in nodejs
+//=============================================================================
+if (typeof exports !== 'undefined')
+{
+  module.exports = Physics;
+}
+			</code>
+		</div>
+
+		<h2>의존성 관리</h2>
+		<div>
+			<p>
+				require.js나 browserify같은 현명한 방법을 사용하고 있다면 이 부분은 넘어가세요.
+			</p>
+			<p>
+                일반적으로 three.js 프로젝트는 브라우저에서 돌아가게 하기 위한 목적입니다. 따라서 모듈 로딩은 브라우저가 스크립트 태그를 실행함으로써 이루어집니다.
+                개인 파일은 의존성에 대해 걱정하지 않아도 됩니다. 하지만 nodejs 환경에서는 모든 것을 묶어놓은 index.html이 없기 때문에, 분명히 해 둘 필요가 있습니다.
+			</p>
+			<p>
+				다른 파일에 의존하는 모듈을 내보내기 할 때에는, node에 같이 내보내기하라고 알려줘야 합니다.
+				그 방법 중 하나는 다음과 같습니다:
+			</p>
+			<ol>
+				<li>
+					모듈의 시작 부분에서 nodejs 환경인지 체크합니다.
+				</li>
+				<li>
+					만약 그렇다면 의존성을 명확하게 선언해줍니다.
+				</li>
+				<li>
+					그렇지 않다면 브라우저 환경일 것이기 때문에 아무것도 할 것이 없습니다.
+				</li>
+			</ol>
+			Physics.js의 예제입니다:
+			<code>
+//=============================================================================
+// 서버사이드 테스트 설정
+//=============================================================================
+if (typeof require === 'function') // nodejs 환경 테스트
+{
+  const THREE = require('three');
+  const MY3 = require('./MY3.js');
+}
+			</code>
+		</div>
+
+	</body>
+</html>

docs/manual/ko/introduction/Animation-system.html

@@ -0,0 +1,131 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8" />
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>애니메이션 시스템([name])</h1>
+
+		<h2>Overview</h2>
+
+		<p class="desc">
+            three.js 애니메이션 시스템에서는 모델의 다양한 속성을 설정할 수 있습니다:
+            [page:SkinnedMesh 스킨 및 리깅 모델], [page:Geometry.morphTargets 모프타깃]의 골자, 서로 다른 소재의 속성(색상, 불투명도, 참/거짓 연산), 
+            가시성과 변환이 그 예입니다. 애니메이션의 속성은 페이드 아웃, 페이드 아웃, 크로스페이드, 랩이 있습니다. 
+            한 오브젝트에 대한 동시에 일어나는 다른 확대 시간 및 가중치 조절이나, 서로 다른 오브젝트간의 애니메이션도 전부 개별로 변화시킬 수 있습니다. 
+            같은, 혹은 서로 다른 오브젝트틀간의 다양한 애니메이션도 싱크를 맞출 수 있습니다.
+            <br /><br />
+            
+            이를 한 시스템 안에 구현하기 위해서, three.js 애니메이션 시스템은 
+			[link:https://github.com/mrdoob/three.js/issues/6881 2015년에 완전히 변경]
+            (지난 정보임에 주의하세요!)되었으며, 현재는 Unity/Unreal Engine 4와 유사한 구조를 가지고 있습니다. 
+            이 페이지에서는 어떻게 시스템 메인 컴포넌트가 구성되고 동작되는지를 간단하게 알아보겠습니다.
+
+		</p>
+
+		<h3>애니메이션 클립(Animation Clips)</h3>
+
+		<p class="desc">
+            애니메이션 3D 오브젝트를 잘 불러왔다면(구조에 골자 혹은 모프 타깃이 있는지는 상관 없습니다) — 예를 들면 
+            [link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter]라는 익스포터로 추출하고 
+            [page:GLTFLoader]를 사용해 three.js에 불러왔다면 — 응답 필드 중 하나가 "animations"라는 이름의 배열로 되어 있고 해당 모델에 대한
+            [page:AnimationClip AnimationClips]를 담고 있을 것입니다(활용 가능한 로더는 아래 리스트를 확인하세요).
+            <br /><br />
+
+			각각의 *AnimationClip*은 대개 해당 오브젝트의 특정 행동에 대한 데이터를 담고 있습니다. 
+			예를 들어 mesh가 이름이라면, walkcycle AnimationClip 한 개와, 두 번째는 jump, 세 번째는 sidestepping 등등이 들어 있을 것입니다.
+
+		</p>
+
+		<h3>키프레임 트랙(Keyframe Tracks)</h3>
+
+		<p class="desc">
+
+            이러한 *AnimationClip* 안에는 각각의 애니메이션 속성별 데이터가 별도의 [page:KeyframeTrack]에 저장되어 있습니다.
+            [page:Skeleton skeleton] 이라는 오브젝트가 있다고 가정하면, 한 키프레임 트랙은 하완골격의 위치가 수시로 변화하는 데이터를 저장할 수 있을 것이며
+            또 다른 트랙에는 같은 뼈의 회전, 세 번째 트랙에는 다른 뼈의 위치와 회전각, 치수 등을 저장할 것입니다.
+            애니매이션 클립은 이런 트랙으로 여러 번 구성될 수 있다는 것을 잘 알아야 합니다.
+            <br /><br />
+
+            가령 모형이 [page:Geometry.morphTargets 모프 타깃](예를 들어 한 모프타깃은 웃는 표정, 다른 하나는 화난 표정을 나타낸다거 히면)을 가지고 있다고 하면, 각 트랙은
+            해당 모프 타깃이 변화하는 동안에 어떻게 [page:Mesh.morphTargetInfluences 영향]을 미치는지에 대한 정보를 담고 있을 것입니다.
+		</p>
+
+		<h3>애니메이션 믹서(Animation Mixer)</h3>
+
+		<p class="desc">
+
+            저장된 데이터 폼은 오직 애니메이션에 대한 기본 정보일 뿐입니다. 실제 플레이백은 [page:AnimationMixer]가 담당합니다.
+            이 믹서는 단지 애니메이션 플레이어가 아닌, 리얼 믹서 콘솔처럼 여러 애니메이션을 동시재생, 혼합, 병합재생할 수 있다는 점을 알 수 있을 것입니다.
+		</p>
+
+		<h3>애니메이션 액션(Animation Actions)</h3>
+
+		<p class="desc">
+
+			*AnimationMixer*는 아주 적은(일반적인) 속성과 메서드를 가지고 있는데, 
+            [page:AnimationAction AnimationActions]으로 설정할 수 있습니다. *AnimationAction*을 설정하면 
+            특정 *AnimationClip*이 언제, 어떤 믹서에서 실행, 정지, 중지되어야 하는지를 조절할 수 있으며 얼마나 반복되어야 하는지, 페이드나 타임 스케일링이 필요한지, 
+            크로스페이딩이나 싱크로나이징 같은 것들이 필요한지도 설정할 수 있습니다.
+		</p>
+
+		<h3>애니메이션 오브젝트 그룹(Animation Object Groups)</h3>
+
+		<p class="desc">
+
+			같은 애니메이션 효과를 공유하는 오브젝트 그룹을 만들고 싶다면,
+			[page:AnimationObjectGroup]을 사용하면 됩니다.
+
+		</p>
+
+		<h3>지원되는 포맷 및 로더</h3>
+
+		<p class="desc">
+			애니메이션을 포함한 모든 모델들(OBJ는 확실히 안 됩니다)이 지원되는 것은 아니며, 아주 몇몇
+			three.js 로더만 [page:AnimationClip AnimationClip] 시퀀스를 지원합니다. 지원<i>되는</i>
+			애니메이션 타입은 다음과 같습니다:
+		</p>
+
+			<ul>
+				<li>[page:ObjectLoader THREE.ObjectLoader]</li>
+				<li>THREE.BVHLoader</li>
+				<li>THREE.ColladaLoader</li>
+				<li>THREE.FBXLoader</li>
+				<li>[page:GLTFLoader THREE.GLTFLoader]</li>
+				<li>THREE.MMDLoader</li>
+			</ul>
+
+		<p class="desc">
+			3ds max와 Maya는 현재 여러 애니메이션 (같은 시간대에 있지 않은 애니메이션)을 한 파일로 내보내기 할 수 없습니다.
+		</p>
+
+		<h2>예제</h2>
+
+		<code>
+		let mesh;
+
+		// AnimationMixer 만들기, AnimationClip 인스턴스 리스트 가져오기
+		const mixer = new THREE.AnimationMixer( mesh );
+		const clips = mesh.animations;
+
+		// 각 프레임의 mixer 업데이트
+		function update () {
+			mixer.update( deltaSeconds );
+		}
+
+		// 특정 애니메이션 재생
+		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
+		const action = mixer.clipAction( clip );
+		action.play();
+
+		// 전체 애니메이션 재생
+		clips.forEach( function ( clip ) {
+			mixer.clipAction( clip ).play();
+		} );
+		</code>
+
+	</body>
+</html>

docs/manual/ko/introduction/Browser-support.html

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <base href="../../../" />
+    <script src="page.js"></script>
+    <link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+    <h1>브라우저 지원([name])</h1>
+
+    <h2>개요</h2>
+    <div>
+        <p>
+            Three.js 는 WebGL을 통해 대부분의 현대 브라우저에서 scene을 렌더링할 수 있습니다. 오래된 브라우저, 특히 Internet Explorer 10 이하 버전에서는 다른
+            [link:https://github.com/mrdoob/three.js/tree/master/examples/jsm/renderers 렌더러] (CSS2DRenderer,
+            CSS3DRenderer, SVGRenderer)를 사용해야 합니다. 또한,
+            polyfills를 몇가지 포함해야 할 수도 있는데 [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] 폴더의
+            파일을 불러올때에는 필수입니다.
+        </p>
+        <p>
+            오래된 브라우저를 지원할 필요가 없다면, 다른 렌더러를 사용하는 것은 추천하지 않습니다. WebGLRenderer보다 느릴뿐더러 더 적은 기능을 지원하기 때문입니다.
+        </p>
+    </div>
+
+    <h2>WebGL지원 웹 브라우저</h2>
+    <div>
+        <p>
+            Google Chrome 9+, Firefox 4+, Opera 15+, Safari 5.1+, Internet Explorer 11 및 Microsoft Edge. [link:https://caniuse.com/#feat=webgl Can I use WebGL]에서 어떤 브라우저들이 지원하는지 확인해볼 수 있습니다.
+        </p>
+    </div>
+
+    <h2>JavaScript 언어 특성 및 three.js에서 사용된 Web API</h2>
+    <div>
+        <p>
+            three.js에서 사용된 특성들은 다음과 같습니다. 이 중 몇개는 추가로 polyfills가 필요합니다.
+        </p>
+        <table>
+            <thead>
+                <tr>
+                    <th>특성</th>
+                    <th>사용 범위</th>
+                    <th>모듈</th>
+                </tr>
+            </thead>
+            <tbody>
+                <tr>
+                    <td>Typed Arrays</td>
+                    <td>Source</td>
+                    <td>BufferAttribute, BufferGeometry, etc.</td>
+                </tr>
+                <tr>
+                    <td>Web Audio API</td>
+                    <td>Source</td>
+                    <td>Audio, AudioContext, AudioListener, etc.</td>
+                </tr>
+                <tr>
+                    <td>WebXR Device API</td>
+                    <td>Source</td>
+                    <td>WebXRManager</td>
+                </tr>
+                <tr>
+                    <td>Blob</td>
+                    <td>Source</td>
+                    <td>FileLoader, etc.</td>
+                </tr>
+                <tr>
+                    <td>Promise</td>
+                    <td>Examples</td>
+                    <td>GLTFLoader, DRACOLoader, BasisTextureLoader, GLTFExporter, VRButton, ARButton, etc.</td>
+                </tr>
+                <tr>
+                    <td>Fetch</td>
+                    <td>Examples</td>
+                    <td>ImageBitmapLoader, etc.</td>
+                </tr>
+                <tr>
+                    <td>File API</td>
+                    <td>Examples</td>
+                    <td>GLTFExporter, etc.</td>
+                </tr>
+                <tr>
+                    <td>URL API</td>
+                    <td>Examples</td>
+                    <td>GLTFLoader, etc.</td>
+                </tr>
+                <tr>
+                    <td>Pointer Lock API</td>
+                    <td>Examples</td>
+                    <td>PointerLockControls</td>
+                </tr>
+            </tbody>
+        </table>
+    </div>
+
+    <h2>Polyfills</h2>
+    <div>
+        <p>필요에 따라 polyfills을 import 하세요. IE9를 예로들면 적어도 다음과 같은 polyfills가 필요할 것입니다.
+            these features:</p>
+        <ul>
+            <li>Typed Arrays</li>
+            <li>Blob</li>
+        </ul>
+    </div>
+
+    <h3>추천 polyfills</h3>
+    <div>
+        <ul>
+            <li>
+                [link:https://github.com/zloirock/core-js core-js]
+            </li>
+            <li>
+                [link:https://github.com/inexorabletash/polyfill/blob/master/typedarray.js typedarray.js]
+            </li>
+            <li>
+                [link:https://github.com/stefanpenner/es6-promise/ ES6-Promise]
+            </li>
+            <li>
+                [link:https://github.com/eligrey/Blob.js Blob.js]
+            </li>
+            <li>
+                [link:https://github.com/github/fetch fetch]
+            </li>
+        </ul>
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,164 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>장면 만들기([name])</h1>
+
+		<p>이 섹션의 목표는 three.js에 대한 간략한 설명을 하는 것입니다. spinning cube라는 scene을 설정하는 것부터 시작할 것입니다. 막히거나 도움이 필요할 때에는 아래쪽의 실습 예제를 확인해주세요.</p>
+
+		<h2>시작하기에 앞서</h2>
+
+		<p>three.js를 사용하려면, 표시할 수 있는 공간이 필요합니다. 다음과 같이 HTML 파일을 만들고, js/ 디렉토리 안에 [link:https://threejs.org/build/three.js three.js] 파일을 만들고 연결시켜 웹 브라우저로 실행해주세요.</p>
+
+		<code>
+		&lt;!DOCTYPE html&gt;
+		&lt;html&gt;
+			&lt;head&gt;
+				&lt;meta charset="utf-8"&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
+				&lt;style&gt;
+					body { margin: 0; }
+					canvas { display: block; }
+				&lt;/style&gt;
+			&lt;/head&gt;
+			&lt;body&gt;
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
+				&lt;script&gt;
+					// Our Javascript will go here.
+				&lt;/script&gt;
+			&lt;/body&gt;
+		&lt;/html&gt;
+		</code>
+
+		<p>이게 전부입니다. 모든 코드들은 비어있는 &lt;script&gt; 태그 안에 작성될 것입니다.</p>
+
+		<h2>Scene 만들기</h2>
+
+		<p>three.js로 무언가를 표현하려면 scene, camera 그리고 renderer가 필요합니다. 이를 통해 카메라로 장면을 구현할 수 있습니다.</p>
+
+		<code>
+		const scene = new THREE.Scene();
+		const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+		const renderer = new THREE.WebGLRenderer();
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+		</code>
+
+		<p>여기에서 잠깐 어떤 일들이 일어나는지 짚고 넘어가봅시다. 우선은 scene, camera renderer를 설정했습니다.</p>
+
+		<p>three.js에는 몇가지 종류의 카메라가 있는데, 이번에는<strong>PerspectiveCamera</strong>를 사용해 봅시다.</p>
+
+		<p>첫 번째 속성은 <strong>field of view(시야각)</strong>입니다. FOV(시야각)는 해당 시점의 화면이 보여지는 정도를 나타냅니다. 값은 각도 값으로 설정합니다.</p>
+
+		<p>두 번째 속성은 <strong>aspect ratio(종횡비)</strong>입니다. 대부분의 경우 요소의 높이와 너비에 맞추어 표시하게 할텐데, 그렇지 않으면 와이드스크린에 옛날 영화를 트는 것처럼 이미지가 틀어져 보일 것입니다.</p>
+
+		<p>다음 두 속성은 <strong>near</strong> 와 <strong>far</strong> 절단면입니다. 무슨 뜻인가 하면, <strong>far</strong> 값 보다 멀리 있는 요소나 <strong>near</strong> 값보다 가까이 있는 물체는 렌더링 되지 않는다는 뜻입니다. 지금 시점에서 이것까지 고려할 필요는 없지만, 앱 성능 향상을 위해 사용할 수 있습니다.</p>
+
+		<p>다음은 renderer입니다. 마법이 일어나는 곳입니다. 같이 사용하는 WebGLRenderer와 더불어, three.js는 다른 몇가지 renderer를 사용하는데, 오래된 브라우저 혹은 모종의 사유로 WebGL을 지원 안할때의 대비용으로 사용하는 것입니다.</p>
+
+		<p>renderer 인스턴스를 생섬함과 동시에, 렌더링 할 곳의 크기를 설정해줘야 합니다. 렌더링할 구역의 높이와 너비를 설정하는 것은 좋은 방법입니다. 이 경우, 높이와 너비는 각각 브라우저 윈도우의 크기가 됩니다. 성능 개선을 중시하는 앱의 경우, <strong>setSize</strong>를 사용하거나 <strong>window.innerWidth/2</strong>, <strong>window.innerHeight/2</strong>를 사용해서 화면 크기의 절반으로 구현할 수도 잇씁니다.</p>
+
+		<p>사이즈는 그대로 유지하고 싶지만 더 낮은 해상도로 렌더링하고 싶을 경우, <strong>setSize</strong>의 <strong>updateStyle</strong> (세 번째 인자)를 false로 불러오면 됩니다. <strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>처럼 사용하면 &lt;canvas&gt;가 100%의 높이, 너비로 되어있다는 기준 하에 절반의 해상도로 렌더링 될 것입니다.</p>
+
+		<p>마지막으로 제일 중요한 <strong>renderer</strong> 엘리먼트를 HTML 문서 안에 넣었습니다. 이는&lt;canvas&gt; 엘리먼트로, renderer가 scene을 나타내는 구역입니다.</p>
+
+		<p><em>"그건 그렇고, 아까 말했던 큐브는 어디에 있죠?"</em> 바로 추가해 봅시다.</p>
+
+		<code>
+		const geometry = new THREE.BoxGeometry();
+		const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+		const cube = new THREE.Mesh( geometry, material );
+		scene.add( cube );
+
+		camera.position.z = 5;
+		</code>
+
+		<p>큐브를 만드려면, <strong>BoxGeometry</strong>가 필요합니다. 여기에는 큐브에 필요한 모든 꼭짓점 (<strong>vertices</strong>) 와 면(<strong>faces</strong>)이 포함돼 있습니다. 여기에 대해서는 나중에 더 자세히 알아봅시다.</p>
+
+		<p>geometry와 더불어, 무언가를 색칠해줄 요소가 필요합니다. Three.js에서는 여러 방법을 고려했지만, 현재로서는<strong>MeshBasicMaterial</strong>을 고수하고자 합니다. 이 속성이 적용된 물체들은 모두 영향을 받을 것입니다. 가장 단순하게 알아볼 수 있도록, 여기에서는 녹색인 <strong>0x00ff00</strong>만을 속성으로 사용하겠습니다. CSS 나 Photoshop에서처럼 (<strong>hex colors</strong>)로 동일하게 작동합니다.</p>
+
+		<p>세 번째로 필요한 것은<strong>Mesh</strong>입니다. mesh는 geometry를 물체에 적용시키고 우리가 화면 안에서 자유롭게 움직일 수 있게 해 줍니다.
+
+		<p>기본 설정상 <strong>scene.add()</strong>를 불러오면, 추가된 모든 것들은 <strong>(0,0,0)</strong> 속성을 가집니다. 이렇게 되면 카메라와 큐브가 동일한 위치에 겹치게 되겠죠. 이를 피하기 위해, 카메라를 약간 움직여 두었습니다.</p>
+
+		<h2>scene 렌더링</h2>
+
+		<p>맨 처음에 있던 HTML 파일을 복사해서 열어놨다면, 아무것도 보이지 않을 것입니다. 왜냐하면 아직 아무것도 렌더링하지 않았기 때문입니다. 이를 해결하려면 <strong>render or animate loop</strong>라는 것이 필요합니다..</p>
+
+		<code>
+		function animate() {
+			requestAnimationFrame( animate );
+			renderer.render( scene, camera );
+		}
+		animate();
+		</code>
+
+		<p>이 코드는 하면이 새로고침 될 때마다 계속해서 렌더링을 해 줄 것입니다. (일반적인 경우에 1초에 60번 렌더링 됩니다). 웹 브라우저에서 게임을 만들기 시작한 지 얼마 안 된 분이라면, <em>"왜 그냥 setInterval을 쓰지 않는거죠?"</em>라고 질문할 수도 있을 겁니다. 단적으로 말하면 가능은 합니다. 하지만 <strong>requestAnimationFrame</strong> 을 사용하는 것이 훨씬 이점이 많습니다. 아마 가장 큰 이점은 유저가 브라우저 창에서 이탈했을때 멈춰주는 기능일 것입니다. 이를 통해 소중한 전력과 배터리를 아낄 수 있죠.</p>
+
+		<h2>큐브 애니메이팅</h2>
+
+		<p>시작할 때 만들었던 파일에 이전까지의 코드를 모두 작성해서 넣었을 경우, 초록색 박스를 확인할 수 있을 것입니다. 이 박스를 회전시켜 보면서 조금 더 재미있게 만들어봅시다.</p>
+
+		<p>다음 코드를 <strong>animate</strong>함수 안의 <strong>renderer.render</strong> 바로 위에 넣어주세요.</p>
+
+		<code>
+		cube.rotation.x += 0.01;
+		cube.rotation.y += 0.01;
+		</code>
+
+		<p>위 코드는 모든 프레임마다 실행되면서 (일반적으로 1초에 60번), 큐브가 멋지게 돌아가도록 만들어 줄겁니다. 기본적으로 앱을 실행하는 동안 무언가를 움직이거나 변형하고 싶을때, animate loop를 사용하면 됩니다. 물론 다른 함수를 불러올 수도 있고, <strong>animate</strong> 함수 안에 수백줄을 작성할 필요도 없습니다.</p>
+
+		<h2>결과 화면</h2>
+		<p>축하합니다! 첫 three.js이 완성되었네요. 이제 본격적으로 시작해보면 됩니다.</p>
+
+		<p>전체 코드는 아래에 나와 있고 [link:https://jsfiddle.net/mkba0ecu/ live example]로도 확인해볼 수 있습니다. 잘 살펴보고 어떻게 구동되는지 확인해 보세요.</p>
+
+		<code>
+		&lt;!DOCTYPE html&gt;
+		&lt;html&gt;
+			&lt;head&gt;
+				&lt;title&gt;My first three.js app&lt;/title&gt;
+				&lt;style&gt;
+					body { margin: 0; }
+					canvas { display: block; }
+				&lt;/style&gt;
+			&lt;/head&gt;
+			&lt;body&gt;
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
+				&lt;script&gt;
+					const scene = new THREE.Scene();
+					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+					const renderer = new THREE.WebGLRenderer();
+					renderer.setSize( window.innerWidth, window.innerHeight );
+					document.body.appendChild( renderer.domElement );
+
+					const geometry = new THREE.BoxGeometry();
+					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+					const cube = new THREE.Mesh( geometry, material );
+					scene.add( cube );
+
+					camera.position.z = 5;
+
+					const animate = function () {
+						requestAnimationFrame( animate );
+
+						cube.rotation.x += 0.01;
+						cube.rotation.y += 0.01;
+
+						renderer.render( scene, camera );
+					};
+
+					animate();
+				&lt;/script&gt;
+			&lt;/body&gt;
+		&lt;/html&gt;
+		</code>
+	</body>
+</html>

docs/manual/ko/introduction/Creating-text.html

@@ -0,0 +1,113 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>텍스트 만들기([name])</h1>
+		<div>
+			<p>
+				three.js에서 텍스트를 활용하고 싶을 경우가 많을 것입니다. - 그 방법의 몇가지를 소개합니다.
+			</p>
+		</div>
+
+		<h2>1. DOM + CSS</h2>
+		<div>
+			<p>
+				HTML을 사용하는 것은 텍스트를 추가하는 가장 쉽고 빠른 방법입니다. 대부분의 three.js 예제에서 오버레이 설명에 사용되는 방식입니다.
+			</p>
+			<p>내용을 추가하려면 다음과 같이 입력합니다.</p>
+			<code>&lt;div id="info"&gt;Description&lt;/div&gt;</code>
+
+			<p>
+				절대 위치를 설정하려면 CSS 마크업을 사용하고, 특히 three.js를 전체화면으로 사용한다면 z-index를 활용합니다.
+			</p>
+
+			<code>
+#info {
+	position: absolute;
+	top: 10px;
+	width: 100%;
+	text-align: center;
+	z-index: 100;
+	display:block;
+}
+			</code>
+
+		</div>
+
+
+
+		<h2>2. 캔버스에 텍스트를 그리고 [page:Texture]로 사용</h2>
+		<div>
+			<p>three.js scene에 손쉽게 텍스트를 그리고싶은 경우에 이 메서드를 사용하세요.</p>
+		</div>
+
+
+		<h2>3. 본인이 가장 선호하는 3D 앱으로 만들고 three.js로 export 하세요.</h2>
+		<div>
+			<p>본인의 3d 작업 앱을 선호하는 경우 이 메서드를 사용해 three.js로 모델을 import하세요.</p>
+		</div>
+
+
+
+		<h2>4. 절차적 텍스트 geometry</h2>
+		<div>
+			<p>
+				THREE.js만을 사용해 절차적 및 동적 3D 텍스트 geometry를 사용하고 싶으면, geometry이 THREE.TextGeometry의 인스턴스인 mesh를 사용하면 됩니다.
+			</p>
+			<p>
+				<code>new THREE.TextGeometry( text, parameters );</code>
+			</p>
+			<p>
+				하지만 이 작업을 수행하려면, TextGeometry의 "font" 파라미터가 THREE.Font 인스턴스로 설정되어 있어야 합니다.
+
+				이 과정이 어떻게 작동하는지, 각각의 파라미터에 대한 설명, THREE.js가 가지고 있는 JSON 폰트 리스트를 확인하려면 [page:TextGeometry] 페이지를 참고해 주세요.
+			</p>
+
+			<h3>예시</h3>
+
+			<p>
+				[example:webgl_geometry_text WebGL / geometry / text]<br />
+				[example:webgl_shadowmap WebGL / shadowmap]
+			</p>
+
+			<p>
+				글꼴이 없거나, 다른 글꼴을 사용하고 싶으면 python 스크립트를 통해 Three.js의 JSON 포맷으로 파일을 export 하세요:
+				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
+			</p>
+
+		</div>
+
+
+
+		<h2>5. 비트맵 글꼴</h2>
+		<div>
+			<p>
+				BMFonts (비트맵 폰트) 는 단일 BufferGeometry에 글자들을 일괄적으로 활용할 수 있습니다. BMFont 렌더링은
+				word-wrapping, letter spacing, kerning, signed distance fields with standard
+				derivatives, multi-channel signed distance fields, multi-texture fonts 등을 지원합니다.
+				[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]를 확인해 보세요.
+			</p>
+			<p>
+				Stock 폰트는
+                [link:https://github.com/etiennepinchon/aframe-fonts A-Frame Fonts]처럼 사용 가능하고, 
+                자신만의 .TTF 폰트를 만들어서, 프로젝트에 필요한 문자들만 불러와 최적화할 수 도 있습니다.
+			</p>
+			<p>
+				참고 자료:
+			</p>
+			<ul>
+				<li>[link:http://msdf-bmfont.donmccurdy.com/ msdf-bmfont-web] <i>(웹 기반)</i></li>
+				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(커맨드라인)</i></li>
+				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(데스크탑 앱)</i></li>
+			</ul>
+		</div>
+
+
+
+	</body>
+</html>

docs/manual/ko/introduction/Drawing-lines.html

@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <base href="../../../" />
+    <script src="page.js"></script>
+    <link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+    <h1>선 그리기([name])</h1>
+    <div>
+        <p>
+            와이어프레임 [page:Mesh]를 사용하지 않고 선이나 원을 그려봅시다.
+            먼저 [page:WebGLRenderer renderer], [page:Scene scene] camera를 설정합니다. (scene 페이지를 참고하세요).
+        </p>
+
+        <p>사용할 코드는 다음과 같습니다:</p>
+        <code>
+const renderer = new THREE.WebGLRenderer();
+renderer.setSize( window.innerWidth, window.innerHeight );
+document.body.appendChild( renderer.domElement );
+
+const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 500 );
+camera.position.set( 0, 0, 100 );
+camera.lookAt( 0, 0, 0 );
+
+const scene = new THREE.Scene();
+			</code>
+        <p>다음으로는 물체를 정의해야 합니다. 선을 그리기 위해서는 [page:LineBasicMaterial]나 [page:LineDashedMaterial]를 사용하면 됩니다.</p>
+        <code>
+//create a blue LineBasicMaterial
+const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );
+			</code>
+
+        <p>
+            그 다음에는 꼭짓점에 대한 기하학을 정의해야 합니다:
+        </p>
+
+        <code>
+const points = [];
+points.push( new THREE.Vector3( - 10, 0, 0 ) );
+points.push( new THREE.Vector3( 0, 10, 0 ) );
+points.push( new THREE.Vector3( 10, 0, 0 ) );
+
+const geometry = new THREE.BufferGeometry().setFromPoints( points );
+			</code>
+
+        <p>선은 연속된 꼭짓점 쌍 사이에 그려지고 첫 번재와 마지막 꼭짓점에는 그려지지 않습니다. (선은 닫혀있지 않습니다.)</p>
+
+        <p>이제 두 선과 물체를 위한 점이 생겼으니, 합쳐서 선을 만들 수 있습니다.</p>
+        <code>
+const line = new THREE.Line( geometry, material );
+			</code>
+        <p>이제 남은 것은 scene에 추가하고 [page:WebGLRenderer.render render]를 하는 것입니다.</p>
+
+        <code>
+scene.add( line );
+renderer.render( scene, camera );
+			</code>
+
+        <p>위로 향하고 있는 두 개의 파란 선으로 된 화살표를 확인할 수 있습니다.</p>
+    </div>
+</body>
+
+</html>

docs/manual/ko/introduction/FAQ.html

@@ -0,0 +1,54 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>[name]</h1>
+
+		<h2>어떤 3D 모델 포맷이 가장 잘 지원되나요?</h2>
+		<div>
+			<p>
+				불러오기 및 내보내기 용으로 추천되는 포맷은 glTF (GL Transmission Format)입니다. glTF는 런타임 에셋 딜리버리에 초점이 맞추어져 있기 때문에, 전송에 적합하고 로딩이 빠릅니다.
+			</p>
+			<p>
+				three.js 널리 쓰이는 포맷인 FBX, Collada 나 OBJ 도 지원합니다. 하지만 첫 프로젝트에서는 glTF 기반의 워크플로우로 작업해야 합니다. 더 자세한 내용은, [link:#manual/introduction/Loading-3D-models 3D 모델 로딩]을 참고하세요.
+			</p>
+		</div>
+
+		<h2>예제에 왜 meta viewport 태그가 있나요?</h2>
+		<div>
+				<code>&lt;meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"&gt;</code>
+
+				<p>이 태그들은 모바일 브라우저들의 뷰포트 크기와 확대정도를 조절합니다(페이지 내용이 뷰포트 영역과 다른 사이즈로 렌더링 된 경우).</p>
+
+				<p>[link:https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html Safari: Using the Viewport]</p>
+
+				<p>[link:https://developer.mozilla.org/en/Mobile/Viewport_meta_tag MDN: Using the viewport meta tag]</p>
+		</div>
+
+		<h2>화면 확대 정도가 리사이징 시에 유지될 수 있나요?</h2>
+		<p>
+			모든 오브젝트들이 카메라의 거리와 상관 없이, 화면 사이즈가 변경된다고 해도, 같은 크기로 보여지고 싶다고 가정합시다.
+
+			이 공식을 풀기 위한 핵심 방정식은 가시 높이와 거리와 관련된 아래 공식입니다.
+
+			<code>
+visible_height = 2 * Math.tan( ( Math.PI / 180 ) * camera.fov / 2 ) * distance_from_camera;
+			</code>
+            화면 높이를 특정 비율로 늘리면, 모든 가시 높이와 거리가 같은 비율로 증가해야 합니다.
+
+			이는 카메라 위치를 변경하는 것으로는 불가능합니다. 대신에 카메라 field-of-view를 변경해야합니다..
+			[link:http://jsfiddle.net/Q4Jpu/ 예제].
+		</p>
+
+		<h2>왜 오브젝트 일부가 안 보일까요?</h2>
+		<p>
+			이는 페이스 컬링 문제일 수 있습니다. 각 면들은 어느 방향이 어느 방향인지에 대한 정보를 가지고 있습니다. 그리고 컬링은 일반적으로 뒷편의 면을 제거해 버립니다. 이 문제가 의심된다면 물체의 면을 THREE.DoubleSide로 변경해 보세요.
+			<code>material.side = THREE.DoubleSide</code>
+		</p>
+	</body>
+</html>

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

@@ -0,0 +1,80 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>VR 컨텐츠를 만드는 방법[name]</h1>
+
+	<p>
+		이 가이드에서는 three.js를 통한 웹 기반 VR 앱의 기본 컴포넌트를 만드는 방법을 알려드리겠습니다.
+	</p>
+
+	<h2>작업 순서</h2>
+
+	<p>
+		먼저, [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/webxr/VRButton.js VRButton.js]
+		를 프로젝트에 불러옵니다.
+	</p>
+
+	<code>
+import { VRButton } from 'three/examples/jsm/webxr/VRButton.js';
+	</code>
+
+	<p>
+        *VRButton.createButton()*은 두 가지 중요한 일을 합니다: VR에서 활용이 가능한 버튼을 만듭니다. 그리고 유저가 버튼을 누르면
+        VR 세션을 실행시킵니다. 다음 코드를 삽입하기만 하면 됩니다.
+	</p>
+
+	<code>
+document.body.appendChild( VRButton.createButton( renderer ) );
+	</code>
+
+	<p>
+		다음으로, *WebGLRenderer* 인스턴스에게 XR 렌더링을 허용해줘야합니다.
+	</p>
+
+	<code>
+renderer.xr.enabled = true;
+	</code>
+
+	<p>
+        마지막으로, 자주 쓰이는 *window.requestAnimationFrame()* 기능을 활용할 수 없기 때문에, 애니메이션 루프를 수정해주어야 합니다. 
+        VR 프로젝트에서는 [page:WebGLRenderer.setAnimationLoop setAnimationLoop]를 사용합니다.
+		가장 간소화된 코드는 다음과 같습니다:
+	</p>
+
+	<code>
+renderer.setAnimationLoop( function () {
+
+	renderer.render( scene, camera );
+
+} );
+	</code>
+
+	<h2>다음 절차</h2>
+
+	<p>
+		실행을 위한 작업 절차와 관련된 공식 WebVR 예제를 확인하세요.<br /><br />
+
+		[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
+		[example:webxr_vr_cubes WebXR / VR / cubes]<br />
+		[example:webxr_vr_dragging WebXR / VR / dragging]<br />
+		[example:webxr_vr_lorenzattractor WebXR / VR / lorenzattractor]<br />
+		[example:webxr_vr_paint WebXR / VR / paint]<br />
+		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
+		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
+		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
+		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
+		[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
+		[example:webxr_vr_video WebXR / VR / video]
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>오브젝트를 폐기하는 방법([name])</h1>
+
+	<p>
+        애플리케이션에서 성능을 개선하고 메모리 누수를 방지하기 위한 중요한 한 가지는 사용되지 않는 라이브러리 엔티티를 폐기하는 것입니다.
+        *three.js* 유형의 인스턴스는 생성될 때마다 일정량의 메모리를 할당하게 됩니다. 하지만 *three.js*는 특정 개체에 대해 기하학적 구조나 소재 WebGL 관련 물체(예: 버퍼 또는 쉐이더 프로그램)의 렌더링에 필요한 것입니다. 
+        이러한 오브젝트들은 자동으로 폐기되지 않는다는 점을 주의하세요. 대신, 애플리케이션에서는 메모리 자원을 확보하기 위해 특별한 API를 사용해야 합니다.
+        이 가이드에서는 이 API의 사용 방법과 이와 관련해서 어떤 오브젝트가 있는지에 대한 간략한 설명을 제공해 드립니다.
+	</p>
+
+	<h2>기하학적 물체</h2>
+
+	<p>
+        기하학적 물체는 속성 집합으로 정의된 꼭짓점 정보를 표시하는데, *three.js*는 속성마다 하나의 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer] 유형의 대상을 만들어 내부에 저장합니다.
+        이러한 엔티티는 [page:BufferGeometry.dispose]를 호출할 때만 폐기됩니다.
+        만약 애플리케이션에서 기하학을 더이상 사용하지 않는다면, 이 방법을 실행하여 모든 관련 자원을 폐기하세요.
+	</p>
+
+	<h2>소재</h2>
+
+	<p>
+        소재는 물체가 어떻게 렌더링되는지를 정의합니다. *three.js*는 소재에 정의된 정보를 사용하여 렌더링을 위한 하나의 셰이더 프로그램을 구축합니다.
+        셰이더 프로그램은 해당 소재가 폐기된 후에만 삭제할 수 있습니다. 성능상의 이유로 *three.js*는 가능하다면 활용 가능한 셰이더 프로그램을 재사용하게 되어 있습니다. 따라서 셰이더 프로그램은 모든 관련된 소재들이 사라진 후에야 삭제됩니다.
+        [page:Material.dispose]() 를 실행함으로써 소재를 폐기할 수 있습니다.
+	</p>
+
+	<h2>텍스쳐</h2>
+
+	<p>
+        소재의 폐기는 텍스쳐에 영향을 미치지 않습니다. 이들은 분리되어 있어 하나의 텍스쳐를 여러 소재로 동시에 사용할 수 있습니다.
+        [page:Texture] 인스턴스를 만들 때마다 three.js는 내부에서 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture] 인스턴스를 만듭니다.
+        buffer와 비슷하게, 이 오브젝트는 [page:Texture.dispose]() 호출로만 삭제가 가능합니다.
+	</p>
+
+	<h2>렌더링 대상</h2>
+
+	<p>
+        [page:WebGLRenderTarget] 타입의 오브젝트는 [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]의 인스턴스가 할당되어 있을 뿐만 아니라,
+        [link: https://developer.mozilla.org/en-US/docs/Web/API/WebGLFramebuffer WebGLFramebuffer]와 [link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderbuffer WebGLRenderbuffer] 도 할당되어, 
+        커스텀 렌더링 목표를 실체화합니다. 이러한 오브젝트는 [page:WebGLRenderTarget.dispose]()를 실행해야만 폐기할 수 있습니다.
+	</p>
+
+	<h2>그밖의 것들</h2>
+
+	<p>
+        컨트롤러나 후기 처리 프로세스처럼 *dispose()* 메서드가 제공되어 내부 이벤트리스너나 렌더링 대상을 폐기하는 examples 폴더에서 가져온 것들이 있습니다.
+        일반적으로 API나 파일을 열람하고 *dispose()* 를 확인하는 것이 좋습니다. 만약 이 메서드가 존재한다면 당연히 그 메서드를 폐기 시에 사용해야 합니다.e it when cleaning things up.
+	</p>
+
+	<h2>FAQ</h2>
+
+	<h3>*three.js*는 왜 자동으로 오브젝트를 폐기 못하나요?</h3>
+
+	<p>
+        이 문제가 커뮤니티에서 여러 차례 제기돼 온 만큼 확실한 대답을 해 드려야겠습니다. 사실, *three.js*는 사용자가 만든 엔티티(예를 들어 기하체 또는 소재)의 라이프사이클이나 역할 범위를 알지 못하며, 이는 애플리케이션의 책임입니다.
+        예를 들어, 만약 하나의 소재가 현재 렌더링에 사용되고 있지 않더라도, 바로 다음 프레임에 필수적인 소재일 수 있을 것입니다. 그래서 만약 애플리케이션에서 특정 오브젝트가 삭제되어도 된다고 하면,
+        해당하는 *dispose()* 메서드를 통해 엔진에 알려줘야 합니다.
+	</p>
+
+	<h3>화면에서 mesh를 지우는 것도 geometry와 material을 폐기시키나요?</h3>
+
+	<p>
+		아니요, *dispose()*를 통해 명시적으로 geometry와 material을 폐기해야합니다. geometry와 material은 mesh와 마찬가지로 3D 오브젝트에서 활용할 수 있다는 점을 명심하세요.
+	</p>
+
+	<h3>*three.js*에서 캐시화된 오브젝트의 수를 알 수 있나요?</h3>
+
+	<p>
+        네, 렌더러의 그래빅 보드와 렌더링 프로세스의 통계 정보를 담고 있는 특수 속성인 [page: WebGLRenderer.info]를 통해 확인할 수 있습니다. 
+        다른 것 보다도, 이를 통해 내부적으로 많은 텍스쳐와 기하학, 셰이더 프로그램이 저장되어 있다는 것을 알 수 있습니다.
+        만약 애플리케이션에서 성능 문제를 발견했다면, 바로 이 속성을 조절하여 쉽게 메모리 누출을 확인할 수 있습니다.
+	</p>
+
+	<h3>이미지가 아직 로딩이 안 됐는데 텍스쳐에서 *dispose()*를 해버리면 어떻게 되나요?</h3>
+
+	<p>
+		텍스쳐와 관련된 내부 자원은 이미지가 완전히 로딩됐을때밖에 할당이 되지 않습니다. 만약 이미지 로딩 전에 텍스쳐를 폐기해버렸다면,
+		아무 일도 일어나지 않을 것입니다. 아무런 자원도 할당되지 않았고 지울 것도 없기 때문입니다.
+	</p>
+
+	<h3>*dispose()*를 하고 나서 나중에 다시 각각의 오브젝트를 사용하면 어떻게 되나요?</h3>
+
+	<p>
+        삭제된 내부 자원이 엔진에서 다시 생성될 것입니다. 런타임 에러는 발생하지 않겠지만 프레임에 부정적인 영향을 미치는 것을 확인할 수 있을 것이고 
+        특히 셰이더 프로그램을 컴파일할 때 더 두드러질 것입니다.
+	</p>
+
+	<h3>*three.js* 오브젝트를 앱에서 어떻게 관리해야 할까요? 언제 폐기해야되는지 어떻게 알죠?</h3>
+
+	<p>
+        일반적으로 이 점에 대한 명확한 해답은 없습니다. *dispose()*는 구체적인 사용 방법에 따라 적절히 활용하는 방법이 좌우됩니다. 굳이 오브젝트를 자꾸 폐기할 필요는 없다는 것을 기억해 두세요.
+        다양한 레벨로 구성된 게임이 좋은 예가 될 수 있을 것입니다. 레벨이 바뀌면, 폐기를 할 때입니다. 애플리케이션은 오래된 화면을 지나가면서 오래된 소재, 기하학, 텍스쳐를 모두 폐기할 수 있습니다.
+        앞의 장에서 언급한 바와 같이 만약 여전히 사용하고 있는 오브젝트를 폐기해도 런타임 에러를 만들지는 않을 것입니다. 단일 프레임에서 퍼포먼스가 떨어지는 정도가 가장 안 좋은 정도일 것입니다.
+	</p>
+
+	<h2>dispose() 사용법 예제</h2>
+
+	<p>
+		[example:webgl_test_memory WebGL / test / memory]<br />
+		[example:webgl_test_memory2 WebGL / test / memory2]<br />
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <base href="../../../" />
+    <script src="page.js"></script>
+    <link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+    <h1>로컬 환경에서 구동 방법([name])</h1>
+    <p>
+        만약 procedural geometries 만을 사용하고 다른 텍스쳐를 불러오지 않았다면, 웹페이지는 파일 매니저에서 HTML파일을 더블클릭하는 즉시 작업을 시작할 것이고,
+        브라우저에서 바로 작업되는 화면이 나타날 것입니다. (주소창에 <em>file:///yourFile.html</em> 를 치면 확인이 될 것입니다.).
+    </p>
+
+    <h2>외부 파일에서 컨텐츠 불러오기</h2>
+    <div>
+        <p>
+            외부 파일에서 모델이나 텍스쳐를 불러올 경우, 브라우저의' [link:http://en.wikipedia.org/wiki/Same_origin_policy same origin policy]
+            보안 제한때문에 파일 불러오기가 실패가 될 것입니다.
+        </p>
+
+        <p>이 문제의 해결법은 두 가지가 있습니다.</p>
+
+        <ol>
+            <li>
+                브라우저에서 로컬 파일의 보안설정을 변경합니다. 이를 통해<code>file:///yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
+            </li>
+            <li>
+                파일을 로컬 웹 서버에서 돌리는 방법입니다. <code>http://localhost/yourFile.html</code>로 들어가 확인할 수 있을 것입니다.
+            </li>
+        </ol>
+
+        <p>
+            1번 방법을 쓸 때, 일반 웹서핑을 같은 방식으로 쓰게되면 보안적으로 취약해지는 점을 인지해야 합니다. 안전한 개발을 위해
+            각각의 브라우저 프로필, 바로가기를 만드는 것도 좋습니다. 차례대로 방법을 알아봅시다.
+        </p>
+    </div>
+
+
+    <h2>로컬 서버에서 실행</h2>
+    <div>
+        <p>
+            많은 프로그래밍 언어는 기본적으로 간단한 HTTP 서버가 설치되어 있습니다. [link:https://www.apache.org/ Apache]나 [link:https://nginx.org
+            NGINX]같은 프로덕션용 정도로 갖추어져 있지는 않지만, 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]는 GUI 환경의 간단한 서버입니다.
+            </p>
+        </div>
+
+        <h3>Node.js http-server</h3>
+        <div>
+            <p>Node.js에는 간단한 HTTP 서버 패키지가 있습니다. 설치 방법:</p>
+            <code>npm install http-server -g</code>
+
+            <p>실행 (로컬 저장소에서):</p>
+            <code>http-server . -p 8000</code>
+        </div>
+
+        <h3>Python 서버</h3>
+        <div>
+            <p>
+                [link:http://python.org/ Python]이 설치되어 있다면, 커맨드라인으로 충분히 실행할 수 있습니다. (작업 디렉토리 내에서):
+            </p>
+            <code>
+//Python 2.x
+python -m SimpleHTTPServer
+
+//Python 3.x
+python -m http.server
+				</code>
+
+            <p>이 코드는 현재 디렉토리의 파일들을 localhost 8000번 포트로 내보내 줄 것입니다. 주소 예시는 다음과 같습니다.
+                </p>
+
+            <code>http://localhost:8000/</code>
+        </div>
+
+        <h3>Ruby 서버</h3>
+        <div>
+            <p>Ruby가 설치되어 있다면, 아래 코드를 사용하면 같은 결과를 확인할 수 있습니다.</p>
+            <code>
+ruby -r webrick -e "s = WEBrick::HTTPServer.new(:Port => 8000, :DocumentRoot => Dir.pwd); trap('INT') { s.shutdown }; s.start"
+				</code>
+        </div>
+
+        <h3>PHP 서버</h3>
+        <div>
+            <p>PHP도 내장된 웹서버가 있어, php 5.4.0부터 다음과 같이 활용 가능합니다:</p>
+            <code>php -S localhost:8000</code>
+        </div>
+
+        <h3>Lighttpd</h3>
+        <div>
+            <p>
+                Lighttpd는 일반적인 목적의 아주 가벼운 웹서버입니다. 여기서에는 Homebrew를 통해 OSX에 설치하는 예를 소개해 보겠습니다.
+                다른 서버들과는 달리, lighttpd 프로덕션 서버로 사용될 모든 것이 갖추어져 있습니다.
+            </p>
+
+            <ol>
+                <li>
+                    homebrew를 통해 설치합니다.
+                    <code>brew install lighttpd</code>
+                </li>
+                <li>
+                    웹서버에서 실행하고자 하는 디렉토리에 lighttpd.conf라는 설정파일을 만듭니다.
+                    예제는 [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration 여기]에서 확인할 수 있습니다.
+                </li>
+                <li>
+                    설정 파일에서, server.document-root를 서버로 쓰고자 하는 디렉토리로 설정합니다.
+                </li>
+                <li>
+                    다음과 같이 실행합니다.
+                    <code>lighttpd -f lighttpd.conf</code>
+                </li>
+                <li>
+                    http://localhost:3000/ 로 들어가면 선택한 디렉토리의 파일들을 보여줄 것입니다.
+                </li>
+            </ol>
+        </div>
+        <h3>IIS</h3>
+        <div>
+            <p>마이크로소프트 IIS를 웹서버로 사용한다면, 실행하기에 앞서 .fbx 확장자와 관련된 MIME 타입 설정을 추가해야 합니다.</p>
+            <code>File name extension: fbx        MIME Type: text/plain</code>
+            <p>기본적으로 IIS는 .fbx, .obj 파일의 다운로드를 막아 놓았습니다. IIS에서 이러한 파일들이 다운로드 될 수 있도록 설정해야 합니다.</p>
+        </div>
+        <p>
+            다른 간단한 방법으로는 Stack Overflow의 [link:http://stackoverflow.com/q/12905426/24874 이곳에서 토론]을 확인해 보세요.
+        </p>
+    </div>
+
+</body>
+
+</html>

docs/manual/ko/introduction/How-to-update-things.html

@@ -0,0 +1,249 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>오브젝트를 업데이트하는 방법([name])</h1>
+		<div>
+			<p>모든 오브젝트들은 기본적으로 자동으로 장면에 추가됐을 때 자신들의 행렬구조를 업데이트합니다.</p>
+			<code>
+const object = new THREE.Object3D();
+scene.add( object );
+			</code>
+			혹은 다른 오브젝트의 자식으로 장면에 추가될 때도 마찬가지입니다.
+			<code>
+const object1 = new THREE.Object3D();
+const object2 = new THREE.Object3D();
+
+object1.add( object2 );
+scene.add( object1 ); //object1과 object2는 자동으로 자신들의 행렬구조를 업데이트할 것입니다.
+			</code>
+		</div>
+
+		<p>하지만 오브젝트가 고정되어야 한다면, 이 설정을 풀고 수동으로 행렬구조를 갱신할 수 있습니다.</p>
+
+		<code>
+object.matrixAutoUpdate  = false;
+object.updateMatrix();
+		</code>
+
+		<h2>BufferGeometry</h2>
+		<div>
+			<p>
+				BufferGeometries는 [page:BufferAttribute buffers]에 다양한 정보(꼭짓점 위치, 면 순서, 법선, 색깔,
+				UV, 모든 커스텀 속성들)를 저장합니다. - 이는  
+				[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays typed arrays]라는 의미입니다.
+				이는 기본 Geometries보다 빠르게 작동하지만, 그 대신 작업하기가 더 어렵습니다.
+			</p>
+			<p>
+                BufferGeometries를 업데이트 하는 것과 관련해서, buffers의 크기를 조절할 수 없다는 것을 이해하는 것이 가장 중요합니다.
+                (작업이 아주 어렵기 때문에, 새 geometry를 만드는 수준입니다).
+				그 대신에 buffers의 내용을 변경할 수 있습니다.
+			</p>
+			<p>
+				이는 곧 만약 BufferGeometry의 속성이 증가할 것이라고 예측이 된다면, 예를 들어 꼭짓점의 갯수라면, 
+				만들어질 수 있는 새로운 꼭짓점들을 담을 수 있는 충분한 buffer를 미리 준비해 놓아야 합니다.
+				물론 이는 당신이 사용할 BufferGeometry의 상한치가 있을 것이라는 뜻이기도 합니다 - 효율적으로 무한대로 확장되는 BufferGeometry를 만드는 방법은 없습니다.
+			</p>
+			<p>
+				렌더링 시점에 확장되는 선을 예로 들어보겠습니다. buffer에는 500 개의 꼭짓점을 할당하겠지만 처음에는 [page:BufferGeometry.drawRange]를 이용해 두 개만 그릴 것입니다..
+			</p>
+			<code>
+const MAX_POINTS = 500;
+
+// geometry
+const geometry = new THREE.BufferGeometry();
+
+// attributes
+const positions = new Float32Array( MAX_POINTS * 3 ); // 3 vertices per point
+geometry.setAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
+
+// draw range
+const drawCount = 2; // draw the first 2 points, only
+geometry.setDrawRange( 0, drawCount );
+
+// material
+const material = new THREE.LineBasicMaterial( { color: 0xff0000 } );
+
+// line
+const line = new THREE.Line( geometry,  material );
+scene.add( line );
+			</code>
+		 	<p>
+				그 다음, 아래와 같은 패턴으로 무작위로 선에 점을 생성해 줄 것입니다:
+			</p>
+			<code>
+const positions = line.geometry.attributes.position.array;
+
+let x, y, z, index;
+x = y = z = index = 0;
+
+for ( let i = 0, l = MAX_POINTS; i < l; i ++ ) {
+
+    positions[ index ++ ] = x;
+    positions[ index ++ ] = y;
+    positions[ index ++ ] = z;
+
+    x += ( Math.random() - 0.5 ) * 30;
+    y += ( Math.random() - 0.5 ) * 30;
+    z += ( Math.random() - 0.5 ) * 30;
+
+}
+			</code>
+			<p>
+				첫 렌더링 이후에 <em>점의 갯수</em>를 변경하고 싶다면, 다음과 같이 실행하세요:
+			</p>
+			<code>
+line.geometry.setDrawRange( 0, newValue );
+			</code>
+			<p>
+				첫 렌더링 이후에 position 데이터 수치를 변경하고 싶다면, needsUpdate 플래그를 다음과 같이 설정해야 합니다:
+			</p>
+			<code>
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
+			</code>
+
+			<p>
+				첫 렌더링 이후에 position 데이터 수치를 변경한다면, bounding volumes를 재계산해서 
+				다른 엔진의 절두체 컬링 혹은 헬퍼같은 특성들이 적절히 작동하도록 해야합니다.
+			</p>
+			<code>
+line.geometry.computeBoundingBox();
+line.geometry.computeBoundingSphere();
+			</code>
+
+			<p>
+				[link:http://jsfiddle.net/w67tzfhx/ Here is a fiddle] showing an animated line which you can adapt to your use case.
+			</p>
+
+			<h3>Examples</h3>
+
+			<p>
+				[example:webgl_custom_attributes WebGL / custom / attributes]<br />
+				[example:webgl_buffergeometry_custom_attributes_particles WebGL / buffergeometry / custom / attributes / particles]
+			</p>
+
+		</div>
+
+		<h2>Geometry</h2>
+		<div>
+			<p>
+				아래의 플래그는 다양한 geometry 속성의 업데이트를 제어합니다. 업데이트가 필요한 속성의 플래그만 사용한다면 업데이트에 자원이 비효율적으로 사용될 것입니다. 
+				한 번 buffers가 변경되면, 이 플래그들은 자동으로 false로 리셋될 것입니다. buffers의 업데이트 상태를 유지하고 싶으면 항상 true값으로 설정해주어야 합니다.
+				이 점은 [page:Geometry]에만 적용되고 [page:BufferGeometry]에는 적용되지 않는다는 점도 주의해주세요.
+			</p>
+			<code>
+const geometry = new THREE.Geometry();
+geometry.verticesNeedUpdate = true;
+geometry.elementsNeedUpdate = true;
+geometry.morphTargetsNeedUpdate = true;
+geometry.uvsNeedUpdate = true;
+geometry.normalsNeedUpdate = true;
+geometry.colorsNeedUpdate = true;
+geometry.tangentsNeedUpdate = true;
+			</code>
+
+			<p>
+				[link:https://github.com/mrdoob/three.js/releases/tag/r66 r66] 이전 버전에서는 meshes
+				에 추가적으로 <em>dynamic</em> 플래그가 true여야 합니다. (내부 typed arrays 유지를 위해):
+			</p>
+
+			<code>
+// removed after r66
+geometry.dynamic = true;
+			</code>
+
+		</div>
+
+		<h2>물체(Materials)</h2>
+		<div>
+			<p>모든 uniforms 값들은 자유롭게 변경이 가능합니다. (예를 들면 colors, textures, opacity, etc), 값들은 shader에 매 프레임 전송됩니다.</p>
+
+			<p>GLstate와 관련된 파라미터들 또한 언제나 변경 가능합니다.(depthTest, blending, polygonOffset, 등).</p>
+
+			<p>아래 속성들은 런타임에서 쉽게 변경할 수 없습니다. (적어도 물체가 한 번 렌더링 된 이후):</p>
+			<ul>
+				<li>uniforms의 갯수와 타입</li>
+				<li>아래 항목들의 사용 혹은 비사용 여부
+					<ul>
+						<li>texture</li>
+						<li>fog</li>
+						<li>vertex colors</li>
+						<li>skinning</li>
+						<li>morphing</li>
+						<li>shadow map</li>
+						<li>alpha test</li>
+					</ul>
+				</li>
+			</ul>
+
+			<p>이러한 것들은 새로운 shader 프로그램 생성이 필요합니다. 다음과 같이 설정합니다.</p>
+			<code>material.needsUpdate = true</code>
+
+			<p>이 기능은 매우 느리고 프레임이 끊겨보일 수 있다는 점(특히 Windows처럼, shader 편집이 DirectX에서 OpenGL보다 느린 경우)을 명심해주세요.</p>
+
+			<p>좀 더 부드럽게 하기 위해서는, 값이 0인 빛, 흰색 텍스쳐, 밀도가 0인 안개 등의 "가상" 값을 가지도록 특성들을 변경해 시뮬레이션해 볼 수 있습니다.</p>
+
+			<p>기하학 블록에 사용되는 물체를 자유롭게 바꿀 수 있지만, 오브젝트를 어떻게 블록으로 나눌 지에 대한 점은 변경할 수 없습니다(물체의 면에 따라). </p>
+
+			<h3>런타임 중에 물체의 서로 다른 설정을 해야 할 때:</h3>
+			<p>물체와 블록의 수가 적다면, 오브젝트를 미리 분리해놓을 수 있습니다. (예를 들면 사람에 있어서 머리/얼굴/상의/바지, 자동차에 있어서 앞부분/옆부분/윗부분/유리/타이어/내부). </p>
+
+			<p>수가 많다면 (예를 들어 모든 얼굴들이 조금씩 다른 경우), 다른 해결 방법을 생각해봐야 하는데, 속성/텍스쳐를 사용하여 얼굴마다 다른 형태를 입히는 방법 등이 있을 것입니다..</p>
+
+			<h3>예제</h3>
+			<p>
+				[example:webgl_materials_car WebGL / materials / car]<br />
+				[example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+			</p>
+		</div>
+
+
+		<h2>텍스쳐</h2>
+		<div>
+			<p>사진, 그림, 영상 및 데이터 텍스쳐를 변경했다면 다음과 같은 플래스 설정이 필요합니다:</p>
+			<code>
+				texture.needsUpdate = true;
+			</code>
+			<p>대상이 자동으로 렌더링되도록 업데이트하기.</p>
+
+			<h3>예제</h3>
+			<p>
+				[example:webgl_materials_video WebGL / materials / video]<br />
+				[example:webgl_rtt WebGL / rtt]
+			</p>
+
+		</div>
+
+
+		<h2>카메라</h2>
+		<div>
+			<p>카메리 위치와 대상은 자동으로 업데이트됩니다. 만약 변경을 원한다면</p>
+			<ul>
+				<li>
+					fov
+				</li>
+				<li>
+					aspect
+				</li>
+				<li>
+					near
+				</li>
+				<li>
+					far
+				</li>
+			</ul>
+			<p>
+				이후에 투영되는 행렬구조를 다시 계산하면 됩니다.
+			</p>
+			<code>
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+			</code>
+		</div>
+	</body>
+</html>

docs/manual/ko/introduction/How-to-use-post-processing.html

@@ -0,0 +1,110 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>후처리 사용 방법(How to use post-processing)</h1>
+
+		<p>
+            여러 three.js 애플리케이션들에서는 3차원 오브젝트를 직접 화면에 렌더링하고 있습니다. 하지만 가끔, DOF, 블룸 필름 그레인 등의 
+            다양한 그래픽 효과나 다양한 안티 얼레이징 타입을 사용하고 싶을 수도 있습니다. 후처리 방식은 이런 효과를 위해 널리 쓰이는 방법입니다.
+            먼저, 비디오 카드의 메모리 버퍼에 해당되는 대상을 렌더링하기 위해 장면이 그려집니다. 그 다음 혹은 화면이 최종적으로 렌더링되기 전에 
+            하나 또는 여러 개의 후처리를 통해 필터와 효과를 이미지 버퍼에 적용합니다.
+		</p>
+		<p>
+			three.js는 완벽한 후처리 솔루션인 [page:EffectComposer]를 통해 작업 환경을 구현합니다.
+		</p>
+
+		<h2>작업 절차</h2>
+
+		<p>
+            먼저 해야 할 일은 examples 디렉토리의 모든 필요한 파일들을 불러오는 것입니다. three.js의 공식 가이드 
+            [link:https://www.npmjs.com/package/three npm package]를 따르고 있다고 가정합니다. 
+            기본 데모 활용에는 아래와 같은 파일들이 필요합니다.
+		</p>
+
+		<code>
+		import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';
+		import { RenderPass } from 'three/examples/jsm/postprocessing/RenderPass.js';
+		import { GlitchPass } from 'three/examples/jsm/postprocessing/GlitchPass.js';
+		</code>
+
+		<p>
+			모든 파일들을 잘 불러왓다면, composer를 만들어 [page:WebGLRenderer]인스턴스를 넘겨줍니다.
+		</p>
+
+		<code>
+		const composer = new EffectComposer( renderer );
+		</code>
+
+		<p>
+            composer를 사용할 때, 앱의 애니메이션 루프를 변경해주는 것이 중요합니다. [page:WebGLRenderer]의 render 메서드를 호출하지 말고, 
+            이제부터는 각각의 [page:EffectComposer]에 대응되는 렌더링 방법을 사용합니다..
+		</p>
+
+		<code>
+		function animate() {
+
+			requestAnimationFrame( animate );
+
+			composer.render();
+
+		}
+		</code>
+
+		<p>
+            composer는 이제 준비가 다 되었으니, 후처리 과정 연결을 설정할 수 있습니다. 
+            이러한 과정은 앱을 만드는 최종 화면 출력을 담당하며, 첨부/삽입한 순서대로 처리합니다.
+            이 예제에서 먼저 실행한 것은 *RenderPass* 인스턴스이고 그 다음이 *GlitchPass* 입니다.
+            마지막 과정이 끝나면 자동으로 화면에 렌더링됩니다. 패스 설정은 아래와 같습니다.
+		</p>
+
+		<code>
+		const renderPass = new RenderPass( scene, camera );
+		composer.addPass( renderPass );
+
+		const glitchPass = new GlitchPass();
+		composer.addPass( glitchPass );
+		</code>
+
+		<p>
+			*RenderPass*는 일반적으로 맨 위에 위치해서 렌더링된 장면을 후처리의 기본 입력 장면으로 활용합니다. 예제의 경우,
+            *GlitchPass*는 이 이미지 데이터에 거친 글리치 효과를 넣어줍니다. [link:https://threejs.org/examples/webgl_postprocessing_glitch live example]에서 작동을
+            확인해보세요.
+		</p>
+
+		<h2>기본 내장 후처리방식</h2>
+
+		<p>
+			엔진에서 제공하는 여러 내장 후처리 방식을 활용할 수 있습니다. 이 방식들은
+			[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing] 디렉토리에 있습니다.
+		</p>
+
+		<h2>커스텀 방식</h2>
+
+		<p>
+            본인만의 후처리 셰이더를 작성하고 후처리 절차 안에 넣고 싶을 때가 있습니다. 이 때에는, 
+            *ShaderPass*를 활용합니다. 파일과 커스텀 셰이더를 불러오고 다음 코드를 통해 설정합니다.
+		</p>
+
+		<code>
+		import { ShaderPass } from 'three/examples/jsm/postprocessing/ShaderPass.js';
+		import { LuminosityShader } from 'three/examples/jsm/shaders/LuminosityShader.js';
+
+		// later in your init routine
+
+		const luminosityPass = new ShaderPass( LuminosityShader );
+		composer.addPass( luminosityPass );
+		</code>
+
+		<p>
+            [link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/shaders/CopyShader.js CopyShader]에서 처음 자신만의 셰이더를 만들기에 적합한 파일을 제공하고 있습니다. 
+            *CopyShader*는 [page:EffectComposer]의 쓰기 리드 버퍼에 아무 효과를 적용하지 않은 채 이미지 컨텐츠를 복사하기만 합니다.
+		</p>
+
+	</body>
+</html>

docs/manual/ko/introduction/Installation.html

@@ -0,0 +1,186 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+    <meta charset="utf-8">
+    <base href="../../../" />
+    <script src="page.js"></script>
+    <link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+    <h1>설치([name])</h1>
+
+    <p>
+        three.js는 [link:https://www.npmjs.com/ npm]을 포함한 빌드 툴에서 설치가 가능하고, CDN이나 static 호스팅으로 빠르게 사용이 가능합니다. 대부분의 경우 npm을
+        통한 설치가 가장 좋은 선택입니다.
+    </p>
+
+    <p>
+        어떤 방식을 선택하든, 같은 버전의 라이브러리에서 모든 파일을 동일하게 불러와야 합니다. 여러 소스에서 파일을 혼합해 가져오면 코드 중복이 일어나거나 비정상적으로 앱이 종료될 수 있습니다.
+    </p>
+
+    <p>
+        three.js의 모든 메서드들은 ES modules (see [link:https://eloquentjavascript.net/10_modules.html#h_hF2FmOVxw7 Eloquent
+        JavaScript: ECMAScript Modules])에 기반하고 있으며, 마지막 프로젝트에 필요한 부분만 불러오도록 할 것입니다.
+    </p>
+
+    <h2>npm으로 설치하기</h2>
+
+    <p>
+        [link:https://www.npmjs.com/package/three three] npm 모듈을 설치하려면, 프로젝트 폴더의 터미널을 열고 다음을 실행합니다.
+    </p>
+
+    <code>
+		npm install --save three
+		</code>
+
+    <p>
+        패키지가 다운로드 및 설치 될 것이며, 다음과 같이 코드에서 불러올 수 있을 것입니다.
+    </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>
+        npm을 통해 설치할 때, 아마 대부분의 경우 모든 패키지를 한 자바스크립트 파일에 결합시켜주는
+        [link:https://eloquentjavascript.net/10_modules.html#h_zWTXAU93DC bundling tool]을 사용할텐데, three.js는 모든 자바스크립트
+        번들러에 호환되지만, 가장 널리 쓰이는 것은 [link:https://webpack.js.org/ webpack]일 것입니다.
+    </p>
+
+    <p>
+        모든 속성들이 <em>three</em> 모듈에서 바로 불러와지는 것은 아닙니다. ("bare import"라고도 불리는). 다른 자주 쓰이는 라이브러리들, controls, loaders, post-processing effects 같은 것들은
+[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 의 하위폴더에서 불러와야 합니다. 더 자세한 내용을 알아보려면, 아래 <em>내용</em>을 참고하세요.
+    </p>
+
+    <p>
+    npm 모듈 [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent
+        JavaScript: Installing with npm]에 대해 더 알아보기.
+    </p>
+
+    <h2>static hosting 및 CDN을 통한 설치</h2>
+
+    <p>
+        three.js 라이브러리는 빌드 시스템 없이도, 본인의 웹서버나 기존의 CDN에 파일을 올리지 않고도 사용할 수 있습니다. three.js 라이브러리는 ES 모듈에 기반하고있기 때문에, 모든 스크립트는 참조할 때 아래처럼 <em>type="module"</em>을 사용해야합니다.
+    </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>
+        모든 속성들이 <em>build/three.module.js</em> 모듈을 통해 접근하는 것은 아닙니다.  다른 자주 쓰이는 라이브러리들, controls, loaders, post-processing effects 같은 것들은
+        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 의 하위폴더에서 불러와야 합니다. 더 자세한 내용을 알아보려면, 아래 <em>예제</em>를 참고하세요.
+    </p>
+
+
+    <h2>예제</h2>
+
+    <p>
+        three.js는 3D 엔진의 주요 컴포넌트들에 초점을 두고 있습니다. 다른 여러 유용한 컴포넌트들 —
+        controls, loaders, post-processing effects — 은
+        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] 폴더에 있습니다. 이들은 "예제"로 불리는데, 그대로 사용할 수도 있고, 
+        재조합 및 커스터마이징이 가능하기 때문입니다. 이 컴포넌트들은 언제나 코어 라이브러리와 상응하게 이루어져있으며, 이는 다른 비슷한 서드파티 패키지들이 다양한 사람들에 의해 유지보수되고, 최신버전 반영이 안되는 점과는 대비되는 점입니다.
+    </p>
+
+    <p>
+        예제들은 각각 따로 <em>설치할</em> 필요는 없지만, 각각 <em>import</em>를 해 주어야 합니다. 
+        three.js가 npm을 통해 설치되었다면, [page:OrbitControls] 컴포넌트를 다음과 같이 불러올 수 있습니다.
+    </p>
+
+
+    <code>
+		import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
+
+		const controls = new OrbitControls();
+		</code>
+
+    <p>
+        three.js를 CDN으로 설치했다면, 다른 컴포넌트들도 동일한 CDN에서 설치 가능합니다.
+    </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>
+        모든 파일들의 버전을 동일하게 맞추는것이 무엇보다 중요합니다. 서로 다른 버전에서 import를 하거나, three.js 라이브러리 자체가 아닌 다른 버전의 예제를 사용하지 마세요.
+    </p>
+
+    <h2>양립성</h2>
+
+    <h3>CommonJS 불러오기</h3>
+
+    <p>
+        대부분의 자바스크립트 번들러는 이제 ES 모듈을 기본적으로 지원하지만, 오래된 빌드 도구들은 그렇지 않을 수 있습니다. 
+        이 경우에, 번들러에 ES 모듈을 인식할 수 있도록 설정해줄 수 있습니다. 예를들어 [link:http://browserify.org/
+        Browserify] 는 [link:https://github.com/babel/babelify babelify] 플러그인을 불러오기만 하면 됩니다.
+    </p>
+
+    <h3>maps 불러오기</h3>
+
+    <p>
+        npm을 통해 설치하는 경우, 호스팅 및 CDN으로 설치했을 때와 import 경로가 다릅니다. 이 점은 양쪽의 사용자 모두에게 불편한 문제가 될 것이라는 점을 알고 있습니다.
+        빌드 도구나 번들러를 사용하는 개발자들은 상대경로보다 단순한 패키지 구분자(ex: 'three')로 사용하기를 선호하지만 <em>examples/</em> 폴더의 파일들은
+        <em>three.module.js</em>에 상대 경로를 사용하기 때문에 예상을 빗나가게 됩니다. 빌드 도구를 사용하지 않는 사람들 — 빠른 프로토타입 제작, 학습용도, 개인적 취향 — 도 마찬가지로 이러한 상대 경로를 싫어할 텐데, 
+        특정 폴더 구조가 필요하고, 전역 <em>THREE.*</em>를 사용하는 것보다 엄격하기 때문입니다.
+    </p>
+
+    <p>
+        [link:https://github.com/WICG/import-maps import maps] 이 후에 활발하게 지원된다면 이러한 상대 경로들을 npm 패키지 이름, 'three'처럼 단순한 패키지 식별자로 변경할 예정입니다. 
+        이는 npm 패키지에서 주로 쓰이는 경로 작성법과 일치하고, 두 사용자군 모두에게 파일을 불러오는 데에 동일한 코드를 사용할 수 있게 해 줄 것입니다. 
+        빌드 도구를 사용하지 않는 것을 선호하는 사용자들에게도, 간단한 JSON 맵핑을 통해 CDN이나 직접 파일 폴더에서 불러오는 것을 가능하게 해 줄 것입니다. 
+        실험적 방법으로, [link:https://glitch.com/edit/#!/three-import-map?path=index.html import map
+        예제]처럼 map polyfill과 함께 import 해서 더 간단하게 사용해볼 수도 있습니다. 
+    </p>
+
+    <h3>Node.js</h3>
+
+    <p>
+        three.js 를 [link:https://eloquentjavascript.net/20_node.html Node.js]에서 사용하는기에는 어려움이 있는데, 두 가지 이유가 있습니다.
+    </p>
+
+    <p>
+        첫 번째로, three.js는 웹을 목적으로 만들어졌기때문에, Node.js에서 항상 활용 가능하다고 보증할 수 없는 브라우저와 DOM API에 의존하고 있는 까닭입니다.
+        이러한 문제들은 shims를 통해 [link:https://github.com/stackgl/headless-gl
+        headless-gl]처럼 해결하거나, [page:TextureLoader] 같은 컴포넌트를 커스터마이징 해서 해결 가능합니다. 다른 DOM API는 관련된 코드가 더 복잡하게 연관되어 있어, 수정하기 더 까다롭습니다.
+        Node.js 지원을 향상시키기 위한 더 간단하고, 유지보수 가능한 pull 요청은 언제든지 환영이지만, 본인의 작업을 위한 issue 생성을 더 권장합니다.
+    </p>
+
+    <p>
+        둘째로, Node.js의 ES 모듈 지원은 ... 다소 복잡합니다. Node.js v12에서, 코어 라이브러리는 CommonJS 모듈로, <em>require('three')</em>와 같이 사용 가능합니다.
+        하지만, 대부분의 <em>examples/jsm</em> 안의 예제 컴포넌트들은 불가능합니다. Node.js 향후 버전에서는 이게 해결될 수도 있겠지만, 그 전까지는
+        [link:https://github.com/standard-things/esm esm]처럼 사용해 Node.js 앱이 ES 모듈을 인식할 수 있도록 해줘야 합니다.
+    </p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="ko">
+
+<head>
+	<meta charset="utf-8">
+	<base href="../../../" />
+	<script src="page.js"></script>
+	<link type="text/css" rel="stylesheet" href="page.css" />
+</head>
+
+<body>
+	<h1>3D 모델 불러오기([name])</h1>
+
+	<p>
+		3D 모델들은 각자 다양한 목적, 적합한 특성, 다양한 복잡성을 가지고 있는 수백개의 파일 포맷으로 존재할 수 있습니다.
+
+		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
+		three.js는 다양한 로더를 지원하지만</a>, 알맞는 포맷과 워크플로우를 선택하는 것이 시간을 아끼고 이후에 생길 문제를 방지할 수 있는 방법입니다.
+		몇몇 포맷들은 작업하기 어렵거나, 실시간으로 반영하기 어렵거나, 단순히 지금 시점에 전부 지원을 안하기도 합니다.
+	</p>
+
+	<p>
+		여기에서는 대부분의 사용자들에게 추천할만 한 워크플로우와, 막혔을때의 해결법을 알려드리고자 합니다.
+	</p>
+
+	<h2>시작하기에 앞서</h2>
+
+	<p>
+		로컬 서버를 돌리는 것이 처음이라면, 
+		[link:#manual/introduction/How-to-run-things-locally how to run things locally]
+		를 먼저 확인하세요. 3D 모델의 대부분의 에러는 파일을 알맞게 호이스팅하는 것으로 해결할 수 있습니다.
+	</p>
+
+	<h2>추천 워크플로우</h2>
+
+	<p>
+		가능하다면, glTF(GL Transmission Format)를 사용하는 것을 추천드립니다. 
+		<small>.GLB</small> 와 <small>.GLTF</small> 버전 포맷 모두 잘 지원될 것입니다.
+		glTF는 런타임 자원 효율에 초점을 맞추고 있기 때문에 로딩을 빠르고 정확하게 할 수 있습니다.
+		속성으로는 meshes, materials, textures, skins, skeletons, morph targets, animations, lights, 그리고
+		cameras 가 있습니다.
+	</p>
+
+	<p>
+		퍼블릭 도메인 glTF 파일은 
+		<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">
+		Sketchfab</a> 사이트처럼 사용할 수 있고, 다양한 툴들에서 glTF로 출력해 사용할 수 있습니다.
+	</p>
+
+	<ul>
+		<li><a href="https://www.blender.org/" target="_blank" rel="noopener">Blender</a> by the Blender Foundation</li>
+		<li><a href="https://www.allegorithmic.com/products/substance-painter" target="_blank" rel="noopener">Substance Painter</a> by Allegorithmic</li>
+		<li><a href="https://www.foundry.com/products/modo" target="_blank" rel="noopener">Modo</a> by Foundry</li>
+		<li><a href="https://www.marmoset.co/toolbag/" target="_blank" rel="noopener">Toolbag</a> by Marmoset</li>
+		<li><a href="https://www.sidefx.com/products/houdini/" target="_blank" rel="noopener">Houdini</a> by SideFX</li>
+		<li><a href="https://labs.maxon.net/?p=3360" target="_blank" rel="noopener">Cinema 4D</a> by MAXON</li>
+		<li><a href="https://github.com/KhronosGroup/COLLADA2GLTF" target="_blank" rel="noopener">COLLADA2GLTF</a> by the Khronos Group</li>
+		<li><a href="https://github.com/facebookincubator/FBX2glTF" target="_blank" rel="noopener">FBX2GLTF</a> by Facebook</li>
+		<li><a href="https://github.com/AnalyticalGraphicsInc/obj2gltf" target="_blank" rel="noopener">OBJ2GLTF</a> by Analytical Graphics Inc</li>
+		<li>&hellip;and <a href="http://github.khronos.org/glTF-Project-Explorer/" target="_blank" rel="noopener">many more</a></li>
+	</ul>
+
+	<p>
+		선호하는 툴이 glTF를 지원하지 않는다면, glTF로 출력하는 것을 개발자에게 문의해보거나,
+		<a href="https://github.com/KhronosGroup/glTF/issues/1051" target="_blank" rel="noopener">the glTF roadmap thread</a>에 포스팅 해 보세요.
+	</p>
+
+	<p>
+		glTF 이외에도, FBX, OBJ, COLLADA 같은 유명한 포맷들도 잘 지원됩니다.
+	</p>
+
+	<h2>로딩</h2>
+
+	<p>
+		three.js에는 몇몇 로더들을 제외하고는(ex: [page:ObjectLoader]) 기본적으로 include되어 있지 않습니다. 다른 로더들은 개별적으로 앱에 추가해줘야 합니다.
+	</p>
+
+	<code>
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	</code>
+
+	<p>
+		로더를 import한 후에, scene에 모델을 로드하면 됩니다. 구문은 로더에 따라 다릅니다. — 다른 포맷을 사용할 경우에는, 해당 로더에 대한 예제와 문서를 참고하세요.
+		glTF의 경우 글로벌 스크립트는 다음과 같이 사용합니다.
+	</p>
+
+	<code>
+		const loader = new GLTFLoader();
+
+		loader.load( 'path/to/model.glb', function ( gltf ) {
+
+			scene.add( gltf.scene );
+
+		}, undefined, function ( error ) {
+
+			console.error( error );
+
+		} );
+	</code>
+
+	<p>
+		[page:GLTFLoader GLTFLoader 문서]를 참고하세요.
+	</p>
+
+	<h2>문제 해결</h2>
+
+	<p>
+		많은 시간을 공 들여 걸작을 모델링하고 나서, 웹 페이지에
+		업로드 했더닝, 이런! 😭 왜곡돼있거나 색이 안 칠해져있거나 아예 나오지 않을 때가 있습니다.
+		다음 순서대로 문제 해결을 해 봅시다:
+	</p>
+
+	<ol>
+		<li>
+			자바스크립트 콘솔 에러를 체크합니다.
+			<em>.load()</em>를 사용할 때 로그 결과에 <em>onError</em> 콜백을 사용했는지를 확인합니다.
+		</li>
+		<li>
+			다른 애플리케이션에서 모델을 확인합니다. glTF에서는, 드래그-앤-드롭 뷰어가 
+			<a href="https://gltf-viewer.donmccurdy.com/" target="_blank" rel="noopener">three.js</a>와
+			<a href="http://sandbox.babylonjs.com/" target="_blank" rel="noopener">babylon.js</a>에서 사용 가능합니다. 만약 모델이
+			하나 이상의 어플리케이션에서 정상적으로 나타난다면,
+			<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">three.js와 관련된 버그를 알려주세요</a>.
+			어느 애플리케이션에서도 모델이 나타나지 않는다면, 모델을 만든 어플리케이션의 버그를 확인해 보는 것을 강력하게 추천드립니다.
+		</li>
+		<li>
+			모델을 1000배 확대 혹은 축소해 보세요. 여러 모델들은 다양하게 확대 및 축소되어 보여질 수 있으며
+			너무 큰 모델은 카메라가 모델 안에 있어 제대로 안 보일 수 있습니다.
+		</li>
+		<li>
+			밝은 모델을 사용하거나 위치를 바꿔보세요. 모델이 가려져 있을 수 있습니다.
+		</li>
+		<li>
+			네트워크 탭에서 failed texture requests를 확인합니다. 예를 들면,
+			<em>C:\\Path\To\Model\texture.jpg</em>. 이러한 주소 대신 상대 주소를 사용해, <em>images/texture.jpg</em>처럼 사용해 보세요
+			— 이 작업은 텍스트 에디터에서 모델 파일을 수정해야 할 수도 있습니다.
+		</li>
+	</ol>
+
+	<h2>지원 요청</h2>
+
+	<p>
+		위의 문제 해결 절차를 거치고도 모델이 제대로 나오지 않는다면, 적절한 질문을 통해 도움을 구하는 것이 가장 빠른 해결책일 것입니다. 
+		<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js 포럼</a>에 문제제기를 하고 가능하다면,
+		아무 포맷으로 자신의 모델을 첨부(혹은 같은 문제가 있는 더 단순한 모델)을 첨부해 주세요.
+		다른 사람에게 충분한 정보를 제공해 주는 것이 문제를 해결할 수 있는 빠를 방법입니다. — live demo를 사용하면 이상적입니다.
+	</p>
+
+</body>
+
+</html>

docs/manual/ko/introduction/Matrix-transformations.html

@@ -0,0 +1,72 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>행렬 변환([name])</h1>
+
+		<p>
+        Three.js는 *matrices*를 사용해 3D 변형---변환(위치), 회전, 확대 인코딩합니다. 
+        [page:Object3D]의 모든 인스턴스는 [page:Object3D.matrix matrix]를 가지고 있어 오브젝트의 위치, 회전, 확대 정보를 담고 있습니다. 
+        이 페이지에서는 오브젝트의 변형과 관련해 설명합니다.
+		</p>
+
+		<h2>편리한 속성 및 *matrixAutoUpdate*</h2>
+
+		<p>
+			오브젝트의 변형 방법에는 두 가지가 있습니다.
+		</p>
+		<ol>
+			<li>
+				오브젝트의 *position*, *quaternion*, 그리고 *scale* 속성을 조절합니다, 그 후에 three.js가 오브젝트의 행렬을 이에 맞추어 재 계산합니다:
+				<code>
+object.position.copy( start_position );
+object.quaternion.copy( quaternion );
+				</code>
+				기본적으로 *matrixAutoUpdate* 속성은 true로 되어 있으며, 행렬정보는 자동으로 재 계산 될 것입니다.
+				오브젝트를 고정하고 싶거나 직접 재계산을 하고 싶다면, false로 해서 성능을 향상시킬 수 있습니다:
+				<code>
+object.matrixAutoUpdate = false;
+				</code>
+				속성을 변경한 다음에 수동으로 행렬을 업데이트해줍니다.:
+				<code>
+object.updateMatrix();
+				</code>
+			</li>
+			<li>
+				오브젝트의 행렬을 직접 수정합니다. [page:Matrix4] 클래스에는 행렬 수정을 위한 여러 메서드가 있습니다.
+				<code>
+object.matrix.setRotationFromQuaternion( quaternion );
+object.matrix.setPosition( start_position );
+object.matrixAutoUpdate = false;
+				</code>
+				이 경우에 *matrixAutoUpdate*는 <em>무조건</em> *false*가 되어야 하는 점을 명심하세요. 그리고 *updateMatrix* 를 사용하지 <em>마세요</em>. *updateMatrix*를 호출하면 수동으로 변경한 행렬을 덮어버리고*position*, *scale* 등의 행렬을 재계산 할 것입니다.
+			</li>
+		</ol>
+
+		<h2>오브젝트와 world 행렬</h2>
+		<p>
+        오브젝트의 [page:Object3D.matrix matrix]는 오브젝트의 변형을 <em>관련된</em> 오브젝트의 [page:Object3D.parent parent]에 저장합니다; 오브젝트의 변형 정보를
+        <em>world</em> 좌표에서 가져오려면, 오브젝트의 [page:Object3D.matrixWorld]에 접근해야 합니다.
+		</p>
+		<p>
+		부모 혹은 자식 오브젝트의 변형이 생기면, 자식 오브젝트의 [page:Object3D.matrixWorld matrixWorld]를 [page:Object3D.updateMatrixWorld updateMatrixWorld]()를 호출해 업데이트 합니다.
+		</p>
+
+		<h2>회전 및 사원수(Rotation and Quaternion)</h2>
+		<p>
+        Three.js는 3D 회전을 두 가지 방법으로 나타냅니다: [page:Euler Euler angles] 와 [page:Quaternion Quaternions]이며 둘 사이의 변한 메서드도 포함입니다. 
+        Euler angles는 "gimbal lock" 이라는 문제와 관련이 있어서, 특정 설정은 자유도가 제한됩니다(한 축에서만 오브젝트가 회전하는 것을 방지). 
+        이 때문에, 오브젝트 회전은 <em>언제나</em> 오브젝트의 [page:Object3D.quaternion quaternion]에 저장됩니다.
+		</p>
+		<p>
+        이전 버전의 라이브러리는 *useQuaternion* 속성을 불러와서 false로 설정하면 [page:Object3D.matrix matrix]를 Euler angle로 계산하게 합니다. 
+        이 예제는 삭제되었습니다. 대신 [page:Object3D.setRotationFromEuler setRotationFromEuler] 메서드를 사용해 사원수를 업데이트 합니다.
+		</p>
+
+	</body>
+</html>

docs/manual/ko/introduction/Typescript-setup.html

@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>타입스크립트 설정([name])</h1>
+
+		<p>
+			three.js는 자바스크립트 기반 라이브러리입니다. 하지만 TypeScript 프로젝트에도 사용이 가능한데, [link:https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html Declaration Files] (*d.ts* 파일)의 라이브러리 노출 설정을 통해 가능합니다.
+		</p>
+
+		<p>
+			컴파일러가 three.js의 타입을 확인하기 위해 약간의 설정이 필요합니다.<br>
+			[link:https://www.typescriptlang.org/docs/handbook/module-resolution.html moduleResolution]옵션을 *노드*에 설정하고
+			[link:https://www.typescriptlang.org/docs/handbook/compiler-options.html target] 옵션을 *es6* 혹은 최신 버전으로 설정합니다.
+		</p>
+
+		<code>
+		// Example of minimal `tsconfig.json` file
+		{
+			"compilerOptions": {
+				"target": "es6",
+				"moduleResolution": "node",
+			},
+			"include": [ "./src/**/*.ts" ],
+		}
+		</code>
+
+		<p>
+			주의: 현 시점에서 three.js는 위 두 설정을 하지 않고서는 사용할 수 없습니다.
+		</p>
+
+		<p>
+			주의: 몇몇 선언들은 틀리거나 찾을 수 없음으로 나올 것입니다. 선언문 파일들에 대한 교정 작업 지원은 커뮤니티와 three.js를 보다 정확하고 좋게 만드는 데에 도움이 될 것입니다.
+		</p>
+	</body>
+</html>

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

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>참고 링크([name])</h1>
+
+		<p class="desc">
+            다음 링크들은 three.js를 배울때 유용한 링크들 모음입니다.<br />
+            여기에 추가하고 싶은 링크가 있거나 더 이상 작동하지 않거나 관련되지 않은 링크가 있다면 
+            아래 '수정' 버튼을 클릭해 변경해주세요!<br /><br />
+
+			three.js는 자주 업데이트 되고 있기 때문에, 많은 링크들이 지난 버전의 내용을 담고 있을 수도 있습니다.
+			- 만약 링크에서 나온 내용이 제대로 동작하지 않는다면 브라우저 콘솔의 경고나 에러를 확인해 보세요. 관련 문서 페에지도 확인해 보세요.
+		</p>
+
+		<h2>도움이 되는 포럼</h2>
+		<p>
+			Three.js는 공식적으로[link:https://discourse.threejs.org/ 포럼] 과 [link:http://stackoverflow.com/tags/three.js/info Stack Overflow]에서 지원 요청을 받고 있습니다.
+			도움이 필요하다면, 저기로 가면 됩니다. 깃허브에서 도움 요청 이슈를 생성하지 마세요.
+		</p>
+
+		<h2>예제 및 수업</h2>
+
+		<h3>three.js 입문</h3>
+		<ul>
+			<li>
+				[link:https://threejsfundamentals.org/threejs/lessons/threejs-fundamentals.html Three.js Fundamentals starting lesson]
+			</li>
+			<li>
+				[link:https://codepen.io/rachsmith/post/beginning-with-3d-webgl-pt-1-the-scene Beginning with 3D WebGL] - [link:https://codepen.io/rachsmith/ Rachel Smith].
+			</li>
+			<li>
+				[link:https://www.august.com.au/blog/animating-scenes-with-webgl-three-js/ Animating scenes with WebGL and three.js]
+			</li>
+		</ul>
+
+		<h3>심화 확장 기사 및 강의</h3>
+		<ul>
+			<li>
+				[link:https://discoverthreejs.com/ Discover three.js]
+			</li>
+			<li>
+				[link:https://threejsfundamentals.org/ Three.js Fundamentals]
+			</li>
+			<li>
+				[link:http://blog.cjgammon.com/ Collection of tutorials] by [link:http://www.cjgammon.com/ CJ Gammon].
+			</li>
+			<li>
+				[link:https://medium.com/soffritti.pierfrancesco/glossy-spheres-in-three-js-bfd2785d4857 Glossy spheres in three.js].
+			</li>
+		 <li>
+			 [link:https://www.udacity.com/course/cs291 Interactive 3D Graphics] - a free course on Udacity that teaches the fundamentals of 3D Graphics,
+			 and uses three.js as its coding tool.
+		 </li>
+		 <li>
+			[Link:https://aerotwist.com/tutorials/ Aerotwist] tutorials by [link:https://github.com/paullewis/ Paul Lewis].
+		 </li>
+			 <li>
+			 [link:http://learningthreejs.com/ Learning Three.js] – a blog with articles dedicated to teaching three.js
+		 </li>
+		 <li>
+			 [link:https://discourse.threejs.org/t/three-js-bookshelf/2468 Three.js Bookshelf] - Looking for more resources about three.js or computer graphics in general?
+			 Check out the selection of literature recommended by the community.
+		 </li>
+		</ul>
+
+		<h2>뉴스 및 업데이트</h2>
+		<ul>
+			<li>
+				[link:https://twitter.com/hashtag/threejs Three.js on Twitter]
+			</li>
+			<li>
+				[link:http://www.reddit.com/r/threejs/ Three.js on reddit]
+			</li>
+			<li>
+				[link:http://www.reddit.com/r/webgl/ WebGL on reddit]
+			</li>
+			<li>
+				[link:http://learningwebgl.com/blog/ Learning WebGL Blog] – The authoritive news source for WebGL.
+			</li>
+		</ul>
+
+		<h2>예제</h2>
+		<ul>
+			<li>
+				[link:https://github.com/edwinwebb/three-seed/ three-seed] - three.js starter project with ES6 and Webpack
+			</li>
+			<li>
+				[link:http://stemkoski.github.io/Three.js/index.html Professor Stemkoskis Examples] - a collection of beginner friendly
+				examples built using three.js r60.
+			</li>
+			<li>
+				[link:https://threejs.org/examples/ Official three.js examples] - these examples are
+				maintained as part of the three.js repository, and always use the latest version of three.js.
+			</li>
+			<li>
+				[link:https://raw.githack.com/mrdoob/three.js/dev/examples/ Official three.js dev branch examples]  -
+				Same as the above, except these use the dev branch of three.js,	and are used to check that
+				everything is working as three.js being is developed.
+			</li>
+		</ul>
+
+	 <h2>도구</h2>
+	 <ul>
+		 <li>
+			[link:http://www.physgl.org/ physgl.org] - JavaScript front-end with wrappers to three.js, to bring WebGL
+ 			graphics to students learning physics and math.
+		 </li>
+		 <li>
+			 [link:https://whs.io/ Whitestorm.js] – Modular three.js framework with AmmoNext physics plugin.
+		 </li>
+
+		<li>
+			[link:http://zz85.github.io/zz85-bookmarklets/threelabs.html Three.js Inspector]
+		</li>
+		<li>
+			[link:http://idflood.github.io/ThreeNodes.js/ ThreeNodes.js].
+		</li>
+		<li>
+			[link:https://marketplace.visualstudio.com/items?itemName=bierner.comment-tagged-templates comment-tagged-templates] - VSCode extension syntax highlighting for tagged template strings, like: glsl.js.
+		</li>
+		<li>
+			[link:https://github.com/MozillaReality/WebXR-emulator-extension WebXR-emulator-extension]
+		</li>
+	 </ul>
+
+	<h2>WebGL 참고</h2>
+	 <ul>
+		 <li>
+			[link:https://www.khronos.org/files/webgl/webgl-reference-card-1_0.pdf webgl-reference-card.pdf] - Reference of all WebGL and GLSL keywords, terminology, syntax and definitions.
+		 </li>
+	 </ul>
+
+	 <h2>이전 링크들</h2>
+	 <p>
+		이 링크들은 기록 목적으로 남겨두었습니다. - 아직 도움이 되는 링크도 있겠지만, 해당 내용들은 아주 옛날 버전의 three.js를 사용하고 있다는 점을 주의하세요.
+	 </p>
+
+	 <ul>
+		<li>
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
+		</li>
+		<li>
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
+		</li>
+		<li>
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
+		</li>
+		<li>
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
+		</li>
+		<li>
+			<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a>  by [link:https://github.com/jareiko jareiko] (video).
+		</li>
+		<li>
+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
+			by [link:http://github.com/nrocy Paul King]
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
+	 </ul>
+
+	</body>
+</html>

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

@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="ko">
+	<head>
+		<meta charset="utf-8">
+		<base href="../../../" />
+		<script src="page.js"></script>
+		<link type="text/css" rel="stylesheet" href="page.css" />
+	</head>
+	<body>
+		<h1>WebGL 호환성 검사([name])</h1>
+		<p>
+			아마 거의 문제가 되지 않을테지만, 몇몇 디바이스나 브라우저는 아직 WebGL을 지원하지 않습니다.
+			아래 메서드는 지원 여부를 체크해 가능한지 아닌지 메세지를 띄워줄 것입니다.
+		</p>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/WebGL.js]를 스크립트에 추가하고 무언가를 렌더링하기 전에 아래 코드를 실행해보세요.
+		</p>
+
+		<code>
+		if ( WEBGL.isWebGLAvailable() ) {
+
+			// Initiate function or other initializations here
+			animate();
+
+		} else {
+
+			const warning = WEBGL.getWebGLErrorMessage();
+			document.getElementById( 'container' ).appendChild( warning );
+
+		}
+		</code>
+	</body>
+</html>

examples/files.json

@@ -200,7 +200,6 @@
 		"webgl_multiple_renderers",
 		"webgl_multiple_scenes_comparison",
 		"webgl_multiple_views",
-		"webgl_nearestneighbour",
 		"webgl_panorama_cube",
 		"webgl_panorama_equirectangular",
 		"webgl_performance",

examples/js/exporters/GLTFExporter.js

@@ -1693,12 +1693,15 @@ THREE.GLTFExporter.prototype = {
 
 			var joints = [];
 			var inverseBindMatrices = new Float32Array( skeleton.bones.length * 16 );
+			var temporaryBoneInverse = new THREE.Matrix4();
 
 			for ( var i = 0; i < skeleton.bones.length; ++ i ) {
 
 				joints.push( nodeMap.get( skeleton.bones[ i ] ) );
 
-				skeleton.boneInverses[ i ].toArray( inverseBindMatrices, i * 16 );
+				temporaryBoneInverse.copy( skeleton.boneInverses[ i ] );
+
+				temporaryBoneInverse.multiply( object.bindMatrix ).toArray( inverseBindMatrices, i * 16 );
 
 			}
 

examples/js/loaders/GLTFLoader.js

@@ -2846,11 +2846,13 @@ THREE.GLTFLoader = ( function () {
 	/** When Object3D instances are targeted by animation, they need unique names. */
 	GLTFParser.prototype.createUniqueName = function ( originalName ) {
 
-		var name = THREE.PropertyBinding.sanitizeNodeName( originalName || '' );
+		var sanitizedName = THREE.PropertyBinding.sanitizeNodeName( originalName || '' );
+
+		var name = sanitizedName;
 
 		for ( var i = 1; this.nodeNamesUsed[ name ]; ++ i ) {
 
-			name = originalName + '_' + i;
+			name = sanitizedName + '_' + i;
 
 		}
 

examples/js/loaders/RGBELoader.js

@@ -99,7 +99,7 @@ THREE.RGBELoader.prototype = Object.assign( Object.create( THREE.DataTextureLoad
 				var line, match,
 
 					// regexes to parse header info fields
-					magic_token_re = /^#\?(\S+)$/,
+					magic_token_re = /^#\?(\S+)/,
 					gamma_re = /^\s*GAMMA\s*=\s*(\d+(\.\d+)?)\s*$/,
 					exposure_re = /^\s*EXPOSURE\s*=\s*(\d+(\.\d+)?)\s*$/,
 					format_re = /^\s*FORMAT=(\S+)\s*$/,

examples/js/utils/TypedArrayUtils.js

@@ -1,594 +0,0 @@
-THREE.TypedArrayUtils = {};
-
-/**
- * In-place quicksort for typed arrays (e.g. for Float32Array)
- * provides fast sorting
- * useful e.g. for a custom shader and/or BufferGeometry
- *
- * Complexity: http://bigocheatsheet.com/ see Quicksort
- *
- * Example:
- * points: [x, y, z, x, y, z, x, y, z, ...]
- * eleSize: 3 //because of (x, y, z)
- * orderElement: 0 //order according to x
- */
-
-THREE.TypedArrayUtils.quicksortIP = function ( arr, eleSize, orderElement ) {
-
-	var stack = [];
-	var sp = - 1;
-	var left = 0;
-	var right = arr.length / eleSize - 1;
-	var tmp = 0.0, x = 0, y = 0;
-
-	var swapF = function ( a, b ) {
-
-		a *= eleSize; b *= eleSize;
-
-		for ( y = 0; y < eleSize; y ++ ) {
-
-			tmp = arr[ a + y ];
-			arr[ a + y ] = arr[ b + y ];
-			arr[ b + y ] = tmp;
-
-		}
-
-	};
-
-	var i, j, swap = new Float32Array( eleSize ), temp = new Float32Array( eleSize );
-
-	while ( true ) {
-
-		if ( right - left <= 25 ) {
-
-			for ( j = left + 1; j <= right; j ++ ) {
-
-				for ( x = 0; x < eleSize; x ++ ) {
-
-					swap[ x ] = arr[ j * eleSize + x ];
-
-				}
-
-				i = j - 1;
-
-				while ( i >= left && arr[ i * eleSize + orderElement ] > swap[ orderElement ] ) {
-
-					for ( x = 0; x < eleSize; x ++ ) {
-
-						arr[ ( i + 1 ) * eleSize + x ] = arr[ i * eleSize + x ];
-
-					}
-
-					i --;
-
-				}
-
-				for ( x = 0; x < eleSize; x ++ ) {
-
-					arr[ ( i + 1 ) * eleSize + x ] = swap[ x ];
-
-				}
-
-			}
-
-			if ( sp == - 1 ) break;
-
-			right = stack[ sp -- ]; //?
-			left = stack[ sp -- ];
-
-		} else {
-
-			var median = ( left + right ) >> 1;
-
-			i = left + 1;
-			j = right;
-
-			swapF( median, i );
-
-			if ( arr[ left * eleSize + orderElement ] > arr[ right * eleSize + orderElement ] ) {
-
-				swapF( left, right );
-
-			}
-
-			if ( arr[ i * eleSize + orderElement ] > arr[ right * eleSize + orderElement ] ) {
-
-				swapF( i, right );
-
-			}
-
-			if ( arr[ left * eleSize + orderElement ] > arr[ i * eleSize + orderElement ] ) {
-
-				swapF( left, i );
-
-			}
-
-			for ( x = 0; x < eleSize; x ++ ) {
-
-				temp[ x ] = arr[ i * eleSize + x ];
-
-			}
-
-			while ( true ) {
-
-				do i ++; while ( arr[ i * eleSize + orderElement ] < temp[ orderElement ] );
-				do j --; while ( arr[ j * eleSize + orderElement ] > temp[ orderElement ] );
-
-				if ( j < i ) break;
-
-				swapF( i, j );
-
-			}
-
-			for ( x = 0; x < eleSize; x ++ ) {
-
-				arr[ ( left + 1 ) * eleSize + x ] = arr[ j * eleSize + x ];
-				arr[ j * eleSize + x ] = temp[ x ];
-
-			}
-
-			if ( right - i + 1 >= j - left ) {
-
-				stack[ ++ sp ] = i;
-				stack[ ++ sp ] = right;
-				right = j - 1;
-
-			} else {
-
-				stack[ ++ sp ] = left;
-				stack[ ++ sp ] = j - 1;
-				left = i;
-
-			}
-
-		}
-
-	}
-
-	return arr;
-
-};
-
-
-
-/**
- * k-d Tree for typed arrays (e.g. for Float32Array), in-place
- * provides fast nearest neighbour search
- * useful e.g. for a custom shader and/or BufferGeometry, saves tons of memory
- * has no insert and remove, only buildup and neares neighbour search
- *
- * Based on https://github.com/ubilabs/kd-tree-javascript by Ubilabs
- *
- * @license MIT License <http://www.opensource.org/licenses/mit-license.php>
- *
- * Requires typed array quicksort
- *
- * Example:
- * points: [x, y, z, x, y, z, x, y, z, ...]
- * metric: function(a, b){	return Math.pow(a[0] - b[0], 2) +  Math.pow(a[1] - b[1], 2) +  Math.pow(a[2] - b[2], 2); }  //Manhatten distance
- * eleSize: 3 //because of (x, y, z)
- *
- * Further information (including mathematical properties)
- * http://en.wikipedia.org/wiki/Binary_tree
- * http://en.wikipedia.org/wiki/K-d_tree
- *
- * If you want to further minimize memory usage, remove Node.depth and replace in search algorithm with a traversal to root node (see comments at THREE.TypedArrayUtils.Kdtree.prototype.Node)
- */
-
-THREE.TypedArrayUtils.Kdtree = function ( points, metric, eleSize ) {
-
-	var scope = this;
-
-	var maxDepth = 0;
-
-	var getPointSet = function ( points, pos ) {
-
-		return points.subarray( pos * eleSize, pos * eleSize + eleSize );
-
-	};
-
-	function buildTree( points, depth, parent, pos ) {
-
-		var dim = depth % eleSize,
-			median,
-			node,
-			plength = points.length / eleSize;
-
-		if ( depth > maxDepth ) maxDepth = depth;
-
-		if ( plength === 0 ) return null;
-		if ( plength === 1 ) {
-
-			return new scope.Node( getPointSet( points, 0 ), depth, parent, pos );
-
-		}
-
-		THREE.TypedArrayUtils.quicksortIP( points, eleSize, dim );
-
-		median = Math.floor( plength / 2 );
-
-		node = new scope.Node( getPointSet( points, median ), depth, parent, median + pos );
-		node.left = buildTree( points.subarray( 0, median * eleSize ), depth + 1, node, pos );
-		node.right = buildTree( points.subarray( ( median + 1 ) * eleSize, points.length ), depth + 1, node, pos + median + 1 );
-
-		return node;
-
-	}
-
-	this.root = buildTree( points, 0, null, 0 );
-
-	this.getMaxDepth = function () {
-
-		return maxDepth;
-
-	};
-
-	this.nearest = function ( point, maxNodes, maxDistance ) {
-
-		 /* point: array of size eleSize
-			maxNodes: max amount of nodes to return
-			maxDistance: maximum distance to point result nodes should have
-			condition (not implemented): function to test node before it's added to the result list, e.g. test for view frustum
-		*/
-
-		var i,
-			result,
-			bestNodes;
-
-		bestNodes = new THREE.TypedArrayUtils.Kdtree.BinaryHeap(
-
-			function ( e ) {
-
-				return - e[ 1 ];
-
-			}
-
-		);
-
-		function nearestSearch( node ) {
-
-			var bestChild,
-				dimension = node.depth % eleSize,
-				ownDistance = metric( point, node.obj ),
-				linearDistance = 0,
-				otherChild,
-				i,
-				linearPoint = [];
-
-			function saveNode( node, distance ) {
-
-				bestNodes.push( [ node, distance ] );
-
-				if ( bestNodes.size() > maxNodes ) {
-
-					bestNodes.pop();
-
-				}
-
-			}
-
-			for ( i = 0; i < eleSize; i += 1 ) {
-
-				if ( i === node.depth % eleSize ) {
-
-					linearPoint[ i ] = point[ i ];
-
-				} else {
-
-					linearPoint[ i ] = node.obj[ i ];
-
-				}
-
-			}
-
-			linearDistance = metric( linearPoint, node.obj );
-
-			// if it's a leaf
-
-			if ( node.right === null && node.left === null ) {
-
-				if ( bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[ 1 ] ) {
-
-					saveNode( node, ownDistance );
-
-				}
-
-				return;
-
-			}
-
-			if ( node.right === null ) {
-
-				bestChild = node.left;
-
-			} else if ( node.left === null ) {
-
-				bestChild = node.right;
-
-			} else {
-
-				if ( point[ dimension ] < node.obj[ dimension ] ) {
-
-					bestChild = node.left;
-
-				} else {
-
-					bestChild = node.right;
-
-				}
-
-			}
-
-			// recursive search
-
-			nearestSearch( bestChild );
-
-			if ( bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[ 1 ] ) {
-
-				saveNode( node, ownDistance );
-
-			}
-
-			// if there's still room or the current distance is nearer than the best distance
-
-			if ( bestNodes.size() < maxNodes || Math.abs( linearDistance ) < bestNodes.peek()[ 1 ] ) {
-
-				if ( bestChild === node.left ) {
-
-					otherChild = node.right;
-
-				} else {
-
-					otherChild = node.left;
-
-				}
-
-				if ( otherChild !== null ) {
-
-					nearestSearch( otherChild );
-
-				}
-
-			}
-
-		}
-
-		if ( maxDistance ) {
-
-			for ( i = 0; i < maxNodes; i += 1 ) {
-
-				bestNodes.push( [ null, maxDistance ] );
-
-			}
-
-		}
-
-		nearestSearch( scope.root );
-
-		result = [];
-
-		for ( i = 0; i < maxNodes; i += 1 ) {
-
-			if ( bestNodes.content[ i ][ 0 ] ) {
-
-				result.push( [ bestNodes.content[ i ][ 0 ], bestNodes.content[ i ][ 1 ] ] );
-
-			}
-
-		}
-
-		return result;
-
-	};
-
-};
-
-/**
- * If you need to free up additional memory and agree with an additional O( log n ) traversal time you can get rid of "depth" and "pos" in Node:
- * Depth can be easily done by adding 1 for every parent (care: root node has depth 0, not 1)
- * Pos is a bit tricky: Assuming the tree is balanced (which is the case when after we built it up), perform the following steps:
- *   By traversing to the root store the path e.g. in a bit pattern (01001011, 0 is left, 1 is right)
- *   From buildTree we know that "median = Math.floor( plength / 2 );", therefore for each bit...
- *     0: amountOfNodesRelevantForUs = Math.floor( (pamountOfNodesRelevantForUs - 1) / 2 );
- *     1: amountOfNodesRelevantForUs = Math.ceil( (pamountOfNodesRelevantForUs - 1) / 2 );
- *        pos += Math.floor( (pamountOfNodesRelevantForUs - 1) / 2 );
- *     when recursion done, we still need to add all left children of target node:
- *        pos += Math.floor( (pamountOfNodesRelevantForUs - 1) / 2 );
- *        and I think you need to +1 for the current position, not sure.. depends, try it out ^^
- *
- * I experienced that for 200'000 nodes you can get rid of 4 MB memory each, leading to 8 MB memory saved.
- */
-THREE.TypedArrayUtils.Kdtree.prototype.Node = function ( obj, depth, parent, pos ) {
-
-	this.obj = obj;
-	this.left = null;
-	this.right = null;
-	this.parent = parent;
-	this.depth = depth;
-	this.pos = pos;
-
-};
-
-/**
- * Binary heap implementation
- */
-
-THREE.TypedArrayUtils.Kdtree.BinaryHeap = function ( scoreFunction ) {
-
-	this.content = [];
-	this.scoreFunction = scoreFunction;
-
-};
-
-THREE.TypedArrayUtils.Kdtree.BinaryHeap.prototype = {
-
-	push: function ( element ) {
-
-		// Add the new element to the end of the array.
-		this.content.push( element );
-
-		// Allow it to bubble up.
-		this.bubbleUp( this.content.length - 1 );
-
-	},
-
-	pop: function () {
-
-		// Store the first element so we can return it later.
-		var result = this.content[ 0 ];
-
-		// Get the element at the end of the array.
-		var end = this.content.pop();
-
-		// If there are any elements left, put the end element at the
-		// start, and let it sink down.
-		if ( this.content.length > 0 ) {
-
-			this.content[ 0 ] = end;
-			this.sinkDown( 0 );
-
-		}
-
-		return result;
-
-	},
-
-	peek: function () {
-
-		return this.content[ 0 ];
-
-	},
-
-	remove: function ( node ) {
-
-		var len = this.content.length;
-
-		// To remove a value, we must search through the array to find it.
-		for ( var i = 0; i < len; i ++ ) {
-
-			if ( this.content[ i ] == node ) {
-
-				// When it is found, the process seen in 'pop' is repeated
-				// to fill up the hole.
-				var end = this.content.pop();
-
-				if ( i != len - 1 ) {
-
-					this.content[ i ] = end;
-
-					if ( this.scoreFunction( end ) < this.scoreFunction( node ) ) {
-
-						this.bubbleUp( i );
-
-					} else {
-
-						this.sinkDown( i );
-
-					}
-
-				}
-
-				return;
-
-			}
-
-		}
-
-		throw new Error( 'Node not found.' );
-
-	},
-
-	size: function () {
-
-		return this.content.length;
-
-	},
-
-	bubbleUp: function ( n ) {
-
-		// Fetch the element that has to be moved.
-		var element = this.content[ n ];
-
-		// When at 0, an element can not go up any further.
-		while ( n > 0 ) {
-
-			// Compute the parent element's index, and fetch it.
-			var parentN = Math.floor( ( n + 1 ) / 2 ) - 1,
-				parent = this.content[ parentN ];
-
-			// Swap the elements if the parent is greater.
-			if ( this.scoreFunction( element ) < this.scoreFunction( parent ) ) {
-
-				this.content[ parentN ] = element;
-				this.content[ n ] = parent;
-
-				// Update 'n' to continue at the new position.
-				n = parentN;
-
-			} else {
-
-				// Found a parent that is less, no need to move it further.
-				break;
-
-			}
-
-		}
-
-	},
-
-	sinkDown: function ( n ) {
-
-		// Look up the target element and its score.
-		var length = this.content.length,
-			element = this.content[ n ],
-			elemScore = this.scoreFunction( element );
-
-		while ( true ) {
-
-			// Compute the indices of the child elements.
-			var child2N = ( n + 1 ) * 2, child1N = child2N - 1;
-
-			// This is used to store the new position of the element, if any.
-			var swap = null;
-
-			// If the first child exists (is inside the array)...
-			if ( child1N < length ) {
-
-				// Look it up and compute its score.
-				var child1 = this.content[ child1N ],
-					child1Score = this.scoreFunction( child1 );
-
-				// If the score is less than our element's, we need to swap.
-				if ( child1Score < elemScore ) swap = child1N;
-
-			}
-
-			// Do the same checks for the other child.
-			if ( child2N < length ) {
-
-				var child2 = this.content[ child2N ],
-					child2Score = this.scoreFunction( child2 );
-
-				if ( child2Score < ( swap === null ? elemScore : child1Score ) ) swap = child2N;
-
-			}
-
-			// If the element needs to be moved, swap it, and continue.
-			if ( swap !== null ) {
-
-				this.content[ n ] = this.content[ swap ];
-				this.content[ swap ] = element;
-				n = swap;
-
-			} else {
-
-				// Otherwise, we are done.
-				break;
-
-			}
-
-		}
-
-	}
-
-};

examples/jsm/animation/AnimationClipCreator.js

@@ -5,7 +5,7 @@ import {
 	NumberKeyframeTrack,
 	Vector3,
 	VectorKeyframeTrack
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var AnimationClipCreator = function () {};
 

examples/jsm/animation/CCDIKSolver.js

@@ -11,7 +11,7 @@ import {
 	Quaternion,
 	SphereBufferGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * CCD Algorithm

examples/jsm/animation/MMDAnimationHelper.js

@@ -3,9 +3,9 @@ import {
 	Object3D,
 	Quaternion,
 	Vector3
-} from "../../../build/three.module.js";
-import { CCDIKSolver } from "../animation/CCDIKSolver.js";
-import { MMDPhysics } from "../animation/MMDPhysics.js";
+} from '../../../build/three.module.js';
+import { CCDIKSolver } from '../animation/CCDIKSolver.js';
+import { MMDPhysics } from '../animation/MMDPhysics.js';
 
 /**
  * MMDAnimationHelper handles animation of MMD assets loaded by MMDLoader

examples/jsm/animation/MMDPhysics.js

@@ -11,7 +11,7 @@ import {
 	Quaternion,
 	SphereBufferGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Dependencies

examples/jsm/cameras/CinematicCamera.js

@@ -9,9 +9,9 @@ import {
 	ShaderMaterial,
 	UniformsUtils,
 	WebGLRenderTarget
-} from "../../../build/three.module.js";
-import { BokehShader } from "../shaders/BokehShader2.js";
-import { BokehDepthShader } from "../shaders/BokehShader2.js";
+} from '../../../build/three.module.js';
+import { BokehShader } from '../shaders/BokehShader2.js';
+import { BokehDepthShader } from '../shaders/BokehShader2.js';
 
 var CinematicCamera = function ( fov, aspect, near, far ) {
 

examples/jsm/controls/DeviceOrientationControls.d.ts

@@ -1,4 +1,4 @@
-import { Camera, EventDispatcher } from "../../../src/Three";
+import { Camera, EventDispatcher } from '../../../src/Three';
 
 export class DeviceOrientationControls extends EventDispatcher {
 

examples/jsm/controls/DeviceOrientationControls.js

@@ -4,7 +4,7 @@ import {
 	MathUtils,
 	Quaternion,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * W3C Device Orientation control (http://w3c.github.io/deviceorientation/spec-source-orientation.html)

examples/jsm/controls/DragControls.js

@@ -5,7 +5,7 @@ import {
 	Raycaster,
 	Vector2,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var DragControls = function ( _objects, _camera, _domElement ) {
 

examples/jsm/controls/FirstPersonControls.js

@@ -2,7 +2,7 @@ import {
 	MathUtils,
 	Spherical,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var FirstPersonControls = function ( object, domElement ) {
 

examples/jsm/controls/FlyControls.js

@@ -2,7 +2,7 @@ import {
 	EventDispatcher,
 	Quaternion,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var FlyControls = function ( object, domElement ) {
 

examples/jsm/controls/OrbitControls.js

@@ -6,7 +6,7 @@ import {
 	TOUCH,
 	Vector2,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 // This set of controls performs orbiting, dollying (zooming), and panning.
 // Unlike TrackballControls, it maintains the "up" direction object.up (+Y by default).

examples/jsm/controls/PointerLockControls.js

@@ -2,7 +2,7 @@ import {
 	Euler,
 	EventDispatcher,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var PointerLockControls = function ( camera, domElement ) {
 

examples/jsm/controls/TrackballControls.js

@@ -4,7 +4,7 @@ import {
 	Quaternion,
 	Vector2,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var TrackballControls = function ( object, domElement ) {
 

examples/jsm/controls/TransformControls.js

@@ -19,7 +19,7 @@ import {
 	SphereBufferGeometry,
 	TorusBufferGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var TransformControls = function ( camera, domElement ) {
 

examples/jsm/controls/experimental/CameraControls.js

@@ -6,7 +6,7 @@ import {
 	TOUCH,
 	Vector2,
 	Vector3
-} from "../../../../build/three.module.js";
+} from '../../../../build/three.module.js';
 
 var CameraControls = function ( object, domElement ) {
 

examples/jsm/csm/CSM.d.ts

@@ -35,4 +35,4 @@ export class CSM {
 
 }
 
-import Frustum from "./Frustum.js";
+import Frustum from './Frustum.js';

examples/jsm/curves/CurveExtras.js

@@ -1,7 +1,7 @@
 import {
 	Curve,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * A bunch of parametric curves

examples/jsm/curves/NURBSCurve.js

@@ -2,8 +2,8 @@ import {
 	Curve,
 	Vector3,
 	Vector4
-} from "../../../build/three.module.js";
-import { NURBSUtils } from "../curves/NURBSUtils.js";
+} from '../../../build/three.module.js';
+import { NURBSUtils } from '../curves/NURBSUtils.js';
 
 /**
  * NURBS curve object

examples/jsm/curves/NURBSSurface.js

@@ -1,7 +1,7 @@
 import {
 	Vector4
-} from "../../../build/three.module.js";
-import { NURBSUtils } from "../curves/NURBSUtils.js";
+} from '../../../build/three.module.js';
+import { NURBSUtils } from '../curves/NURBSUtils.js';
 
 /**
  * NURBS surface object

examples/jsm/curves/NURBSUtils.js

@@ -1,7 +1,7 @@
 import {
 	Vector3,
 	Vector4
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * NURBS utils

examples/jsm/effects/AnaglyphEffect.js

@@ -10,7 +10,7 @@ import {
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var AnaglyphEffect = function ( renderer, width, height ) {
 

examples/jsm/effects/OutlineEffect.js

@@ -4,7 +4,7 @@ import {
 	ShaderMaterial,
 	UniformsLib,
 	UniformsUtils
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Reference: https://en.wikipedia.org/wiki/Cel_shading

examples/jsm/effects/ParallaxBarrierEffect.js

@@ -9,7 +9,7 @@ import {
 	ShaderMaterial,
 	StereoCamera,
 	WebGLRenderTarget
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var ParallaxBarrierEffect = function ( renderer ) {
 

examples/jsm/effects/PeppersGhostEffect.js

@@ -2,7 +2,7 @@ import {
 	PerspectiveCamera,
 	Quaternion,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * peppers ghost effect based on http://www.instructables.com/id/Reflective-Prism/?ALLSTEPS

examples/jsm/effects/StereoEffect.js

@@ -1,7 +1,7 @@
 import {
 	StereoCamera,
 	Vector2
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var StereoEffect = function ( renderer ) {
 

examples/jsm/exporters/ColladaExporter.js

@@ -7,7 +7,7 @@ import {
 	Mesh,
 	MeshBasicMaterial,
 	MeshLambertMaterial
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * https://github.com/gkjohnson/collada-exporter-js

examples/jsm/exporters/DRACOExporter.js

@@ -1,6 +1,6 @@
 import {
 	BufferGeometry
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Export draco compressed files from threejs geometry objects.

examples/jsm/exporters/GLTFExporter.js

@@ -9,6 +9,7 @@ import {
 	LinearMipmapLinearFilter,
 	LinearMipmapNearestFilter,
 	MathUtils,
+	Matrix4,
 	MirroredRepeatWrapping,
 	NearestFilter,
 	NearestMipmapLinearFilter,
@@ -19,7 +20,7 @@ import {
 	RepeatWrapping,
 	Scene,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 //------------------------------------------------------------------------------
 // Constants
@@ -178,7 +179,7 @@ GLTFExporter.prototype = {
 		/**
 		 * Is identity matrix
 		 *
-		 * @param {THREE.Matrix4} matrix
+		 * @param {Matrix4} matrix
 		 * @returns {Boolean} Returns true, if parameter is identity matrix
 		 */
 		function isIdentityMatrix( matrix ) {
@@ -1716,12 +1717,15 @@ GLTFExporter.prototype = {
 
 			var joints = [];
 			var inverseBindMatrices = new Float32Array( skeleton.bones.length * 16 );
+			var temporaryBoneInverse = new Matrix4();
 
 			for ( var i = 0; i < skeleton.bones.length; ++ i ) {
 
 				joints.push( nodeMap.get( skeleton.bones[ i ] ) );
 
-				skeleton.boneInverses[ i ].toArray( inverseBindMatrices, i * 16 );
+				temporaryBoneInverse.copy( skeleton.boneInverses[ i ] );
+
+				temporaryBoneInverse.multiply( object.bindMatrix ).toArray( inverseBindMatrices, i * 16 );
 
 			}
 

examples/jsm/exporters/MMDExporter.js

@@ -2,8 +2,8 @@ import {
 	Matrix4,
 	Quaternion,
 	Vector3
-} from "../../../build/three.module.js";
-import { MMDParser } from "../libs/mmdparser.module.js";
+} from '../../../build/three.module.js';
+import { MMDParser } from '../libs/mmdparser.module.js';
 
 /**
  * Dependencies

examples/jsm/exporters/OBJExporter.js

@@ -8,7 +8,7 @@ import {
 	Points,
 	Vector2,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var OBJExporter = function () {};
 

examples/jsm/exporters/PLYExporter.js

@@ -2,7 +2,7 @@ import {
 	BufferGeometry,
 	Matrix3,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * https://github.com/gkjohnson/ply-exporter-js

examples/jsm/exporters/STLExporter.js

@@ -1,7 +1,7 @@
 import {
 	BufferGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Usage:

examples/jsm/geometries/BoxLineGeometry.js

@@ -1,7 +1,7 @@
 import {
 	BufferGeometry,
 	Float32BufferAttribute
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var BoxLineGeometry = function ( width, height, depth, widthSegments, heightSegments, depthSegments ) {
 

examples/jsm/geometries/ConvexGeometry.js

@@ -2,8 +2,8 @@ import {
 	BufferGeometry,
 	Float32BufferAttribute,
 	Geometry
-} from "../../../build/three.module.js";
-import { ConvexHull } from "../math/ConvexHull.js";
+} from '../../../build/three.module.js';
+import { ConvexHull } from '../math/ConvexHull.js';
 
 // ConvexGeometry
 

examples/jsm/geometries/DecalGeometry.js

@@ -3,7 +3,7 @@ import {
 	Float32BufferAttribute,
 	Matrix4,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * You can use this geometry to create a decal mesh, that serves different kinds of purposes.

examples/jsm/geometries/LightningStrike.js

@@ -5,8 +5,8 @@ import {
 	MathUtils,
 	Uint32BufferAttribute,
 	Vector3
-} from "../../../build/three.module.js";
-import { SimplexNoise } from "../math/SimplexNoise.js";
+} from '../../../build/three.module.js';
+import { SimplexNoise } from '../math/SimplexNoise.js';
 
 /**
  * @fileoverview LightningStrike object for creating lightning strikes and voltaic arcs.

examples/jsm/geometries/ParametricGeometries.js

@@ -3,7 +3,7 @@ import {
 	Geometry,
 	ParametricGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Experimenting of primitive geometry creation using Surface Parametric equations

examples/jsm/geometries/RoundedBoxBufferGeometry.js

@@ -1,7 +1,7 @@
 import {
 	BoxBufferGeometry,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 const tempNormal = new Vector3();
 function getUv( faceDirVector, normal, uvAxis, projectionAxis, radius, sideLength ) {

examples/jsm/geometries/TeapotBufferGeometry.js

@@ -4,7 +4,7 @@ import {
 	Matrix4,
 	Vector3,
 	Vector4
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Tessellates the famous Utah teapot database by Martin Newell into triangles.

examples/jsm/interactive/SelectionBox.js

@@ -1,7 +1,7 @@
 import {
 	Frustum,
 	Vector3
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * This is a class to check whether objects are in a selection area in 3D space

examples/jsm/interactive/SelectionHelper.js

@@ -1,6 +1,6 @@
 import {
 	Vector2
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var SelectionHelper = ( function () {
 

examples/jsm/lights/LightProbeGenerator.js

@@ -5,7 +5,7 @@ import {
 	SphericalHarmonics3,
 	Vector3,
 	sRGBEncoding
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var LightProbeGenerator = {
 

examples/jsm/lights/RectAreaLightUniformsLib.js

@@ -9,7 +9,7 @@ import {
 	RGBAFormat,
 	UVMapping,
 	UniformsLib
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * Uniforms library for RectAreaLight shared webgl shaders

examples/jsm/lines/Line2.js

@@ -1,6 +1,6 @@
-import { LineSegments2 } from "../lines/LineSegments2.js";
-import { LineGeometry } from "../lines/LineGeometry.js";
-import { LineMaterial } from "../lines/LineMaterial.js";
+import { LineSegments2 } from '../lines/LineSegments2.js';
+import { LineGeometry } from '../lines/LineGeometry.js';
+import { LineMaterial } from '../lines/LineMaterial.js';
 
 var Line2 = function ( geometry, material ) {
 

examples/jsm/lines/LineGeometry.js

@@ -1,4 +1,4 @@
-import { LineSegmentsGeometry } from "../lines/LineSegmentsGeometry.js";
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
 
 var LineGeometry = function () {
 

examples/jsm/lines/LineMaterial.js

@@ -4,7 +4,7 @@ import {
 	UniformsLib,
 	UniformsUtils,
 	Vector2
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 /**
  * parameters = {

examples/jsm/lines/LineSegments2.js

@@ -7,9 +7,9 @@ import {
 	Mesh,
 	Vector3,
 	Vector4
-} from "../../../build/three.module.js";
-import { LineSegmentsGeometry } from "../lines/LineSegmentsGeometry.js";
-import { LineMaterial } from "../lines/LineMaterial.js";
+} from '../../../build/three.module.js';
+import { LineSegmentsGeometry } from '../lines/LineSegmentsGeometry.js';
+import { LineMaterial } from '../lines/LineMaterial.js';
 
 var LineSegments2 = function ( geometry, material ) {
 

examples/jsm/lines/LineSegmentsGeometry.js

@@ -7,7 +7,7 @@ import {
 	Sphere,
 	Vector3,
 	WireframeGeometry
-} from "../../../build/three.module.js";
+} from '../../../build/three.module.js';
 
 var LineSegmentsGeometry = function () {