テキスト校正くんを適用

Author: ics-ikeda

docs/camera_orbitcontrols.md

@@ -19,7 +19,7 @@ Three.jsには**カメラの動きを自動的に制御する `THREE.OrbitContro
 
 ## 使い方
 
-`THREE.OrbitControls`は次のような書式で利用します。`THREE.OrbitControls`クラスのコンストラクタにカメラのインスタンスを指定します。これだけで、自動的にマウスと連動してインタラクションが効くようになります。
+`THREE.OrbitControls`は次のような書式で利用します。`THREE.OrbitControls`クラスのコンストラクターにカメラのインスタンスを指定します。これだけで、自動的にマウスと連動してインタラクションが効くようになります。
 
 ```js
 // カメラを作成

docs/camera_position.md

@@ -8,11 +8,11 @@
 
 - [デモを試す](https://ics.media/wp-content/data-demos/140930_angularjs_away3d/src/index.html)
 
-このデモでは**スライダーによって、カメラの位置と角度を制御できるようにしています**。「Camera Position」(座標)のXYZのそれぞれのスライダーを変更すると、カメラの位置が移動し地球の見え方が変わります。「Camera LookAt」(注視点)のトグルをONに設定しているので、常に3D空間の原点をカメラを向くように設定していますが、「Camera LookAt」のトグルを解除すると、自由にカメラの角度を変更できるようになります。カメラの角度にもXYZの3方向があり、それぞれの角度を変更することで見え方が変わります。
+このデモでは**スライダーによって、カメラの位置と角度を制御できるようにしています**。「Camera Position」(座標)のXYZのそれぞれのスライダーを変更すると、カメラの位置が移動し地球の見え方が変わります。「Camera LookAt」（注視点）のトグルをONに設定しているので、常に3D空間の原点をカメラを向くように設定していますが、「Camera LookAt」のトグルを解除すると、自由にカメラの角度を変更できるようになります。カメラの角度にもXYZの3方向があり、それぞれの角度を変更することで見え方が変わります。
 
 
 
-Three.jsはこのように3D空間内でカメラ(視点)を自由に移動・回転することができます。これを習得することで**3Dの表現力が格段に高まります**ので、本記事では理解が深まるようにカメラの動かし方を3分類に分け、順を追って説明していきます。
+Three.jsはこのように3D空間内でカメラ（視点）を自由に移動・回転できます。これを習得することで**3Dの表現力が格段に高まります**ので、本記事では理解が深まるようにカメラの動かし方を3分類に分け、順を追って説明します。
 
 * 自動回転型
 * マウスの位置連動型
@@ -37,15 +37,15 @@ camera.position.x = 1000 * Math.sin(radian);
 camera.position.z = 1000 * Math.cos(radian);
 ```
 
-カメラは今回は常に中央を見るようにしておきたいので、`camera`オブジェクトの`lookAt()`メソッドを使って原点座標(0,0,0)を指定しています。`lookAt()`メソッドはどの位置からでも指定した座標に強制的に向かせることができる命令です。
+今回、カメラは常に中央を見るようにしておきたいので、`camera`オブジェクトの`lookAt()`メソッドを使って原点座標`(0, 0, 0)`を指定しています。`lookAt()`メソッドはどの位置からでも指定した座標に強制的に向かせることができる命令です。
 
 ```js
 // 原点方向を見つめる
 camera.lookAt(new THREE.Vector3(0, 0, 0));
 ```
 
 
-動きの演出については、フレーム毎に衛星の配置角度を0.5度ずつ加算し、それをカメラの座標に変換しています。カメラの座標は三角関数(sinとcos)を使って、角度から求めています。1000という値は円の半径です。
+動きの演出については、フレーム毎に衛星の配置角度を0.5度ずつ加算し、それをカメラの座標に変換しています。カメラの座標は三角関数（`sin`と`cos`）を使って、角度から求めています。1000という値は円の半径です。
 
 ```js
 view.camera.x = 円周の半径 * Math.sin(角度 * Math.PI / 180);
@@ -63,10 +63,9 @@ view.camera.z = 円周の半径 * Math.cos(角度 * Math.PI / 180);
 - [サンプルのソースコードを確認する](../samples/camera_mouse_x.html)
 
 
-このサンプルでは地球を中心として、**マウスの横の移動に対してカメラが移動**します。せっかくのWebGLですのでインタラクティブ性があったほうが面白いですよね。**マウスの位置に応じてカメラの位置を制御する**スクリプトは次となります。(一部抜粋)
+このサンプルでは地球を中心として、**マウスの横の移動に対してカメラが移動**します。せっかくのWebGLですのでインタラクティブ性のあるほうがおもしろいですよね。**マウスの位置に応じてカメラの位置を制御する**スクリプトは次となります（一部抜粋）。
 
 ```js
-
 let rot = 0; // 角度
 let mouseX = 0; // マウス座標
 
@@ -120,12 +119,12 @@ rot += (targetRot - rot) * 0.02;
 
 
 ## まとめ
-今回はカメラの動かし方について、基本的なパターンを演習しました。Three.jsで説明していますが、**類似の3Dフレームワーク(例えば、AwayJSやBabylon.jsなど)でも同じように利用することができます**。今回のチュートリアルではThree.jsの使い方の理解というよりは、3Dの基本的な制御の理解という認識をもっていただければ幸いです。
+今回はカメラの動かし方について、基本的なパターンを演習しました。Three.jsで説明していますが、**類似の3Dフレームワーク（たとえば、AwayJSやBabylon.jsなど）でも同じように利用できます**。今回のチュートリアルではThree.jsの使い方の理解というよりは、3Dの基本的な制御の理解という認識をもっていただければ幸いです。
 
 次は手軽にカメラの操作ができるコントローラーを解説します。
 
 [次の記事へ](camera_orbitcontrols.md)
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-03</article-date-published>
-<article-date-modified>2017-11-06</article-date-modified>
+<article-date-modified>2019-01-08</article-date-modified>

docs/camera_variation.md

@@ -1,7 +1,7 @@
 # Three.jsのカメラ
- 
+
 Three.jsにはCamera3Dクラスがあることを、入門編で紹介しました。このCamera3Dがどのようにして利用できるのか、もう少し掘り下げて学んでみましょう。
- 
+
 Three.jsにさまざまな種類のカメラが搭載されています。 
 
 カメラの種類
@@ -19,14 +19,14 @@ Three.jsにさまざまな種類のカメラが搭載されています。
 - [サンプルのソースコードを確認する](../samples/camera_perspective.html)
 
 遠近感を表現できるカメラです。`PerspectiveCamera`インスタンスの`fov`プロパティーを設定することで、カメラの視野角を変更できます。視野角とはカメラが映し出せる範囲のことです。 
- 
+
 ```js
 // new THREE.PerspectiveCamera(視野角, アスペクト比, near, far)
 const camera = new THREE.PerspectiveCamera(45, width / height, 1, 2000);
 ```
 
 `fov`プロパティーは次の書式で変更できます。単位は角度です。ちなみに、`fov`はField of View＝視野角の頭文字の略語です。
- 
+
 ```js
 camera.fov = 60; 
 ```
@@ -37,8 +37,7 @@ camera.fov = 60;
 ![](../imgs/camera_perspective_90.png)
 
 ▲`fov`が90度だと、レンズが広角となりカメラに近い3Dオブジェクトも視野角に入ります。遠近感を強調したい場合は視野角を大きくするとよいでしょう。 
- 
- 
+
 ## OrthographicCamera 
 
 ![](../imgs/camera_orthographic.png)
@@ -47,7 +46,7 @@ camera.fov = 60;
 - [サンプルのソースコードを確認する](../samples/camera_orthographic.html)
 
 `OrthographicCamera`は平行投影を表現できるカメラです。このカメラには遠近感がないので、手前にある3Dオブジェクトも奥にある3Dオブジェクトも同じ大きさで表示されます。 
- 
+
 ```js
 // new THREE.OrthographicCamera(left, right, top, bottom, near, far)
 const camera = new THREE.OrthographicCamera(-480, +480, 270, -270, 1, 1000);
@@ -58,16 +57,16 @@ const camera = new THREE.OrthographicCamera(-480, +480, 270, -270, 1, 1000);
 ![](../imgs/camera_orthographic_1.png)
 
 ## 共通の設定：クリッピング 
- 
-3D空間に存在するすべてのポリゴンをレンダリングするとパフォーマンスを無駄に使ってしまうので、クリッピングという機能がレンズには備わっています。カメラから見て一定距離区間の間に存在するオブジェクトだけをレンダリングし、その距離の区間の外のオブジェクトはレンダリングしないというしくみです。クリッピングは次の2つのプロパティーで制御されます。
- 
+
+3D空間に存在するすべてのポリゴンをレンダリングするとパフォーマンスをムダに使ってしまうので、クリッピングという機能がレンズには備わっています。カメラから見て一定距離区間の間に存在するオブジェクトだけをレンダリングし、その距離の区間の外のオブジェクトはレンダリングしないというしくみです。クリッピングは次の2つのプロパティーで制御されます。
+
 プロパティー 
 
 - `near` : 区間の開始距離 
 - `far` : 区間の終了距離 
- 
-Three.jsでは`near`のデフォルト値は1、`far`のデフォルト値は2000に設定されています。特に`far`の値はかなり小さく設定されていますので、必要に応じて大きな値に変更するとよいでしょう。 
+
+Three.jsでは`near`のデフォルト値は1、`far`のデフォルト値は2000に設定されています。とくに`far`の値はかなり小さく設定されていますので、必要に応じて大きな値に変更するとよいでしょう。 
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-12</article-date-published>
-<article-date-modified>2018-08-06</article-date-modified>
+<article-date-modified>2019-01-08</article-date-modified>

docs/class.md

@@ -2,9 +2,9 @@
 
 JavaScriptではオブジェクト指向としてのクラスが利用できます。クラスを利用すると、Three.jsを構造的に設計しやすくなります。
 
-例えば、カーゲームを想像してみましょう。カーゲームには様々な表示物が登場します。自機、敵機、コース、背景など。これらを一つのJavaScriptファイルで管理するのは難しいと言わざるを得ません。一つのソースコードに異なる表示物のプロパティーや変数が乱立し、管理が大変になるでしょう。
+たとえば、カーゲームを想像してみましょう。カーゲームにはさまざまな表示物が登場します。自機、敵機、コース、背景など。これらを1つのJavaScriptファイルで管理するのは難しいと言わざるを得ません。1つのソースコードに異なる表示物のプロパティーや変数が乱立し、管理が大変になるでしょう。
 
-クラスだと、自機を一つのクラス、敵機を一つのクラス・・・と分離することができます。そうすれば、自機を開発しているときは、他のオブジェクトのことを気にせず安心して開発に取り掛かれます。結果として、長いコードを書いたときの生産性・可読性・保守性が向上するでしょう。
+クラスだと、自機を1つのクラス、敵機を1つのクラス・・・と分離できます。そうすれば、自機を開発しているときは、他のオブジェクトのことを気にせず安心して開発に取り掛かれます。結果として、長いコードを書いたときの生産性・可読性・保守性が向上するでしょう。
 
 クラスは、ECMAScript 2015（略称：ES2015、ES6）仕様の`class`キーワードを利用します。クラスの仕様の説明は割愛しますので、知らない人は別途参考資料を読んでください。
 
@@ -100,7 +100,7 @@ class MyGroup extends THREE.Group {
 }
 ```
 
-グループ化したい内容をコンストラクターへ記述していきます。このサンプルだと、10個の球体を作成してグループに追加しています。なお追加するときは、`THREE.Group`クラスを継承しているので、`this.add()`メソッドを実行します。`add()`メソッドで追加する場所は`this`であることに注目ください。
+グループ化したい内容をコンストラクターへ記述します。このサンプルだと、10個の球体を作成してグループに追加しています。なお追加するときは、`THREE.Group`クラスを継承しているので、`this.add()`メソッドを実行します。`add()`メソッドで追加する場所は`this`であることに注目ください。
 
 ```js
 /** グループを継承したサブクラスです。 */
@@ -169,4 +169,4 @@ function init() {
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-20</article-date-published>
-<article-date-modified>2017-12-04</article-date-modified>
+<article-date-modified>2019-01-08</article-date-modified>

docs/fog.md

@@ -1,7 +1,7 @@
 # Three.jsのフォグ機能
 
 
-フォグ効果とは遠くのものが霧がかって霞んで見えるような状態にする効果のことです。フォグ（Fog）は日本語で「霧, 濃霧」という意味です。
+フォグ効果とは遠くのものが霞んで見えるような状態にする効果のことです。フォグ（Fog）は日本語で「霧、濃霧」という意味です。
 
 Three.jsではカメラからの開始距離と終点距離を設定することで、その間に存在するオブジェクトが指定した色によって霞んで表示されます。
 
@@ -37,10 +37,8 @@ const scene = new THREE.Scene();
 scene.fog = new THREE.Fog(0x000000, 50, 2000);
 ```
 
-
-
 わずか一行のコードを加えるだけで空間の奥行きを表現できるので、手軽に試すことのできる機能です。
 
 <article-author>[池田 泰延](https://twitter.com/clockmaker)</article-author>
 <article-date-published>2017-11-16</article-date-published>
-<article-date-modified>2017-11-16</article-date-modified>
+<article-date-modified>2019-01-08</article-date-modified>