Japanese translate (#21474)

* Translate manual/ into Japanese

commit 8c7fc78127bc35343c823473ea3025ddbccc4711
Author: na2shell <[email protected]>
Date:   Wed Mar 17 15:07:41 2021 +0900

    modify log

commit 3acd0c3bdba7760c947dc95dd121ff7f3cefd888
Author: na2shell <[email protected]>
Date:   Wed Mar 17 15:06:06 2021 +0900

    modify commit-log

commit c122331a2061cb2c0b79b164a63fbcb848a9846f
Merge: 03226bd72c 34519f5073
Author: na2shell <[email protected]>
Date:   Wed Mar 17 14:55:53 2021 +0900

    pull upstream dev

commit 03226bd72cfef6dd697efebaf46936f212f704df
Author: na2shell <[email protected]>
Date:   Wed Mar 17 14:52:03 2021 +0900

    pull upstream

commit 88a842e0e12adf847b5861c97db54739905362cf
Author: na2shell <[email protected]>
Date:   Wed Mar 17 14:44:28 2021 +0900

    Translation completed

commit 2e1c5150be31981f2b5a352c79fde1dfea21b4fb
Merge: e4c00744a2 50380bd1b8
Author: na2shell <[email protected]>
Date:   Thu Mar 4 10:52:45 2021 +0900

    Merge branch 'dev' of https://github.com/mrdoob/three.js into broken_url

commit e4c00744a2f0f160055ee984c3d932044899b2ff
Author: na2shell <[email protected]>
Date:   Wed Mar 3 18:17:31 2021 +0900

    traslate FAQ

commit 60b56b82a3d72aaa09119561213b4b75f3dc8c14
Author: na2shell <[email protected]>
Date:   Mon Mar 1 18:25:10 2021 +0900

    translate loading-3d-modeling

commit 3c641a17519ed46f85de7636b26462bff923279f
Author: na2shell <[email protected]>
Date:   Mon Feb 22 15:57:50 2021 +0900

    translate matrix,dispose,post-procesing doc

commit 5f20f8341ab949a3ba11fbb4ce848e3ad81ce3f5
Author: ln3187 <[email protected]>
Date:   Mon Jan 25 10:21:06 2021 +0900

    translate Animation-system.html

commit cc2d8d3da565460169f995282d2b2d75a71bc1e9
Author: ln3187 <[email protected]>
Date:   Tue Jan 19 11:06:42 2021 +0900

    translate some docs

commit e4678a018f8d057a4944e7dc22d50580623ca340
Author: kokusai <[email protected]>
Date:   Tue Jan 5 18:48:47 2021 +0900

    translating How-to-run-things-locally.html

commit 054159975f34d7473c3141cba219d12fc507af9d
Author: kokusai <[email protected]>
Date:   Tue Jan 5 16:39:25 2021 +0900

    translate WebGL-compatibility-check.html

commit 16d1f733135ae3ab78a35523817fbf569cc30f6e
Author: ln3187 <[email protected]>
Date:   Sun Dec 27 17:18:08 2020 +0900

    translate Browser-support.html

commit 564a57402e9ca02cc48040d070ba17f8076a7ae2
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 16:30:47 2020 +0900

    translate Installation.html

commit 42dd7c028a154cfa3ab0a2890677c1ebbb9e798a
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 15:46:29 2020 +0900

    copy Installation.html in English

commit 731e2be29be1bbb5213904adcd2182074bf72064
Merge: 0357df19f9 c47d12be80
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 14:47:12 2020 +0900

    Merge branch 'dev' of https://github.com/ln3187/three.js into dev

commit 0357df19f9b5719c1a354ba71bad80a7e0b43bb9
Merge: f139bcc03d 7a957e676e
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 14:34:00 2020 +0900

    Merge branch 'dev' of https://github.com/ln3187/three.js into HEAD

commit c47d12be80a13265a5a56c73c5b1702fdddbcc65
Merge: f139bcc03d 7a957e676e
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 14:34:00 2020 +0900

    Merge branch 'dev' of https://github.com/ln3187/three.js into HEAD

commit f139bcc03d8560a82661e2ad6fc50e0511db2efa
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 14:32:11 2020 +0900

    modify to make it more natural japanese

commit d305f2efdea7aec95839ec0507c601fc4c5fa703
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 11:10:55 2020 +0900

    first commit

commit 7a957e676e1f2aa46a36af8ea0434463c85b5ff9
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 11:10:55 2020 +0900

    first commit

commit 14bb48f52d5ae23670dcfffc2fd7ae00564ec7a3
Author: ln3187 <[email protected]>
Date:   Thu Dec 24 10:22:14 2020 +0900

    initial translation

* revert package-lock.json

* modify format of list.json

docs/index.html

@@ -34,6 +34,7 @@
 						<option value="ar">ar</option>
 						<option value="ko">한국어</option>
 						<option value="zh">中文</option>
+						<option value="ja">日本語</option>
 					</select>
 				</div>
 				<div id="content"></div>
@@ -81,7 +82,7 @@
 
 			if ( /^(api|manual|examples)/.test( hash ) ) {
 
-				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh)\//.exec( hash );
+				const hashLanguage = /^(api|manual|examples)\/(en|ar|ko|zh|ja)\//.exec( hash );
 
 				if ( hashLanguage === null ) {
 

docs/list.json

@@ -1043,6 +1043,35 @@
 
 		}
 
-	}
+	},
+
+    "ja": {
+        "マニュアル": {
+            "はじめてみましょう": {
+                "シーンの作成": "manual/ja/introduction/Creating-a-scene",
+                "インストールの方法": "manual/ja/introduction/Installation",
+                "サポートしているブラウザ": "manual/ja/introduction/Browser-support",
+                "WebGLの互換性の確認": "manual/ja/introduction/WebGL-compatibility-check",
+                "localで実行する方法": "manual/ja/introduction/How-to-run-things-locally",
+                "線を引く": "manual/ja/introduction/Drawing-lines",
+                "テキストを作成する": "manual/ja/introduction/Creating-text",
+                "3Dモデルをロードする": "manual/ja/introduction/Loading-3D-models",
+                "ライブラリとプラグイン": "manual/ja/introduction/Libraries-and-Plugins",
+                "FAQ": "manual/ja/introduction/FAQ",
+                "役にたつリンク集": "manual/ja/introduction/Useful-links"
+            },
+            "次の段階": {
+                "更新の仕方": "manual/ja/introduction/How-to-update-things",
+                "オブジェクトを廃棄する方法": "manual/ja/introduction/How-to-dispose-of-objects",
+                "VRコンテンツの作り方": "manual/ja/introduction/How-to-create-VR-content",
+                "post-processingの使い方": "manual/ja/introduction/How-to-use-post-processing",
+                "行列の変換": "manual/ja/introduction/Matrix-transformations",
+                "アニメーションシステム": "manual/ja/introduction/Animation-system"
+            },
+            "ビルドツール": {
+                "NPMでテストを実行する": "manual/ja/buildTools/Testing-with-NPM"
+            }
+        }
+    }
 
 }

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

