4 gadi atpakaļ · 4c85acc15f
--- a/docs/list.json
+++ b/docs/list.json
@@ -998,6 +998,42 @@
 
				 
			
 
				 		}
			
 
				 
			
 
				+	},
			
 
				+
			
 
				+	"kr": {
			
 
				+	
			
 
				+		"매뉴얼": {
			
 
				+	
			
 
				+			"시작하기": {
			
 
				+				"장면 만들기": "manual/kr/introduction/Creating-a-scene",
			
 
				+				"설치": "manual/kr/introduction/Installation",
			
 
				+				"브라우저 지원": "manual/kr/introduction/Browser-support",
			
 
				+				"WebGL 호환성 검사": "manual/kr/introduction/WebGL-compatibility-check",
			
 
				+				"로컬 환경에서 구동 방법": "manual/kr/introduction/How-to-run-things-locally",
			
 
				+				"Typescript 설정": "manual/kr/introduction/Typescript-setup",
			
 
				+				"선 그리기": "manual/kr/introduction/Drawing-lines",
			
 
				+				"텍스트 만들기": "manual/kr/introduction/Creating-text",
			
 
				+				"3D 모델 불러오기": "manual/kr/introduction/Loading-3D-models",
			
 
				+				"FAQ": "manual/kr/introduction/FAQ",
			
 
				+				"참고 링크": "manual/kr/introduction/Useful-links"
			
 
				+			},
			
 
				+	
			
 
				+			"심화 과정": {
			
 
				+				"오브젝트를 업데이트하는 방법": "manual/kr/introduction/How-to-update-things",
			
 
				+				"오브젝트를 폐기하는 방법": "manual/kr/introduction/How-to-dispose-of-objects",
			
 
				+				"VR 컨텐츠를 만드는 방법": "manual/kr/introduction/How-to-create-VR-content",
			
 
				+				"후처리 사용 방법": "manual/kr/introduction/How-to-use-post-processing",
			
 
				+				"행렬 변환": "manual/kr/introduction/Matrix-transformations",
			
 
				+				"애니메이션 시스템": "manual/kr/introduction/Animation-system"
			
 
				+			},
			
 
				+	
			
 
				+			"빌드 도구": {
			
 
				+				"NPM 테스트": "manual/kr/buildTools/Testing-with-NPM"
			
 
				+			}
			
 
				+	
			
 
				+		}
			
 
				+	
			
 
				+	
			
 
				 	}
			
 
				 
			
 
				-}
			
 
				+}
			
--- a/docs/manual/kr/buildTools/Testing-with-NPM.html
+++ b/docs/manual/kr/buildTools/Testing-with-NPM.html
@@ -0,0 +1,250 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Animation-system.html
+++ b/docs/manual/kr/introduction/Animation-system.html
@@ -0,0 +1,131 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Browser-support.html
+++ b/docs/manual/kr/introduction/Browser-support.html
@@ -0,0 +1,130 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/Creating-text.html
+++ b/docs/manual/kr/introduction/Creating-text.html
@@ -0,0 +1,113 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Creating_a_scene.html
+++ b/docs/manual/kr/introduction/Creating_a_scene.html
@@ -0,0 +1,164 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Drawing-lines.html
+++ b/docs/manual/kr/introduction/Drawing-lines.html
@@ -0,0 +1,67 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/FAQ.html
+++ b/docs/manual/kr/introduction/FAQ.html
@@ -0,0 +1,54 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/How-to-create-VR-content.html
+++ b/docs/manual/kr/introduction/How-to-create-VR-content.html
@@ -0,0 +1,80 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/How-to-dispose-of-objects.html
+++ b/docs/manual/kr/introduction/How-to-dispose-of-objects.html
@@ -0,0 +1,115 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/How-to-run-things-locally.html
+++ b/docs/manual/kr/introduction/How-to-run-things-locally.html
@@ -0,0 +1,150 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/How-to-update-things.html
+++ b/docs/manual/kr/introduction/How-to-update-things.html
@@ -0,0 +1,249 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/How-to-use-post-processing.html
+++ b/docs/manual/kr/introduction/How-to-use-post-processing.html
@@ -0,0 +1,110 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Installation.html
+++ b/docs/manual/kr/introduction/Installation.html
@@ -0,0 +1,186 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/Loading-3D-models.html
+++ b/docs/manual/kr/introduction/Loading-3D-models.html
@@ -0,0 +1,151 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+
			
 
				+<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>
			
--- a/docs/manual/kr/introduction/Matrix-transformations.html
+++ b/docs/manual/kr/introduction/Matrix-transformations.html
@@ -0,0 +1,72 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Typescript-setup.html
+++ b/docs/manual/kr/introduction/Typescript-setup.html
@@ -0,0 +1,41 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/Useful-links.html
+++ b/docs/manual/kr/introduction/Useful-links.html
@@ -0,0 +1,183 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>
			
--- a/docs/manual/kr/introduction/WebGL-compatibility-check.html
+++ b/docs/manual/kr/introduction/WebGL-compatibility-check.html
@@ -0,0 +1,34 @@
 
				+<!DOCTYPE html>
			
 
				+<html lang="kr">
			
 
				+	<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>