Merge branch 'dev' into updated-hands

README.md

@@ -31,7 +31,6 @@ let camera, scene, renderer;
 let geometry, material, mesh;
 
 init();
-animate();
 
 function init() {
 
@@ -48,23 +47,22 @@ function init() {
 
 	renderer = new THREE.WebGLRenderer( { antialias: true } );
 	renderer.setSize( window.innerWidth, window.innerHeight );
+	renderer.setAnimationLoop( animation );
 	document.body.appendChild( renderer.domElement );
 
 }
 
-function animate() {
+function animation( time ) {
 
-	requestAnimationFrame( animate );
-
-	mesh.rotation.x += 0.01;
-	mesh.rotation.y += 0.02;
+	mesh.rotation.x = time / 2000;
+	mesh.rotation.y = time / 1000;
 
 	renderer.render( scene, camera );
 
 }
 ```
 
-If everything went well, you should see [this](https://jsfiddle.net/ruc3h17j/).
+If everything went well, you should see [this](https://jsfiddle.net/yf6nks2o/).
 
 ### Cloning this repository ###
 

docs/api/en/core/BufferAttribute.html

@@ -158,7 +158,7 @@
 		<h3>[method:Number getW]( [param:Integer index] ) </h3>
 		<p>Returns the w component of the vector at the given index.</p>
 
-		<h3>[method:null onUpload]( [param:Function callback] ) </h3>
+		<h3>[method:this onUpload]( [param:Function callback] ) </h3>
 		<p>
 		Sets the value of the onUploadCallback property.<br /><br />
 

docs/api/en/core/Layers.html

@@ -69,7 +69,7 @@
 		<p>
 			layers - a Layers object<br /><br />
 
-			Returns true if this and the passed *layers* object are members of the same set of layers.
+			Returns true if this and the passed *layers* object have at least one layer in common.
 		</p>
 
 		<h3>[method:null toggle]( [param:Integer layer] )</h3>

docs/api/en/core/Raycaster.html

@@ -145,7 +145,7 @@
 		[page:Vector3 direction] — The normalized direction vector that gives direction to the ray.
 		</p>
 		<p>
-		Updates the ray with a new origin and direction.
+		Updates the ray with a new origin and direction. Please note that this method only copies the values from the arguments.
 		</p>
 
 		<h3>[method:null setFromCamera]( [param:Vector2 coords], [param:Camera camera] )</h3>

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/helpers/AxesHelper.html

@@ -25,9 +25,9 @@ scene.add( axesHelper );
 		<h2>Examples</h2>
 
 		<p>
-			[example:webgl_geometries WebGL / geometries]<br/>
+			[example:webgl_buffergeometry_compression WebGL / buffergeometry / compression]<br/>
 			[example:webgl_geometry_convex WebGL / geometry / convex]<br/>
-			[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor]
+			[example:webgl_loader_nrrd WebGL / loader / nrrd]
 		</p>
 
 		<h2>Constructor</h2>

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/Frustum.html

@@ -11,7 +11,7 @@
 
 		<p class="desc">
 			[link:http://en.wikipedia.org/wiki/Frustum Frustums] are used to determine what is
-			inside the camera's field of view. They help speed up the rendering process - object which lie
+			inside the camera's field of view. They help speed up the rendering process - objects which lie
 			outside a camera's frustum can safely be excluded from rendering.<br /><br />
 
 			This class is mainly intended for use internally by a renderer for calculating

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

@@ -335,7 +335,7 @@
 		<h3>[method:Float getClearAlpha]()</h3>
 		<p>Returns a [page:Float float] with the current clear alpha. Ranges from 0 to 1.</p>
 
-		<h3>[method:Color getClearColor]()</h3>
+		<h3>[method:Color getClearColor]( [param:Color target] )</h3>
 		<p>Returns a [page:Color THREE.Color] instance with the current clear color.</p>
 
 		<h3>[method:WebGLRenderingContext getContext]()</h3>
@@ -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/ko/animation/AnimationAction.html

@@ -0,0 +1,339 @@
+<!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">
+			AnimationActions는 [page:AnimationClip AnimationClips]에 저장된 애니메이션을 예약하는 데 사용됩니다.
+			<br /><br />
+
+			참고: 대부분의 애니메이션 액션 메소드들은 체인으로 연결되어 있습니다.<br /><br />
+
+			three.js 애니메이션 시스템 엘리먼트에 대한 개요들은 매뉴얼의 "Next Steps" 섹션에 있는 "애니메이션 시스템" 글을 참조하세요.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:AnimationMixer mixer], [param:AnimationClip clip], [param:Object3D localRoot] )</h3>
+		<p>
+			[page:AnimationMixer mixer] - 애니메이션 믹서는 애니메이션 액션에 의해 제어됩니다.<br />
+			[page:AnimationClip clip] - 애니메이션 클립은 애니메이션 액션에 대한 애니메이션 데이터를 보유하고 있습니다.<br />
+			[page:Object3D localRoot] - 루트 오브젝트는 애니메이션 액션을 수행합니다.<br /><br />
+
+			참고: 해당 생성자를 직접 호출하는 대신 [page:AnimationMixer.clipAction] 으로 AnimationAction을 인스턴스화 해야합니다. 해당 메소드는 더 나은 성능을 위한 캐싱을 제공하기 때문입니다.
+		</p>
+
+
+		<h2>속성</h2>
+
+
+		<h3>[property:Boolean clampWhenFinished]</h3>
+		<p>
+			*clampWhenFinished* 가 true로 설정 되었을 경우 자동으로 애니메이션의 마지막 프레임에서 [page:.paused paused] 됩니다.
+			<br /><br />
+
+			*clampWhenFinished* 가 false로 설정 되었을 경우 마지막 루프의 작업이 완료 될 때 [page:.enabled enabled]을 자동으로 false로 전환되어, 더이상 작업에 영향을 주지 않습니다. <br /><br />
+
+			초기값은 *false* 입니다.<br /><br />
+
+			참고: *clampWhenFinished* 는 작업이 중단될 경우 아무런 영향을 주지 않습니다 (마지막 루프를 실제로 완료된 경우에만 효과가 있음).
+			
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			*enabled* 를 *false* 로 설정하면 작업이 비활성화 되어 아무런 영향을 주지 않습니다. 기본값은 *true* 입니다. <br /><br />
+
+			애니메이션 액션이 다시 활성화되면, 현재 [page:.time time] 부터 연속적으로 애니메이션이 활성화 됩니다 (*enabled* 를 *false* 로 설정하면 애니메이션 액션이 초기화 되지 않습니다).<br /><br />
+
+			참고: *enabled* 를 *true* 로 설정해도 자동적으로 애니메이션이 재시작하지 않습니다. *enabled* 를 *true* 로 설정하면 다음 조건이 충족되는 경우에만 즉시 애니메이션을 시작합니다: 
+			[page:.paused paused] 가 *false* 인 경우, - 그동안 애니메이션 액션은 비활성화 되지 않습니다 
+			( [page:.stop stop] 또는 [page:.reset reset] 명령을 실행하여) 그리고 [page:.weight weight], [page:.timeScale timeScale] 는 둘 다 0 이 아닙니다.
+
+		</p>
+
+		<h3>[property:Number loop]</h3>
+		<p>
+			반복 모드 ([page:.setLoop setLoop] 으로 변경할 수 있습니다). 기본값은 [page:Animation THREE.LoopRepeat] ([page:.repetitions repetitions] 는 무한한 수를 포함)
+			<br /><br />
+
+			다음의 상수값 중 하나여야 함:<br /><br />
+			[page:Animation THREE.LoopOnce] - 클립 한번 재생 <br />
+			[page:Animation THREE.LoopRepeat] - 클립의 끝에서 시작 부분으로 즉시 이동할 때마다 선택한 *repetitions* 수 만큼 클립 재생 <br />
+			[page:Animation THREE.LoopPingPong] - 선택한 *repetitions* 수 만큼 클립을 앞뒤로 재생
+		</p>
+  
+			애니메이션 액션에서 수행된 [page:AnimationClip] 의 반복 횟수입니다.
+			[page:.setLoop setLoop]을 통해 설정할 수 있습니다. 기본값은 *무한대* 입니다. <br /><br />
+			[page:. loop loop mode] 가 [page:animation THREE.LoopOnce] 로 설정되어 있으면 숫자를 설정해도 아무런 영향을 미치지 않습니다.
+			
+		</p>
+
+		<h3>[property:Number time]</h3>
+		<p>
+			애니메이션 액션의 로컬 시간 속성 (초 단위, 0부터 시작).<br /><br />
+
+			시간 속성은 값이 고정 되거나, 반복 상태에 따라 0 ... clip.duration 으로 래핑 됩니다. 
+			[page:.timeScale timeScale] 을 변경하여 글로벌 믹서 타임을 상대적으로 확장할 수 있습니다 
+			([page:.setEffectiveTimeScale setEffectiveTimeScale] 또는 [page:.setDuration setDuration] 을 이용하여) <br />
+		</p>
+
+		<h3>[property:Number timeScale]</h3>
+		<p>
+			[page:.time time] 에 대한 스케일 팩터 속성입니다. 값이 0 일 경우 애니메이션은 중지됩니다.
+			음수 값 일 경우 애니메이션은 뒤로 재생 됩니다. 기본값은 *1* 입니다. <br /><br />
+			*timeScale* 과 관련된 속성/메소드는:
+			[page:.getEffectiveTimeScale getEffectiveTimeScale],
+			[page:.halt halt],
+			[page:.paused paused],
+			[page:.setDuration setDuration],
+			[page:.setEffectiveTimeScale setEffectiveTimeScale],
+			[page:.stopWarping stopWarping],
+			[page:.syncWith syncWith],
+			[page:.warp warp] 입니다.
+		</p>
+
+		<h3>[property:Number weight]</h3>
+		<p>
+			애니메이션 액션의 중요도에 대한 속성입니다 ([0,1] 간격). 
+			값은 *0* (영향 없음) 과 *1* (최대 영향) 사이의 값을 사용할 수 있고, 여러 액션들을 혼합해서 사용할 수 있습니다.
+			기본값은 *1* 입니다. <br /><br />
+			
+			*weight* 와 관련된 속성/메소드는:
+			[page:.crossFadeFrom crossFadeFrom],
+			[page:.crossFadeTo crossFadeTo],
+			[page:.enabled enabled],
+			[page:.fadeIn fadeIn],
+			[page:.fadeOut fadeOut],
+			[page:.getEffectiveWeight getEffectiveWeight],
+			[page:.setEffectiveWeight setEffectiveWeight],
+			[page:.stopFading stopFading] 입니다.
+		</p>
+
+		<h3>[property:Boolean zeroSlopeAtEnd]</h3>
+		<p>
+			시작, 루프 및 종료에 대해 별도의 클립없이 부드러운 보간이 가능합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean zeroSlopeAtStart]</h3>
+		<p>
+			시작, 루프 및 종료에 대해 별도의 클립없이 부드러운 보간이 가능합니다. 기본값은 *true* 입니다.
+		</p>
+
+
+		<h2>메소드</h2>
+
+
+		<h3>[method:AnimationAction crossFadeFrom]( [param:AnimationAction fadeOutAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
+		<p>
+			해당 메소드는 [page:.fadeIn fade in] 을 수행하게 되고, 전달 된 시간 간격 내에서 동시에 다른 작업을 페이드 아웃을 수행합니다.
+			해당 메소드는 체인으로 연결될 수 있습니다. <br /><br />
+
+			만약 warpBoolean 이 true 일 경우, 추가적으로 [page.warp warping] 이 적용될 것입니다 (time scales 만큼 점차적으로 변경). <br /><br />
+
+			참고: *fadeIn*/*fadeOut* 처럼, 페이딩의 시작/종료의 가중치 값이 1일 때 동작됩니다.
+
+		</p>
+
+		<h3>[method:AnimationAction crossFadeTo]( [param:AnimationAction fadeInAction], [param:Number durationInSeconds], [param:Boolean warpBoolean] )</h3>
+		<p>
+			해당 메소드는 [page:.fadeOut fade out] 을 수행하게 되고, 전달 된 시간 간격 내에서 동시에 다른 작업을 페이드 인을 수행합니다.
+			해당 메소드는 체인으로 연결될 수 있습니다. <br /><br />
+			
+			만약 warpBoolean 이 true 일 경우, 추가적으로 [page.warp warping] 이 적용될 것입니다 (time scales 만큼 점차적으로 변경). <br /><br />
+			
+			참고: *fadeIn*/*fadeOut* 처럼, 페이딩의 시작/종료의 가중치 값이 1일 때 동작됩니다.
+
+		</p>
+
+		<h3>[method:AnimationAction fadeIn]( [param:Number durationInSeconds] )</h3>
+		<p>
+			전달된 시간 간격 내에서 페이드 인의 [page:.weight weight] 의 값을 0 에서 1으로 점차적으로 증가합니다. 
+			해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationAction fadeOut]( [param:Number durationInSeconds] )</h3>
+		<p>
+			전달된 시간 간격 내에서 페이드 아웃의 [page:.weight weight] 의 값을 1 에서 0으로 점차적으로 감소합니다.
+			해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:Number getEffectiveTimeScale]()</h3>
+		<p>
+			실질적인 타임 스케일을 반환합니다. (현재 워핑 상태 및 [page:.paused paused] 을 고려해야합니다).
+			
+		</p>
+
+		<h3>[method:number getEffectiveWeight]()</h3>
+		<p>
+			실질적인 가중치를 반환합니다. (현재 페이딩 상태 및 [page:.enabled enabled] 을 고려해야합니다).
+		</p>
+
+		<h3>[method:AnimationClip getClip]()</h3>
+		<p>
+			애니메이션 액션에 대한 애니메이션 데이터를 보관하는 클립을 반환합니다.
+		</p>
+
+		<h3>[method:AnimationMixer getMixer]()</h3>
+		<p>
+			애니메이션 액션을 재생할 애니메이션 믹서를 반환합니다.
+		</p>
+
+		<h3>[method:Object3D getRoot]()</h3>
+		<p>
+			애니메이션 액션이 수행되는 루트 객체를 반환합니다.
+		</p>
+
+		<h3>[method:AnimationAction halt]( [param:Number durationInSeconds] )</h3>
+		<p>
+			전달 된 시간 간격 내에서 [page:.timeScale timeScale]을 점차적으로 애니메이션 속도를 0으로 감소시킵니다(현재 값에서부터 시작).
+			해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:Boolean isRunning]()</h3>
+		<p>
+			애니메이션 액션이 현재 [page:.time time] 동작중일 경우 true 을 반환합니다. <br /><br />
+
+			추가적으로 믹서에서 활성화되는 것 이외에 ([page:.isScheduled isScheduled] 참조) 다음 조건을 충족해야 합니다:
+			[page:.paused paused] 는 false 조건을 충족해야 합니다,
+			[page:.enabled enabled] 는 true 조건을 충족해야 합니다,
+			[page:.timeScale timeScale] 는 0이 아니여야 하고, ([page:.startAt start] 지연되지 않아야 합니다. <br /><br />
+
+			참고: *isRunning* 이 true 이여도 애니메이션이 실제 동작한다는 것을 의미하지는 않습니다.
+			[page : .weight weight] 가 0이 아닌 값으로 추가로 설정된 경우에만 해당됩니다.
+			
+		</p>
+
+		<h3>[method:Boolean isScheduled]()</h3>
+		<p>
+			만약 애니메이션 액션이 믹서에서 활성화 될 경우 true 를 반환합니다. <br /><br />
+			
+			참고: 해당 메소드는 애니메이션이 실제로 동작하고 있음을 의미하지는 않습니다. ([page:.isRunning isRunning] 에 대한 추가적인 비교 조건이 필요)
+			
+		</p>
+
+		<h3>[method:AnimationAction play]()</h3>
+		<p>
+			믹서에 애니메이션 액션을 활성화하도록 요청합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			참고: 해당 메소드를 활성화 할 경우 반드시 애니메이션이 실행되는 것을 의미하지는 않습니다: 
+			만약 애니메이션 액션 작업이 이미 완료되었거나 (마지막 루프의 끝에 도달하여), 지연된 시작 시간이 설정된 경우([page:.startAt startAt] 을 통해), 먼저 [page:.reset rest]을 처음으로 실행해야 합니다.
+			일부 다른 설정 ([page:.paused paused] = true, [page:.enabled enabled] = false, [page:.weight weight] = 0, [page:.timeScale timeScale] = 0) 으로 인해 애니메이션이 재생되지 않을 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationAction reset]()</h3>
+		<p>
+			애니메이션 액션을 재설정 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			해당 메소드는 
+			[page:.paused paused] 를 false로 설정합니다,
+			[page:.enabled enabled] 를 true로 설정합니다,
+			[page:.time time] 을 0으로 설정합니다,
+			미리 예약된 페이딩 및 워핑을 중단하고 내부 루프 수를 제거하고 시작을 지연시킵니다. <br /><br />
+
+			참고: *.reset* 은 항상 [page:.stop stop] 에 의해 호출됩니다 그러나, *reset* 은 스스로 *stop* 을 호출하지는 않습니다. <br/>
+			기술: 만약 당신이 *stop* 과 *reset* 둘다 호출하기를 원하면, *reset* 은 호출하지 말고 *stop* 을 해야합니다. <br/>
+		</p>
+
+		<h3>[method:AnimationAction setDuration]( [param:Number durationInSeconds] )</h3>
+		<p>
+			애니메이션 액션의 단일 루프의 기간을 설정합니다 ([page:.timeScale timeScale] 을 조정하고, 미리 예약된 워핑을 중단).
+			해당 메소드는 체인으로 연결할 수 있습니다.
+			
+		</p>
+
+		<h3>[method:AnimationAction setEffectiveTimeScale]( [param:Number timeScale] )</h3>
+		<p>
+			[page:.timeScale timeScale] 을 설정하고 예약된 워핑을 중단합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			만약 [page:.paused paused] 가 false 일 경우, 실질적인 타임 스케일 (내부 속성) 값은 해당 timeScale 값으로 설정됩니다;
+			그렇지 않으면, 실질적인 타임 스케일 (현재 애니메이션에 직접적으로 영향을 미치는) 값은 0으로 설정됩니다. <br /><br />
+
+			참고: 해당 메소드로 인해 *timeScale* 의 값이 0 으로 설정 되어도 .*paused* 값은 자동적으로 *true* 로 변경되지 않습니다.
+			
+		</p>
+
+		<h3>[method:AnimationAction setEffectiveWeight]( [param:Number weight] )</h3>
+		<p>
+			[page:.weight weight] 이 설정되고 예약된 페이딩을 중지 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			만약 [page:..enabled enabled] 이 true 일 경우, 실질적인 가중치 (내부 속성* 값은 해당 weight 값으로 설정됩니다;
+			그렇지 않으면, 실질적인 가중치 (현재 애니메이션에 직접적으로 영향을 미치는) 값은 0으로 설정됩니다. <br /><br />
+	
+			참고: 해당 메소드로 인해 *weight* 의 값이 0 으로 설정 되어도 .*enabled* 값은 자동적으로 *false*로 변경되지 않습니다.
+		</p>
+
+		<h3>[method:AnimationAction setLoop]( [param:Number loopMode], [param:Number repetitions] )</h3>
+		<p>
+			[page:.loop loop mode] 및 [page:.repetitions repetitions] 의 횟수를 설정합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationAction startAt]( [param:Number startTimeInSeconds] )</h3>
+		<p>
+			
+			지연된 시작 이벤트를 정의합니다 (일반적으로 AnimationMixer.time + deltaTimeInSeconds에서 전달됨). 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			참고: .[page:.startAt startAt] 메소드가 [page:.play play] 메소드와 함께 연결되어 있거나 애니메이션이 믹서에서 활성화 된 경우 (중지 또는 재설정없이 .*play* 를 먼저 호출하여) 애니메이션은 지정된 시간에만 시작됩니다.
+		</p>
+
+		<h3>[method:AnimationAction stop]()</h3>
+		<p>
+			믹서에게 애니메이션 액션을 비활성화하도록 설정합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			해당 메소드를 실행하면 작업이 즉시 중단되고 완전히 재설정 [page:.rest rest] 됩니다. <br /><br />
+
+			참고: [page:.AnimationMixer.stopAllAction mixer.stopAllAction] 을 통해 같은 믹서에 있는 모든 활성된 작업들을 한번에 종료할 수 있습니다.
+
+		</p>
+
+		<h3>[method:AnimationAction stopFading]()</h3>
+		<p>
+			애니메이션 액션에 적용되어 있는 [page:.fadeIn fading] 을 종료합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationAction stopWarping]()</h3>
+		<p>
+			애니메이션 액션에 적용되어 있는 [page:.warp warping] 을 종료합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationAction syncWith]( [param:AnimationAction otherAction] )</h3>
+		<p>
+			애니메이션 액션을 전달된 다른 작업과 함께 동기화를 합니다. 해당 메소드는 체인으로 연결할 수 있습니다. <br /><br />
+
+			애니메이션 액션의 동기화는 [page:.time time] 및 [page:.timeScale timeScale] 값을 다른 작업의 값으로 대응되어 설정됩니다 (예약 된 워핑 중지). <br /><br />
+
+			참고: 다른 작업들의 *time* 및 *timeScale* 의  향후 변경 사항은 감지되지 않습니다.
+		</p>
+
+		<h3>[method:AnimationAction warp]( [param:Number startTimeScale], [param:Number endTimeScale], [param:Number durationInSeconds] )</h3>
+		<p>
+			들어오는 이벤트 간격에서 [page:.timeScale timeScale] 을 *startTimeScale* 에서 *endTimeScale* 로 점차적으로 재생 속도를 변경합니다. 해당 메소드는 체인으로 연결할 수 있습니다.
+		</p>
+
+
+		<h2>이벤트</h2>
+
+
+		<p class="desc">
+			단일 루프의 끝과 전체 작업의 ​​끝을 나타내는 두 가지 이벤트가 있습니다. 당신은 다음과 같이 응답 할 수 있습니다.
+		</p>
+		<code>
+		mixer.addEventListener( 'loop', function( e ) { …} ); // properties of e: type, action and loopDelta
+		mixer.addEventListener( 'finished', function( e ) { …} ); // properties of e: type, action and direction
+		</code>
+
+		<h2>소스</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/AnimationClip.html

@@ -0,0 +1,142 @@
+<!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">
+			AnimationClip은 재활용 가능한 키프레임 트랙 모음으로, 애니메이션을 대표하는 단위입니다.<br /><br />
+
+			three.js 애니메이션 시스템의 다양한 엘레먼트에 관해서는 매뉴얼의 "심화과정" 중 "애니메이션 시스템" 문서를 참고하세요.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Number duration], [param:Array tracks] )</h3>
+		<p>
+			[page:String name] - 클립의 이름.<br />
+			[page:Number duration] - 클립의 길이 (초 단위). 음수 값을 입력하면 길이는 *tracks* 배열에서 계산됩니다.<br />
+			[page:Array tracks] - [page:KeyframeTrack KeyframeTracks] 배열.<br /><br />
+
+			참고: AnimationClip를 직접 인스턴스로 만드는 것보다, 정적 메서드를 활용하여 AnimationClips를 만드는 것이 좋습니다: 
+			JSON ([page:.parse parse]), 모프 타겟 시퀀스 ([page:.CreateFromMorphTargetSequence CreateFromMorphTargetSequence],
+			[page:.CreateClipsFromMorphTargetSequences CreateClipsFromMorphTargetSequences]) 혹은
+			애니메이션 계층 ([page:.parseAnimation parseAnimation])을 활용하세요. - 모델의 기하학 애니메이션 배열에 AnimationClips가 없을 경우.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<h3>[property:Number duration]</h3>
+		<p>
+			클립의 길이입니다(초 단위). 이 값은 [page:.tracks tracks] 배열에서 [page:.resetDuration resetDuration]를 통해 계산할 수 있습니다.
+		</p>
+
+		<h3>[property:String name]</h3>
+		<p>
+			클립의 이름입니다. 특정 클립은 [page:.findByName findByName]으로 찾을 수 있습니다.
+		</p>
+
+		<h3>[property:Array tracks]</h3>
+		<p>
+			이 클립에서 재생되는 각 프로퍼티에 [page:KeyframeTrack]을 포함하고 있는 배열입니다.
+		</p>
+
+		<h3>[property:String uuid]</h3>
+		<p>
+			클립 인스턴스의 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]입니다.
+			자동으로 할당되며 수정할 수 없습니다.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:AnimationClip clone]()</h3>
+		<p>
+			클립의 복사본을 리턴합니다.
+		</p>
+
+		<h3>[method:this optimize]()</h3>
+		<p>
+			동일한 시퀀스 키를 제거해 각 트랙을 최적화합니다(모프 타겟 시퀀스에서는 흔한 작업입니다).
+		</p>
+
+		<h3>[method:this resetDuration]()</h3>
+		<p>
+			클립의 [page:.duration duration]을 가장 긴 [page:KeyframeTrack]의 길이로 설정합니다.
+		</p>
+
+		<h3>[method:Object toJSON]()</h3>
+		<p>
+			애니메이션 클립을 직렬화한 JSON object를 리턴합니다.
+		</p>
+
+		<h3>[method:this trim]()</h3>
+		<p>
+			클립의 길이에 맞춰 모든 트랙의 공백을 제거합니다.
+		</p>
+
+		<h3>[method:Boolean validate]()</h3>
+		<p>
+			클립에 있는 트랙들의 최소 유효성 검사를 시행합니다. 모든 트랙이 유효하면 true를 리턴합니다.
+		</p>
+
+
+		<h2>정적 메서드</h2>
+
+
+		<h3>[method:Array CreateClipsFromMorphTargetSequences]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
+		<p>
+			geometry의 [page:Geometry.morphTargets morph
+			target sequences]를 통해 생성된 새 AnimationClips 배열을 리턴하고 , 
+			모프 타겟 이름을 애니메이션-그룹-기반의 "Walk_001, Walk_002, Run_001, Run_002 ..."와 같은 패턴으로 정리합니다.
+		</p>
+
+		<h3>[method:AnimationClip CreateFromMorphTargetSequence]( [param:String name], [param:Array morphTargetSequence], [param:Number fps], [param:Boolean noLoop] )</h3>
+		<p>
+			geometry에서 넘어온 [page:Geometry.morphTargets morph targets array]를 통해 
+			초 단위의 프레임 수와 이름을 받아 새 AnimationClip을 리턴합니다.
+			<br /><br />
+
+			참고: fps 파라미터가 필요하지만, 애니메이션 속도는 [page:AnimationAction.setDuration animationAction.setDuration]을 통한 
+			*AnimationAction*에 의해 오버라이딩될 수 있습니다.
+		</p>
+
+		<h3>[method:AnimationClip findByName]( [param:Object objectOrClipArray], [param:String name] )</h3>
+		<p>
+			Searches for an AnimationClip을 위한 검색기로, 첫 파라미터 혹은 AnimationClips 배열, "animations"라는 이름을 가진 mesh, geometry 베열로부터 이름을 기반으로 검색합니다.
+		</p>
+
+		<h3>[method:AnimationClip parse]( [param:Object json] )</h3>
+		<p>
+			클립의 JSON 파일을 파싱하고 AnimationClip을 리턴합니다.
+		</p>
+
+		<h3>[method:AnimationClip parseAnimation]( [param:Object animation], [param:Array bones] )</h3>
+		<p>
+			animation.hierarchy 포맷을 파싱하고 AnimationClip을 리턴합니다.
+		</p>
+
+		<h3>[method:Object toJSON]( [param:AnimationClip clip] )</h3>
+		<p>
+			AnimationClip을 받아 JSON 객체를 리턴합니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/AnimationMixer.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>
+
+		<p class="desc">
+			AnimationMixer는 장면에 있는 특정 오브젝트의 애니메이션 플레이어입니다. 한 장면에서 여러 개의 오브젝트들이 
+			독립적으로 움직인다면, 각각 다른 AnimationMixer가 사용되고 있다고 볼 수 있습니다.<br /><br />
+
+			three.js 애니메이션 시스템의 다양한 엘레먼트에 관해서는 매뉴얼의 "심화과정" 중 "애니메이션 시스템" 문서를 참고하세요.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:Object3D rootObject] )</h3>
+		<p>
+			[page:Object3D rootObject] - 믹서의 애니메이션이 재생될 오브젝트.<br />
+		</p>
+
+
+		<h2>Properties</h2>
+
+
+		<h3>[property:Number time]</h3>
+		<p>
+			글로벌 믹서의 시간 (초 단위, 믹서 생성시에 0부터 시작함).
+		</p>
+
+		<h3>[property:Number timeScale]</h3>
+		<p>
+			글로벌 배속 [page:.time mixer time].<br /><br />
+
+			참고: 믹서의 timeScale를 0으로 설정했다가 나중에 1로 설정하는 방식으로 정지/재생 기능을 
+			믹서를 통해 사용할 수 있습니다.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:AnimationAction clipAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
+		<p>
+			전달받은 클립의 [page:AnimationAction]을 리턴하며, 믹서의 루트 경로가 아닌 다른 루트 경로를 사용할 수도 있습니다. 
+			첫 번째 파라미터는 [page:AnimationClip] 오브젝트 및 AnimationClip 이름으로 사용할 수 있습니다.<br /><br />
+
+			클립에 동작은 설정되었는데 루트 파라미터가 아직 존재하지 않는다면, 이 메서드를 통해 자동으로 생성될 것입니다.
+			이 메서드를 같은 클립과 루트 파라미터로 여러 번 호출해도 항상 같은 클립 인스턴스를 리턴할 것입니다.
+		</p>
+
+		<h3>[method:AnimationAction existingAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
+		<p>
+			전달받은 클립에 존재하는 [page:AnimationAction]을 리턴하며 믹서의 루트 경로가 아닌 다른 루트 경로를 사용할 수도 있습니다.<br /><br />
+
+			첫 번째 파라미터는 [page:AnimationClip] 오브젝트 및 AnimationClip 이름으로 사용할 수 있습니다.
+		</p>
+
+		<h3>[method:Object3D getRoot]()</h3>
+		<p>
+			믹서의 루트 오브젝트를 리턴합니다.
+		</p>
+
+		<h3>[method:AnimationMixer stopAllAction]()</h3>
+		<p>
+			믹서의 모든 이전 예약 동작들을 비활성화합니다.
+		</p>
+
+		<h3>[method:AnimationMixer update]([param:Number deltaTimeInSeconds]) </h3>
+		<p>
+			글로벌 믹서 시간을 되돌리고 애니메이션을 업데이트합니다.<br /><br />
+
+			주로 렌더 루프에서 사용되며, [page:.timeScale timeScale]로 설정된 배율로 [page:Clock.getDelta clock.getDelta]를 넘겨줍니다.
+		</p>
+
+		<h3>[method:AnimationMixer setTime]([param:Number timeInSeconds]) </h3>
+		<p>
+			글로벌 믹서의 특정 시간을 설정하고 그에 따라 애니메이션을 업데이트합니다.<br /><br />
+
+			애니메이션의 정확한 시간대로 이동할 때 유용합니다. 입력되는 파라미터는 믹서의 [page:.timeScale timeScale]의 배율을 따라갑니다.
+		</p>
+
+		<h3>[method:null uncacheClip]([param:AnimationClip clip])</h3>
+
+		<p>
+			클립에 있는 모든 메모리 리소스를 할당 해제합니다.
+		</p>
+
+		<h3>[method:null uncacheRoot]([param:Object3D root]) </h3>
+		<p>
+			루트 오브젝트의 모든 메모리 리소스를 할당 해제합니다.
+		</p>
+
+		<h3>[method:null uncacheAction]([param:AnimationClip clip], [param:Object3D optionalRoot])</h3>
+		<p>
+			동작의 모든 메모리 리소스를 할당 해제합니다.
+		</p>
+
+
+		<h2>Source</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/AnimationObjectGroup.html

@@ -0,0 +1,86 @@
+<!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">애니메이션 상태를 공유 및 저장하는 오브젝트 그룹입니다.<br /><br />
+
+			three.js 애니메이션 시스템의 다양한 엘레먼트에 관해서는 매뉴얼의 "심화과정" 중 "애니메이션 시스템" 문서를 참고하세요.
+		</p>
+
+		<h2>사용:</h2>
+
+		<p class="desc">
+			'root'로 생성자에 넘기거나 'root'로 오브젝트를 넘기는 대신 
+			[page:AnimationMixer AnimationMixer]의 [page:AnimationMixer.clipAction clipAction]메서드를 통해 넘긴
+			오브젝트들을 추가합니다.
+			<br /><br />
+
+			이 클래스의 모든 오브젝트들은 믹서의 하나의 오브젝트로 나타날 것이기 때문에,
+			개별 오브젝트의 캐시 컨트롤은 그룹에서 이루어져야 합니다.
+		</p>
+
+
+		<h2>제한</h2>
+		<p class="desc">
+			애니메이션 된 프로퍼티들은 그룹의 모든 오브젝트에서 사용 가능해야합니다.<br /><br />
+
+			단일 프로퍼티는 타겟 그룹 관리 아니면 직접 관리 둘 중 하나로 되어야하며, 동시에는 안 됩니다.
+		</p>
+
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
+		<p>
+			[page:Object obj] - 같은 애니메이션 상태를 동유하는 메쉬의 임의 숫자.
+		</p>
+
+		<h2>프로퍼티</h2>
+
+
+		<h3>[property:Object stats]</h3>
+		<p>
+			*AnimationObjectGroup* (총 갯수, 사용중인 갯수, 오브젝트별 바인딩 갯수)의 정보를 담고있는 오브젝트
+		</p>
+
+		<h3>[property:String uuid]</h3>
+		<p>
+			*AnimationObjectGroup*의 [link:http://en.wikipedia.org/wiki/Universally_unique_identifier UUID]. 
+			자동으로 할당괴며 수정이 불가능합니다.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:null add]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
+		<p>
+			*AnimationObjectGroup*에 임의 갯수만큼의 오브젝트를 추가합니다.
+		</p>
+
+		<h3>[method:null remove]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
+		<p>
+			*AnimationObjectGroup*의 임의 갯수만큼의 오브젝트를 제거합니다.
+		</p>
+
+		<h3>[method:null uncache]( [param:Object obj1], [param:Object obj2], [param:Object obj3], ... )</h3>
+		<p>
+			*AnimationObjectGroup*의 전달받은 오브젝트들의 모든 메모리 리소스를 할당 해제합니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/AnimationUtils.html

@@ -0,0 +1,62 @@
+<!DOCTYPE html>
+<html lang="en">
+	<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">
+		내부적으로 사용되어 애니메이션을 보조하는 여러 기능들을 가진 오브젝트입니다.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:Array arraySlice]( array, from, to )</h3>
+		<p>
+		Array.prototype.slice와 동일하지만, 타입 배열에서도 작동합니다.
+		</p>
+
+		<h3>[method:Array convertArray]( array, type, forceClone )</h3>
+		<p>
+		배열을 특정 타입으로 변환합니다.
+		</p>
+
+		<h3>[method:Array flattenJSON]( jsonKeys, times, values, valuePropertyName  )</h3>
+		<p>
+		AOS 키프레임 포맷을 파싱하는데에 사용합니다.
+		</p>
+
+		<h3>[method:Array getKeyframeOrder]( times )</h3>
+		<p>
+		분류 가능한 시간과 값을 배열로 리턴합니다.
+		</p>
+
+		<h3>[method:Boolean isTypedArray]( object )</h3>
+		<p>
+		타입 배열이면 *true*를 리턴합니다.
+		</p>
+
+		<h3>[method:Array sortedArray]( values, stride, order )</h3>
+		<p>
+		이전에 [page:AnimationUtils.getKeyframeOrder getKeyframeOrder]를 통해 리턴된 배열을 정렬합니다.
+		</p>
+
+		<h3>[method:AnimationClip subclip]( [param:AnimationClip clip], [param:String name], [param:Number startFrame], [param:Number endFrame], [param:Number fps] )</h3>
+		<p>
+		설정한 프레임 사이에 있는 원본 클립의 일부분을 포함하는 새 클립을 만듭니다.
+		</p>
+
+		<h2>소스코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/KeyframeTrack.html

@@ -0,0 +1,245 @@
+<!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">
+			KeyframeTrack은 시간 리스트와 관련 값으로 구성되어 있고 오브젝트의 특정 프로퍼티를 동작시키는 데에 사용되는
+			[link:https://en.wikipedia.org/wiki/Key_frame keyframes]의 시간별 시퀀스입니다.
+		</p>
+
+		<p>
+			three.js 애니메이션 시스템의 다양한 엘레먼트에 관해서는 매뉴얼의 "심화과정" 중 "애니메이션 시스템" 문서를 참고하세요.
+		</p>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/wiki/JSON-Model-format-3 JSON model format]의 애니메이션 계층 구조와는 다르게
+			*KeyframeTrack*은 "keys" 배열에 자신의 단일 키프레임을 오브젝트로 저장하지 않습니다. (각 프레임의 시간과 값을 한 장소에 보관합니다).
+		</p>
+
+		<p>
+			그 대신에, *KeyframeTrack*에는 언제나 두 배열이 존재합니다: [page:.times times] 배열은
+			트랙의 모든 키프레임의 값을 시퀀스 순으로 저장하고,
+			[page:.values values] 배열은 애니메이션 프로퍼티의 변동값을 저장합니다.
+		</p>
+
+		<p>
+			한 특정 시점에 속한 단일 값은 간단한 숫자 뿐만이 아니라 (예를 들면) 벡터값 (위치가 변화하는 애니메이션의 경우) 혹은 쿼터니언 (회전이 있는 애니메이션의 경우)
+			도 가능합니다. 이러한 이유로 values 배열은(플랫 배열도 마찬가지) 보통 times 배열보다 3~4배 정도 깁니다.
+		</p>
+
+		<p>
+			다양한 애니메이션 관련 값들의 타입 대응을 위해,	*KeyframeTrack*에는 하위 클래스가 있고 대부분의 프로퍼티와 메서드등을 상속받습니다.
+		</p>
+
+		<ul>
+			<li>[page:BooleanKeyframeTrack]</li>
+			<li>[page:ColorKeyframeTrack]</li>
+			<li>[page:NumberKeyframeTrack]</li>
+			<li>[page:QuaternionKeyframeTrack]</li>
+			<li>[page:StringKeyframeTrack]</li>
+			<li>[page:VectorKeyframeTrack]</li>
+		</ul>
+
+		<p>
+			다른 종류의 KeyframeTracks으로 [page:AnimationClip AnimationClips]를 직접 만드는 예제는 
+			[link:https://threejs.org/examples/jsm/animation/AnimationClipCreator.js AnimationClipCreator]를 참고하세요.
+		</p>
+
+		<p>
+			명시적 값은 시간 배열에 저장된 시간 이산 지점에 특정되기 때문에, 모든 중간 값들은 보간이 되어야 합니다. 
+		</p>
+
+		<p>
+			트랙의 이름은 트랙과 애니메이션 노드([page:PropertyBinding]에 의한)의 특정 프로퍼티와의 연결에 중요합니다.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values], [param:Constant interpolation] )</h3>
+		<p>
+			[page:String name] - *KeyframeTrack*의 식별자.<br />
+			[page:Array times] - 키프레임 시간 배열, 내부적으로 
+			[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]로 변환됩니다.<br />
+			[page:Array values] - 시간 배열과 관련된 값을 가진 배열, 내부적으로
+			[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]로 변환됩니다.<br />
+			[page:Constant interpolation] - 보간법 사용 타입. 가능한 값들은
+			[page:Animation Animation Constants] 를 참고하세요. 기본값은 [page:Animation InterpolateLinear]입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<h3>[property:String name]</h3>
+		<p>
+			트랙의 이름은 [page:Geometry.morphTargets morph targets] 혹은 [page:SkinnedMesh bones] 및 
+			다른 애니메이션 오브젝트에 들어있는 값들을 참조할 수 있습니다. See
+			프로퍼티로 파싱될 수 있는 문자열 폼에 대해서는 [page:PropertyBinding.parseTrackName] 를 참고하세요.
+		</p>
+
+		<p>
+			트랙의 이름은 노드의 이름을 사용하거나 노드의 uuid(믹서에 전달된 장면 그래프 노드의 서브트리 안에 있어야 하지만)를 사용해서 노드를 특정할 수 있습니다. 
+			혹은 만약 트랙 이름이 .으로 시작한다면, 트랙은  믹서에 전달된 루트 노드를 적용할 것입니다.
+		</p>
+
+		<p>
+			보통 노드 다음에는 프로퍼티가 직접 특정됩니다. 하지만 float 트랙을 통해 회전의 X 컴포넌트를 조절하려면 
+			.rotation[x]같은 서브프로퍼티를 특정할 수도 있습니다.
+		</p>
+
+		<p>
+			오브젝트 이름으로 골자나 멀티머티리얼을 특정할 수도 있습니다. 예시:
+			.bones[R_hand].scale; 
+			추가적으로, 머티리얼 배열의 네 번째 머티리얼의 확상광 중 레드 채널은 .materials[3].diffuse[r]로 접근할 수 있습니다.
+		</p>
+
+		<p>
+			PropertyBinding은 모프 타겟 이름도 해석할 수 있습니다. 예시: .morphTargetInfluences[run].
+		</p>
+
+		<p>
+			참고: 트랙의 이름은 반드시 고유할 필요는 없습니다. 다중 트랙은 같은 프로퍼티를 사용할 수 있습니다.
+			결과는 다중 트랙의 각각의 동작들의 가중치에 따른 혼합 가중치에 기반해야 합니다.
+		</p>
+
+		<h3>[property:Float32Array times]</h3>
+		<p>
+			생성자를 통해 전달된 시간 배열을 변환한 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]입니다.
+		</p>
+
+		<h3>[property:Float32Array values]</h3>
+		<p>
+			생성자를 통해 전달된 값 배열을 변환한 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array]입니다.
+		</p>
+
+		<h3>[property:Constant DefaultInterpolation]</h3>
+		<p>
+			기본 보간법 타입: [page:Animation InterpolateLinear].
+		</p>
+
+		<h3>[property:Constant TimeBufferType ]</h3>
+		<p>
+			[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
+			내부적으로 시간에 사용되는 버퍼 타입.
+		</p>
+
+		<h3>[property:Constant ValueBufferType ]</h3>
+		<p>
+			[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array Float32Array],
+			내부적으로 값에 사용되는 버퍼 타입.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:KeyframeTrack clone]()</h3>
+		<p>
+			트랙의 복사본을 리턴합니다.
+		</p>
+
+		<h3>[method:null createInterpolant]()</h3>
+		<p>
+			생성자에서 넘어온 보간법 파라미터 값에 기반한 [page:LinearInterpolant LinearInterpolant], [page:CubicInterpolant CubicInterpolant]
+			혹은 [page:DiscreteInterpolant DiscreteInterpolant]를 생성합니다.
+		</p>
+
+		<h3>[method:null getInterpolation]()</h3>
+		<p>
+			보간법 타입을 리턴합니다.
+		</p>
+
+		<h3>[method:Number getValueSize]()</h3>
+		<p>
+			각 값의 길이를 리턴합니다 ([page:.times times] 배열로 나눈 [page:.values values] 배열의 길이).
+		</p>
+
+		<h3>[method:DiscreteInterpolant InterpolantFactoryMethodDiscrete]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
+		<p>
+			[page:KeyframeTrack.times times] 와 [page:KeyframeTrack.times values]를 통해
+			새 [page:DiscreteInterpolant DiscreteInterpolant]를 만듭니다.
+			Float32Array는 결과를 받을 수 있으면 넘겨줄 수 있습니다.
+			그렇지 않다면 적당한 크기가 자동으로 생성될 것입니다.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodLinear]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
+		<p>
+			[page:KeyframeTrack.times times] 와 [page:KeyframeTrack.times values]를 통해
+			새 [page:LinearInterpolant LinearInterpolant]를 만듭니다.
+			Float32Array는 결과를 받을 수 있으면 넘겨줄 수 있습니다.
+			그렇지 않다면 적당한 크기가 자동으로 생성될 것입니다.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodSmooth]( [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Float32Array result] )</h3>
+		<p>
+			[page:KeyframeTrack.times times] 와 [page:KeyframeTrack.times values]를 통해
+			새 [page:CubicInterpolant CubicInterpolant]를 만듭니다.
+			Float32Array는 결과를 받을 수 있으면 넘겨줄 수 있습니다.
+			그렇지 않다면 적당한 크기가 자동으로 생성될 것입니다.
+		</p>
+
+		<h3>[method:this optimize]()</h3>
+		<p>
+			모프 타겟 시퀀스에서는 흔한 동일 시퀀스 키를 제거합니다.
+		</p>
+
+		<h3>[method:this scale]()</h3>
+		<p>
+			인자 값으로 모든 키프레임 배속을 설정합니다.<br /><br />
+
+			참고: 아주 유용한 기능인데, 예를 들면, 초당 프레임의 특정 비율 변환에 있어서 용이합니다
+			(내부적으로 [page:AnimationClip.CreateFromMorphTargetSequence animationClip.CreateFromMorphTargetSequence]를 통해).
+		</p>
+
+		<h3>[method:this setInterpolation]( [param:Constant interpolationType] )</h3>
+		<p>
+			보간법 타입을 설정합니다. 타입은 [page:Animation Animation Constants] 를 참고하세요.
+		</p>
+
+		<h3>[method:this shift]( [param:Number timeOffsetInSeconds] )</h3>
+		<p>
+			모든 키프레임을 앞으로 혹은 뒤로 이동시킵니다.
+		</p>
+
+
+		<h3>[method:this trim]( [param:Number startTimeInSeconds], [param:Number endTimeInSeconds] )</h3>
+		<p>
+			*startTime* 앞과 *endTime* 뒤의 키프레임을 제거하며 [*startTime*, *endTime*] 범위 안의 수치는 변경시키지 않습니다.
+		</p>
+
+		<h3>[method:Boolean validate]()</h3>
+		<p>
+			트랙의 최소 유효성 검사를 실행합니다. 유효한 트랙이면 true를 리턴합니다.
+		</p>
+
+		<p>
+			이 메서드는 트랙이 비었거나, [page:.valueSize value size] 값이 부적절하거나, 
+			[page:.times times] 혹은 [page:.values values] 배열의 값이 부적절하거나, *times* 배열의 순서가 어긋나면 에러 로그를 콘솔에 출력합니다.
+		</p>
+
+		<h2>정적 메서드</h2>
+
+		<h3>[method:JSON toJSON]( [param:KeyframeTrack track] )</h3>
+		<p>
+		트랙을 JSON으로 변환합니다.
+		</p>
+
+
+		<h2>소스코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/PropertyBinding.html

@@ -0,0 +1,132 @@
+<!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">
+			내부적으로 사용되는 장면 그래프의 실제 프로퍼티에 대한 내용입니다.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:Object3D rootNode], path, parsedPath )</h3>
+		<p>
+			-- [page:Object3D rootNode]:
+			-- path
+			-- parsedPath (선택)
+
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:Number path]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Number parsedPath]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Number node]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Number rootNode]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Object BindingType]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Object Versioning]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Array GetterByBindingType]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Array SetterByBindingTypeAndVersioning]</h3>
+		<p>
+
+		</p>
+
+
+
+		<h2>Methods</h2>
+
+		<h3>[method:null getValue]( [param:Array targetArray], [param:Number offset] )</h3>
+		<p>
+		</p>
+
+		<h3>[method:null setValue]( [param:Array sourceArray], [param:Number offset] )</h3>
+		<p>
+		</p>
+
+		<h3>[method:null bind]( )</h3>
+		<p>
+			장면 그래프에 있는 프로퍼티에 대한 게터와 세터를 생성합니다. 내부적으로
+			[page:PropertyBinding.getValue getValue] 와 [page:PropertyBinding.setValue setValue]로 사용됩니다.
+		</p>
+
+		<h3>[method:null unbind]( )</h3>
+		<p>
+			장면 그래프에 있는 프로퍼티에 대한 게터와 세터의 연결을 끊습니다.
+		</p>
+
+		<h3>[method:Constructor Composite]( targetGroup, path, optionalParsedPath )</h3>
+		<p>
+			새 Composite PropertyBinding을 생성합니다.
+		</p>
+
+		<h3>[method:Constructor create]( root, path, parsedPath )</h3>
+		<p>
+			새 Composite PropertyBinding 혹은 (만약 루트가 [page:AnimationObjectGroup]이면) PropertyBinding을 생성합니다.
+		</p>
+
+		<h3>[method:Constructor parseTrackName]( trackName )</h3>
+		<p>
+			다음 형식에 맞는 문자열을 확인합니다:<br />
+			-- nodeName.property<br />
+			-- nodeName.property[accessor]<br />
+			-- nodeName.material.property[accessor]<br />
+			-- uuid.property[accessor]<br />
+			-- uuid.objectName[objectIndex].propertyName[propertyIndex]<br />
+			-- parentName/nodeName.property<br />
+			-- parentName/parentName/nodeName.property[index]<br />
+			-- .bone[Armature.DEF_cog].position<br />
+			-- scene:helium_balloon_model:helium_balloon_model.position
+		</p>
+
+		<h3>[method:Constructor findNode]( root, nodeName )</h3>
+		<p>
+			노드 트리 혹은 [page:Skeleton Skeleton]에서 노드를 찾습니다.
+		</p>
+
+
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/PropertyMixer.html

@@ -0,0 +1,99 @@
+<!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">
+		내부적으로 사용되는 가중치 축적을 허용하는 버퍼 장면 그래프 프로퍼티입니다.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:PropertyBinding binding], [param:String typeName], [param:Number valueSize] )</h3>
+		<p>
+			-- binding <br />
+			-- typeName <br />
+			-- valueSize <br />
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<h3>[property:PropertyBinding binding]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:TypedArray buffer]</h3>
+		<p>
+			[page:PropertyMixer valueSize] * 4 크기의 버퍼입니다. <br /><br />
+			다음과 같은 레이아웃을 가지고 있습니다: [ incoming | accu0 | accu1 | orig ]<br /><br />
+			보간법에서 .result처름 .buffer를 사용할 수 있으며 데이터는 'incoming'으로 갑니다.
+			'accu0' 와 'accu1' 는 누적 결과의 프레임 교차 및 변화 비교감지에 사용됩니다.
+			'orig'는 프로퍼티의 원래 상태를 저장합니다.
+		</p>
+
+		<h3>[property:Number cumulativeWeight]</h3>
+		<p>
+			기본값은 *0*입니다.
+		</p>
+
+		<h3>[property:Number valueSize]</h3>
+		<p>
+
+		</p>
+
+		<h3>[property:Number referenceCount]</h3>
+		<p>
+			기본값은 *0*입니다.
+		</p>
+
+		<h3>[property:Number useCount]</h3>
+		<p>
+			기본값은 *0*입니다.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:null accumulate]( [param:Number accuIndex], [param:Number weight] )</h3>
+		<p>
+			[page:PropertyMixer.buffer buffer][accuIndex] 'incoming' 영역의 데이터를 'accu[i]'에 축적합니다.<br />
+
+			가중치가 *0*이면 아무 동작을 하지 않습니다.
+		</p>
+
+		<h3>[method:null apply]( [param:Number accuIndex] )</h3>
+		<p>
+			누적치가 달라지면 [page:PropertyMixer.buffer buffer] 'accu[i]'의 상태를 적용합니다.
+		</p>
+
+		<h3>[method:null saveOriginalState]( )</h3>
+		<p>
+			기본 프로퍼티의 상태를 기억하고 양 쪽의 누적치에 복사합니다.
+		</p>
+
+		<h3>[method:null restoreOriginalState](  )</h3>
+		<p>
+			'saveOriginalState'로 받은 이전 상태를 다시 연결합니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/BooleanKeyframeTrack.html

@@ -0,0 +1,79 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			불린 키프레임 값의 트랙.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (required) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (required) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]을 확인하세요.
+		</p>
+
+		<h3>[property:Constant DefaultInterpolation]</h3>
+		<p>
+			기본 보간법 타입, [page:Animation InterpolateDiscrete].
+		</p>
+
+		<h3>[property:Array ValueBufferType]</h3>
+		<p>
+			일반 배열([page:KeyframeTrack]의 *ValueBufferType*과 달리 여기서는 Float32Array가 아닙니다).
+		</p>
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'bool'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 확인하세요.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodLinear ]()</h3>
+		<p>
+			이 메서드의 값은 'undefined'이기 때문에, 이산 프로퍼티에 영향을 미치지 않습니다.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodSmooth ]()</h3>
+		<p>
+			이 메서드의 값은 'undefined'이기 때문에, 이산 프로퍼티에 영향을 미치지 않습니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/ColorKeyframeTrack.html

@@ -0,0 +1,62 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			색 변화를 대표하는 키프레임 값의 트랙입니다.<br /><br />
+			이 하위클래스의 기본 구현은 아직 별다른 특별한 것이 없습니다. 하지만 여기에서 색 공간의 매개변수화가 일어납니다.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (필수) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (필수) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+			[page:Constant interpolation] - 기본 보간법 타입. 가능한 값들에 대해서는
+			[page:Animation Animation Constants] 를 확인하세요. 기본값은
+			[page:Animation InterpolateLinear] 입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'color'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h2>소스코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/NumberKeyframeTrack.html

@@ -0,0 +1,63 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			숫자 키프레임 값의 트랙.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (필수) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (필수) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+			[page:Constant interpolation] - 기본 보간법 타입. 가능한 값들에 대해서는
+			[page:Animation Animation Constants] 를 확인하세요. 기본값은
+			[page:Animation InterpolateLinear] 입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'number'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+
+		<h2>소스코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/QuaternionKeyframeTrack.html

@@ -0,0 +1,75 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			쿼터니언 키프레임 값 트랙
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (필수) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (필수) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+			[page:Constant interpolation] - 기본 보간법 타입. 가능한 값들에 대해서는
+			[page:Animation Animation Constants] 를 확인하세요. 기본값은
+			[page:Animation InterpolateLinear] 입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[property:Constant DefaultInterpolation]</h3>
+		<p>
+			기본 보간법 타입, [page:Animation InterpolateDiscrete].
+		</p>
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'quaternion'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodLinear]()</h3>
+		<p>
+			키프레임의 [page:KeyframeTrack.values values], [page:KeyframeTrack.times times] 및 
+			[page:KeyframeTrack.valueSize valueSize]를 기반으로
+			새 [page:QuaternionLinearInterpolant QuaternionLinearInterpolant]를 리턴합니다.
+			
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/StringKeyframeTrack.html

@@ -0,0 +1,77 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			문자열 키프레임 값 트랙.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (필수) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (필수) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+			[page:Constant interpolation] - 기본 보간법 타입. 가능한 값들에 대해서는
+			[page:Animation Animation Constants] 를 확인하세요. 기본값은
+			[page:Animation InterpolateLinear] 입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[property:Constant DefaultInterpolation]</h3>
+		<p>
+			기본 보간법 타입, [page:Animation InterpolateDiscrete].
+		</p>
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'quaternion'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodLinear]()</h3>
+		<p>
+			이 메서드의 값은 'undefined'이기 때문에, 이산 프로퍼티에 영향을 미치지 않습니다.
+		</p>
+
+		<h3>[method:null InterpolantFactoryMethodSmooth]()</h3>
+		<p>
+			이 메서드의 값은 'undefined'이기 때문에, 이산 프로퍼티에 영향을 미치지 않습니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/animation/tracks/VectorKeyframeTrack.html

@@ -0,0 +1,62 @@
+<!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>
+
+		[page:KeyframeTrack] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			벡터 키프레임 값 트랙.
+		</p>
+
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:String name], [param:Array times], [param:Array values] )</h3>
+		<p>
+			[page:String name] - (필수) KeyframeTrack의 식별자.<br />
+			[page:Array times] - (필수) 키프레임 시간 배열.<br />
+			[page:Array values] - 특정 시점의 키프레임 값.<br />
+			[page:Constant interpolation] - 기본 보간법 타입. 가능한 값들에 대해서는
+			[page:Animation Animation Constants] 를 확인하세요. 기본값은
+			[page:Animation InterpolateLinear] 입니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+
+		<p class="desc">
+			상속 프로퍼티는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+		<h3>[property:String ValueTypeName]</h3>
+		<p>
+			문자열 'vector'.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<p class="desc">
+			상속 메서드는 [page:KeyframeTrack]를 참고하세요.
+		</p>
+
+
+		<h2>소스코드</h2>
+
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/audio/Audio.html

@@ -0,0 +1,233 @@
+<!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>
+		[page:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			위치가 지정되지 않은 (전역) 오디오 오브젝트.<br /><br />
+
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API]를 사용합니다.
+		</p>
+
+		<h2>코드 예제</h2>
+
+		<code>
+		// create an AudioListener and add it to the camera
+		const listener = new THREE.AudioListener();
+		camera.add( listener );
+
+		// create a global audio source
+		const sound = new THREE.Audio( listener );
+
+		// load a sound and set it as the Audio object's buffer
+		const audioLoader = new THREE.AudioLoader();
+		audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
+			sound.setBuffer( buffer );
+			sound.setLoop( true );
+			sound.setVolume( 0.5 );
+			sound.play();
+		});
+		</code>
+
+		<h2>예제</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( [param:AudioListener listener] )</h3>
+		<p>
+		리스너 — (필수) [page:AudioListener AudioListener] 인스턴스.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+		<h3>[property:Boolean autoplay]</h3>
+		<p>자동으로 재생할지에 대한 설정. 기본값은 *false*입니다.</p>
+
+		<h3>[property:AudioContext context]</h3>
+		<p>생성자로 만들어진 [page:AudioListener listener]의 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext].</p>
+
+		<h3>[property:Number detune]</h3>
+		<p>피치를 조정하며 100 단위로 조절합니다. +/- 100 은 세미톤 조절. +/- 1200 은 옥타브 조절. 기본값은 *0*입니다.</p>
+
+		<h3>[property:Array filters]</h3>
+		<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes] 배열입니다. 
+			다양한 저차 필터를 적용하여 보다 복잡한 사운드 효과를 만들 수 있습니다. 필터는 [page.Audio.setFilter] 또는 [page:Audio.setFilters]로 설정합니다.</p>
+
+		<h3>[property:GainNode gain]</h3>
+		<p> [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain]()를 사용해 만들어진 [link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode].</p>
+
+		<h3>[property:Boolean hasPlaybackControl]</h3>
+		<p>[page:Audio.play play](), [page:Audio.pause pause]()등의 메서드를 통해 재생 컨트롤이 가능한지에 대한 값. 기본값은 *true*입니다.</p>
+
+		<h3>[property:Boolean isPlaying]</h3>
+		<p>오지오가 현재 재생중인지에 대한 값입니다.</p>
+
+		<h3>[property:AudioListener listener]</h3>
+		<p>이 오디오의 리스터 오브젝트 자료입니다.</p>
+
+		<h3>[property:Number playbackRate]</h3>
+		<p>재생 속도. 기본값은 *1*입니다.</p>
+
+		<h3>[property:Number offset]</h3>
+		<p>재생이 시작돼야 하는 오디오 버퍼 안의 시간 오프셋입니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()의 *offset* 파라미터와 동일. 기본값은 *0*입니다.</p>
+
+		<h3>[property:Number duration]</h3>
+		<p>오디오 길이를 오버라이드합니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/start AudioBufferSourceNode.start]()의 *duration* 파라미터와 동일. 전체 버퍼 재생을 위한 기본값은 *undefined*입니다.</p>
+
+		<h3>[property:String source]</h3>
+		<p>
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createBufferSource AudioContext.createBufferSource]()로 생성된
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode AudioBufferSourceNode]입니다.
+		</p>
+
+		<h3>[property:String sourceType]</h3>
+		<p>오디오 소스 타입. 기본값은 문자열 'empty'.</p>
+
+		<h3>[property:String type]</h3>
+		<p>타입 표시 문자열을 표시, 'Audio'로 설정합니다.</p>
+
+
+		<h2>메서드</h2>
+
+		<h3>[method:Audio connect]()</h3>
+		<p>
+		[page:Audio.source]에 연결합니다. 시작 및 필터 설정/제거 시에 내부적으로 사용됩니다.
+		</p>
+
+		<h3>[method:Audio disconnect]()</h3>
+		<p>
+		[page:Audio.source] 연결을 해제합니다. 필터 설정/제거 시에 내부적으로 사용됩니다.
+		</p>
+
+		<h3>[method:BiquadFilterNode getFilter]()</h3>
+		<p>
+		[page:Audio.filters filters] 배열의 첫 번째 요소를 리턴합니다.
+		</p>
+
+		<h3>[method:Array getFilters]()</h3>
+		<p>
+		[page:Audio.filters filters] 배열을 리턴합니다.
+		</p>
+
+		<h3>[method:Boolean getLoop]()</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop]값을 리턴합니다(재생이 반복되는지).
+		</p>
+
+		<h3>[method:GainNode getOutput]()</h3>
+		<p>
+		[page:Audio.gain gainNode]를 리턴합니다.
+		</p>
+
+		<h3>[method:Float getPlaybackRate]()</h3>
+		<p>
+		[page:Audio.playbackRate playbackRate]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:Float getVolume]( value )</h3>
+		<p>
+		현재 볼륨을 리턴합니다.
+		</p>
+
+		<h3>[method:Audio play]( delay )</h3>
+		<p>
+		[page:Audio.hasPlaybackControl hasPlaybackControl]가 true면, 재생을 시작합니다.
+		</p>
+
+		<h3>[method:Audio pause]()</h3>
+		<p>
+		[page:Audio.hasPlaybackControl hasPlaybackControl]가 true면, 재생을 멈춥니다.
+		</p>
+
+		<h3>[method:null onEnded]()</h3>
+		<p>
+		재생이 끝나면 자동으로 호출됩니다.
+		</p>
+
+		<h3>[method:Audio setBuffer]( audioBuffer )</h3>
+		<p>
+		[page:Audio.source source]를 audioBuffer에 설치하고, [page:Audio.sourceType sourceType]를 'buffer'에 설정합니다.<br />
+		[page:Audio.autoplay autoplay]의 경우에는 재생도 시작합니다.
+		</p>
+
+		<h3>[method:Audio setFilter]( filter )</h3>
+		<p>
+		오디오에 새 [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNode]를 적용합니다.
+		</p>
+
+		<h3>[method:Audio setFilters]( [param:Array value] )</h3>
+		<p>
+		필터 배열들의 값<br />
+		오디오에 [link:https://developer.mozilla.org/en-US/docs/Web/API/BiquadFilterNode BiquadFilterNodes] 배열을 적용합니다.
+		</p>
+
+		<h3>[method:Audio setLoop]( [param:Boolean value] )</h3>
+		<p>
+		*value*를 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loop source.loop]로 설정합니다(재생이 반복되는지).
+		</p>
+
+		<h3>[method:Audio setLoopStart]( [param:Float value] )</h3>
+		<p>
+		*value*를 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loopStart source.loopStart]로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setLoopEnd]( [param:Float value] )</h3>
+		<p>
+		*value*를 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioBufferSourceNode/loopEnd source.loopEnd]로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setMediaElementSource]( mediaElement )</h3>
+		<p>
+		이 오디오 소스에 [link:https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement HTMLMediaElement]타입의 오브젝트를 적용합니다.<br />
+		[page:Audio.hasPlaybackControl hasPlaybackControl]를 false로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setMediaStreamSource]( mediaStream )</h3>
+		<p>
+		이 오디오 소스에 [link:https://developer.mozilla.org/en-US/docs/Web/API/MediaStream MediaStream]타입의 오브젝트를 적용합니다.<br />
+		[page:Audio.hasPlaybackControl hasPlaybackControl]를 false로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setNodeSource]( audioNode )</h3>
+		<p>
+		audioBuffer에 [page:Audio.source source]를 설치하고 'audioNode'를 [page:Audio.sourceType sourceType]로 설정합니다.<br />
+		[page:Audio.hasPlaybackControl hasPlaybackControl]를 false로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setPlaybackRate]( [param:Float value] )</h3>
+		<p>
+		[page:Audio.hasPlaybackControl hasPlaybackControl]이 활성화되어 있으면 *value*를 [page:Audio.playbackRate playbackRate]로 설정합니다.
+		</p>
+
+		<h3>[method:Audio setVolume]( [param:Float value] )</h3>
+		<p>
+		볼륨을 설정합니다.
+		</p>
+
+		<h3>[method:Audio stop]()</h3>
+		<p>
+		[page:Audio.hasPlaybackControl hasPlaybackControl]가 활성화되어 있으면 재생을 중단합니다.
+		</p>
+
+		<h2>소스 코드</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/audio/AudioAnalyser.html

@@ -0,0 +1,101 @@
+<!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">
+			오디오 데이터를 분석하기 위해 [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode]를 사용하는
+			AudioAnalyser 오브젝트를 만듭니다.<br /><br />
+
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API]를 사용합니다.
+
+		</p>
+
+		<h2>코드 예제</h2>
+
+		<code>
+		// create an AudioListener and add it to the camera
+		const listener = new THREE.AudioListener();
+		camera.add( listener );
+
+		// create an Audio source
+		const sound = new THREE.Audio( listener );
+
+		// load a sound and set it as the Audio object's buffer
+		const audioLoader = new THREE.AudioLoader();
+		audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
+			sound.setBuffer( buffer );
+			sound.setLoop(true);
+			sound.setVolume(0.5);
+			sound.play();
+		});
+
+		// create an AudioAnalyser, passing in the sound and desired fftSize
+		const analyser = new THREE.AudioAnalyser( sound, 32 );
+
+		// get the average frequency of the sound
+		const data = analyser.getAverageFrequency();
+		</code>
+
+		<h2>예제</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
+
+		<h2>생성자</h2>
+
+
+		<h3>[name]( audio, [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize fftSize] )</h3>
+		<p>
+		새 [page:AudioAnalyser AudioAnalyser]를 만듭니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+		<h3>[property:AnalyserNode analyser]</h3>
+		<p>오디오를 분석하는데 사용하는 [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode AnalyserNode]입니다.</p>
+
+		<h3>[property:Integer fftSize]</h3>
+		<p>
+			주파수 영역을 결정하는 데 사용되는 FFT(고속 푸리에 변환)의 크기를 나타내는 최대 2048까지의 0이 아닌 두 개의 크기.
+			자세한 내용은 [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/fftSize this page]를 참고하세요.
+		</p>
+
+		<h3>[property:Uint8Array data]</h3>
+		<p>
+		A Uint8Array with size determined by 
+		분석 데이터 저장에 사용되는 [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/frequencyBinCount analyser.frequencyBinCount]로
+		결정된 크기의 Uint8Array.
+		</p>
+
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:Uint8Array getFrequencyData]()</h3>
+		<p>
+		웹 오디오의 [link:https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode/getByteFrequencyData getByteFrequencyData] 메서드를 사용합니다.
+		해당 페이지를 확인하세요.
+		</p>
+
+		<h3>[method:Number getAverageFrequency]()</h3>
+		<p>
+		[page:AudioAnalyser.getFrequencyData getFrequencyData]메서드에서 리턴된 주파수 평균값입니다.
+		</p>
+
+		<h2>소스 코드</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/audio/AudioContext.html

@@ -0,0 +1,43 @@
+<!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">
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext]를 설정하는 메서드들에 대해 다룹니다.<br /><br />
+
+		[page:AudioListener AudioListener] 및 [page:AudioLoader AudioLoader] 클래스에서 내부적으로 사용됩니다.<br /><br />
+
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API]를 사용합니다.
+		</p>
+
+
+
+		<h2>메서드</h2>
+
+		<h3>[method:AudioContext getContext]()</h3>
+		<p>
+		선언되어 있는 경우에는 외부 영역의 *context* 변수의 값을 리턴하고
+		아니라면 새로운 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext]를 설정합니다.
+		</p>
+
+		<h3>[method:AudioContext setContext]( [param:AudioContext value] )</h3>
+		<p>
+		  외부 영역의 *context* 변수에 *value*를 설정합니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/audio/AudioListener.html

@@ -0,0 +1,112 @@
+<!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>
+		[page:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			[name]는 장면 안의 모든 지정 및 비지정 오디오 효과의 가상 [link:https://developer.mozilla.org/de/docs/Web/API/AudioListener listener]입니다.<br />
+			three.js 앱은 일반적으로 단일 [name] 인스턴스를 생성합니다. 이는 [page:Audio Audio]와 [page:PositionalAudio PositionalAudio] 같은 오디오 엔티티의 필수 생성자 파라미터입니다.<br />
+			대부분의 경우, 리스너 오브젝트는 카메라의 자식입니다. 그래서 카메라의 3D 변환은 곧 리스너의 3D 변환이 됩니다.
+		</p>
+
+		<h2>코드 예제</h2>
+
+		<code>
+		// create an AudioListener and add it to the camera
+		const listener = new THREE.AudioListener();
+		camera.add( listener );
+
+		// create a global audio source
+		const sound = new THREE.Audio( listener );
+
+		// load a sound and set it as the Audio object's buffer
+		const audioLoader = new THREE.AudioLoader();
+		audioLoader.load( 'sounds/ambient.ogg', function( buffer ) {
+			sound.setBuffer( buffer );
+			sound.setLoop(true);
+			sound.setVolume(0.5);
+			sound.play();
+		});
+		</code>
+
+		<h2>예제</h2>
+
+		<p>
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_timing webaudio / timing ]<br />
+			[example:webaudio_visualizer webaudio / visualizer ]
+		</p>
+
+		<h2>생성자</h2>
+
+
+		<h3>[name](  )</h3>
+		<p>
+		새 AudioListener를 만듭니다.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+		<h3>[property:AudioContext context]</h3>
+		<p>생성자로 만들어진 [page:AudioListener listener]의 [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext AudioContext]입니다.</p>
+
+		<h3>[property:GainNode gain]</h3>
+		<p>[link:https://developer.mozilla.org/en-US/docs/Web/API/AudioContext/createGain AudioContext.createGain]()을 사용해 만들어진
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/GainNode GainNode]입니다.</p>
+
+		<h3>[property:AudioNode filter]</h3>
+		<p>기본값은 *null*입니다.</p>
+
+		<h3>[property:Number timeDelta]</h3>
+		<p>오디오 엔티티에 대한 시간 델타값입니다. [link:https://developer.mozilla.org/en-US/docs/Web/API/AudioParam/linearRampToValueAtTime AudioParam.linearRampToValueAtTimeDefault]()에서 사용됩니다. 기본값은 *0*입니다.</p>
+
+		<h2>메서드</h2>
+
+
+		<h3>[method:GainNode getInput]()</h3>
+		<p>
+		[page:AudioListener.gain gainNode]를 리턴합니다.
+		</p>
+
+		<h3>[method:AudioListener removeFilter]()</h3>
+		<p>
+		[page:AudioListener.filter filter] 프로퍼티를 *null*로 설정합니다.
+		</p>
+
+		<h3>[method:AudioNode getFilter]()</h3>
+		<p>
+		[page:AudioListener.filter filter] 프로퍼티의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:AudioListener setFilter]( [param:AudioNode value] )</h3>
+		<p>
+		[page:AudioListener.filter filter] 프로퍼티를 *value*로 설정합니다.
+		</p>
+
+		<h3>[method:Float getMasterVolume]()</h3>
+		<p>
+		볼륨을 리턴합니다.
+		</p>
+
+		<h3>[method:AudioListener setMasterVolume]( [param:Number value] )</h3>
+		<p>
+		볼륨을 설정합니다.
+		</p>
+
+
+		<h2>소스 코드</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/ko/audio/PositionalAudio.html

@@ -0,0 +1,136 @@
+<!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>
+		[page:Object3D] &rarr; [page:Audio] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			지정 오디오 오브젝트를 생성합니다.<br /><br />
+
+			[link:https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API Web Audio API]를 사용합니다.
+		</p>
+
+		<h2>코드 예제</h2>
+
+		<code>
+		// create an AudioListener and add it to the camera
+		const listener = new THREE.AudioListener();
+		camera.add( listener );
+
+		// create the PositionalAudio object (passing in the listener)
+		const sound = new THREE.PositionalAudio( listener );
+
+		// load a sound and set it as the PositionalAudio object's buffer
+		const audioLoader = new THREE.AudioLoader();
+		audioLoader.load( 'sounds/song.ogg', function( buffer ) {
+			sound.setBuffer( buffer );
+			sound.setRefDistance( 20 );
+			sound.play();
+		});
+
+		// create an object for the sound to play from
+		const sphere = new THREE.SphereBufferGeometry( 20, 32, 16 );
+		const material = new THREE.MeshPhongMaterial( { color: 0xff2200 } );
+		const mesh = new THREE.Mesh( sphere, material );
+		scene.add( mesh );
+
+		// finally add the sound to the mesh
+		mesh.add( sound );
+		</code>
+
+		<h2>예제</h2>
+
+		<p>
+			[example:webaudio_orientation webaudio / orientation ]<br />
+			[example:webaudio_sandbox webaudio / sandbox ]<br />
+			[example:webaudio_timing webaudio / timing ]
+		</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:AudioListener listener] )</h3>
+		<p>
+		리스너 — (필수) [page:AudioListener AudioListener] 인스턴스.
+		</p>
+
+
+		<h2>프로퍼티</h2>
+
+		<p>
+			상속받은 프로퍼티는 [page:Audio Audio] 클래스를 참고하세요.
+		</p>
+
+		<h3>[property:PannerNode panner]</h3>
+		<p>PositionalAudio의 [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode PannerNode].</p>
+
+
+		<h2>메서드</h2>
+
+		<p>
+			상속받은 메서드는 [page:Audio Audio] 클래스를 참고하세요.
+		</p>
+
+		<h3>[method:PannerNode getOutput]()</h3>
+		<p>
+		[page:PositionalAudio.panner panner]를 리턴합니다.
+		</p>
+
+		<h3>[method:Float getRefDistance]()</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:PositionalAudio setRefDistance]( [param:Float value] )</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/refDistance panner.refDistance]의 값을 설정합니다.
+		</p>
+
+		<h3>[method:Float getRolloffFactor]()</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:PositionalAudio setRolloffFactor]( [param:Float value] )</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/rolloffFactor panner.rolloffFactor]의 값을 설정합니다.
+		</p>
+
+		<h3>[method:String getDistanceModel]()</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:PositionalAudio setDistanceModel]( [param:String value] )</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/distanceModel panner.distanceModel]의 값을 설정합니다.
+		</p>
+
+		<h3>[method:Float getMaxDistance]()</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:PositionalAudio setMaxDistance]( [param:Float value] )</h3>
+		<p>
+		[link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode/maxDistance panner.maxDistance]의 값을 리턴합니다.
+		</p>
+
+		<h3>[method:PositionalAudio setDirectionalCone]( [param:Float coneInnerAngle], [param:Float coneOuterAngle], [param:Float coneOuterGain] )</h3>
+		<p>
+		이 메서드는 전방향 사운드를 [link:https://developer.mozilla.org/en-US/docs/Web/API/PannerNode directional sound]로 변환하기 위해 사용할 수 있습니다.
+		</p>
+
+		<h2>소스 코드</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/src/[path].js src/[path].js]
+		</p>
+	</body>
+</html>

docs/api/zh/core/BufferAttribute.html

@@ -116,7 +116,7 @@
 			拷贝 TypedArray 相关注意事项详见 [link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/TypedArray/set TypedArray.set]。
 		</p>
 
-		<h3>[method:null copyAt] ( [param:Integer index1], [param:BufferAttribute bufferAttribute], [param:Integer index2] ) </h3>
+		<h3>[method:this copyAt] ( [param:Integer index1], [param:BufferAttribute bufferAttribute], [param:Integer index2] ) </h3>
 		<p>将一个矢量从 bufferAttribute[index2] 拷贝到 [page:BufferAttribute.array array][index1] 中。</p>
 
 		<h3>[method:BufferAttribute copyColorsArray]( [param:Array colors] ) </h3>
@@ -143,7 +143,7 @@
 		<h3>[method:Number getW]( [param:Integer index] ) </h3>
 		<p>获取给定索引的矢量的第四维元素 （即 W 值）。</p>
 
-		<h3>[method:null onUpload]( [param:Function callback] ) </h3>
+		<h3>[method:this onUpload]( [param:Function callback] ) </h3>
 		<p>见 onUploadCallback 属性。<br /><br />
 			在 [example:webgl_buffergeometry WebGL / Buffergeometry] 中，该方在缓存数据传递给 GPU 后，用于释放内存。
 		</p>

docs/api/zh/helpers/AxesHelper.html

@@ -24,9 +24,9 @@
 		<h2>例子</h2>
 
 		<p>
-			[example:webgl_geometries WebGL / geometries]<br/>
+			[example:webgl_buffergeometry_compression WebGL / buffergeometry / compression]<br/>
 			[example:webgl_geometry_convex WebGL / geometry / convex]<br/>
-			[example:webgl_geometry_spline_editor WebGL / geometry / spline / editor]
+			[example:webgl_loader_nrrd WebGL / loader / nrrd]
 		</p>
 
 		<h2>构造函数</h2>

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

@@ -322,7 +322,7 @@
 		<h3>[method:Float getClearAlpha]()</h3>
 		<p>返回一个表示当前alpha值的[page:Float float]，范围0到1</p>
 
-		<h3>[method:Color getClearColor]()</h3>
+		<h3>[method:Color getClearColor]( [param:Color target] )</h3>
 		<p>返回一个表示当前颜色值的[page:Color THREE.Color]实例</p>
 
 		<h3>[method:WebGLRenderingContext getContext]()</h3>
@@ -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/animations/MMDAnimationHelper.html

@@ -153,7 +153,7 @@
 		Remove an [page:SkinnedMesh], [page:Camera], or [page:Audio] from helper.
 		</p>
 
-		<h3>[method:MMDAnimationHelper update]( [param:Nummber delta] )</h3>
+		<h3>[method:MMDAnimationHelper update]( [param:Number delta] )</h3>
 		<p>
 		[page:Number delta] — number in second<br />
 		</p>

docs/examples/en/animations/MMDPhysics.html

@@ -78,7 +78,7 @@
 
 		<h3>[method:CCDIKSolver reset]()</h3>
 		<p>
-		Resets Rigid bodies transorm to current bone's.
+		Resets Rigid bodies transform to current bone's.
 		</p>
 
 		<h3>[method:CCDIKSolver setGravity]( [param:Vector3 gravity] )</h3>

docs/examples/en/controls/FirstPersonControls.html

@@ -68,12 +68,12 @@
 
 		<h3>[property:Number heightMax]</h3>
 		<p>
-			Upper camera height limit used for movement speed adjusment. Default is *1*.
+			Upper camera height limit used for movement speed adjustment. Default is *1*.
 		</p>
 
 		<h3>[property:Number heightMin]</h3>
 		<p>
-			Lower camera height limit used for movement speed adjusment. Default is *0*.
+			Lower camera height limit used for movement speed adjustment. Default is *0*.
 		</p>
 
 		<h3>[property:Boolean heightSpeed]</h3>

docs/examples/en/controls/OrbitControls.html

@@ -13,7 +13,7 @@
 		Orbit controls allow the camera to orbit around a target.<br>
 
 		To use this, as with all files in the /examples directory, you will have to
-		include the file seperately in your HTML.
+		include the file separately in your HTML.
 
 		</p>
 

docs/examples/en/controls/TransformControls.html

@@ -102,7 +102,7 @@
 
 		<h3>[property:Number rotationSnap]</h3>
 		<p>
-			By default, 3D objects are continously rotated. If you set this property to a numeric value (radians), you can define in which
+			By default, 3D objects are continuously rotated. If you set this property to a numeric value (radians), you can define in which
 			steps the 3D object should be rotated. Deault is *null*.
 		</p>
 
@@ -133,7 +133,7 @@
 
 		<h3>[property:Number translationSnap]</h3>
 		<p>
-			By default, 3D objects are continously translated. If you set this property to a numeric value (world units), you can define in which
+			By default, 3D objects are continuously translated. If you set this property to a numeric value (world units), you can define in which
 			steps the 3D object should be translated. Deault is *null*.
 		</p>
 

docs/examples/en/exporters/ColladaExporter.html

@@ -57,7 +57,7 @@
 			// Collada file content
 			data: "",
 
-			// List of referenced texures
+			// List of referenced textures
 			textures: [{
 
 				// File directory, name, and extension of the texture data

docs/examples/en/helpers/VertexNormalsHelper.html

@@ -55,7 +55,7 @@
 		<h3>[property:Object matrixAutoUpdate]</h3>
 		<p>
 			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
-			objects's [page:Object3D.matrixWorld matrixWorld].
+			object's [page:Object3D.matrixWorld matrixWorld].
 		</p>
 
 		<h3>[property:Object3D object]</h3>

docs/examples/en/helpers/VertexTangentsHelper.html

@@ -54,7 +54,7 @@
 		<h3>[property:Object matrixAutoUpdate]</h3>
 		<p>
 			See [page:Object3D.matrixAutoUpdate]. Set to *false* here as the helper is using the
-			objects's [page:Object3D.matrixWorld matrixWorld].
+			object's [page:Object3D.matrixWorld matrixWorld].
 		</p>
 
 		<h3>[property:Object3D object]</h3>

docs/examples/en/loaders/MMDLoader.html

@@ -91,7 +91,7 @@
 		[page:Function onError] — (optional) A function to be called if an error occurs during loading. The function receives error as an argument.<br />
 		</p>
 		<p>
-		Begin loading VMD motion file(s) from url(s) and fire the callback function with the parsed [page:AnimatioinClip].
+		Begin loading VMD motion file(s) from url(s) and fire the callback function with the parsed [page:AnimationClip].
 		</p>
 
 		<h3>[method:null loadWithAnimation]( [param:String modelUrl], [param:String vmdUrl], [param:Function onLoad], [param:Function onProgress], [param:Function onError] )</h3>

docs/examples/en/loaders/TGALoader.html

@@ -37,7 +37,7 @@
 				console.log( ( xhr.loaded / xhr.total * 100 ) + '% loaded' );
 
 			},
-			// called when the loading failes
+			// called when the loading fails
 			function ( error ) {
 
 				console.log( 'An error happened' );

docs/examples/en/math/Lut.html

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

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/math/OBB.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="en">
+	<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">
+			Represents an oriented bounding box (OBB) in 3D space.
+		</p>
+
+		<h2>Examples</h2>
+		<p>
+			[example:webgl_math_obb]
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Vector3 center], [param:Vector3 halfSize], [param:Matrix3 rotation] )</h3>
+		<p>
+			[page:Vector3 center] — The center of the [name]. (optional)<br />
+			[page:Vector3 halfSize] — Positive halfwidth extents of the [name] along each axis. (optional)<br />
+			[page:Matrix3 rotation] — The rotation of the [name]. (optional)
+		</p>
+		<p>
+			Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:Vector3 center]</h3>
+		<p>
+			The center of the [name]. Default is *( 0, 0, 0 )*.
+		</p>
+
+		<h3>[property:Vector3 halfSize]</h3>
+		<p>
+			Positive halfwidth extents of the [name] along each axis. Default is *( 0, 0, 0 )*.
+		</p>
+
+		<h3>[property:Matrix3 rotation]</h3>
+		<p>
+			The rotation of the [name]. Default is the identity matrix.
+		</p>
+
+		<h2>Methods</h2>
+
+		<h3>[method:this applyMatrix4]( [param:Matrix4 matrix] )</h3>
+		<p>
+			[page:Matrix4 matrix] — A 4x4 transformation matrix.
+		</p>
+		<p>
+			Applies the given transformation matrix to this [name]. This method can be used to transform the
+			bounding volume with the world matrix of a 3D object in order to keep both entities in sync.
+		</p>
+
+		<h3>[method:Vector3 clampPoint]( [param:Vector3 point], [param:Vector3 clampedPoint] )</h3>
+		<p>
+			[page:Vector3 point] — The point that should be clamped within the bounds of this [name].<br />
+			[page:Matrix3 clampedPoint] — The result will be copied into this vector.
+		</p>
+		<p>
+			Clamps the given point within the bounds of this [name].
+		</p>
+
+		<h3>[method:OBB clone]()</h3>
+		<p>
+			Creates a cloned [name] for this instance.
+		</p>
+
+		<h3>[method:Boolean containsPoint]( [param:Vector3 point] )</h3>
+		<p>
+			[page:Vector3 point] — The point to test.
+		</p>
+		<p>
+			Whether the given point lies within this [name] or not.
+		</p>
+
+		<h3>[method:this copy]( [param:OBB obb] )</h3>
+		<p>
+			[page:OBB obb] — The [name] to copy.
+		</p>
+		<p>
+			Copies the properties of the given [name] to this [name].
+		</p>
+
+		<h3>[method:Boolean equals]( [param:OBB obb] )</h3>
+		<p>
+			[page:OBB obb] — The [name] to test.
+		</p>
+		<p>
+			Whether the given [name] is equal to this [name] or not.
+		</p>
+
+		<h3>[method:this fromBox3]( [param:Box3 box3] )</h3>
+		<p>
+			[page:Box3 box3] — An AABB.
+		</p>
+		<p>
+			Defines an [name] based on the given AABB.
+		</p>
+
+		<h3>[method:Vector3 getSize]( [param:Vector3 size] )</h3>
+		<p>
+			[page:Vector3 size] — The result will be copied into this vector.
+		</p>
+		<p>
+			Returns the size of this [name] into the given vector.
+		</p>
+
+		<h3>[method:Boolean intersectsBox3]( [param:Box3 box3] )</h3>
+		<p>
+			[page:Box3 box3] — The AABB to test.
+		</p>
+		<p>
+			Whether the given AABB intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsSphere]( [param:Sphere sphere] )</h3>
+		<p>
+			[page:Sphere sphere] — The bounding sphere to test.
+		</p>
+		<p>
+			Whether the given bounding sphere intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsOBB]( [param:OBB obb], [param:Number epsilon] )</h3>
+		<p>
+			[page:OBB obb] — The OBB to test.<br />
+			[page:Number epsilon] — An optional numeric value to counteract arithmetic errors. Default is *Number.EPSILON*.
+		</p>
+		<p>
+			Whether the given [name] intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsRay]( [param:Ray ray] )</h3>
+		<p>
+			[page:Ray ray] — The ray to test.
+		</p>
+		<p>
+			Whether the given ray intersects this [name] or not.
+		</p>
+
+		<h3>[method:Vector3 intersectRay]( [param:Ray ray], [param:Vector3 intersectionPoint] )</h3>
+		<p>
+			[page:Ray ray] — The ray to test.<br />
+			[page:Vector3 intersectionPoint] — The result will be copied into this vector.
+		</p>
+		<p>
+			Performs a Ray/OBB intersection test and stores the intersection point to the given 3D vector.
+			If no intersection is detected, *null* is returned.
+		</p>
+
+		<h3>[method:this set]( [param:Vector3 center], [param:Vector3 halfSize], [param:Matrix3 rotation] )</h3>
+		<p>
+			[page:Vector3 center] — The center of the [name].<br />
+			[page:Vector3 halfSize] — Positive halfwidth extents of the [name] along each axis.<br />
+			[page:Matrix3 rotation] — The rotation of the [name].
+		</p>
+		<p>
+			Defines the [name] for the given values.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/OBB.js examples/jsm/math/OBB.js]
+		</p>
+	</body>
+</html>

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

@@ -104,7 +104,7 @@
 
 		<h3>[method:Object computeExtremes]()</h3>
 
-		<p>Computes the extremes values (min/max vectors) which will be used to compute the inital hull.</p>
+		<p>Computes the extremes values (min/max vectors) which will be used to compute the initial hull.</p>
 
 		<h3>[method:ConvexHull computeHorizon]( [param:Vector3 eyePoint], [param:HalfEdge crossEdge], [param:Face face], [param:Array horizon]	)</h3>
 		<p>

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

@@ -10,7 +10,7 @@
 		<h1>[name]</h1>
 
 		<p class="desc">
-			Represents a section bounded by a specific amount of half-edges. The current implmentation assumes that a face always consist of three edges.
+			Represents a section bounded by a specific amount of half-edges. The current implementation assumes that a face always consist of three edges.
 		</p>
 
 

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

@@ -55,7 +55,7 @@
 		<h2>Methods</h2>
 
 		<h3>[method:VertexNode head]()</h3>
-		<p>Returns the destintation vertex.</p>
+		<p>Returns the destination vertex.</p>
 
 		<h3>[method:VertexNode tail]()</h3>
 		<p>Returns the origin vertex.</p>

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>
@@ -129,7 +137,7 @@
 		<p>
 			pixelRatio -- The device pixel ratio.<br /><br />
 
-			Sets device pixel ratio. This is usually used for HiDPI device to prevent bluring output.
+			Sets device pixel ratio. This is usually used for HiDPI device to prevent blurring output.
 				Thus, the semantic of the method is similar to [page:WebGLRenderer.setPixelRatio]().
 		</p>
 

docs/examples/ko/controls/DeviceOrientationControls.html

@@ -0,0 +1,95 @@
+<!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">
+			모바일 장치의 방향에 따라 카메라 방향을 조정하는 데 사용 됩니다.
+		</p>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_deviceorientation misc / controls / deviceorientation ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera object] )</h3>
+		<p>
+			<p>
+				[page:Camera object]: 제어 할 카메라 객체 입니다.
+			</p>
+			<p>
+				 새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			컨트롤에 의해 카메라가 변환되면 실행합니다.
+		</p>
+
+		<h2>속성</h2>
+
+		<h3>[property:Number alphaOffset]</h3>
+		<p>
+			알파 값의 오프셋의 단위는 라디안 입니다. 초기값은 0으로 지정됩니다.
+		</p>
+
+		<h3>[property:Object deviceOrientation]</h3>
+		<p>
+			현재 deviceorientation 이벤트 객체입니다.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			컨트롤의 활성화 여부를 지정합니다.
+		</p>
+
+		<h3>[property:Camera object]</h3>
+		<p>
+			제어 할 카메라입니다.
+		</p>
+
+		<h3>[property:Number screenOrientation]</h3>
+		<p>
+			장치의 실제 방향을 기준으로 뷰포트의 방향을 지정합니다(90도 단위 기준). 초기값은 *0* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<h3>[method:null connect] ()</h3>
+		<p>
+			컨트롤의 이벤트 리스너에 추가한 다음 활성화 합니다.
+		</p>
+
+		<h3>[method:null disconnect] ()</h3>
+		<p>
+			컨트롤의 이벤트 리스너에 제거한 다음 비활성화 합니다.
+		</p>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤을 더이상 필요하지 않을 경우 호출해야 합니다.
+		</p>
+
+		<h3>[method:null update] ()</h3>
+		<p>
+			컨트롤을 업데이트 합니다. 보통 애니메이션 루프에서 호출 됩니다.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/DeviceOrientationControls.js examples/jsm/controls/DeviceOrientationControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/DragControls.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>
+		[page:EventDispatcher] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		해당 클래스는 드래그 앤 드롭 상호작용에 대해 사용 됩니다.
+		</p>
+
+		<h2>코드 예시</h2>
+
+		<code>
+		const controls = new DragControls( objects, camera, renderer.domElement );
+
+		// 이벤트 리스너에 드래그 될 대상을 추가합니다.
+
+		controls.addEventListener( 'dragstart', function ( event ) {
+
+			event.object.material.emissive.set( 0xaaaaaa );
+
+		} );
+
+		controls.addEventListener( 'dragend', function ( event ) {
+
+			event.object.material.emissive.set( 0x000000 );
+
+		} );
+		</code>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_drag misc / controls / drag ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Array objects], [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+				[page:Array objects]: 드래그 가능한 3D 객체의 배열 입니다.
+			</p>
+			<p>
+			[page:Camera camera]: 렌더링 된 장면의 카메라입니다.
+			</p>
+			<p>
+			[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			</p>
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>dragstart</h3>
+		<p>
+			사용자가 3D 객체를 첫번째로 드래그 할 경우 호출 됩니다.
+		</p>
+
+		<h3>drag</h3>
+		<p>
+			사용자가 3D 객체를 드래그 할 경우 호출 됩니다.
+		</p>
+
+		<h3>dragend</h3>
+		<p>
+			사용자가 3D 객체를 드래그를 완료하면 호출 됩니다.
+		</p>
+
+		<h3>hoveron</h3>
+		<p>
+			마우스 포인터가 3D 객체 위에 오거나, 자식 객체 위에 올 경우 호출 됩니다.
+		</p>
+
+		<h3>hoveroff</h3>
+		<p>
+			포인터가 3D 객체 밖으로 이동할 경우 호출 됩니다.
+		</p>
+
+		<h2>속성</h2>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			컨트롤의 활성화 여부를 지정합니다.
+		</p>
+
+		<h3>[property:Boolean transformGroup]</h3>
+		<p>
+		
+			해당 속성은 [page:DragControls.objects] 배열에 드래그 가능한 단일 그룹 객체가 포함된 경우에만 작동합니다.
+			*true* 값으로 설정 되어있다면, [name]은 개별 객체가 아닌 전체 그룹은 드래그 합니다. 기본 값은 *false* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<p>일반적인 메소드는 [page:EventDispatcher] 클래스를 참조하세요.</p>
+
+		<h3>[method:null activate] ()</h3>
+		<p>
+			컨트롤에 이벤트 리스너를 추가합니다.
+		</p>
+
+		<h3>[method:null deactivate] ()</h3>
+		<p>
+			컨트롤에 추가된 이벤트 리스너를 제거합니다.
+		</p>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤이 더 이상 필요하지 않을 경우 호출해야 합니다.
+		</p>
+
+		<h3>[method:Array getObjects] ()</h3>
+		<p>
+			드래그 가능한 객체 배열을 반환 합니다.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/DragControls.js examples/jsm/controls/DragControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/FirstPersonControls.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 class="desc">
+			해당 클래스는 [page:FlyControls] 의 대안적인 구현 방법입니다.
+		</p>
+
+		<h2>예시</h2>
+
+		<p>[example:webgl_geometry_terrain webgl / geometry / terrain ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+				[page:Camera object]: 제어 할 카메라 객체 입니다.
+			</p>
+			<p>
+				[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			</p>
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>속성</h2>
+
+		<h3>[property:Boolean activeLook]</h3>
+		<p>
+			주위를 둘러 볼 수 있는지 설정합니다. 기본 값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean autoForward]</h3>
+		<p>
+			카메라가 자동으로 앞으로 이동 할 수 있는지 설정합니다. 기본 값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Boolean constrainVertical]</h3>
+		<p>
+			[[page:.verticalMin], [page:verticalMax]]값을 수직으로 카메라를 고정할 수 있습니다. 기본 값은 *false* 입니다.
+		</p>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			마우스 / 터치 이벤트를 수신하는 데 사용되는 HTMLDOMElement입니다. 이것은 생성자에 의해 설정되어야 합니다; 
+			생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			컨트롤의 활성화 여부를 설정합니다. 기본 값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Number heightCoef]</h3>
+		<p>
+			y-컴포넌트가 [page:.heightMax]에 가까울 경우 카메라가 얼마만큼 빠르게 움직이는 지 설정 합니다. 기본 값은 *1* 입니다.
+		</p>
+
+		<h3>[property:Number heightMax]</h3>
+		<p>
+			속도 조절에 사용되는 상단 카메라 높이를 설정합니다. 기본 값은 *1* 입니다.
+		</p>
+
+		<h3>[property:Number heightMin]</h3>
+		<p>
+			속도 조절에 사용되는 하단 카메라 높이를 설정합니다. 기본 값은 *0* 입니다.
+		</p>
+
+		<h3>[property:Boolean heightSpeed]</h3>
+		<p>
+			카메라의 높이가 이동 속도에 영향을 주는지 설정합니다. 기본 값은 *false* 입니다.
+			해당 속성을 사용하기 위해서는 [page:.heightCoef], [page:.heightMin] and [page:.heightMax]를 설정해야 합니다.
+		</p>
+
+		<h3>[property:Boolean lookVertical]</h3>
+		<p>
+			세로 축을 기준으로 주위를 둘러 볼 수 있는지 설정합니다. 기본 값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Number lookSpeed]</h3>
+		<p>
+			카메라의 look around 속도를 설정합니다. 기본 값은 *0.005* 입니다.
+		</p>
+
+		<h3>[property:Boolean mouseDragOn]</h3>
+		<p>
+			마우스를 눌러진 상태인지 나타냅니다. 해당 프로퍼티는 읽기 전용 입니다.
+		</p>
+
+		<h3>[property:Number movementSpeed]</h3>
+		<p>
+			카메라의 이동속도를 설정합니다. 기본 값은 *1* 입니다.
+		</p>
+
+		<h3>[property:Camera object]</h3>
+		<p>
+			제어 할 카메라 객체 입니다.
+		</p>
+
+		<h3>[property:Number verticalMax]</h3>
+		<p>
+			수직으로 주위를 둘러볼 수 있는 상한 범위를 지정합니다. 0 부터 Math.PI.radians 의 범위를 가집니다. 기본 값은 *Math.PI* 입니다.
+		</p>
+
+		<h3>[property:Number verticalMin]</h3>
+		<p>
+			수직으로 주위를 둘러볼 수 있는 하한 범위를 지정합니다. 0 부터 Math.PI.radians 의 범위를 가집니다. 기본 값은 *0* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤이 더 이상 필요하지 않을 경우 호출해야 합니다.
+		</p>
+
+		<h3>[method:null handleResize] ()</h3>
+		<p>
+			어플리케이션의 창 크기를 조절 하려면 호출해야 합니다.
+		</p>
+
+		<h3>[method:FirstPersonControls lookAt]( [param:Vector3 vector] )<br />
+		[method:FirstPersonControls lookAt]( [param:Float x], [param:Float y], [param:Float z] )</h3>
+		<p>
+			<p>
+				<p>
+					vector - 타겟 좌표를 설정합니다.
+				</p>
+				<p>
+					Optionally, x,y,z 컴포넌트는 특정 월드 좌표계 위치를 설정합니다.
+				</p>
+			</p>
+			<p>
+				카메라는 정의 된 타겟 좌표 쪽으로 가리키도록 합니다.
+			</p>
+		</p>
+
+		<h3>[method:null update] ( [param:Number delta] )</h3>
+		<p>
+			<p>
+				[page:Number delta]: 변화할 시간 값 입니다.
+			</p>
+			<p>
+				컨트롤을 업데이트 합니다. 보통 애니메이션 루프에서 호출 됩니다.
+			</p>
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/FirstPersonControls.js examples/jsm/controls/FirstPersonControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/FlyControls.html

@@ -0,0 +1,100 @@
+<!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">
+			[name]는 DCC 툴인 블렌더의 비행 모드와 유사한 항해 시스템을 사용할 수 있습니다. 3D 공간에서 제한 없이 카메라를 임의로 변환할 수 있습니다. (e.g. 특정 타겟을 가리킬 때)
+	
+		</p>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_fly misc / controls / fly ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+				[page:Camera object]: 제어 할 카메라 객체 입니다.
+			</p>
+			<p>
+				[page:HTMLDOMElement domElement]:이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			</p>
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			컨트롤에 의해 카메라가 변환되면 호출됩니다.
+		</p>
+
+		<h2>특성</h2>
+
+		<h3>[property:Boolean autoForward]</h3>
+		<p>
+			*true* 으로 설정되어 있을 경우, 처음 변환이 될 때 카메라가 자동으로 앞으로 이동합니다(정지되지 않음). 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			마우스 / 터치 이벤트를 수신하는 데 사용되는 HTMLDOMElement입니다. 이것은 생성자에 의해 설정되어야 합니다; 
+			생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+		<h3>[property:Boolean dragToLook]</h3>
+		<p>
+			*true* 으로 설정되어 있을 경우, 드래그 상호 작용을 수행해야만 주변을 둘러볼 수 있습니다. 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Number movementSpeed]</h3>
+		<p>
+			이동 속도를 설정할 수 있습니다. 기본값은 *1* 입니다.
+		</p>
+
+		<h3>[property:Camera object]</h3>
+		<p>
+			제어 할 카메라를 객체 입니다.
+		</p>
+
+		<h3>[property:Number rollSpeed]</h3>
+		<p>
+			회전 속도를 설정합니다. 기본값은 *0.005* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤을 더이상 필요하지 않을 경우 호출해야 합니다.
+		</p>
+
+		<h3>[method:null update] ( [param:Number delta] )</h3>
+		<p>
+			<p>
+				[page:Number delta]: 변화할 시간값.
+			</p>
+			<p>
+				컨트롤을 업데이트 합니다. 보통 애니메이션 루프에서 호출됩니다.
+			</p>
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/FlyControls.js examples/jsm/controls/FlyControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/OrbitControls.html

@@ -0,0 +1,307 @@
+<!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">
+		궤도 컨트롤을 사용하면 카메라가 대상 주위를 공전 할 수 있습니다.<br>
+
+		이것을 사용하려면, / examples 디렉토리의 모든 파일들이 HTML에 별도의 파일을 포함해야합니다.
+
+		</p>
+
+		<h2>코드 예시</h2>
+
+		<code>
+		const renderer = new THREE.WebGLRenderer();
+		renderer.setSize( window.innerWidth, window.innerHeight );
+		document.body.appendChild( renderer.domElement );
+
+		const scene = new THREE.Scene();
+
+		const camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 10000 );
+
+		const controls = new OrbitControls( camera, renderer.domElement );
+
+		//controls.update()는 카메라 변환설정을 수동으로 변경한 후에 호출해야 합니다.
+		camera.position.set( 0, 20, 100 );
+		controls.update();
+
+		function animate() {
+
+			requestAnimationFrame( animate );
+
+			// 만약 controls.enableDamping, controls.autoRotate 둘 중 하나라도 true로 설정될 경우 필수로 호출되어야 합니다.
+			controls.update();
+
+			renderer.render( scene, camera );
+
+		}
+		</code>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_orbit misc / controls / orbit ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera object], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			[page:Camera object]: (필수) 제어할 카메라 객체 입니다. 해당 객체가 장면에 포함되지 않을 경우 다른 객체의 자식이 아니여야 합니다..<br><br>
+
+			[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			컨트롤에 의해 카메라가 변환되면 호출됩니다.
+		</p>
+
+		<h3>start</h3>
+		<p>
+			상호 작용이 시작되면 호출됩니다.
+		</p>
+
+		<h3>end</h3>
+		<p>
+			상호 작용이 끝나면 호출됩니다.
+		</p>
+
+		<h2>특성</h2>
+
+		<h3>[property:Boolean autoRotate]</h3>
+		<p>
+			대상 주위를 자동으로 회전하려면 true로 설정합니다.<br> autoRotate를 활성할 경우, 애니메이션 루프에서 [page:.update()]를 호출해야 합니다.
+			
+		</p>
+
+		<h3>[property:Float autoRotateSpeed]</h3>
+		<p>
+			[page:.autoRotate]가 true일 경우, 타겟을 기준으로 주위의 회전 속도를 설정합니다. 기본값은 2.0 이고, 60fps에서 회전 당 30초에 해당합니다.
+			<br>만약 [page:.autoRotate]를 활성할 경우, 에니메이션 루프에서 [page:.update]를 호출해야 합니다.
+		</p>
+
+		<h3>
+			[property:Float dampingFactor]</h3>
+		<p> [page:.enableDamping]이 true일 경우 에니메이션 루프에서 [page:.update]()를 호출해야만 감쇠 관성를 사용할 수 있습니다.
+		</p>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			마우스 / 터치 이벤트를 수신하는 데 사용되는 HTMLDOMElement입니다. 이것은 생성자에 의해 설정되어야 합니다; 생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			*false*로 설정할 경우, 컨트롤은 사용자 입력에 응답하지 못합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean enableDamping]</h3>
+		<p>
+			컨트롤의 가중치를 부여하는 데 사용할 수있는 댐핑 (관성)을 활성화하려면 true로 설정합니다.<br>
+			만약 enableDamping을 활성화 할 경우, 애니메이션 루프에서 [page:.update]를 호출해야 합니다.
+		</p>
+
+		<h3>[property:Boolean enableKeys]</h3>
+		<p>
+			키보드 컨트롤의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean enablePan]</h3>
+		<p>
+			카매라 패닝의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean enableRotate]</h3>
+		<p>
+			카메라의 수직 및 수평 회전의 활성화 또는 비활성화를 설정합니다. 기본값은 *true* 입니다.<br>
+			[page:.minPolarAngle polar angle] 또는 page:.minAzimuthAngle azimuth angle]의 최소 및 최대를 동일한 값으로 설정하여 단일 축을 비활성화 할 수 있습니다. 
+			그러면 수직 또는 수평 회전이 해당 값으로 고정됩니다.
+			
+		</p>
+
+		<h3>[property:Boolean enableZoom]</h3>
+		<p>
+			카메라 확대 / 축소 (dollying)를 활성화 또는 비활성화를 설정합니다.
+		</p>
+
+		<h3>[property:Float keyPanSpeed]</h3>
+		<p>
+			키보드를 사용할 때 카메라를 패닝하는 속도를 설정합니다. 기본값은 키 누름 당 7.0 픽셀입니다.
+		</p>
+
+		<h3>[property:Object keys]</h3>
+		<p>
+			해당 객체는 카메라 패닝을 제어하기위한 키 코드에 대한 참조를 포함합니다. 기본값은 4 개의 화살표 키입니다.
+			<code>
+controls.keys = {
+	LEFT: 37, // 왼쪽 화살표
+	UP: 38, // 위쪽 화살표
+	RIGHT: 39, // 오른쪽 화살표
+	BOTTOM: 40 // 아래쪽 화살표
+}
+			 </code> 
+			 전체 키코드 목록은 [link:https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent/keyCode this page] 를 참조하세요.
+		</p>
+
+		<h3>[property:Float maxAzimuthAngle]</h3>
+		<p>
+			수평으로 궤도를 얼마나 돌 수 있는지 상한을 설정합니다. [ min, max ] 	의 간격은 ( max - min < 2 PI ) 와 함께 ( max - min < 2 PI ) 의 하위 간격이어야 합니다. 기본값은 무한대입니다.
+		</p>
+
+		<h3>[property:Float maxDistance]</h3>
+		<p>
+			달리 아웃(dolly out)할 수 있는 최대 거리를 설정합니다. ([page:PerspectiveCamera] only). 기본값은 무한대입니다.
+		</p>
+
+		<h3>[property:Float maxPolarAngle]</h3>
+		<p>
+			수직으로 궤도를 얼마나 돌 수 있는지 상한을 설정합니다. 0 부터 Math.PI radians 까지 범위를 가질 수 있습니다. 기본값은 Math.PI 입니다.
+		</p>
+
+		<h3>[property:Float maxZoom]</h3>
+		<p>
+			축소 할 수 있는 범위를 설정합니다.( [page:OrthographicCamera] only ). 기본값은 무한대입니다.
+		</p>
+
+		<h3>[property:Float minAzimuthAngle]</h3>
+		<p>
+			수평으로 궤도를 얼마나 돌 수 있는지 하한을 설정합니다. [ min, max ] 의 간격은 ( max - min < 2 PI ) 와 함께 ( max - min < 2 PI ) 의 하위 간격이어야 합니다. 기본값은 무한대입니다.
+		</p>
+
+		<h3>[property:Float minDistance]</h3>
+		<p>
+			달리 인(dolly in)할 수 있는 최소 거리를 설정합니다. ([page:PerspectiveCamera] only). 기본값은 0 입니다.
+		</p>
+
+		<h3>[property:Float minPolarAngle]</h3>
+		<p>
+			수직으로 궤도를 얼마나 돌 수 있는지 하한을 설정합니다. 0 부터 Math.PI radians 까지 범위를 가질 수 있습니다. 기본값은 0 입니다.
+		</p>
+
+		<h3>[property:Float minZoom]</h3>
+		<p>
+			확대 할 수 있는 범위를 설정합니다. ( [page:OrthographicCamera] only ). 기본값은 0 입니다.
+		</p>
+
+		<h3>
+			[property:Object mouseButtons]</h3>
+		<p>
+			해당 객체는 컨트롤에서 사용하는 마우스 동작에 대한 참조를 포함합니다.
+			<code>
+controls.mouseButtons = {
+	LEFT: THREE.MOUSE.ROTATE,
+	MIDDLE: THREE.MOUSE.DOLLY,
+	RIGHT: THREE.MOUSE.PAN
+}
+			</code>
+		</p>
+
+		<h3>[property:Camera object]</h3>
+		<p>
+			제어할 카메라 객체입니다.
+		</p>
+
+		<h3>[property:Float panSpeed]</h3>
+		<p>
+			패닝 속도를 설정합니다. 기본값은 1입니다.
+		</p>
+
+		<h3>[property:Vector3 position0]</h3>
+		<p>
+			해당 프로퍼티는 [method:saveState] 및 [method:reset] 메서드에서 내부적으로 사용합니다.
+		</p>
+
+		<h3>[property:Float rotateSpeed]</h3>
+		<p>
+			회전 속도를 설정합니다. 기본값은 1입니다.
+		</p>
+
+		<h3>[property:Boolean screenSpacePanning]</h3>
+		<p>
+		패닝할 떄, 카메라 위치가 변환되는 방식를 정의합니다. 만약 true일 경우, 카메라가 화면 공간에서 이동합니다.
+		Otherwise, the camera pans in the plane orthogonal to the camera's up direction.
+		OrbitControls의 경우 기본값은 true 이고, MapControls의 경우 기본값은 false 입니다.
+		</p>
+
+		<h3>[property:Vector3 target0]</h3>
+		<p>
+			[method:saveState] 및 [method:rest] 메서드에서 내부적으로 사용합니다.
+		</p>
+
+		<h3>[property:Vector3 target]</h3>
+		<p>
+			컨트롤의 중요 포인트는, [page:.object] 를 중심으로 회전하는 것입니다. 컨트롤의 중요 포인트는 언제든지 수동으로 변경할 수 있습니다.
+		</p>
+
+		<h3>[property:Object touches]</h3>
+		<p>
+			해당 객체는 컨트롤에 사용되는 터치 동작에 대한 참조를 포함합니다.
+			<code>
+controls.touches = {
+	ONE: THREE.TOUCH.ROTATE,
+	TWO: THREE.TOUCH.DOLLY_PAN
+}
+			</code>
+		</p>
+
+		<h3>[property:Float zoom0]</h3>
+		<p>
+			[method:saveState] 및 [method:reset] 메서드에서 내부적으로 사용합니다.
+		</p>
+
+		<h3>[property:Float zoomSpeed]</h3>
+		<p>
+			줌잉(Zooming)과 달링(Dollying)의 속도를 설정합니다. 기본값은 1 입니다.
+		</p>
+
+
+
+		<h2>메서드</h2>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			모든 이벤트 리스너를 삭제합니다.
+			Remove all the event listeners.
+		</p>
+
+		<h3>[method:radians getAzimuthalAngle] ()</h3>
+		<p>
+			라디안 단위로 현재 수평 회전값을 가져옵니다.
+		</p>
+
+		<h3>[method:radians getPolarAngle] ()</h3>
+		<p>
+			라디안 단위로 현재 수직 회전값을 가져옵니다.
+		</p>
+
+		<h3>[method:null reset] ()</h3>
+		<p>
+			컨트롤이 마지막으로 호출된 [page:.saveState] 시점으로 돌리거나, 초기상태로 재설정합니다.
+		</p>
+
+		<h3>[method:null saveState] ()</h3>
+		<p>
+			컨트롤의 현재 상태를 저장합니다. 나중에 [page:.rest]을 이용하여 현재 상태로 복구할 수 있습니다.
+		</p>
+
+		<h3>[method:Boolean update] ()</h3>
+		<p>
+			컨트롤을 업데이트합니다. 카메라를 수동으로 변환하거나, [page:.autoRotate] 또는 [page:.enableDamping]을 설정할 경우 업데이트 루프에서 호출해야 합니다.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js examples/jsm/controls/OrbitControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/PointerLockControls.html

@@ -0,0 +1,158 @@
+<!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>
+		[page:EventDispatcher] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+		해당 클래스의 구현은 [link:https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API Pointer Lock API] 를 기반으로 합니다. [name] 은 1 인칭 3D 게임을 위한 완벽한 선택입니다.
+		</p>
+
+		<h2>Code Example</h2>
+
+		<code>
+		const controls = new PointerLockControls( camera, document.body );
+
+		// UI를 표시하거나 숨기기 위해 이벤트 리스너를 추가합니다. (예시: 게임 메뉴)
+
+		controls.addEventListener( 'lock', function () {
+
+			menu.style.display = 'none';
+
+		} );
+
+		controls.addEventListener( 'unlock', function () {
+
+			menu.style.display = 'block';
+
+		} );
+		</code>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_pointerlock misc / controls / pointerlock ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+			[page:Camera camera]: 렌더링 된 장면의 카메라입니다.
+			</p>
+			<p>
+			[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			</p>
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			사용자 마우스가 움직일 떄 호출됩니다.
+		</p>
+
+		<h3>lock</h3>
+		<p>
+			포인터의 잠금 상태가 "잠김" 일 때 호출됩니다 (in other words: the mouse is captured).
+		</p>
+
+		<h3>unlock</h3>
+		<p>
+			포인터의 잠금 상태가 "잠금 해제" 일 때 호출됩니다. (in other words: the mouse is not captured anymore)
+		</p>
+
+		<h2>특성</h2>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			마우스 / 터치 이벤트를 수신하는 데 사용되는 HTMLDOMElement입니다. 이것은 생성자에 의해 설정되어야 합니다; 
+			생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+
+		<h3>[property:Boolean isLocked]</h3>
+		<p>
+			컨트롤의 잠김 여부를 설정합니다.
+		</p>
+
+		<h3>[property:Float maxPolarAngle]</h3>
+		<p>
+			카메라 피치(pitch)의 상한값을 설정합니다. 0 부터 Math.PI 라디안까지 범위를 가질 수 있습니다. 기본값은 Math.PI 입니다.
+		</p>
+
+		<h3>[property:Float minPolarAngle]</h3>
+		<p>
+			카메라 피치(pitch)의 하한값을 설정합니다. 0 부터 Math.PI 라디안까지 범위를 가질 수 있습니다. 기본값은 0 입니다.
+		</p>
+
+		<h2>메소드</h2>
+		<p>일반적인 메소드는 [page:EventDispatcher] 클래스를 참조하세요.</p>
+		
+
+		<h3>[method:null connect] ()</h3>
+		<p>
+			컨트롤의 이벤트 리스너를 추가합니다.			
+		</p>
+
+		<h3>[method:null disconnect] ()</h3>
+		<p>
+			컨트롤의 이벤트 리스너를 제거합니다.
+		</p>
+
+		<h3>[method:Vector3 getDirection] ( [param:Vector3 target] )</h3>
+		<p>
+			<p>
+				[page:Vector3 target]: 타겟 벡터를 의미합니다.
+			</p>
+			<p>
+				카메라가 보고있는 방향을 반환합니다.
+			</p>
+		</p>
+
+		<h3>[method:null lock] ()</h3>
+		<p>
+			포인터 잠금을 활성화합니다.
+		</p>
+
+		<h3>[method:null moveForward] ( [param:Number distance] )</h3>
+		<p>
+			<p>
+				[page:Number distance]: 앞으로 이동할 거리를 설정합니다.
+			</p>
+			<p>
+				카메라를 xz-평면에 평행하게 앞으로 이동합니다. camera.up을 y-up이라고 가정합니다.
+			</p>
+		</p>
+
+		<h3>[method:null moveRight] ( [param:Number distance] )</h3>
+		<p>
+			<p>
+				[page:Number distance]: 오른쪽으로 이동할 거리를 설정합니다.
+			</p>
+			<p>
+				카메라를 xz 평면에 평행하게 옆으로 이동합니다.
+			</p>
+		</p>
+
+		<h3>[method:null unlock] ()</h3>
+		<p>
+			포인터 잠금을 종료합니다.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/PointerLockControls.js examples/jsm/controls/PointerLockControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/TrackballControls.html

@@ -0,0 +1,208 @@
+<!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>
+		[page:EventDispatcher] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			<p>
+				[name] 는 [page:OrbitControls] 와 유사하지만, 카메라의 일정한 [page:Object3D.up up] vector 값을 유지하지 않습니다.
+				이 말인즉슨, 카메라가 위쪽 방향이나 아럐쪽 방향으로 회전할 경우, "오른쪽을 위로" 유지하기 위해 뒤집을 수 없습니다.
+			</p>
+		</p>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_trackball misc / controls / trackball ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+				[page:Camera camera]: 렌더링 된 장면의 카메라입니다.
+			</p>
+			<p>
+				[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			</p>
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			컨트롤에 의해 카메라가 변환될 경우 호출됩니다.
+		</p>
+
+		<h3>start</h3>
+		<p>
+			처음으로 상호 작용이 실행되면 호출됩니다. (e.g. 터치패드)
+		</p>
+
+		<h3>end</h3>
+		<p>
+			상호 작용이 완료되면 호출됩니다.
+		</p>
+
+		<h2>특성</h2>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			마우스 / 터치 이벤트를 수신하는 데 사용되는 HTMLDOMElement입니다. 이것은 생성자에 의해 설정되어야 합니다; 생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+		<h3>[property:Number dynamicDampingFactor]</h3>
+		<p>
+			댐핑의 강도를 조절합니다. [page:.staticMoving staticMoving] 이 * false * 로 설정된 경우에만 고려됩니다. 기본값은 *0.2* 입니다.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			컨트롤을 활성화 여부를 설정합니다.
+		</p>
+
+		<h3>[property:Array keys]</h3>
+		<p>
+			이 배열은 상호 작용을 제어하기위한 키 코드를 보유합니다.
+			<ul>
+				<li>처음 정의 된 키를 누르면 모든 마우스 상호 작용 (왼쪽, 가운데, 오른쪽)이 궤도를 회전합니다.</li>
+				<li>두 번째로 정의 된 키를 누르면 모든 마우스 상호 작용 (왼쪽, 가운데, 오른쪽)이 확대 / 축소를 수행합니다.</li>
+				<li>세 번째로 정의 된 키를 누르면 모든 마우스 상호 작용 (왼쪽, 가운데, 오른쪽)이 패닝을 수행합니다.</li>
+			</ul>
+			기본값은 A, S, D를 나타내는 * 65, 83, 68 *입니다.
+		</p>
+
+		<h3>[property:Number maxDistance]</h3>
+		<p>
+			축소할 수 있는 범위를 설정합니다. 기본값은 *무한대* 입니다.
+		</p>
+
+		<h3>[property:Number minDistance]</h3>
+		<p>
+			확대할 수 있는 범위를 설정합니다. 기본값은 *0* 입니다.
+		</p>
+
+		<h3>
+			[property:Object mouseButtons]</h3>
+		<p>
+			해당 객체는 컨트롤에서 사용하는 마우스 동작에 대한 참조를 포함합니다.
+			<ul>
+				<li>.LEFT 는 *THREE.MOUSE>ROTATE* 에 대입됩니다.</li>
+				<li>.MIDDLE 은 *THREE.MOUSE.ZOOM* 에 대입됩니다.</li>
+				<li>.RIGHT 는 *THREE.MOUSE.PAN* 에 대입됩니다.</li>
+			</ul>
+		</p>
+
+		<h3>[property:Boolean noPan]</h3>
+		<p>
+			패닝의 비활성화 여부를 설정합니다. 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Boolean noRotate]</h3>
+		<p>
+			회전의 비활성화 여부를 설정합니다. 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Boolean noZoom]</h3>
+		<p>
+			줌잉의 비활성화 여부를 설정합니다. 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Camera object]</h3>
+		<p>
+			제어할 카메라 객체입니다.
+		</p>
+
+		<h3>[property:Number panSpeed]</h3>
+		<p>
+			확대 속도를 설정합니다. 기본값은 *0.3* 입니다.
+		</p>
+
+		<h3>[property:Number rotateSpeed]</h3>
+		<p>
+			회전 속도를 설정합니다. 기본값은 *1.0* 입니다.
+		</p>
+
+		<h3>[property:Object screen]</h3>
+		<p>
+			화면 속성을 나타냅니다. [page:.handleResize handleResize]()을 호출할 시 자동적으로 설정됩니다.
+			<ul>
+				<li>왼쪽: 화면의 왼쪽 경계면의 오프셋을 픽셀 단위로 나타냅니다.</li>
+				<li>상단: 화면의 상단 경계면의 오프셋을 픽셀 단위로 나타냅니다.</li>
+				<li>넓이: 화면의 넓이를 픽셀 단위로 나타냅니다.</li>
+				<li>높이: 화면의 높이를 픽셀 단위로 나타냅니다.</li>
+			</ul>
+		</p>
+
+		<h3>[property:Boolean staticMoving]</h3>
+		<p>
+			댐핑의 비활성화 여부를 설정합니다. 기본값은 *false* 입니다.
+		</p>
+
+		<h3>[property:Number zoomSpeed]</h3>
+		<p>
+			줌 속도를 설정합니다. 기본값은 *1.2* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<h3>[method:null checkDistances] ()</h3>
+		<p>
+			컨트롤이 [minDistance, maxDistance] 범위내에 있는지 확인합니다. [page:.update update]() 에 의해 호출됩니다.
+			
+		</p>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤이 더 이상 필요하지 않을 경우 호출해야 합니다.
+
+		</p>
+
+		<h3>[method:null handleResize] ()</h3>
+		<p>
+			어플리케이션의 창 크기를 조절 하려면 호출해야 합니다.
+
+		</p>
+
+		<h3>[method:null panCamera] ()</h3>
+		<p>
+			패닝이 필요한 경우 [page:.update update]() 을 호출하여 수행합니다.
+		</p>
+
+		<h3>[method:null reset] ()</h3>
+		<p>
+			컨트롤을 초기 상태로 전환합니다.
+		</p>
+
+		<h3>[method:null rotateCamera] ()</h3>
+		<p>
+			카메라의 회전이 필요한 경우 [page:.update update]() 을 호출하여 수행합니다.
+		</p>
+
+		<h3>[method:null update] ()</h3>
+		<p>
+			컨트롤을 업데이트합니다. 보통은 애니메이션 루프에서 수행합니다.
+		</p>
+
+		<h3>[method:null zoomCamera] ()</h3>
+		<p>
+			줌잉이 필요항 경우 [page:.update update]() 을 호출하여 수행합니다.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TrackballControls.js examples/jsm/controls/TrackballControls.js]
+		</p>
+	</body>
+</html>

docs/examples/ko/controls/TransformControls.html

@@ -0,0 +1,223 @@
+<!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>
+		[page:Object3D] &rarr;
+
+		<h1>[name]</h1>
+
+		<p class="desc">
+			해당 클래스는 DCC 툴인 블렌더의 상호 작용 모델과 비슷한 기능을 3D 공간에서 객체를 변환하는데 사용할 수 있습니다.
+			다른 컨트롤과 달리, 해당 기능은 카메라의 장면 변환을 의미하지 않습니다.<br /><br />
+
+			[name] 는 연결된 3D 객체가 씬(scene) 그래프의 일부 입니다.
+		
+		</p>
+
+		<h2>예시</h2>
+
+		<p>[example:misc_controls_transform misc / controls / transform ]</p>
+
+		<h2>생성자</h2>
+
+		<h3>[name]( [param:Camera camera], [param:HTMLDOMElement domElement] )</h3>
+		<p>
+			<p>
+				[page:Camera camera]: 렌더링 된 장면의 카메라입니다.
+			</p>
+			<p>
+				[page:HTMLDOMElement domElement]: 이벤트 리스너에 사용되는 HTML 엘리먼트입니다.
+			<p>
+				새로운 [name] 객체를 생성합니다.
+			</p>
+		</p>
+
+		<h2>이벤트</h2>
+
+		<h3>change</h3>
+		<p>
+			어떤 유형 (객체 또는 속성 변경) 의 변경이 수행할 경우 호출됩니다. 속성 변경은 이벤트 리스너를 추가 할 수 있는 별도의 이벤트입니다. 
+			이벤트의 타입은 "propertyname-changed" 입니다.
+		</p>
+
+		<h3>mouseDown</h3>
+		<p>
+			포인터 (마우스 / 터치)가 활성화되면 호출됩니다.
+		</p>
+
+		<h3>mouseUp</h3>
+		<p>
+			포인터 (마우스 / 터치)가 활성화되지 않으면 호출됩니다.
+		</p>
+
+		<h3>objectChange</h3>
+		<p>
+			제어 된 3D 객체가 변경되면 호출됩니다.
+		</p>
+
+		<h2>속성</h2>
+
+		<p>공통 속성은 [page: Object3D] 클래스를 참조하세요.</p>
+
+		<h3>[property:String axis]</h3>
+		<p>
+			현재 변환 축을 지정합니다.
+		</p>
+
+		<h3>[property:Camera camera]</h3>
+		<p>
+			렌더링 된 장면의 카메라를 지정합니다.
+		</p>
+
+		<h3>[property:HTMLDOMElement domElement]</h3>
+		<p>
+			HTMLDOMElement는 마우스 / 터치 이벤트를 사용하는데 이용됩니다. 이것은 생성자에 의해 설정되어야 합니다; 
+			생성자를 통해 설정되지 않을 경우 새 이벤트 리스너에 설정되지 않습니다.
+		</p>
+
+		<h3>[property:Boolean dragging]</h3>
+		<p>
+			현재 드래그를 수행할건지 여부를 지정합니다. 해당 속성은 읽기전용 입니다.
+		</p>
+
+		<h3>[property:Boolean enabled]</h3>
+		<p>
+			컨트롤의 활성화 여부를 지정합니다.
+		</p>
+
+		<h3>[property:String mode]</h3>
+		<p>
+			현재 변환 모드를 지정합니다. 해당 속성은 "translate", "roate" 및 "scale" 의 값을 지정할 수 있습니다. 기본값은 *translate* 입니다.
+		</p>
+
+		<h3>[property:Object3D object]</h3>
+		<p>
+			제어 될 3D 객체를 지정합니다.
+		</p>
+
+		<h3>[property:Number rotationSnap]</h3>
+		<p>
+			기본적으로, 3D 객체는 연속적으로 회전합니다. 해당 프로퍼티에 값을 설정하면 (라디안), 3D 객체를 각 단계별로 회전 할 때마다 정의할 수 있습니다. 기본값은 *null* 입니다.
+		</p>
+
+		<h3>[property:Boolean showX]</h3>
+		<p>
+			x축 헬퍼의 표시 여부를 결정합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean showY]</h3>
+		<p>
+			y축 헬퍼의 표시 여부를 결정합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Boolean showZ]</h3>
+		<p>
+			z축 헬퍼의 표시 여부를 결정합니다. 기본값은 *true* 입니다.
+		</p>
+
+		<h3>[property:Number size]</h3>
+		<p>
+			helper UI의 크기를 조절합니다 (축/면). 기본값은 *1* 입니다.
+		</p>
+
+		<h3>[property:String space]</h3>
+		<p>
+			좌표 변환을 수행 되어질 공간을 지정합니다. 해당 속성은 "world" 및 "local" 의 값을 지정할 수 있습니다. 기본값은 *world* 입니다.
+		</p>
+
+		<h3>[property:Number translationSnap]</h3>
+		<p>
+			일반적으로, 3D 객체는 연속적으로 변환됩니다. 해당 프로퍼티에 값을 설정하면 (월드 단위), 3D 객체를 각 단계별로 변환 할 때마다 정의할 수 있습니다. 기본값은 *null* 입니다.
+		</p>
+
+		<h2>메소드</h2>
+
+		<p>일반적인 메소드는 [page:Object3D] 클래스를 참조하세요.</p>
+
+		<h3>[method:TransformControls attach] ( [param:Object3D object] )</h3>
+		<p>
+			<p>
+				[page:Object3D object]: 변환 되어지는 3D 객체 입니다.
+			</p>
+			<p>
+				변환해야하는 3D 객체를 설정하고 컨트롤 UI가 표시되도록합니다.
+			</p>
+		</p>
+
+		<h3>[method:TransformControls detach] ()</h3>
+		<p>
+			컨트롤에서 현재 3D 객체를 제거하고 helper UI를 보이지 않게합니다.
+		</p>
+
+		<h3>[method:null dispose] ()</h3>
+		<p>
+			컨트롤을 더이상 필요하지 않을 경우 호출해야 합니다.
+		</p>
+
+		<h3>[method:String getMode] ()</h3>
+		<p>
+			변환 모드를 반환합니다.
+		</p>
+
+		<h3>[method:null setMode] ( [param:String mode] )</h3>
+		<p>
+			<p>
+				[page:String mode]: 변환 모드를 가리킵니다.
+			</p>
+			<p>
+				변환 모드를 설정합니다.
+			</p>
+		</p>
+
+		<h3>[method:null setRotationSnap] ( [param:Number rotationSnap] )</h3>
+		<p>
+			<p>
+				[page:Number rotationSnap]: 회전 스냅를 가리킵니다.
+			</p>
+			<p>
+				회전 스냅를 설정합니다.
+			</p>
+		</p>
+
+		<h3>[method:null setSize] ( [param:Number size] )</h3>
+		<p>
+			<p>
+				[page:Number size]: helper UI의 크기를 가리킵니다.
+			</p>
+			<p>
+				helper UI의 크기를 설정합니다.
+			</p>
+		</p>
+
+		<h3>[method:null setSpace] ( [param:String space] )</h3>
+		<p>
+			<p>
+				[page:String space]: 어떤 좌표 공간으로 변환을 적용합니다.
+			</p>
+			<p>
+				변환될 좌표 공간을 설정합니다.
+			</p>
+		</p>
+
+		<h3>[method:null setTranslationSnap] ( [param:Number translationSnap] )</h3>
+		<p>
+			<p>
+				[page:Number translationSnap]: 변환 스냅을 가리킵니다.
+			</p>
+			<p>
+				변환 스냅을 설정합니다.
+			</p>
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/TransformControls.js examples/jsm/controls/TransformControls.js]
+		</p>
+	</body>
+</html>

docs/examples/zh/math/Lut.html

@@ -138,7 +138,7 @@
 		<h2>源码</h2>
 
 		<p>
-			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/[path].js examples/jsm/math/[path].js]
+			[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/Lut.js examples/jsm/math/Lut.js]
 		</p>
 	</body>
 </html>

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/math/OBB.html

@@ -0,0 +1,174 @@
+<!DOCTYPE html>
+<html lang="zh">
+	<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">
+			Represents an oriented bounding box (OBB) in 3D space.
+		</p>
+
+		<h2>Examples</h2>
+		<p>
+			[example:webgl_math_obb]
+		</p>
+
+		<h2>Constructor</h2>
+
+		<h3>[name]( [param:Vector3 center], [param:Vector3 halfSize], [param:Matrix3 rotation] )</h3>
+		<p>
+			[page:Vector3 center] — The center of the [name]. (optional)<br />
+			[page:Vector3 halfSize] — Positive halfwidth extents of the [name] along each axis. (optional)<br />
+			[page:Matrix3 rotation] — The rotation of the [name]. (optional)
+		</p>
+		<p>
+			Creates a new [name].
+		</p>
+
+		<h2>Properties</h2>
+
+		<h3>[property:Vector3 center]</h3>
+		<p>
+			The center of the [name]. Default is *( 0, 0, 0 )*.
+		</p>
+
+		<h3>[property:Vector3 halfSize]</h3>
+		<p>
+			Positive halfwidth extents of the [name] along each axis. Default is *( 0, 0, 0 )*.
+		</p>
+
+		<h3>[property:Matrix3 rotation]</h3>
+		<p>
+			The rotation of the [name]. Default is the identity matrix.
+		</p>
+
+		<h2>Methods</h2>
+
+		<h3>[method:this applyMatrix4]( [param:Matrix4 matrix] )</h3>
+		<p>
+			[page:Matrix4 matrix] — A 4x4 transformation matrix.
+		</p>
+		<p>
+			Applies the given transformation matrix to this [name]. This method can be used to transform the
+			bounding volume with the world matrix of a 3D object in order to keep both entities in sync.
+		</p>
+
+		<h3>[method:Vector3 clampPoint]( [param:Vector3 point], [param:Vector3 clampedPoint] )</h3>
+		<p>
+			[page:Vector3 point] — The point that should be clamped within the bounds of this [name].<br />
+			[page:Matrix3 clampedPoint] — The result will be copied into this vector.
+		</p>
+		<p>
+			Clamps the given point within the bounds of this [name].
+		</p>
+
+		<h3>[method:OBB clone]()</h3>
+		<p>
+			Creates a cloned [name] for this instance.
+		</p>
+
+		<h3>[method:Boolean containsPoint]( [param:Vector3 point] )</h3>
+		<p>
+			[page:Vector3 point] — The point to test.
+		</p>
+		<p>
+			Whether the given point lies within this [name] or not.
+		</p>
+
+		<h3>[method:this copy]( [param:OBB obb] )</h3>
+		<p>
+			[page:OBB obb] — The [name] to copy.
+		</p>
+		<p>
+			Copies the properties of the given [name] to this [name].
+		</p>
+
+		<h3>[method:Boolean equals]( [param:OBB obb] )</h3>
+		<p>
+			[page:OBB obb] — The [name] to test.
+		</p>
+		<p>
+			Whether the given [name] is equal to this [name] or not.
+		</p>
+
+		<h3>[method:this fromBox3]( [param:Box3 box3] )</h3>
+		<p>
+			[page:Box3 box3] — An AABB.
+		</p>
+		<p>
+			Defines an [name] based on the given AABB.
+		</p>
+
+		<h3>[method:Vector3 getSize]( [param:Vector3 size] )</h3>
+		<p>
+			[page:Vector3 size] — The result will be copied into this vector.
+		</p>
+		<p>
+			Returns the size of this [name] into the given vector.
+		</p>
+
+		<h3>[method:Boolean intersectsBox3]( [param:Box3 box3] )</h3>
+		<p>
+			[page:Box3 box3] — The AABB to test.
+		</p>
+		<p>
+			Whether the given AABB intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsSphere]( [param:Sphere sphere] )</h3>
+		<p>
+			[page:Sphere sphere] — The bounding sphere to test.
+		</p>
+		<p>
+			Whether the given bounding sphere intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsOBB]( [param:OBB obb], [param:Number epsilon] )</h3>
+		<p>
+			[page:OBB obb] — The OBB to test.<br />
+			[page:Number epsilon] — An optional numeric value to counteract arithmetic errors. Default is *Number.EPSILON*.
+		</p>
+		<p>
+			Whether the given [name] intersects this [name] or not.
+		</p>
+
+		<h3>[method:Boolean intersectsRay]( [param:Ray ray] )</h3>
+		<p>
+			[page:Ray ray] — The ray to test.
+		</p>
+		<p>
+			Whether the given ray intersects this [name] or not.
+		</p>
+
+		<h3>[method:Vector3 intersectRay]( [param:Ray ray], [param:Vector3 intersectionPoint] )</h3>
+		<p>
+			[page:Ray ray] — The ray to test.<br />
+			[page:Vector3 intersectionPoint] — The result will be copied into this vector.
+		</p>
+		<p>
+			Performs a Ray/OBB intersection test and stores the intersection point to the given 3D vector.
+			If no intersection is detected, *null* is returned.
+		</p>
+
+		<h3>[method:this set]( [param:Vector3 center], [param:Vector3 halfSize], [param:Matrix3 rotation] )</h3>
+		<p>
+			[page:Vector3 center] — The center of the [name].<br />
+			[page:Vector3 halfSize] — Positive halfwidth extents of the [name] along each axis.<br />
+			[page:Matrix3 rotation] — The rotation of the [name].
+		</p>
+		<p>
+			Defines the [name] for the given values.
+		</p>
+
+		<h2>Source</h2>
+
+		<p>
+		[link:https://github.com/mrdoob/three.js/blob/master/examples/jsm/math/OBB.js examples/jsm/math/OBB.js]
+		</p>
+	</body>
+</html>

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

@@ -422,7 +422,8 @@
 
 			"Math": {
 				"LookupTable": "examples/en/math/Lut",
-				"MeshSurfaceSampler": "examples/en/math/MeshSurfaceSampler"
+				"MeshSurfaceSampler": "examples/en/math/MeshSurfaceSampler",
+				"OBB": "examples/en/math/OBB"
 			},
 
 			"ConvexHull": {
@@ -957,7 +958,8 @@
 
 			"数学库": {
 				"LookupTable": "examples/zh/math/Lut",
-				"MeshSurfaceSampler": "examples/zh/math/MeshSurfaceSampler"
+				"MeshSurfaceSampler": "examples/zh/math/MeshSurfaceSampler",
+				"OBB": "examples/en/math/OBB"
 			},
 
 			"QuickHull": {
@@ -996,6 +998,89 @@
 
 		}
 
+	},
+
+	"ko": {
+
+		"매뉴얼": {
+
+			"시작하기": {
+				"장면 만들기": "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",
+				"참고 링크": "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",
+				"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"
+			},
+
+			"애니메이션 / 트랙": {
+				"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": "api/ko/audio/Audio",
+				"AudioAnalyser": "api/ko/audio/AudioAnalyser",
+				"AudioContext": "api/ko/audio/AudioContext",
+				"AudioListener": "api/ko/audio/AudioListener",
+				"PositionalAudio": "api/ko/audio/PositionalAudio"
+			}
+		},
+
+		"예제": {
+
+			"컨트롤": {
+				"DeviceOrientationControls": "examples/ko/controls/DeviceOrientationControls",
+				"DragControls": "examples/ko/controls/DragControls",
+				"FirstPersonControls": "examples/ko/controls/FirstPersonControls",
+				"FlyControls": "examples/ko/controls/FlyControls",
+				"OrbitControls": "examples/ko/controls/OrbitControls",
+				"PointerLockControls": "examples/ko/controls/PointerLockControls",
+				"TrackballControls": "examples/ko/controls/TrackballControls",
+				"TransformControls": "examples/ko/controls/TransformControls"
+			}
+
+		}
+
 	}
 
 }

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>

editor/js/Editor.js

@@ -604,7 +604,7 @@ Editor.prototype = {
 		this.camera.copy( _DEFAULT_CAMERA );
 		this.signals.cameraResetted.dispatch();
 
-		this.scene.name = "Scene";
+		this.scene.name = 'Scene';
 		this.scene.userData = {};
 		this.scene.background = null;
 		this.scene.environment = null;