@@ -0,0 +1,232 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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">
+        この記事ではhtree.jsを[link:https://nodejs.org/en/ node.js]環境で実行する方法について説明します。 node環境で実行すると、自動テストを実行できるようになります。 テストはコマンドラインから実行可能で、[link:https://travis-ci.org/ Travis]のような自動のCIツールからも実行できます。
+    </p>
+
+    <h2>The short version(概略)</h2>
+
+    <p>
+        npmとnodeについて詳しい方は以下のコマンドを実行し
+        <code>
+				$ npm install three --save-dev
+			</code> それから以下のコードをテストに追加してください
+        <code>
+			const THREE = require('three');
+		</code>
+    </p>
+
+    <h2>一からテスト可能なプロジェクトを作成する</h2>
+    <p>
+        If you're not familiar with these tools, here's a quick guide (for linux, the installation process will be slightly different using windows, but the NPM commands are identical). もしツールについて詳しくないようであれば、簡単な説明があります(linuxでは、windowsとインストールのやり方が大きく異なります。しかしNPMコマンドはそれとは関係ありません)。
+    </p>
+
+    <h3>Basic setup(基本的な設定)</h3>
+    <div>
+        <ol>
+            <li>
+                [link:https://www.npmjs.org/ npm]とnodejsをインストールします。 もっとも早い方法は、一般的に以下のように行うことです。
+                <code>
+$ sudo apt-get install -y npm nodejs-legacy
+# fix any problems with SSL in the default registry URL
+$ npm config set registry http://registry.npmjs.org/
+					</code>
+            </li>
+
+            <li>
+                新しいプロジェクトのディレクトリを作成します。
+                <code>
+						 $ mkdir test-example; cd test-example
+					</code>
+            </li>
+
+            <li>
+                npmに新しいプロジェクトfileを作成させます。
+                <code>
+					 $ npm init
+					</code> すべてのプロンプトでEnterを押すと全てデフォルトの設定になります。 こうすることでpackage.jsonが作成されます。
+            </li><br />
+
+            <li>
+                以下のようにしてテスト機能を起動してみてください
+                <code>
+$ npm test
+					</code> おそらくですが、これは失敗します。 package.jsonの中の、テスト用のスクリプトの定義はこのようになっています。
+                <code>
+						"test": "echo \"Error: no test specified\" && exit 1"
+					</code>
+            </li>
+
+        </ol>
+    </div>
+
+    <h2>Add mocha(mochaの追加)</h2>
+    <div>
+        [link:https://mochajs.org/ mocha]を使用していきます。
+
+        <ol>
+            <li>
+                以下のようにしてmochaをインストールします。
+                <code>
+$ npm install mocha --save-dev
+					</code> node_modulesディレクトリが作られていて、依存関係がそこに示されていることが分かるかと思います。 また、package.jsonが更新されていることも分かるでしょう。 devDependencies プロパティは、--save-dev の使用により追加・更新されます。
+            </li><br />
+
+            <li>
+                テストでmochaを使うためにpackage.jsonを編集してください。 これはtestが呼ばれた時に、mochaを実行して詳細をどこに報告するかを決めるためです。 デフォルトでは、testディレクトリにあるものはなんでも実行されます。(もしtestディレクトリがない場合npm ERRが発生する可能性があります。その場合はmkdir testを実行し、ディレクトリを作成してください)
+                <code>
+						"test": "mocha --reporter list"
+					</code>
+            </li>
+
+            <li>
+                以下のコマンドでテストをもう一度実行してみてください
+                <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 here])をご覧ください。
+                    </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でもう一度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>
+        3つのことをやる必要があります。
+
+        <ol>
+            <li>
+                自分のコードに期待される動作についてテストを書き、それをtest/の下に置いてください。 ここ([link:https://github.com/air/encounter/blob/master/test/Physics-test.js Here])に実際のプロジェクトの例を置いておきます。
+            </li>
+
+            <li>
+                nodejsが機能的なコードを見られるようにエクスポートして、requireと組み合わせて使用します。こちら([link:https://github.com/air/encounter/blob/master/js/Physics.js here])をご覧ください。
+            </li>
+
+            <li>
+                上記のサンプルコードでrequire('three')を行なったのと同じ方法で、 テストコードに、あなたが作成したコードをインポートする必要があります。
+            </li>
+        </ol>
+
+        <p>
+            2と3の項目は、コードの管理方法によって異なります。上記のPhysics.jsの例では、exportの部分は最後の方にあります。 module.exportsにオブジェクトを割り当てています。
+        </p>
+        <code>
+//=============================================================================
+// make available in nodejs
+//=============================================================================
+if (typeof exports !== 'undefined')
+{
+  module.exports = Physics;
+}
+			</code>
+    </div>
+
+    <h2>Dealing with dependencies(依存関係に対処する)</h2>
+    <div>
+        <p>
+            もしすでに、require.jsやborwserifyといった賢いツールを使っているようなら、この章は飛ばしてください。
+        </p>
+        <p>
+            three.jsのプロジェクトはブラウザで実行するのが一般的です。そのため、モジュールのロードはブラウザによって行われ、たくさんのscriptタグが実行されます。一つのファイルであれば依存関係の心配をする必要はありません。 しかしながら、nodejsでは他の全てのものと結びつけられているindex.htmlがないので、 明示的にそうする必要があります。
+        </p>
+        <p>
+            他のファイルに依存するモジュールをexportする場合、nodeにそのファイルをロードするように伝えなくてはなりません。 以下に1つのアプローチを示します。
+        </p>
+        <ol>
+            <li>
+                モジュールを始める時に、nodejs環境であるかを確かめます。
+            </li>
+            <li>
+                もしそうであれば、依存関係を明示的に宣言します。
+            </li>
+            <li>
+                もしnodejs環境でないならおそらくブラウザ環境ですので、特に他のことはしなくても良いです。
+            </li>
+        </ol>
+        Physics.jsからのサンプルコードを示しておきます。
+        <code>
+//=============================================================================
+// setup for server-side testing
+//=============================================================================
+if (typeof require === 'function') // test for nodejs environment
+{
+  const THREE = require('three');
+  const MY3 = require('./MY3.js');
+}
+			</code>
+    </div>
+
+</body>
+
+</html>

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

@@ -0,0 +1,116 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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>
+
+		<p class="desc">
+			three.jsのアニメーションシステムの中では、モデルの様々なプロパティをアニメーション化できます。
+			例えば、装飾を行なったモデル([page:SkinnedMesh skinned and rigged model])の骨格や、[page:Geometry.morphTargets morphTargets]、異なるマテリアルの要素(色、不透明度、有無)、可視性、変形などを操作できます。
+			アニメーションの要素は、フェードインやフェードアウト、クロスフェード、重ね合わせが可能です。
+			同一のオブジェクトであっても異なるものであっても、異なるアニメーションの比重やタイムスケールは独立して変更出来ます。また、同じオブジェクトでも、異なるオブジェクトでもアニメーションは同期出来ます。<br /><br />
+
+			これらを一つのシステムで達成するために、three.jsのアニメーションシステムは2015に完全に変更されました([link:https://github.com/mrdoob/three.js/issues/6881 link])。古い情報に気をつけてください！three.jsのアニメーションシステムは現在はUnityやUnreal Engine 4と似た設計になっています。このページではメインの要素と、それがどうやって動くのかを簡単に説明します。
+
+		</p>
+
+		<h3>Animation Clips</h3>
+
+		<p class="desc">
+			アニメーション付きの3Dオブジェクトをインポートすることに成功した場合(そのオブジェクトが骨格なのか、モーフターゲットなのか、はたまた両方なのかには関係なく)、レスポンスフィールドのうちの一つは"animations"という配列で、そのモデルの[page:AnimationClip AnimationClips]を含んでいるはずです(下記の利用可能なローダーを参照)。
+			アニメーション付きの3Dオブジェクトをインポートすることに成功する状況というのは、例えばBlenderから[link:https://github.com/KhronosGroup/glTF-Blender-IO glTF Blender exporter]でオブジェクトをエクスポートして、そのオブジェクトを[page:GLTFLoader]を使って、three.jsに読みこむ、といったことが挙げられます。<br /><br />
+
+			
+			*AnimationClip*は普通、オブジェクトの特定の動作のデータを持っています。
+			例えば、メッシュの場合、1つめのAnimationClipはウォークサイクルのためのもの、2つ目のAnimationClipはジャンプ用の、3つ目はサイドステップ用という風に動作のデータをAnimationClipに持たせています。
+
+		</p>
+
+		<h3>Keyframe Tracks</h3>
+
+		<p class="desc">
+
+			こういった*AnimationClip*の中では、アニメーションの要素のデータは別の[page:KeyframeTrack]に保存されています。キャラクターオブジェクトが骨格を持っていると仮定すると、あるキートラックフレームは腕の下の方の骨の、位置の時間変化のデータを保存し、別のキートラックは同じ骨の回転成分の動きのデータを保存し、また別のキートラックは他の骨の位置や回転、スケールの変化といったデータを保存します。AnimationClipは、このようなたくさんのトラックで構成できることがわかります。
+
+			モデルが[page:Geometry.morphTargets morph targets]を持っていると仮定すると(例えば、友好的な顔から怒った顔にモーフィングするような場合)、それぞれのトラックは特定のモーフィングターゲットの[page:Mesh.morphTargetInfluences influence]がclipのパフォーマンス中にどうやって変化するかについての情報を持っています。
+
+		</p>
+
+		<h3>Animation Mixer</h3>
+
+		<p class="desc">
+
+			保存されたデータは、アニメーションのベースを形成するだけで、実際のアニメーションの再生は[page:AnimationMixer]によってコントロールされます。AnimationMixerはアニメーションのプレイヤーであるだけでなく、本物のミキサーコンソールのようなハードウェアのシミレーションでもあります。これによって、複数のアニメーションを同時にコントロールして、ブレンドしたり、マージしたり出来ます。
+
+		</p>
+
+		<h3>Animation Actions</h3>
+
+		<p class="desc">
+
+			[page:AnimationAction AnimationActions]によってコントールできるので、*AnimationMixer*自体の(一般的な)メソッドやプロパティは少ないです。*AnimationAction*を設定することで、あるミキサー上での*AnimationClip*の再生や、一時停止、停止のタイミングであったり、clipをリピートする頻度やリピートの有無、フェードや時間変化の有無、クロスフェードやシンクロなどの補助的なことを設定することが出来ます。
+
+		</p>
+
+		<h3>Animation Object Groups</h3>
+
+		<p class="desc">
+
+			オブジェクトのグループに、アニメーションの状態を受け取らせたい場合は、[page:AnimationObjectGroup]が使えます。
+
+		</p>
+
+		<h3>サポートされているフォーマットとloader</h3>
+
+		<p class="desc">
+			全てのモデル形式がアニメーションを含んでいるわけではないことに注意してください(OBJは特に含まれていません)。
+			またthree.jsのloaderのうちのいくつかしか[page:AnimationClip AnimationClip]シーケンスをサポートしていないことにも注意してください。このアニメーションのタイプをサポートしているものがいくつかあります。
+		</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>Example</h2>
+
+		<code>
+		let mesh;
+
+		// Create an AnimationMixer, and get the list of AnimationClip instances
+		const mixer = new THREE.AnimationMixer( mesh );
+		const clips = mesh.animations;
+
+		// Update the mixer on each frame
+		function update () {
+			mixer.update( deltaSeconds );
+		}
+
+		// Play a specific animation
+		const clip = THREE.AnimationClip.findByName( clips, 'dance' );
+		const action = mixer.clipAction( clip );
+		action.play();
+
+		// Play all animations
+		clips.forEach( function ( clip ) {
+			mixer.clipAction( clip ).play();
+		} );
+		</code>
+
+	</body>
+</html>

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

@@ -0,0 +1,125 @@
+<!DOCTYPE html>
+<html lang="ja">
+<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 Explore 10以下)では、他の[link:https://github.com/mrdoob/three.js/tree/master/examples/jsm/renderers renderers] (CSS2DRenderer, CSS3DRenderer, SVGRenderer)に後方互換する必要があるでしょう。さらに、特に [link:https://github.com/mrdoob/three.js/tree/master/examples /examples] フォルダのファイルを使用している場合は、いくつかのpolyfillを含める必要がある可能性があります。
+		</p>
+		<p>
+			注意事項: もし古いブラウザをサポートする必要がないなら、WebGLRenderer以外を使うことはおすすめしません。というのも、他のrendererは遅い上に、サポートしている機能が少ないからです。
+		</p>
+	</div>
+
+	<h2>WebGLをサポートしているブラウザ</h2>
+	<div>
+		<p>
+			Google Chrome 9以上、Firefox 4以上、Opera 15以上、Safari 5.1以上、Internet Explore 11以上、もしくはMicrosoft Edge。
+			どのブラウザがWebGLをサポートしているのかは[link:https://caniuse.com/#feat=webgl Can I use WebGL]を確認してください。
+		</p>
+	</div>
+
+	<h2>three.jsで使用されるJavaScriptの機能とWeb APIs</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>
+			要件に応じてポリフィルをインポートするだけです。例えば、IE9の場合は少なくとも以下の機能を追加する必要があります。
+		</p>
+		<ul>
+			<li>Typed Arrays</li>
+			<li>Blob</li>
+		</ul>
+	</div>
+
+	<h3>おすすめのpolyfills</h3>
+	<div>
+		<ul>
+			<li>
+				[link:https://github.com/zloirock/core-js core-js]
+			</li>
+			<li>
+				[link:https://github.com/inexorabletash/polyfill/blob/master/typedarray.js typedarray.js]
+			</li>
+			<li>
+				[link:https://github.com/stefanpenner/es6-promise/ ES6-Promise]
+			</li>
+			<li>
+				[link:https://github.com/eligrey/Blob.js Blob.js]
+			</li>
+			<li>
+				[link:https://github.com/github/fetch fetch]
+			</li>
+		</ul>
+	</div>
+</body>
+</html>

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

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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を簡単に紹介します。まず、回転するキューブを描画することから始めます。困った時には、ページの下にあるサンプルコードを参考にしてみてください。</p>
+
+		<h2>始める前に</h2>
+
+		<p>three.jsを使う前に、表示するための場所が必要です。以下のHTMLをPCのファイルに保存して、そのHTMLを保存したディレクトリにjs/ディレクトリを作成し[link:https://threejs.org/build/three.js three.js]のコピーを保存しておいてください。その後、保存したHTMLをブラウザで開いてください。</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; }
+				&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>シーンの作成</h2>
+
+		<p>実際にthree.jsで何かものを表示できるようにするには、scene、camera、rendererの3つが必要です。</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にはcameraには種類がありますが、今回は<strong>PerspectiveCamera</strong>を使ってみましょう。</p>
+
+		<p>最初の属性は、<strong>field of view</strong>です。FOV(field of view)は、任意の瞬間にディスプレイ上で見られるシーンの範囲で、単位は度数です。</p>
+
+		<p>2つ目は<strong>アスペクト比</strong>です。アスペクト比は要素の幅を高さで割ったもので、描画する際には、アスペクト比を使うことが多いと思います。そうしないと、ワイドスクリーンのテレビで古い映画を再生したときと同じようになってしまいます。</p>
+
+		<p>次の2つの属性は、<strong>near</strong>と<strong>far</strong>です。この二つの値を設定することで、<strong>far</strong>の値よりもカメラから離れたオブジェクトや<strong>near</strong>の値よりも近いオブジェクトはレンダリングされなくなります。今回はこのことを気にする必要はありませんが、より良いパフォーマンスを得るために、アプリで変更するということがあるかもしれません。</p>
+
+		<p>次はrendererです。ここでmagicが起きます。ここで使用しているWebGLRendererの他にも、three.jsにはいくつかの機能があり、古いブラウザを使用しているユーザーや、何らかの理由でWebGLをサポートしていないユーザーのための後方互換として使用されています。</p>
+
+		<p>rendererのインスタンスを作成することに加えて、アプリを描画するサイズを設定する必要があります。アプリで塗りつぶしたい領域の幅と高さを使用することをお勧めします(この場合、ブラウザウィンドウの幅と高さ)。パフォーマンスを重視するアプリの場合、<strong>setSize</strong>に<strong>window.innerWidth/2</strong>や<strong>window.innerHeight/2</strong>のような小さな値を与えることもできます。こうすることでアプリは半分のサイズでレンダリングされます。</p>
+
+		<p>アプリのサイズを維持しつつ、より低い解像度でレンダリングしたい場合は、<strong>updateStyle</strong> (3番目の引数)としてfalseを指定して <strong>setSize</strong> を呼び出すことで行うことができます。例えば、<strong>setSize(window.innerWidth/2, window.innerHeight/2, false)</strong>は、&lt;canvas&gt;の幅と高さが100%の場合、アプリを半分の解像度でレンダリングします。</p>
+
+		<p>最後に、HTMLドキュメントに <strong>renderer</strong> 要素を追加します。これは、rendererがシーンを表示するために使用する &lt;canvas&gt; 要素です。</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>頂点</strong>) および塗りつぶし(<strong>面</strong>)を含むオブジェクトです。これについては、今後さらに詳しく説明していきます。</p>
+
+		<p>形状を表すジオメトリに加えて、色をつけるためのマテリアルが必要です。Three.jsにはいくつかのマテリアルが付属していますが、ここでは<strong>MeshBasicMaterial</strong>だけを使うことにします。すべてのマテリアルは、それらに適用されるプロパティのオブジェクトを取ります。物事を非常にシンプルに保つために、<strong>0x00ff00</strong>のcolor属性を与えるだけにします。これは、CSSやPhotoshopで色が動作するのと同じ方法で動作します(<strong>hex colors</strong>)。</p>
+
+		<p>3番目に必要なのは、<strong>メッシュ</strong>です。メッシュとは、ジオメトリを受け取り、それにマテリアルを適用するオブジェクトのことで、シーンに挿入して自由に動作させることができます。</p>
+
+		<p>デフォルトでは、<strong>scene.add()</strong> を呼び出すと、追加したものが座標 <strong>(0,0,0)</strong> に追加されます。これにより、カメラとキューブの両方が互いに内側になってしまいます。これを回避するために、カメラを少しずらします。</p>
+
+		<h2>sceneのレンダリング</h2>
+
+		<p>先ほど作成したHTMLファイルに上のコードをコピーしても何も表示されません。これは、実際にはまだ何も描画していないからです。そのためには、<strong>レンダリングまたはアニメーションループ</strong>と呼ばれるものが必要です。</p>
+
+		<code>
+		function animate() {
+			requestAnimationFrame( animate );
+			renderer.render( scene, camera );
+		}
+		animate();
+		</code>
+
+		<p>このコードでは、画面が更新されるたびにrendererがシーンを描画するループを作成しています(一般的な画面では、これは1秒間に60回を意味します)。ブラウザでゲームを書くのが初めての方は、<em>「なぜ setIntervalでやらないのか」</em>と言うかもしれません。おそらく最も重要なのは、ユーザーが別のブラウザタブに移動するときに一時停止し、貴重な処理能力とバッテリー寿命を無駄にしないことです。</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回)、キューブに素敵な回転アニメーションを与えます。基本的に、アプリの実行中に移動または変更したいものはすべて、アニメーションループを通過する必要があります。もちろん、そこから他の関数を呼び出すこともできます。</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; }
+				&lt;/style&gt;
+			&lt;/head&gt;
+			&lt;body&gt;
+				&lt;script src="js/three.js"&gt;&lt;/script&gt;
+				&lt;script&gt;
+					const scene = new THREE.Scene();
+					const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
+
+					const renderer = new THREE.WebGLRenderer();
+					renderer.setSize( window.innerWidth, window.innerHeight );
+					document.body.appendChild( renderer.domElement );
+
+					const geometry = new THREE.BoxGeometry();
+					const material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
+					const cube = new THREE.Mesh( geometry, material );
+					scene.add( cube );
+
+					camera.position.z = 5;
+
+					const animate = function () {
+						requestAnimationFrame( animate );
+
+						cube.rotation.x += 0.01;
+						cube.rotation.y += 0.01;
+
+						renderer.render( scene, camera );
+					};
+
+					animate();
+				&lt;/script&gt;
+			&lt;/body&gt;
+		&lt;/html&gt;
+		</code>
+	</body>
+</html>

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

@@ -0,0 +1,108 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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>
+				そして、three.jsをフルスクリーンで使用する場合は、CSSを使ってz-indexの絶対的な位置を他の要素よりも上にしておきましょう。
+			</p>
+
+			<code>
+#info {
+	position: absolute;
+	top: 10px;
+	width: 100%;
+	text-align: center;
+	z-index: 100;
+	display:block;
+}
+			</code>
+
+		</div>
+
+
+
+		<h2>2.テキストをcanvasに書いて、[page:Texture]として使用する</h2>
+		<div>
+			<p>three.jsのsceneで平面上にテキストを簡単に描きたい場合は、この方法を使用します。</p>
+		</div>
+
+
+		<h2>3.お気に入りの3Dアプリケーションでモデルを作成し、three.jsに書き出す</h2>
+		<div>
+			<p>他の3Dアプリケーションを使用して、three.jsにインポートしたい場合にこの方法を使用します。</p>
+		</div>
+
+
+
+		<h2>4. Procedural Text Geometry</h2>
+		<div>
+			<p>
+				純粋なTHREE.jsで作業したい場合や、手続き的に動的な3Dのテキストジオメトリを作成したい場合、メッシュで実現することが出来ます。そのメッシュのジオメトリはTHREE.TextGeometryインスタンスを使います。
+			</p>
+			<p>
+				<code>new THREE.TextGeometry( text, parameters );</code>
+			</p>
+			<p>
+				しかし、これを機能させるためには、TextGeometryのfontパラメータにTHREE.Fontのインスタンスを設定する必要があります。
+
+				これをどのように行うかについては [page:TextGeometry] ページを参照してください。また、受け入れ可能な各パラメータの説明、THREE.js ディストリビューションに付属する JSON フォントの一覧も参照してください。
+			</p>
+
+			<h3>Examples</h3>
+
+			<p>
+				[example:webgl_geometry_text WebGL / geometry / text]<br />
+				[example:webgl_shadowmap WebGL / shadowmap]
+			</p>
+
+			<p>
+				Typefaceがダウンしている場合や、そこにないフォントを使いたい場合は、以下のリンク先のチュートリアル(blender用のPythonスクリプトでテキストをThree.jsのJSON形式に書き出す)を参考にしてください。
+				[link:http://www.jaanga.com/2012/03/blender-to-threejs-create-3d-text-with.html]
+			</p>
+
+		</div>
+
+
+
+		<h2>5. Bitmap Fonts</h2>
+		<div>
+			<p>
+				BMFonts（ビットマップフォント）では、グリフを1つのBufferGeometryにバッチ処理することができます。BMFont レンダリングは、ワードラッピング、文字間隔、カーニング、標準的な導関数を持つ符号付き距離フィールド、マルチチャンネル符号付き距離フィールド、マルチテクスチャフォントなどをサポートしています。[link:https://github.com/Jam3/three-bmfont-text three-bmfont-text]を参照してください。
+			</p>
+			<p>
+				[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>(web-based)</i></li>
+				<li>[link:https://github.com/soimy/msdf-bmfont-xml msdf-bmfont-xml] <i>(commandline)</i></li>
+				<li>[link:https://github.com/libgdx/libgdx/wiki/Hiero hiero] <i>(desktop app)</i></li>
+			</ul>
+		</div>
+
+
+
+	</body>
+</html>

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

@@ -0,0 +1,70 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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を設定する必要があります。(詳しくはシーンを作成するページを参照)
+			</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>
+				ここで、2つの線とマテリアルが1つがあるので、これを組み合わせて一つの線にすることができます。
+			</p>
+			<code>
+const line = new THREE.Line( geometry, material );
+			</code>
+			<p>あとはシーンに追加して[page:WebGLRenderer.render render]を呼び出すだけです。</p>
+
+			<code>
+scene.add( line );
+renderer.render( scene, camera );
+			</code>
+
+			<p>2本の青い線で出来た上向きの矢印が表示されているはずです</p>
+		</div>
+	</body>
+</html>

docs/manual/ja/introduction/FAQ.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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>
+            アセットをimportしたり、exportしたりするのにおすすめなのは、glTF(GL Transmission Format)です。 その理由としてはglTFはランタイムでのアセットの配信に焦点を合わせているので、コンパクトに変換でき、ロードが早いからです。
+        </p>
+        <p>
+            three.jsはFBX、Collada、OBJなどの他の多くの一般的なフォーマットにも対応したローダーを提供しています。 それでも、プロジェクトでは常に最初にglTF ベースのワークフローの作成を試してください。詳細については、[link:#manual/introduction/Loading-3D-models Loading-3D-models]を参照してください。
+
+        </p>
+    </div>
+
+    <h2>なぜmetaタグのviewpointがexampleに入っているのですか？</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-US/docs/Web/HTML/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> ウィンドウの高さを一定の割合で増加させると、すべての距離で同じ割合で表示される高さが増加することになります。これは、カメラの位置を変えてもできません。 その代わりに、カメラの視野を変更する必要があります。 具体例は[link:http://jsfiddle.net/Q4Jpu/ sample]を参照してください。
+    </p>
+
+    <h2>オブジェクトの一部が非表示になる原因はなんですか？</h2>
+    <p>
+        これはface cullingが原因かもしれません。Faceにはどちらの面かを決める向きがあります。 そして、cullingは通常の状況では裏面を削除します。 これが問題となって非表示になっているかどうかを確認するには、 マテリアルの面をTHREE.DoubleSideに変更してください。
+        <code>material.side = THREE.DoubleSide</code>
+    </p>
+</body>
+
+</html>

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

@@ -0,0 +1,76 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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を使って作成したWebベースのVRアプリケーションの基本的なコンポーネントの概要を説明しています。
+	</p>
+
+	<h2>Workflow</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()* は2つの重要なことを行います。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>Next Steps</h2>
+
+	<p>
+		このワークフローを実際に見るために、公式のWebVRの例を見てみましょう。<br /><br />
+
+		[example:webxr_vr_ballshooter WebXR / VR / ballshooter]<br />
+		[example:webxr_vr_cubes WebXR / VR / cubes]<br />
+		[example:webxr_vr_dragging WebXR / VR / dragging]<br />
+		[example:webxr_vr_lorenzattractor WebXR / VR / lorenzattractor]<br />
+		[example:webxr_vr_paint WebXR / VR / paint]<br />
+		[example:webxr_vr_panorama_depth WebXR / VR / panorama_depth]<br />
+		[example:webxr_vr_panorama WebXR / VR / panorama]<br />
+		[example:webxr_vr_rollercoaster WebXR / VR / rollercoaster]<br />
+		[example:webxr_vr_sandbox WebXR / VR / sandbox]<br />
+		[example:webxr_vr_sculpt WebXR / VR / sculpt]<br />
+		[example:webxr_vr_video WebXR / VR / video]
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,130 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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*はジオメトリやマテリアルのような特定のオブジェクトのために、レンダリングに必要なバッファやshaderといったWebGL関連のエンティティを作成します。これらのオブジェクトは自動的に解放されるわけではありません。
+		その代わり、アプリケーションはこのようなリソースを解放するために特別なAPIを使用する必要があります。
+		このガイドでは、このAPIがどのように使用されるのか、また、このコンテキストではどのようなオブジェクトが関連しているのかについて簡単に説明します。
+	</p>
+
+	<h2>Geometries</h2>
+
+	<p>
+		ジオメトリは普通は、属性の集合として定義された頂点の情報を表します。
+		*three.js*は、内部にはそれぞれの属性に対して、[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLBuffer WebGLBuffer]型のオブジェクトを作成します。
+		これらのentityは[page:BufferGeometry.dispose]()が呼ばれた時にのみ削除されます。
+		もしアプリケーションの中で、あるジオメトリが使われなくなった場合は、関連したリソースを開放するためにこの方法を実行してください。
+	</p>
+
+	<h2>Materials</h2>
+
+	<p>
+		マテリアルは、オブジェクトをどのように描画するかを定義します。
+		*three.js*はマテリアルの定義情報をレンダリング用のシェーダプログラムを構築するために使います。
+		シェーダプログラムは対応するマテリアルを捨てることでのみ、削除することができます。
+		パフォーマンスのために、*three.js*は可能であればすでに存在するシェーダプログラムを再利用しようとします。
+		そのため、シェーダプログラムは、関連したマテリアルがすべて廃棄された場合のみ削除されます。
+		[page:Material.dispose]()を実行することで、マテリアルの削除を指示できます。
+	</p>
+
+	<h2>Textures</h2>
+
+	<p>
+		マテリアルの廃棄をしても、テクスチャには影響がありません。
+		一つのテクスチャが複数のマテリアルに同時に使用されることがあるので、
+		テクスチャとマテリアルは別々に制御されています。
+		テクスチャのインスタンスを作成すると、three.jsは内部に[link:https://developer.mozilla.org/en-US/docs/Web/API/WebGLTexture WebGLTexture]を作成します。
+		バッファと同様に、このオブジェクトは[page:Texture.dispose]()を呼ぶことでしか削除できません。
+	</p>
+
+	<h2>Render Targets</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>Miscellaneous</h2>
+
+	<p>
+		exampleディレクトリには、コントロールや後処理用のパスクラスといったクラスがあります。
+		これらのクラスは内部のイベントリスナーや描画対象を取り除くための*dispose()*メソッドを提供します。
+		一般的には、APIやクラスのドキュメントで*dispose()*があるかどうか探すのがおすすめです。
+		*dispose()*メソッドが存在するなら、片付けの際に使うとよいでしょう。
+	</p>
+
+	<h2>FAQ</h2>
+
+	<h3>なぜthree.jsは自動的にオブジェクトを処分できないのですか？</h3>
+
+	<p>
+		この質問はコミュニティで何度も訊かれた質問なので、この問題についてはきちんと解説します。
+		実のところ、*three.js*はライフタイムや、ユーザが作成したジオメトリやマテリアルのようなエンティティのスコープの情報をもっていません。これはアプリケーション側に責任があります。例えば、マテリアルが今のところレンダリングのために使用されていなくとも、次のフレームでは必要になるかもしれません。そのため、アプリケーションが特定のオブジェクトを削除しても良いと判断した場合、対応する*dispose()*メソッドを呼ぶことで描画エンジンに対してそのことを知らせなくてはなりません。
+	</p>
+
+	<h3>シーンからmeshを取り除くとそのジオメトリとマテリアルも削除されますか？</h3>
+
+	<p>
+		いいえ。ジオメトリとマテリアルは*dispose()*で明示的に削除する必要があります。
+		メッシュのような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>Examples that demonstrate the usage of dispose()</h2>
+
+	<p>
+		[example:webgl_test_memory WebGL / test / memory]<br />
+		[example:webgl_test_memory2 WebGL / test / memory2]<br />
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,149 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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>
+        テクスチャを呼び出さずに、ジオメトリを使うだけならウェブページをファイルシステムからそのまま動かすことができます。ファイルマネージャのHTMLファイルをダブルクリックすると、ブラウザで動作するはずです。(ブラウザのアドレスバーには<em>file:///yourFile.html</em>と表示されているでしょう)
+    </p>
+
+    <h2>外部のファイルからコンテンツを読み込む</h2>
+    <div>
+        <p>
+            外部ファイルからテクスチャやモジュールを読み込む場合、ブラウザのセキュリティ制限によって、ファイルシステムからの読み込みは失敗します。
+        </p>
+
+        <p>これを解決するには2つの方法があります。</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サーバが使えます。こういった組み込みのサーバは、Apacheや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 server</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>
+                このようにすることで、ローカルホストのカレントディレクトリから8000番ポートでファイルが提供されます。提供されるファイルを見るためには、ブラウザのアドレスバーに以下のように入力してください。
+            </p>
+
+            <code>http://localhost:8000/</code>
+        </div>
+
+        <h3>Ruby server</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 server</h3>
+        <div>
+            <p>PHPにも組み込みのwebサーバがあるので、phpの5.4.0で以下のように実行してみてください</p>
+            <code>php -S localhost:8000</code>
+        </div>
+
+        <h3>Lighttpd</h3>
+        <div>
+            <p>
+                Lighttpd は非常に軽量な汎用ウェブサーバです。ここではOSXにHomeBrewでインストールする方法を説明します。ここで説明した他のサーバとは異なり、lighttpd は本格的な本番環境に対応したサーバです。
+            </p>
+
+            <ol>
+                <li>
+                    homebrewでLighttpdをインストールする
+                    <code>brew install lighttpd</code>
+                </li>
+                <li>
+                    ウェブサーバを動作させたいディレクトリにlighttpd.confという設定ファイルを作成します。 設定ファイルのサンプルはこちらにあります。: [link:http://redmine.lighttpd.net/projects/lighttpd/wiki/TutorialConfiguration TutorialConfiguration]
+                </li>
+                <li>
+                    設定ファイルでserver.document-rootを提供したいファイルが置いてあるディレクトリに変更してください
+                </li>
+                <li>
+                    Lighttpdは以下のコマンドで実行できます。
+                    <code>lighttpd -f lighttpd.conf</code>
+                </li>
+                <li>
+                    http://localhost:3000/ に移動すると、選択したディレクトリから静的ファイルを提供します。
+                </li>
+            </ol>
+        </div>
+        <h3>IIS</h3>
+        <div>
+            <p>
+                WebサーバにMicrosoft IISを使用している場合ロードする前に.fbx拡張子に関するMIMEタイプの設定を追加してください。
+            </p>
+            <code>File name extension: fbx        MIME Type: text/plain</code>
+            <p>
+                デフォルトではIISは.fbxや.objのファイルをダウンロードするのをブロックします。そのため、IISがそういったファイル(.fbxなど)をダウンロードできるように設定を変更する必要があります。
+
+            </p>
+        </div>
+        <p>
+            他のシンプルな方法はStack Overflowで議論されています: [link:http://stackoverflow.com/q/12905426/24874 Simple way]
+        </p>
+    </div>
+
+</body>
+
+</html>

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

@@ -0,0 +1,263 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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 and object2 will automatically update their matrices
+			</code>
+    </div>
+
+    <p>
+        しかしながら、オブジェクトが静的なものであると分かっている場合は、自動更新を無効にして必要な時だけ、更新することが出来ます。
+    </p>
+
+    <code>
+object.matrixAutoUpdate  = false;
+object.updateMatrix();
+		</code>
+
+    <h2>BufferGeometry</h2>
+    <div>
+        <p>
+            BufferGeometriesは、情報（頂点の位置、面のインデックス、法線、色、UV、カスタム属性など）をバッファ、 つまり[link:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Typed_arrays Typed_arrays](型付の配列)に保存します。 このため、標準的なジオメトリよりも一般的に高速ですが、その反面、作業がやや難しくなっています。
+        </p>
+        <p>
+            BufferGeometriesの更新についてバッファのサイズを変更することができないということは理解しておく必要があります。(これは非常にコストがかかり、基本的には新しいジオメトリを作成するのと同じです）。しかし、バッファの内容を更新することはできます。
+
+        </p>
+        <p>
+            つまり、BufferGeometry の属性（例えば頂点の数など）が増加することがわかっている場合、 新たに作成される可能性のある頂点を保持するのに十分な大きさのバッファを事前に確保しておく必要があります。 もちろん、これはBufferGeometryの最大サイズが存在することになります。
+        </p>
+        <p>
+            ここでは、レンダリング時に拡張される線の例を使用します。 バッファに500頂点分のスペースを確保しますが、[page:BufferGeometry.drawRange]を使って最初は2つだけ描画します。
+        </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>
+            最初の描画以降に位置データの値を変更したい場合は、needsUpdateをtrueにセットする必要があります。
+        </p>
+        <code>
+line.geometry.attributes.position.needsUpdate = true; // required after the first render
+			</code>
+
+        <p>
+            最初の描画以降に位置データの値を変更した場合は、frustum cullingやヘルパーといったエンジンの他の機能がちゃんと機能するようにboundingボリュームを再計算する必要があるかもしれません。
+        </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. ここ([link:http://jsfiddle.net/w67tzfhx/ link])では、あなたのユースケースに合わせることができるアニメーションを表示しています。
+        </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>
+            下記に示してあるフラグはさまざまなジオメトリの要素の更新をコントロールします。 更新にはコストがかかるので、更新が必要な要素のみを、更新するように設定してください。 バッファが変化すると、自動的にこれらのフラグはflaseにリセットされます。 バッファを更新し続けたいのであれば、このフラグを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]以前のバージョンでは、メッシュは<em>dynamic</em>フラグを有効にする必要があります。これは内部で型付き配列を保持するために必要になります。
+        </p>
+
+        <code>
+// removed after r66
+geometry.dynamic = true;
+			</code>
+
+    </div>
+
+    <h2>Materials</h2>
+    <div>
+        <p>
+            ユニフォームの値(例えば、色やテクスチャや透明度)は自由に変更することが出来ます。 これらの値はフレームごとにシェーダに送られます。
+        </p>
+
+        <p>
+            GLstateに関連したパラメータ(depthTest, blending, polygonOffsetなど)もいつでも変更出来ます。
+        </p>
+
+        <p>
+            以下に示すパラメータはランタイム(マテリアルが一度描画された後)には簡単に変更ができません。
+        </p>
+        <ul>
+            <li>ユニフォームの種類や数</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>
+            これらの値を変更するのには新しいシェーダプログラムが必要です、そのためには以下のように設定してください。
+        </p>
+        <code>material.needsUpdate = true</code>
+
+        <p>
+            こうすることで、プログラムはとても遅くなり、フレームレートが不安定になるかもしれないことを覚えておいてください。(特にWindowsでは、シェーダのコンパイルがOpenGLよりもDirectXの方が遅いので、より顕著に現れる可能性があります）。
+        </p>
+
+        <p>
+            より滑らかな体験を提供するために、明るさ0の光や、白紙のテクスチャ、密度0の霧といった"ダミー"の値を使うことで、これらの変化をある程度模倣することができます。
+        </p>
+
+        <p>
+            ジオメトリチャンクに使用するマテリアルは自由に変更できますが、オブジェクトをチャンクに分割する方法は変更できません。オブジェクトをどのようにチャンクに分割するからは、表面のマテリアルによって決まります。
+        </p>
+
+        <h3>
+            ランタイムに異なるマテリアルの設定が必要な場合
+        </h3>
+        <p>
+            マテリアル/チャンクの数が少ない場合は、あらかじめオブジェクトを分割しておくことができます（例：人間の場合は髪/顔/胴体/上着/ズボン、車の場合はフロント/サイド/トップ/ガラス/タイヤ/内装）。
+
+
+        </p>
+
+        <p>
+            数が多い場合（例えば、人の顔はそれぞれ違っている可能性があります）は、顔ごとに異なる外観にするために属性/テクスチャを使用するなど、別の解決策を検討してください。
+        </p>
+
+        <h3>Examples</h3>
+        <p>
+            [example:webgl_materials_car WebGL / materials / car]<br /> [example:webgl_postprocessing_dof WebGL / webgl_postprocessing / dof]
+        </p>
+    </div>
+
+
+    <h2>Textures</h2>
+    <div>
+        <p>
+            画像やcanvas、ビデオやデータのテクスチャが変化する場合は、以下のフラグを有効にする必要があります。
+        </p>
+        <code>
+				texture.needsUpdate = true;
+			</code>
+        <p>描画の対象が自動的に更新されます。</p>
+
+        <h3>Examples</h3>
+        <p>
+            [example:webgl_materials_video WebGL / materials / video]<br /> [example:webgl_rtt WebGL / rtt]
+        </p>
+
+    </div>
+
+
+    <h2>Cameras</h2>
+    <div>
+        <p>カメラの位置とターゲットは自動的に更新されます。以下の要素を変更する必要がある場合、projection matrixを再計算する必要があります。</p>
+        <ul>
+            <li>
+                fov
+            </li>
+            <li>
+                aspect
+            </li>
+            <li>
+                near
+            </li>
+            <li>
+                far
+            </li>
+        </ul>
+        <code>
+camera.aspect = window.innerWidth / window.innerHeight;
+camera.updateProjectionMatrix();
+			</code>
+    </div>
+</body>
+
+</html>

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

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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アプリケーションの多くは3Dオブジェクトをスクリーンに直接描画します。
+		しかしながら時々、一つ以上のエフェクト(被写界深度、Bloom、フィルムグレイン、様々なアンチエイリアス効果など)を適用したい場合があります。こういったエフェクトを実装するためにpost-processingは広く使用されています。
+		まず、シーンはビデオカードメモリのバッファを表す描画対象に対して描画されます。
+		次に、最終的なスクリーンへのレンダリングの前に、1つ以上のpost-processingで画像バッファにフィルタとエフェクトを適用します。
+	</p>
+	<p>
+		こういったワークフローを実装するために、three.jsは[page:EffectComposer]で完全なpost-processingを提供しています。
+	</p>
+
+	<h2>Workflow</h2>
+
+	<p>
+		プロセスの一段階目はexampleディレクトリから必要なファイルを全てimportすることです。
+		このガイドではthree.jsの[link:https://www.npmjs.com/package/three npm package](npmの公式のパッケージ)を使っていると想定しています。
+		このガイドのデモでは下に示したファイルが必要です。
+	</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>
+		全てのファイルのimportが成功したのちに、[page:WebGLRenderer]のインスタンスを渡すことでcomposerを作成します。
+	</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が準備できたので、post-processingパスのチェーンを設定できるようになりました。
+		これらのパスはアプリケーションの最終的なビジュアルを出力することに責任を持ちます。
+		これらのパスは追加/挿入の順番で処理されます。今回示している例では、*RenderPass*インスタンスがはじめに実行され、
+		それから*GlitchPass*インスタンスが実行されます。チェーンの中で最後の有効なpassが自動的に画面に描画されます。
+		passの設定は以下のように行います。
+	</p>
+
+	<code>
+		const renderPass = new RenderPass( scene, camera );
+		composer.addPass( renderPass );
+
+		const glitchPass = new GlitchPass();
+		composer.addPass( glitchPass );
+		</code>
+
+	<p>
+		*RenderPass*は普通チェインのはじめにあります。
+		これはレンダリングされたシーンを次のpost-processingの入力とするためです。
+		*GlitchPass*は、これらのイメージをワイルドなglitch effectを適用するために使います。
+		実際に動いているものを見るために、[link:https://threejs.org/examples/webgl_postprocessing_glitch sample]を見てみましょう。
+	</p>
+
+	<h2>Built-in Passes(組み込みのpass)</h2>
+
+	<p>
+		エンジンに元から入っている定義済みの後処理passが使えます。
+		このpassは[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing postprocessing]ディレクトリに入っていて、広範囲に使用できます。
+	</p>
+
+	<h2>Custom Passes(カスタムpass)</h2>
+
+	<p>
+		独自のpostprocessing shaderを書いて、post-processing passのチェーンの中に組み込みたい場合があります。そういった場合には、*ShaderPass*を利用することが出来ます。
+		ファイルと独自のshaderをインポートしたのちに、以下のコードでpassを設定することができます。
+	</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]と呼ばれるファイルがあり、カスタムshaderを作る上での良いスタートコードです。
+		*CopyShader*はエフェクトを適用せずに、EffectComposerの読み込みバッファの画像内容を書き込みバッファにコピーするだけです。
+	</p>
+
+</body>
+
+</html>

docs/manual/ja/introduction/Installation.html

@@ -0,0 +1,162 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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>
+        [link:https://www.npmjs.com/ npm]を使ってthree.jsとモダンなビルドツールをインストール出来ます。もしくは、静的ホスティングやCDNを使って素早く使い始めることも可能です。ほとんどの人にとっては、npmを使ってインストールするのが良いでしょう。
+    </p>
+
+    <p>
+        どちらの方法を選ぶにしても、一貫して同じバージョンのライブラリからファイルをimportしてください。異なるソースのファイルを混ぜるとコードが重複するかもしれませんし、予想外の方法でアプリケーションが壊れるかもしれません。
+    </p>
+
+    <p>
+        three.jsをインストール方法は、ES modules依存です([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 there] npm moduleをインストールするために, プロジェクトのフォルダでターミナルを開いて以下のコードを実行してください。
+    </p>
+
+    <code>
+		npm install --save three
+		</code>
+
+    <p>
+        パッケージがダウンロードされて、インストールされます。これで、three.jsをコードの中で使う準備が完了しました。
+    </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からインストールする際に、プロジェクトで必要なパッケージを一つのJavaScriptのファイルにまとめるために、ビルドツールを使うことがあるでしょう。ほとんどのモダンなJavaScriptのビルダーでthree.jsは使えますが、最も人気なのは[link:https://webpack.js.org/ webpack]です。
+    </p>
+
+    <p>
+        すべての機能が <em>three</em> モジュールから直接アクセスできるわけではありません(直接アクセスすることを「ベアインポート」とも呼びます)。コントロール、ローダー、エフェクトの前処理など、ライブラリの他の一般的な部分はサプフォルダ[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm]からインポートしなければなりません。詳細については、以下の<em>Examples</em>を参照してください。
+    </p>
+
+    <p>
+        [link:https://eloquentjavascript.net/20_node.html#h_J6hW/SmL/a Eloquent JavaScript: Installing with npm]でnpm moduleについて詳しく学習する。
+    </p>
+
+    <h2>CDNや静的ホスティングからインストールをする</h2>
+
+    <p>
+        three.jsは、自分の Web サーバーにファイルをアップロードするか、既存の CDN を利用することで、ビルドシステムなしで利用することができます。ライブラリはES moduleに依存しているため、ライブラリを参照するスクリプトは以下のように<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/build/three.module.js';
+
+		  const scene = new THREE.Scene();
+
+		&lt;/script>
+		</code>
+
+    <p>
+        すべての機能が <em>build/three.module.js</em> モジュールからアクセスできるわけではありません。コントロール、ローダー、エフェクトの前処理など、ライブラリの他の一般的な部分は、[link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] サブフォルダからインポートする必要があります。詳細については、以下の<em>Examples</em>を参照してください。
+    </p>
+
+
+    <h2>Examples</h2>
+
+    <p>
+        three.jsのコアは、3Dエンジンの最も重要なコンポーネントに焦点を当てています。コントロール、ローダー、エフェクトの前処理といった、他の多くの便利なコンポーネントは [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm examples/jsm] ディレクトリの一部です。これらは「examples」と呼ばれています。その理由としては、ユーザーが既製品を使用でき、リミックスやカスタマイズも可能だからです。これらのコンポーネントは常にコアライブラリと同期していますが、npm上の同様のサードパーティ製パッケージは別の人によってメンテナンスされており、最新ではないかもしれません。
+    </p>
+
+    <p>
+        Examplesはそれだけ別でインストールする必要はありませんが、importは分けて行う必要があります。 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/examples/jsm/controls/OrbitControls.js';
+
+		  const controls = new OrbitControls();
+
+		&lt;/script>
+		</code>
+
+    <p>
+        重要なのは、すべてのファイルで同じバージョンを使用することです。異なるバージョンの異なるExamplesをインポートしたり、three.jsライブラリ自体とは異なるバージョンのExamplesを使用したりしないでください。
+    </p>
+
+    <h2>互換性について</h2>
+
+    <h3>CommonJSでのimport</h3>
+
+    <p>
+        最近のJavaScriptバンドラーはデフォルトでESモジュールをサポートしていますが、古いビルドツールの中にはサポートしていないものもあります。そのような場合は,バンドラーがESモジュールのことがわかるように設定することができます。例えば [link:http://browserify.org/ Browserify]では[link:https://github.com/babel/babelify babelify] プラグインが必要です。
+    </p>
+
+    <h3>Import maps</h3>
+
+    <p>
+        npmからインストールする時と、静的ホスティングやCDN からインストールする時とでは、インポートに使用するパスが異なります。これは、両方のグループのユーザーが、どういったものを使いやすいと感じるかが異なるために起こります。ビルドツールやバンドルを使用している開発者は、相対パスよりも裸のパッケージ指定子(例えば、'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 example] で示されているように、import mapsのPolyfillを使って、今日はよりシンプルなインポートを使ってみることができます。
+    </p>
+
+    <h3>Node.js</h3>
+
+    <p>
+        以下の2つの理由からnode.jsでthree.jsを使用するのは難しくなりがちです。
+    </p>
+
+    <p>
+        まず、three.jsはWeb用に作られているので、Node.jsには必ずしも存在しないブラウザやDOM APIに依存します。これらの問題のいくつかは、[link:https://github.com/stackgl/headless-gl headless-gl] のような補正ツールを使用したり、[page:TextureLoader] のようなコンポーネントをカスタムの代替品で置き換えることで解決できます。他の DOM APIは、それらを使用するコードと深く絡み合っている可能性があり、回避するのが難しくなります。Node.js
+        のサポートを改善するためのシンプルで保守性の高いプルリクエストを歓迎しますが、まず問題を開いて改善点を議論することをお勧めします。
+    </p>
+
+    <p>
+        第二に、Node.jsによるESモジュールのサポートは...複雑です。Node.js v12の時点では、three.jsのコアライブラリは<em>require('three')</em>でCommonJSモジュールとしてインポートすることができます。しかし、<em>examples/jsm</em>にあるほとんどのサンプルコンポーネントはインポートできません。Node.jsの将来のバージョンで解決されるかもしれませんが、それまでの間は、[link:https://github.com/standard-things/esm
+        esm]のような回避策を使用して、Node.jsアプリケーションがESモジュールを認識できるようにする必要があるでしょう。
+    </p>
+
+</body>
+
+</html>

docs/manual/ja/introduction/Libraries-and-Plugins.html

@@ -0,0 +1,96 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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のライブラリやプラグインをここでリストアップしています。 このリストと関連したパッケージはコミュニティによってメンテナンスされており、最新である保証はありません。 もしこのリストを更新したい場合はPullRequestを送ってください！
+    </p>
+
+    <h3>Physics(物理)</h3>
+
+    <ul>
+        <li>[link:https://github.com/lo-th/Oimo.js/ Oimo.js]</li>
+        <li>[link:https://enable3d.io/ enable3d]</li>
+        <li>[link:https://github.com/kripken/ammo.js/ ammo.js]</li>
+        <li>[link:https://github.com/pmndrs/cannon-es cannon-es]</li>
+    </ul>
+
+    <h3>Postprocessing(後処理)</h3>
+
+    <p>
+        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/postprocessing official three.js postprocessing effects]に加えて、外部のライブラリを通して、追加のエフェクトやフレームワークのサポートが利用可能です。
+
+
+    </p>
+
+    <ul>
+        <li>[link:https://github.com/vanruesc/postprocessing postprocessing]</li>
+    </ul>
+
+    <h3>Intersection and Raycasting Performance</h3>
+
+    <ul>
+        <li>[link:https://github.com/gkjohnson/three-mesh-bvh three-mesh-bvh]</li>
+    </ul>
+
+    <h3>File Formats(ファイル形式)</h3>
+
+    <p>
+        [link:https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders official three.js loaders]に加えて、外部のライブラリを通して、追加のフォーマットのサポートが利用できます。
+    </p>
+
+    <ul>
+        <li>[link:https://github.com/gkjohnson/urdf-loaders/tree/master/javascript urdf-loader]</li>
+        <li>[link:https://github.com/NASA-AMMOS/3DTilesRendererJS 3d-tiles-renderer-js]</li>
+        <li>[link:https://github.com/kaisalmen/WWOBJLoader WebWorker OBJLoader]</li>
+        <li>[link:https://github.com/agviegas/IFC.js IFC.js]</li>
+    </ul>
+
+    <h3>3D Text and Layout</h3>
+
+    <ul>
+        <li>[link:https://github.com/protectwise/troika/tree/master/packages/troika-three-text troika-three-text]</li>
+        <li>[link:https://github.com/felixmariotto/three-mesh-ui three-mesh-ui]</li>
+    </ul>
+
+    <h3>Particle Systems</h3>
+
+    <ul>
+        <li>[link:https://github.com/creativelifeform/three-nebula three-nebula]</li>
+    </ul>
+
+
+    <h3>Inverse Kinematics</h3>
+
+    <ul>
+        <li>[link:https://github.com/jsantell/THREE.IK THREE.IK]</li>
+        <li>[link:https://github.com/lo-th/fullik fullik]</li>
+    </ul>
+
+    <h3>Game AI</h3>
+
+    <ul>
+        <li>[link:https://mugen87.github.io/yuka/ yuka]</li>
+        <li>[link:https://github.com/donmccurdy/three-pathfinding three-pathfinding]</li>
+    </ul>
+
+    <h3>Wrappers and Frameworks</h3>
+
+    <ul>
+        <li>[link:https://aframe.io/ A-Frame]</li>
+        <li>[link:https://github.com/pmndrs/react-three-fiber react-three-fiber]</li>
+        <li>[link:https://github.com/ecsyjs/ecsy-three ECSY]</li>
+    </ul>
+
+</body>
+
+</html>

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

@@ -0,0 +1,156 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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>
+		3Dモデルはたくさんのファイル形式で利用可能で、それぞれに目的があり、複雑さも様々です。
+		<a href="https://github.com/mrdoob/three.js/tree/dev/examples/jsm/loaders" target="_blank" rel="noopener">
+			three.jsは様々なloaderを提供しています</a>
+		が、適切な形式とワークフローを選択することで、パフォーマンスを改善することができます。
+		うまく動作させるのが難しいフォーマットや、リアルタイムでの体験に適さないフォーマットもあり、
+		中にはまったくサポートされていないフォーマットもあります。
+	</p>
+
+	<p>
+		このガイドでは、ほとんどのユーザにおすすめのワークフローと、予期しないことが発生したときに何を試してみればよいかを紹介します。
+	</p>
+
+	<h2>始める前に</h2>
+
+	<p>
+		もしthree.jsをローカルサーバで動かすのが初めてなら、
+		[link:#manual/introduction/How-to-run-things-locally how to run things locally]を見てみてください。
+		3Dモデルを表示する際の多くの一般的なエラーはファイルを正しく配置することで防ぐことができます。
+	</p>
+
+	<h2>おすすめのワークフロー</h2>
+
+	<p>
+		可能なら、glTF(GL Transmission Format)を使うことをおすすめします。
+		glTFは<small>.GLB</small> と <small>.GLTF</small>の両方のフォーマットについてサポートしています。
+		glTFはランタイムアセットの配信に注力しているので、変換時にはコンパクトでロードも早いです。
+		機能としては、メッシュやマテリアル、テクスチャ、スキン、スケルトン、morphターゲット、アニメーション、ライト、カメラがあります。
+	</p>
+
+	<p>
+		公開されているglTFファイルは<a href="https://sketchfab.com/models?features=downloadable&sort_by=-likeCount&type=models" target="_blank" rel="noopener">Sketchfab</a>のようなサイトで利用可能です。
+		また様々なツールでglTF形式でexportすることが出来ます。
+	</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>Loading</h2>
+
+	<p>
+		ごく一部のローダ(例えば、[page:ObjectLoader])はデフォルトでthree.jsに入っています。
+		ほかのものは、ユーザがそれぞれ自分のアプリに加える必要があります。
+
+	</p>
+
+	<code>
+		import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+	</code>
+
+	<p>
+		ローダをimportした時点で、シーンにモデルを追加できるようになります。
+		文法はローダによって異なります。異なるフォーマットを使う場合は、そのローダのドキュメントやサンプルを確認してください。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 documentation]を見てください。
+	</p>
+
+	<h2>Troubleshooting</h2>
+
+	<p>
+		何時間もかけて傑作をモデリングしたのに、webpageに読み込むと、なんと！😭
+		歪んでいたり、色がおかしかったり、表示されなかったりすることがあります。
+		そういったときにはトラブルシューティングを始めましょう。
+	</p>
+
+	<ol>
+		<li>
+			JavaScriptコンソールでエラーが発生していないか確認し、<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>でドラックアンドドロップでviewerが利用できます。
+			一つ以上のアプリケーションでモデルが正しく表示された場合、<a href="https://github.com/mrdoob/three.js/issues/new" target="_blank" rel="noopener">three.jsにバグを報告</a>してください。
+			モデルがどのアプリケーションでも表示できない場合、モデルを作成する際に使ったアプリにバグを報告することを強くお勧めします。
+		</li>
+		<li>
+			モデルを1000倍にスケールアップしたり、スケールダウンしたりしてみてください。
+			多くのモデルはスケールが異なります。大きなモデルだと、カメラがモデルの中に入ってしまって見えなくなっていることがあります。
+		</li>
+		<li>
+			光源を追加して配置してみてください。暗闇の中にモデルが隠れている可能性があります。
+		</li>
+		<li>
+			ネットワークタブで失敗しているテクスチャのリクエスト(例えば、<em>C:\\Path\To\Model\texture.jpg</em>)を探してみてください。見つかったら代わりに <em>images/texture.jpg</em>
+			のようなモデルへの相対パスを使ってください。
+			これはテキストエディタでモデルファイルを編集する必要があるかもしれません。
+		</li>
+	</ol>
+
+	<h2>助けを求める(Asking for help)</h2>
+
+	<p>
+		上記のトラブルシューティングのプロセスを一通りやってもまだ動かない場合、正しいやり方で助けを求めることが
+		早期の解決につながります。<a href="https://discourse.threejs.org/" target="_blank" rel="noopener">three.js forum</a>に質問を投稿して、可能であれば自分のモデル(もしくは同じ問題を持つよりシンプルなモデル)を利用可能な形式で添付してください。他の人が問題を迅速に再現できるように、十分な情報を含めてください。
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,86 @@
+<!DOCTYPE html>
+<html lang="ja">
+
+<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*)を使って3次元変換(位置の変換、回転、スケーリング)をエンコードします。
+		すべての[page:Object3D]インスタンスは、そのオブジェクトの位置や回転、スケールを保存した行列([page:Object3D.matrix
+		matrix])を持っています。このページではオブジェクトの３次元変換をどうやって行うかを説明しています。
+
+	</p>
+
+	<h2>Convenience properties and *matrixAutoUpdate*(便利なプロパティとmatrixAutoUpdate)</h2>
+
+	<p>
+		オブジェクトの変換を更新するには二つの方法があります。
+	</p>
+	<ol>
+		<li>
+			オブジェクトの*position*や*quaternion*(四元数)や<strong>スケールのプロパティ</strong>を変更することで、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*は*false*に設定<em>しなくてはならない</em>ことに注意してください。
+			また*updateMatrix*を呼ば<em>ない</em>ようにしてください。
+			*updateMatrix*を呼ぶと、行列にマニュアルで加えた変更がなくなり、<strong>位置やスケール</strong>などから行列が再計算されます。
+		</li>
+	</ol>
+
+	<h2>Object and world matrices(オブジェクトとワールド座標系での行列)</h2>
+	<p>
+		オブジェクトの行列([page:Object3D.matrix matrix])は、[page:Object3D.parent parent](親オブジェクト)に対する<em>相対的な</em>変換を保持しています。
+		<em>ワールド座標系での</em>オブジェクトの変換を取得するには、オブジェクトの[page:Object3D.matrixWorld]にアクセスする必要があります。
+
+	</p>
+	<p>
+		親オブジェクトや子オブジェクトの変換が変更された場合は、[page:Object3D.updateMatrixWorld updateMatrixWorld]()を呼び出すことで、子オブジェクトの[page:Object3D.matrixWorld matrixWorld]の更新を要求することができます。
+	</p>
+
+	<h2>Rotation and Quaternion(回転と四元数)</h2>
+	<p>
+		three.jsでは3次元の回線を表すためにオイラー角([page:Euler Euler angles])と4元数([page:Quaternion Quaternions])という2つの方法があります。
+		また、three.jsではこの2つの間の変換メソッドも提供されています。
+		オイラー角はgimbal lockと呼ばれる問題の影響をうけることがあります。
+		gimbal lockが発生すると、特定の設定のときにオブジェクトの回転の自由度が失われます(オブジェクトが特定の軸方向に回転できなくなります)
+		このため、オブジェクトの回転は<em>つねに</em>オブジェクトの4元数([page:Object3D.quaternion quaternion])に保持されます。
+	</p>
+	<p>
+		以前のバージョンのライブラリには*useQuaternion*プロパティがあり、これをfalseに設定すると、
+		オブジェクトの行列([page:Object3D.matrix matrix])がオイラー角から計算されるようになっていました。
+		このやり方は古くなってきたので、代わりに[page:Object3D.setRotationFromEuler setRotationFromEuler]メソッドを使用して、
+		四元数を更新します。
+	</p>
+
+</body>
+
+</html>

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

@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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はJavaScriptベースのライブラリですが、[link:https://www.typescriptlang.org/docs/handbook/declaration-files/introduction.html 宣言ファイル](*d.ts*　ファイル)は公開されているので、TypeScriptプロジェクトで使用することも可能です。
+		</p>
+
+		<p>
+			Typescriptのコンパイラがthree.jsの型を判別するために最小限の設定は必要です。<br>
+			[link:https://www.typescriptlang.org/docs/handbook/module-resolution.html moduleResolution]を *node* に、[link:https://www.typescriptlang.org/docs/handbook/compiler-options.html target]を *es6* 以降に設定する必要があります。
+		</p>
+
+		<code>
+		// Example of minimal `tsconfig.json` file
+		{
+			"compilerOptions": {
+				"target": "es6",
+				"moduleResolution": "node",
+			},
+			"include": [ "./src/**/*.ts" ],
+		}
+		</code>
+
+		<p>
+			注意事項 : 今のところ、この２つのオプションを使わずにthree.jsの型を使うことはできません。
+		</p>
+
+		<p>
+			注意事項 : いくつかの宣言が間違っていたり欠けていたりすることがあります。宣言ファイルの改良に貢献することは、コミュニティにとって非常に有益であり、three.jsの型付けをより正確で良いものにします。
+		</p>
+	</body>
+</html>

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

@@ -0,0 +1,183 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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/ forum]と[link:http://stackoverflow.com/tags/three.js/info Stack Overflow]をヘルプリクエストに利用しています。何か支援が必要な場合は、ここを利用してください。ヘルプリクエストのためにGithubのissueを作成しないでください
+		</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] by [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>Examples</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>古いリンク(Old Links)</h2>
+	 <p>
+		以下のリンクは歴史的な理由で残っています。現在でも役に立つと思うかもしれませんが、リンク先の情報は
+		すごく古いバージョンのthree.jsの情報を含んでいる可能性があるので気をつけてください。
+	 </p>
+
+	 <ul>
+		<li>
+			<a href="https://www.youtube.com/watch?v=Dir4KO9RdhM" target="_blank">AlterQualia at WebGL Camp 3</a>
+		</li>
+		<li>
+			[link:http://yomotsu.github.io/threejs-examples/ Yomotsus Examples] - a collection of examples using three.js r45.
+		</li>
+		<li>
+			[link:http://fhtr.org/BasicsOfThreeJS/#1 Introduction to Three.js] by [link:http://github.com/kig/ Ilmari Heikkinen] (slideshow).
+		</li>
+		<li>
+			[link:http://www.slideshare.net/yomotsu/webgl-and-threejs WebGL and Three.js] by [link:http://github.com/yomotsu Akihiro Oyamada] (slideshow).
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/general/adobe-user-group-nl-talk-video-hexgl.html Fast HTML5 game development using three.js] by [link:https://github.com/BKcore BKcore] (video).
+		</li>
+		<li>
+			<a href="https://www.youtube.com/watch?v=VdQnOaolrPA" target="_blank">Trigger Rally</a>  by [link:https://github.com/jareiko jareiko] (video).
+		</li>
+		<li>
+			[link:http://blackjk3.github.io/threefab/ ThreeFab] - scene editor, maintained up until around three.js r50.
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html Max to Three.js workflow tips and tricks] by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://12devsofxmas.co.uk/2012/01/webgl-and-three-js/ A whirlwind look at Three.js]
+			by [link:http://github.com/nrocy Paul King]
+		</li>
+		<li>
+			[link:http://bkcore.com/blog/3d/webgl-three-js-animated-selective-glow.html Animated selective glow in Three.js]
+			by [link:https://github.com/BKcore BKcore]
+		</li>
+		<li>
+			[link:http://www.natural-science.or.jp/article/20120220155529.php Building A Physics Simulation Environment] - three.js tutorial in Japanese
+		</li>
+	 </ul>
+
+	</body>
+</html>

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

@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="ja">
+	<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>
+			問題が少なくなってきたとはいえ、端末やブラウザによってはWebGLに対応していない場合があります。以下の方法で、ブラウザがWebGLをサポートしているかどうかを確認し、サポートされていない場合はユーザーにメッセージを表示することができます。
+		</p>
+
+		<p>
+			javascriptのコードに[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>