Home Explore Help
Sign In
javascript
/
three.js
mirror of https://github.com/tazdij/three.js.git
2
0
Fork 0
Files Issues 0 Wiki
Browse Source

Translate Japanese-001 (#92)

* translation ja init file
* trans fundamentals and prerequisistes
naotaro 5 years ago
parent
633dbb61bd
commit
6f02dd69a4
5 changed files with 738 additions and 0 deletions
Unified View Show Diff Stats
  1. 11 0
      threejs/lessons/ja/index.md
  2. 20 0
      threejs/lessons/ja/langinfo.hanson
  3. 360 0
      threejs/lessons/ja/threejs-fundamentals.md
  4. 341 0
      threejs/lessons/ja/threejs-prerequisites.md
  5. 6 0
      threejs/lessons/ja/toc.html

+ 11 - 0
threejs/lessons/ja/index.md
View File 

@@ -0,0 +1,11 @@
 
+Title: Three.jsの基礎
 
+
 
+Three.jsシリーズの学習を支援する記事です
 
+
 
+{{{include "threejs/lessons/toc.html"}}}
 
+
 
+<!--
 
+
 
+{{{table_of_contents}}}
 
+
 
+-->

+ 20 - 0
threejs/lessons/ja/langinfo.hanson
View File 

@@ -0,0 +1,20 @@
 
+{
 
+  language: '日本語',
 
+  langCode: 'ja',
 
+  defaultExampleCaption: 'ここをクリックして別のウィンドウで開きます',
 
+  title: 'Three Fundamentals',
 
+  description: 'Three.jsを学習する',
 
+  link: 'http://threejsfundamentals.org/threejs/lessons/ja',
 
+  commentSectionHeader: '<div>質問はありますか? <a href="http://stackoverflow.com/questions/tagged/three.js">何かあればstackoverflowで尋ねて下さい</a>.</div>\n        <div>Issue/Bug? <a href="http://github.com/greggman/threefundamentals/issues">またはgithubでissueを作って下さい</a>.</div>',
 
+  missing: 'すいません、この記事はまだ翻訳してません. [Translations Welcome](https://github.com/gfxfundamentals/threejsfundamentals)! 😄\n\n[ここに元の英語の記事があります]({{{origLink}}}).',
 
+  toc: '目次',
 
+  categoryMapping: {
 
+    'basics': '基本',
 
+    'solutions': '解決策',
 
+    'webvr': 'WebVR',
 
+    'optimization': '最適化',
 
+    'tips': 'Tips',
 
+    'fundamentals': '基礎',
 
+    'reference': '参照',
 
+  },
 
+}

+ 360 - 0
threejs/lessons/ja/threejs-fundamentals.md
View File 

@@ -0,0 +1,360 @@
 
+Title: Three.jsの基礎
 
+Description: fundamentalsで初めてのThree.jsレッスンを始めましょう
 
+TOC: Fundamentals
 
+
 
+これはthree.jsシリーズの最初の記事です。
 
+[Three.js](https://threejs.org) は、できるだけ簡単にWebページ上に3Dコンテンツを表示する3Dライブラリです。
 
+
 
+Three.jsはWebGLと混同される事がよくあります。
 
+常にではないですが、ほとんどの場合three.jsはWebGLを使用して3Dを描画するためです。
 
+[WebGLはポイントやライン、三角形のみを描画する非常に低レベルのシステムです](https://webglfundamentals.org)。
 
+three.jsを使わない場合、WebGLで何か便利な事を行うには通常かなりのコードが必要です。
 
+もしWebGLを直接書く場合、シーンやライト、シャドウやマテリアル、テクスチャや3D数学をあなた自身で制御する必要があります。
 
+
 
+これらのチュートリアルはJavaScriptを知っている事を前提としており、ほとんどの部分でES6スタイルを使用します。
 
+[あなたがすでに知っている事が期待される簡潔なリストはこちらをご覧下さい](threejs-prerequisites.html)。
 
+three.jsがサポートするほとんどのブラウザは自動更新されるため、ほとんどのユーザーはこのコードを実行できます。
 
+古いブラウザーで実行したい場合は、[Babel](https://babel.io) のようなトランスパイラーを調べて下さい。
 
+もちろん、本当に古いブラウザを実行しているユーザーはthree.jsを実行できないマシンを持っている可能性があります。
 
+
 
+ほとんどのプログラミング言語を学ぶ時、最初にする事は `"Hello World!"` を表示する事です。
 
+3Dで最初に行う最も一般的な事の1つは、3Dキューブを作成する事です。
 
+それでは "Hello Cube!" から始めましょう。
 
+
 
+最初に必要なのは `<canvas>` タグです。
 
+
 
+```html
 
+<body>
 
+  <canvas id="c"></canvas>
 
+</body>
 
+```
 
+
 
+Three.jsはcanvasに描画するため、canvasをthree.jsに渡す必要があります。
 
+
 
+```html
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r110/build/three.module.js';
 
+
 
+function main() {
 
+  const canvas = document.querySelector('#c');
 
+  const renderer = new THREE.WebGLRenderer({canvas});
 
+  ...
 
+</script>
 
+```
 
+
 
+scriptタグに `type="module"` を含めることが重要です。
 
+これにより `import` キーワードを使用してthree.jsを読み込む事ができます。
 
+three.jsを読み込む方法は他にもありますが、r106の時点ではモジュールを使用する事をお勧めします。
 
+モジュールには、必要な他のモジュールを簡単にインポートできるという利点があります。
 
+これにより、依存している追加のスクリプトを手動で読み込む必要がなくなります。
 
+
 
+ここにいくつかの難解な事があります。
 
+もしcanvasをthree.jsに渡さない場合、canvasをdocumentに追加する必要があります。
 
+canvasを追加する場所は、ユースケースに応じて変わる可能瀬があります。
 
+また、コードを変更する必要があるため、canvasをthree.jsに渡す事は少し柔軟性があると感じます。
 
+canvasをどこにでも配置でき、コードを見つける事ができます。
 
+canvasをdocumentに挿入するコードがあるかのように、ユースケースが変更された場合、そのコードを変更する必要があります。
 
+
 
+canvasを検索した後、`WebGLRenderer` を作成します。
 
+rendererは提供された全てのデータを取得し、canvasにレンダリングします。
 
+過去に `CSSRenderer` や `CanvasRenderer` のような他のレンダラーがありましたが、将来的には `WebGL2Renderer` または `WebGPURenderer` があるかもしれません。
 
+
 
+今はWebGLを使用して3Dをcanvasにレンダリングする `WebGLRenderer` があります。
 
+
 
+次はカメラが必要です。
 
+
 
+```js
 
+const fov = 75;
 
+const aspect = 2;  // the canvas default
 
+const near = 0.1;
 
+const far = 5;
 
+const camera = new THREE.PerspectiveCamera(fov, aspect, near, far);
 
+```
 
+
 
+`fov` は `field of view` の略です。この場合、垂直方向に75度を表します。
 
+three.jsのほとんどの角度はラジアン単位ですが、いくつかの理由でパースペクティブカメラは角度を設定します。
 
+
 
+`aspect` はcanvasの表示アスペクトです。
 
+別の記事で詳細を説明しますが、デフォルト値はcanvasは300x150ピクセルで、アスペクトは300/150、または2になります。
 
+`near` と `far` は、レンダリングされるカメラの前のスペースを表します。
 
+その範囲の前またはその範囲の後はクリップされます（描画されません）。
 
+
 
+これらの4つの設定は *"錐台"* を定義します。
 
+*錐台* は、先端が切り取られたピラミッドのような3D形状の名前です。
 
+つまり、"錐台" という言葉は、球、立方体、角柱、錐台のような別の3D形状と考えて下さい。
 
+
 
+<img src="resources/frustum-3d.svg" width="500" class="threejs_center"/>
 
+
 
+近距離および遠距離の平面の高さは、視野によって決まります。
 
+両方の平面の幅は、視野とアスペクトによって決まります。
 
+
 
+定義された錐台内のすべてが描画されます。錐台外は何も描画しません。
 
+
 
+カメラはデフォルトで、Yを上にして-Z軸を見下ろします。
 
+立方体を原点に配置するので、カメラを原点から少し後ろに動かし、何かを見えるようにする必要があります。
 
+
 
+```js
 
+camera.position.z = 2;
 
+```
 
+
 
+以下が私たちが目指しているものです。
 
+
 
+<img src="resources/scene-down.svg" width="500" class="threejs_center"/>
 
+
 
+上の図では、カメラが `z = 2` にある事がわかります。
 
+-Z軸を見下ろしています。
 
+錐台は、カメラの正面から0.1単位で開始し、カメラの正面の5単位に移動します。
 
+この図では見下ろしているため、視野はアスペクトの影響を受けます。
 
+canvasは高さの2倍の幅であるため、ビュー全体で視野は垂直方向の視野である指定された75度よりもはるかに広くなります。
 
+
 
+次は `Scene` を作成します。
 
+three.jsの `Scene` は、シーングラフのフォームのルートです。
 
+three.jsで描画するものはすべてシーンに追加する必要があります。
 
+[Sceneの仕組みの詳細](threejs-scenegraph.html)は、今後の記事で説明します。
 
+
 
+```js
 
+const scene = new THREE.Scene();
 
+```
 
+
 
+次はボックスのデータが含まれている `BoxGeometry` を作成します。
 
+Three.jsで表示するほとんど全てのものには、3Dオブジェクトを構成する頂点を定義するジオメトリが必要です。
 
+
 
+```js
 
+const boxWidth = 1;
 
+const boxHeight = 1;
 
+const boxDepth = 1;
 
+const geometry = new THREE.BoxGeometry(boxWidth, boxHeight, boxDepth);
 
+```
 
+
 
+基本的なマテリアルを作成し、色を設定します。
 
+色は標準のCSSスタイルの6桁の16進数の色値を使用して指定できます。
 
+
 
+```js
 
+const material = new THREE.MeshBasicMaterial({color: 0x44aa88});
 
+```
 
+
 
+次に `Mesh` を作成します。 `Mesh` は `Geometry` (オブジェクトの形状)と `Material` （オブジェクトの描画方法、光沢または平坦、適用する色、適用するテクステャなど）を組み合わせます。
 
+シーン内のオブジェクトの位置、方向、スケールと同様です。
 
+
 
+```js
 
+const cube = new THREE.Mesh(geometry, material);
 
+```
 
+
 
+最後にメッシュをシーンに追加します。
 
+
 
+```js
 
+scene.add(cube);
 
+```
 
+
 
+次にレンダラーの描画関数にシーンとカメラに渡し、シーンをレンダリングします。
 
+
 
+```js
 
+renderer.render(scene, camera);
 
+```
 
+
 
+これが実際の例です。
 
+
 
+{{{example url="../threejs-fundamentals.html" }}}
 
+
 
+私たちの視点からは、これを3Dキューブと言うのは少し難しいです。Z軸がマイナス値で奥にあり、1つの面しか見ていません。
 
+
 
+回転アニメーションさせて、3Dキューブで描画されている事を明らかにします。アニメーションさせるには [`requestAnimationFrame`](https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame) を使用しループ処理内で描画します。
 
+
 
+これがループです。
 
+
 
+```js
 
+function render(time) {
 
+  time *= 0.001;  // convert time to seconds
 
+
 
+  cube.rotation.x = time;
 
+  cube.rotation.y = time;
 
+
 
+  renderer.render(scene, camera);
 
+
 
+  requestAnimationFrame(render);
 
+}
 
+requestAnimationFrame(render);
 
+```
 
+
 
+`requestAnimationFrame` は、何かをアニメーションさせたい時に使います。
 
+これに呼び出される関数を渡します。今回渡す関数は `render` です。
 
+関数を呼び出し、表示に関連する何かを更新するとブラウザがページを再描画します。
 
+私たちの場合、three.jsの `renderer.render` 関数を呼び出しシーンを描画します。
 
+`requestAnimationFrame` は、ページがロードされて渡した関数が呼ばれるまで少し時間がかかります。その時間はミリ秒単位です。
 
+秒に変換する方が簡単に扱えるため、ここではミリ秒を秒に変換します。
 
+
 
+次にキューブのXとY回転に現在の時間を設定します。
 
+回転は [ラジアン](https://en.wikipedia.org/wiki/Radian) 単位です。
 
+円の中に2πのラジアンがあります。キューブは1秒間に約6.28ごと各軸で1回転します。
 
+
 
+シーンをレンダリングし、別のアニメーションフレームをループし続けます。
 
+ループの外側で `requestAnimationFrame` を1回呼び出してループを開始します。
 
+
 
+{{{example url="../threejs-fundamentals-with-animation.html" }}}
 
+
 
+少し良くなりましたが、まだ3Dには見えません。3Dに見えるようにいくつか光源を追加します。つまり、ライトを追加しましょう。
 
+three.jsには [今後の記事](threejs-lights.html) で紹介する多くの種類のライトがあります。
 
+とりあえずディレクショナルライトを作成しましょう。
 
+
 
+```js
 
+{
 
+  const color = 0xFFFFFF;
 
+  const intensity = 1;
 
+  const light = new THREE.DirectionalLight(color, intensity);
 
+  light.position.set(-1, 2, 4);
 
+  scene.add(light);
 
+}
 
+```
 
+
 
+ディレクショナルライトは位置とターゲットを持っています。どちらもデフォルト値は 0, 0, 0 です。
 
+今回はライトの位置を -1、2、4 に設定しているため、カメラの後ろの少し左上側にあります。
 
+ターゲットはまだ 0, 0, 0 なので原点に向かって輝きます。
 
+
 
+また、マテリアルを変更する必要があります。`MeshBasicMaterial` はライトの影響を受けません。ライトの影響をうける `MeshPhongMaterial` に変更してみましょう。
 
+
 
+```js
 
+-const material = new THREE.MeshBasicMaterial({color: 0x44aa88});  // greenish blue
 
++const material = new THREE.MeshPhongMaterial({color: 0x44aa88});  // greenish blue
 
+```
 
+
 
+そして、ここで動作しています。
 
+
 
+{{{example url="../threejs-fundamentals-with-light.html" }}}
 
+
 
+これでかなり3Dに見えるようになりました。
 
+
 
+楽しんでみるために、さらに2つのキューブを追加しましょう。
 
+
 
+各キューブに同じジオメトリを使用しますが、キューブごとに異なるカラーが適用できるため、異なるマテリアルを作成します。
 
+
 
+最初に、指定した色で新しいマテリアルを作成する関数を作ります。
 
+次に、指定したジオメトリをシーンに追加し、X位置を設定したメッシュを作成します。
 
+
 
+```js
 
+function makeInstance(geometry, color, x) {
 
+  const material = new THREE.MeshPhongMaterial({color});
 
+
 
+  const cube = new THREE.Mesh(geometry, material);
 
+  scene.add(cube);
 
+
 
+  cube.position.x = x;
 
+
 
+  return cube;
 
+}
 
+```
 
+
 
+次に、異なる色とX位置を指定した `Mesh` インスタンスを配列に保存する関数を3回呼び出します。
 
+
 
+```js
 
+const cubes = [
 
+  makeInstance(geometry, 0x44aa88,  0),
 
+  makeInstance(geometry, 0x8844aa, -2),
 
+  makeInstance(geometry, 0xaa8844,  2),
 
+];
 
+```
 
+
 
+最後に、描画関数の中でで3つのキューブすべてを回転します。
 
+それぞれにわずかに異なる回転を計算し適用します。
 
+
 
+```js
 
+function render(time) {
 
+  time *= 0.001;  // convert time to seconds
 
+
 
+  cubes.forEach((cube, ndx) => {
 
+    const speed = 1 + ndx * .1;
 
+    const rot = time * speed;
 
+    cube.rotation.x = rot;
 
+    cube.rotation.y = rot;
 
+  });
 
+
 
+  ...
 
+```
 
+
 
+それがここにあります。
 
+
 
+{{{example url="../threejs-fundamentals-3-cubes.html" }}}
 
+
 
+上記のトップダウン図と比較すると、期待通りである事がわかります。
 
+X = -2 および X = +2の場合、キューブは部分的に錐台の外側にあります。
 
+錐台の外側は何だか誇張して歪んでおり、キャンバスの向こう側はとても極端です。
 
+
 
+この短いイントロが学習を始めるのに役立つ事を願っています。
 
+[次は複数の状況に適応できるようにレスポンシブサイトでのコードもカバーします](threejs-responsive.html)。
 
+
 
+<div class="threejs_bottombar">
 
+<h3>es6モジュール、three.js、およびフォルダー構造</h3>
 
+<p>バージョンr106以降でthree.jsを使用する好ましい方法は
 
+<a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import">es6モジュール</a>です。</p>
 
+<p>
 
+es6モジュールはスクリプトのロードに <code>import</code> を使う事ができます。
 
+また、HTMLのインラインに <code>&lt;script type="module"&gt;</code> タグが使えます。
 
+両方とも以下に例を示します。
 
+</p>
 
+<pre class=prettyprint>
 
+&lt;script type="module"&gt;
 
+import * as THREE from './resources/threejs/r110/build/three.module.js';
 
+
 
+...
 
+
 
+&lt;/script&gt;
 
+</pre>
 
+<p>
 
+パスは絶対パス、または相対パスでなければなりません。
 
+相対パスは常に <code>./</code> または <code>../</code> から始まり、
 
+<code>&lt;img&gt;</code> や <code>&lt;a&gt;</code> など他のタグと異なります。
 
+</p>
 
+<p>
 
+同じスクリプトへの参照は、絶対パスである限り一度だけロードされます。
 
+three.jsの場合、すべてのexamplesを正しいフォルダ階層に入れる必要があります。
 
+</p>
 
+<pre class="dos">
 
+someFolder
 
+ |
 
+ ├-build
 
+ | |
 
+ | +-three.module.js
 
+ |
 
+ +-examples
 
+   |
 
+   +-jsm
 
+     |
 
+     +-controls
 
+     | |
 
+     | +-OrbitControls.js
 
+     | +-TrackballControls.js
 
+     | +-...
 
+     |
 
+     +-loaders
 
+     | |
 
+     | +-GLTFLoader.js
 
+     | +-...
 
+     |
 
+     ...
 
+</pre>
 
+<p>
 
+このフォルダー構造が必要な理由は、 <a href="https://github.com/mrdoob/three.js/blob/master/examples/jsm/controls/OrbitControls.js"><code>OrbitControls.js</code></a> のようなexamplesのスクリプトには相対パスがハードコーディングされてるからです。
 
+</p>
 
+<pre class="prettyprint">
 
+import * as THREE from '../../../build/three.module.js';
 
+</pre>
 
+<p>
 
+同じフォルダ構造を使用すると、importしたthreeとexampleライブラリは両方とも同じthree.module.jsを参照します。
 
+</p>
 
+<pre class="prettyprint">
 
+import * as THREE from './someFolder/build/three.module.js';
 
+import {OrbitControls} from './someFolder/examples/jsm/controls/OrbitControls.js';
 
+</pre>
 
+<p>これにはCDNを使用する場合も含まれます。 <code>three.modules.js</code> のパスが <code>/build/three.modules.js</code> のようになってる事を確認して下さい。例えば</p>
 
+<pre class="prettyprint">
 
+import * as THREE from 'https://unpkg.com/[email protected]/<b>build/three.module.js</b>';
 
+import {OrbitControls} from 'https://unpkg.com/[email protected]/examples/jsm/controls/OrbitControls.js';
 
+</pre>
 
+<p>古い書き方を好む場合は <code>&lt;script src="path/to/three.js"&gt;&lt;/script&gt;</code> 
+<a href="https://r105.threejsfundamentals.org">このサイトの古いバージョン</a> このサイトの古いバージョンをチェックアウトできます。
 
+Three.jsには、下位互換性を心配しないというポリシーがあります。
 
+あなたが特定のバージョンを使い、コードをダウンロードしてプロジェクトに入れる事を期待しています。
 
+新しいバージョンにアップグレードする時、 <a href="https://github.com/mrdoob/three.js/wiki/Migration-Guide">移行ガイド</a> を読み変更する必要があるものを見る事ができます。
 
+es6モジュールとクラススクリプトの両方をメンテナンスするのは面倒のため、このサイトではes6モジュールのみ扱います。
 
+他の場所でも述べたように古いブラウザをサポートするには <a href="https://babeljs.io">トランスパイラー</a> を調べて下さい。
 
+</p>
 
+</div>

+ 341 - 0
threejs/lessons/ja/threejs-prerequisites.md
View File 

@@ -0,0 +1,341 @@
 
+Title: Three.jsの前提条件
 
+Description: このサイトを使用するために必要なスキル
 
+TOC: Prerequisites
 
+
 
+これらの記事は、three.jsの使用方法を学習するためものです。
 
+JavaScriptのプログラミング方法を把握してる事を前提とします。
 
+DOMとは何か、HTMLの記述方法、JavaScriptでDOMの作成方法を把握してる事を前提とします。
 
+[es6 modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import) のimportや `<script type="module">` タグを把握してる事を前提とします。
 
+CSSや [CSSセレクター](https://developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Selectors) が何か把握してる事を前提とします。
 
+ES5、ES6、およびES7を把握してる事を前提とします。
 
+イベントとコールバックでJavaScripが実行されるのを把握してる事を前提とします。
 
+クロージャとは何かを知っている事を前提とします。
 
+
 
+また、以下に簡単な復習と注意事項があります。
 
+
 
+## es6モジュール
 
+
 
+es6モジュールはスクリプトの中で `import` キーワード、または `<script type="module">` タグを使用してインラインでロードできます。
 
+以下に両方の使用​​例があります。
 
+
 
+```html
 
+<script type="module">
 
+import * as THREE from './resources/threejs/r110/build/three.module.js';
 
+
 
+...
 
+
 
+</script>
 
+```
 
+
 
+パスは絶対パス、または相対パスでなければなりません。相対パスは常に `./` または `../` で始まり `<img>` や `<a>` などの他のタグやcss参照とは異なります。
 
+
 
+詳細は[この記事](threejs-fundamentals.html)の最後に記載しています。
 
+
 
+## `document.querySelector` と `document.querySelectorAll`
 
+
 
+`document.querySelector` を使用し、CSSセレクターに一致する最初の要素を選択できます。
 
+`document.querySelectorAll` は、CSSセレクターに一致するすべての要素を返します。
 
+
 
+## `onbody` は必要ありません
 
+
 
+20年前の古いWebページでは、以下のようなHTMLが多く使われてました。
 
+
 
+    <body onload="somefunction()">
 
+
 
+このスタイルは非推奨です。スクリプトをページの下部に配置します。
 
+
 
+```html
 
+<html>
 
+  <head>
 
+    ...
 
+  </head>
 
+  <body>
 
+     ...
 
+  </body>
 
+  <script>
 
+    // inline javascript
 
+  </script>
 
+</html>
 
+```
 
+
 
+または、[deferプロパティを使用します](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script)。
 
+
 
+## クロージャーの仕組みを知る
 
+
 
+```js
 
+function a(v) {
 
+  const foo = v;
 
+  return function() {
 
+     return foo;
 
+  };
 
+}
 
+
 
+const f = a(123);
 
+const g = a(456);
 
+console.log(f());  // prints 123
 
+console.log(g());  // prints 456
 
+```
 
+
 
+上記のコードでは、新しい関数が作成される度に関数 `a` を呼び出します。
 
+その関数は変数 `foo` を *閉じ込めます* 。
 
+ここに[詳細な情報](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures) があります。
 
+
 
+## `this` がどのように機能するか知る
 
+
 
+`this` は魔法ではありません。
 
+引数が関数に渡されるのと同じように、関数に自動的に渡される実質的な変数です。
 
+簡単に説明すると、次のような関数を直接呼び出す場合です。
 
+
 
+    somefunction(a, b, c);
 
+
 
+`this` は `null`（strictモードまたはモジュールの場合）になりますが、ドット演算子を使用して関数を呼び出す場合と同様です。
 
+
 
+    someobject.somefunction(a, b, c);
 
+
 
+`this` は `someobject` がセットされます。
 
+
 
+この部分はみなさんが混乱するコールバックです。
 
+
 
+     const callback = someobject.somefunction;
 
+     loader.load(callback);
 
+
 
+これは経験の浅い人が期待するように動作しません。
 
+なぜなら `loader.load` がコールバックを呼び出す時、`.` 演算子で `this` を呼び出していないため、デフォルトではnullになります（ローダーが明示的に何かを設定しない限り）
 
+コールバックが発生した時に `this` を `someobject` したい場合は、関数をバインドする必要があります。
 
+
 
+     const callback = someobject.somefunction.bind(someobject);
 
+     loader.load(callback);
 
+
 
+[この記事は `this` を理解するのに役立つかもしれません](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/this).
 
+
 
+## ES5/ES6/ES7 stuff
 
+
 
+### `var` は非推奨です。 `const` か `let` を使って下さい
 
+
 
+`var` は使用する理由がありません。varを使用するのは悪い習慣と見なされます。ほとんどの場合、変数の値を変えない場合は `const` を使用します。
 
+値が変更される場合は `let` を使用します。これにより大量のバグを回避できます。
 
+
 
+### `for of` を使用し `for in` は使用しない
 
+
 
+`for of` は新しい書き方で、 `for in` は古い書き方です。 `for in` で解決できない問題を `for of` が解決しています。
 
+解決した一例として、オブジェクトのすべてのkey/valueのペアを反復処理ができます。
 
+
 
+```js
 
+for (const [key, value] of Object.entries(someObject)) {
 
+  console.log(key, value);
 
+}
 
+```
 
+
 
+### `forEach` 、`map` 、 `filter` は役に立ちます
 
+
 
+配列の関数である [`forEach`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/forEach) や
 
+[`map`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/map) 、
 
+[`filter`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter)
 
+ はモダンなJavaScriptで広く使われています。
 
+
 
+### 分割代入を使う
 
+
 
+`const dims = {width: 300, height: 150}` のObjectがあるとします。
 
+
 
+古いコードの場合
 
+
 
+     const width = dims.width;
 
+     const height = dims.height;
 
+
 
+新しいコードの場合
 
+
 
+     const {width, height} = dims;
 
+
 
+### オブジェクト宣言のショートカットを使う
 
+
 
+古いコードの場合
 
+
 
+```js
 
+ const width = 300;
 
+ const height = 150;
 
+ const obj = {
 
+   width: width,
 
+   height: height,
 
+   area: function() {
 
+     return this.width * this.height
 
+   },
 
+ };
 
+```
 
+
 
+新しいコードの場合
 
+
 
+```js
 
+ const width = 300;
 
+ const height = 150;
 
+ const obj = {
 
+   width,
 
+   height,
 
+   area() {
 
+     return this.width * this.height;
 
+   },
 
+ };
 
+```
 
+
 
+### スプレット演算子 `...` を使う
 
+
 
+スプレット演算子にはたくさんの使い方があります。例えば
 
+
 
+```js
 
+ function log(className, ...args) {
 
+   const elem = document.createElement('div');
 
+   elem.className = className;
 
+   elem.textContent = [...args].join(' ');
 
+   document.body.appendChild(elem);
 
+ }
 
+```
 
+
 
+もう1つの例
 
+
 
+```js
 
+const position = [1, 2, 3];
 
+somemesh.position.set(...position);
 
+```
 
+
 
+### `class` を使う
 
+
 
+ES5より以前のオブジェクトのようなクラス構文は、ほとんどのプログラマーにはなじみがありませんでした。
 
+ES5以降では、C ++やC＃、Javaのスタイルに近い[`class` キーワードを使用](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes)
 
+できるようになりました。
 
+
 
+### gettersとsettersを理解する
 
+
 
+[Getters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/get) と
 
+[setters](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/set) は
 
+ほとんどのモダンなプログラミン言語でよく使われます。
 
+ES5のクラス構文により、ES5以前よりもはるかに簡単に使えます。
 
+
 
+### 必要に応じてアロー関数を使います
 
+
 
+アロー関数はcallbackとPromiseで特に役立ちます。
 
+
 
+```js
 
+loader.load((texture) => {
 
+  // use texture
 
+});
 
+```
 
+
 
+アロー関数は `this` をバインドします。
 
+
 
+```js
 
+const foo = (args) => {/* code */};
 
+```
 
+
 
+ショートカットで書くなら
 
+
 
+```js
 
+const foo = (function(args) {/* code */}).bind(this));
 
+```
 
+
 
+### Promiseはasync/awaitと同様です
 
+
 
+Promisesは非同期な処理を助ます。Async/awaitはpromiseを助けます。
 
+
 
+ここで扱うには大きな話題になるため、[promiseのドキュメントを読んで下さい](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Using_promises)。
 
+また、[async/awaitもドキュメントを読んで下さい](https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Async_await)。
 
+
 
+### テンプレートリテラルを使用する
 
+
 
+テンプレートリテラルは、引用符（"", ''）の代わりにバックティック文字（` `）を使います。
 
+
 
+    const foo = `this is a template literal`;
 
+
 
+テンプレートリテラルには基本的に2つの機能があります。1つは複数行にかけます。
 
+
 
+```js
 
+const foo = `this
 
+is
 
+a
 
+template
 
+literal`;
 
+const bar = "this\nis\na\ntemplate\nliteral";
 
+```
 
+
 
+上記の `foo` と `bar` は同様の意味になります.
 
+
 
+もう1つは、文字モードの中に `${javascript-expression}` のようにJavaScriptのスニペッドを挿入できます。
 
+これはテンプレートの一部です。例えば
 
+
 
+```js
 
+const r = 192;
 
+const g = 255;
 
+const b = 64;
 
+const rgbCSSColor = `rgb(${r},${g},${b})`;
 
+```
 
+
 
+または
 
+
 
+```js
 
+const color = [192, 255, 64];
 
+const rgbCSSColor = `rgb(${color.join(',')})`;
 
+```
 
+
 
+または
 
+
 
+```js
 
+const aWidth = 10;
 
+const bWidth = 20;
 
+someElement.style.width = `${aWidth + bWidth}px`;
 
+```
 
+
 
+# JavaScriptのコーディング規則を学びましょう
 
+
 
+自由にコードフォーマットする事ができますが、少なくとも1つの規則に注意する必要があります。
 
+JavaScriptの変数名や関数名、メソッド名はすべてローワーキャメルケースです。
 
+コンストラクターやクラスの名前はアッパーキャメルケースです。
 
+このルールに従うなら、他のほとんどのJavaScriptコードと一致します。
 
+
 
+多くの [リンター]](https://eslint.org) やコード内の明らかなエラーをチェックするプログラムは、間違ったケースを使用するとエラーを指摘します。
 
+上記の規則に従うことで、エラーが間違っている事がわかるからです。
 
+
 
+```js
 
+const v = new vector(); // clearly an error if all classes start with a capital letter
 
+const v = Vector();     // clearly an error if all functions start with a lowercase latter.
 
+```
 
+
 
+# Visual Studio Codeの使用を検討する
 
+
 
+もちろんあなたが望むエディタが良いですが、もし望むエディタがなければ [Visual Studio Code](https://code.visualstudio.com/) を使う事を検討してみて下さい。
 
+インストールし [eslintをセットアップ](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) します。
 
+セットアップには数分かかる場合がありますが、バグを見つけるのに非常に役に立ちます。
 
+
 
+いくつかの例
 
+
 
+[`no-undef` ルール](https://eslint.org/docs/rules/no-undef) を有効にすると、VSCodeのEsLintで多くの未定義の変数について警告します。
 
+
 
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-defined.png"></div>
 
+
 
+上記は `doTheThing` のスペルを  `doThing` と間違えている事がわかります。
 
+`doThing` の下に赤い波線があり、その上をホバリングすると定義されていない事がわかります。
 
+1つのエラーが回避されました。
 
+`THREE` を使用して警告が表示された場合、eslintに `THREE` が存在する事を伝えるため、JavaScriptファイルの先頭に `/* global THREE */` を追加します。
 
+
 
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-not-a-constructor.png"></div>
 
+
 
+上記では、eslintは `アッパーキャメルケース` がコンストラクターであるというルールを知っているため、 `new` を使用する必要があります。
 
+他のエラーをキャッチして避けます。これは[`new-cap` ルール](https://eslint.org/docs/rules/new-cap) です。
 
+
 
+[数百のEslintルールをオン・オフにカスタム](https://eslint.org/docs/rules/) できます。
 
+上記の例では `var` でなく `const` と `let` を使用するルールを適用しました。
 
+コードでは `var` を使用しましたが、`let` または `const` を使用する必要があると警告されました。
 
+
 
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-var.png"></div>
 
+
 
+ここでは `let` を使用しましたが、値を変更しない事がわかったため、 `const` を使用することが提案されました。
 
+
 
+<div class="threejs_center"><img style="width: 615px;" src="resources/images/vscode-eslint-let.png"></div>
 
+
 
+もちろん、 `var` を使い続けたい場合は、そのルールをオフにすることができます。
 
+上記で記述したように `var` よりも `const` と `let` を使用することを好みます。
 
+それらはうまく機能し、バグを防ぎます。
 
+
 
+ルールをオーバーライドする必要がある場合、1行のコードまたはコードセクションに[無効にするコメントを追加できます](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)。
 
+
 
+# レガシーブラウザをサポートする必要がある場合は、トランスパイラーを使用して下さい
 
+
 
+ほとんどのモダンなブラウザは自動更新されるため、これらすべての機能を使用すると便利です。生産性を高め、バグを回避できます。
 
+あなたのプロジェクトで古いブラウザをサポートする必要があれば、[ES5/ES6/ES7コードをES5のJavascriptにトランスパイラーするツール](https://babeljs.io) を使用して下さい。

+ 6 - 0
threejs/lessons/ja/toc.html
View File 

@@ -0,0 +1,6 @@
 
+{{{tocHtml}}}
 
+<ul>
 
+  <li><a href="https://github.com/gfxfundamentals/threejsfundamentals">github</a></li>
 
+  <li><a href="https://threejs.org">three.js</a></li>
 
+  <li><a href="https://threejs.org/docs/">three.jsドキュメント</a></li>
 
+</ul>