fix: toc and correct sentense

threejs/lessons/ja/threejs-fundamentals.md

@@ -1,6 +1,6 @@
-Title: Three.jsの基礎
+Title: Three.jsの基礎知識
 Description: fundamentalsで初めてのThree.jsレッスンを始めましょう
-TOC: Fundamentals
+TOC: 基礎知識
 
 これはthree.jsシリーズの最初の記事です。
 [Three.js](https://threejs.org) は、できるだけ簡単にWebページ上に3Dコンテンツを表示する3Dライブラリです。

threejs/lessons/ja/threejs-responsive.md

@@ -1,26 +1,23 @@
-Title: Three.jsでレスポンシブデザイン
+Title: Three.jsのレスポンシブデザイン
 Description: 異なるディスプレイサイズにThree.jsを適用させる方法
-TOC: Responsive Design
+TOC: レスポンシブデザイン
 
 これはthree.jsシリーズの2番目の記事です。
-最初の記事は [Three.jsの基礎](threejs-fundamentals.html) でした。
+最初の記事は [Three.jsの基礎知識](threejs-fundamentals.html) でした。
 まだ読んでいない場合はそこから始めて下さい。
 
-この記事はthree.jsアプリでどんな状況でもレスポンシブにする方法について説明します。
-一般的にはWebページのレスポンシブ対応はデスクトップやタブレット、電話など様々な異なったディスプレイサイズに対応します。
+この記事はthree.jsアプリをどんな状況にもレスポンシブにする方法を説明します。
+一般的なレスポンシブ対応のWebページはデスクトップやタブレット、スマートフォンなど異なったディスプレイサイズに対応します。
 
 three.jsの場合、さらに考慮すべき状況があります。例えば3Dエディターで左・右・上・下に何かを制御したい場合です。このドキュメントの真ん中にあるコードが一つの例です。
-
 最後のサンプルコードはCSSでサイズ指定なしのcanvasを使ってます。
 
 ```html
 <canvas id="c"></canvas>
 ```
 
-このcanvasのデフォルトサイズは300x150です。
-
-Web上では、CSSでサイズ指定する事が推奨されています。
-
+このcanvasのデフォルトサイズは300 x 150です。
+Web上ではCSSでサイズ指定する事が推奨されています。
 CSSを追加しcanvasをWebページ一杯にしましょう。
 
 ```html
@@ -37,13 +34,13 @@ html, body {
 </style>
 ```
 
-bodyのmarginは、デフォルトで5ピクセルのためマージンを0にします。
-htmlとbodyの高さは100%にし、ウィンドウ一杯に設定します。
-そうしないとhtmlとbodyは、body内のコンテンツと同じぐらいのサイズにしかなりません。
+bodyのmarginはデフォルトで5ピクセルのためマージンを0にします。
+htmlとbodyの高さは100%にしウィンドウ一杯に設定します。
+そうしないとhtmlとbodyはbody内のコンテンツと同じぐらいのサイズにしかなりません。
 
 次にbodyのコンテナーである `id=c` のelementが100%のサイズになるようにします。
 
-最後にそのコンテナーの `display` を `block` に設定します。canvasのdisplayのデフォルトは `inline` です。インライン要素は表示されているものに空白を追加してしまう事があります。このような場合はcanvasを `block` に設定すると、この問題は解消されます。
+最後にそのコンテナーの `display` を `block` に設定します。canvasのdisplayのデフォルトは `inline` です。インライン要素は表示されているものに空白を追加してしまう事があります。このような場合はcanvasを `block` に設定するとこの問題は解消されます。
 
 その結果がこちらにあります。
 
@@ -58,7 +55,7 @@ canvasがページを埋め尽くすようになりましたが、2つ問題が
 
 <img src="resources/images/resize-low-res.png" class="threejs_center nobg">
 
-まず引き伸びている問題を解決しましょう。そのためには、カメラのアスペクトをcanvasの表示サイズのアスペクトに設定する必要があります。canvasの `clientWidth` と `clientHeight` を参照する事で設定を行う事ができます。
+まず引き伸びている問題を解決しましょう。そのためにはカメラのアスペクトをcanvasの表示サイズのアスペクトに設定する必要があります。canvasの `clientWidth` と `clientHeight` を参照する事で設定を行う事ができます。
 
 レンダーのループ処理を次のように更新します。
 
@@ -84,7 +81,7 @@ function render(time) {
 次はブロックノイズを修正していきましょう。
 
 キャンバス要素には2つのサイズがあります。1つ目のサイズは、キャンバスがページに表示されるサイズです。それはCSSで設定しています。2つ目のサイズはキャンバス自体のピクセル数です。これは画像と何ら変わりありません。
-例えば、128x64ピクセルの画像を持っていて、CSSを使って400x200ピクセルで表示する事ができるかもしれません。
+例えば、128 x 64ピクセルの画像を持っていて、CSSを使って400 x 200ピクセルで表示する事ができるかもしれません。
 
 ```html
 <img src="some128x64image.jpg" style="width:400px; height:200px">
@@ -153,7 +150,7 @@ CSSにリサイズ処理を任せた場合のポイントを明確にするた
 
 ## HD-DPIディスプレイの取り扱い
 
-HD-DPIとは、高解像度ディスプレイの略です。
+HD-DPIとは高解像度ディスプレイの略です。
 最近ではほとんどのスマートフォンと同じくらい、Macや多くのWindowsマシンで採用されています。
 
 ブラウザでの動作方法は、CSSを使用してディスプレイの高解像度に関係なく同じサイズを設定する事です。ブラウザはテキストをさらに詳細にレンダリングしますが、物理的なサイズは同じです。
@@ -193,15 +190,17 @@ CSSピクセルからデバイスピクセルへの乗数をブラウザに伝
 
 この2つ目の方法の方が客観的には優れています。なぜかと言うと私が求めるものを手に入れる事ができるからです。
 
-three.jsを使っていると、実際のキャンバスの描画バッファのサイズを指定します。例えば、後処理フィルタを作成する場合などです。
-または `gl_FragCoord` にアクセスするシェーダを作成している場合、あるいは2Dキャンバスに描画するためのスクリーンショット、またはGPUピッキング用のピクセルを読み込んだ場合などに使用する事ができます。 `setPixelRatio` を使うと、実際のサイズと違ってしまう事が多々あります。要求したサイズよりも、サイズを使うタイミングを推測して自分たちが要求したサイズと、three.jsが実際に使用しているサイズをいつ使用するかを確認します。
-これを自分で行う事で、使用されているサイズが要求したサイズであるのを常に知る事ができます。
-裏で魔法がかかっているという特殊なケースはありません。
+three.jsを使っていると実際のキャンバスの描画バッファのサイズを指定します。例えば、後処理フィルタを作成する場合などです。
+または `gl_FragCoord` にアクセスするシェーダを作成している場合、あるいは2Dキャンバスに描画するためのスクリーンショット、またはGPUピッキング用のピクセルを読み込んだ場合などに使用する事ができます。
+
+`setPixelRatio` を使うと要求したサイズよりも実際のサイズが違ってしまう事が多々あります。いつ要求したサイズが使えるか、いつThree.jsの実際のサイズが使えるか推測しなければなりません。
+これを自分で行う事で使用されているサイズが要求したサイズである事を常に知る事ができます。
+裏で魔法がかかっているという特殊ケースではありません。
 
 上のコードを使った例です。
 
 {{{example url="../threejs-responsive-hd-dpi.html" }}}
 
-違いがわかりにくいかもしれませんが、HD-DPIディスプレイをお持ちの方でこのサンプルを上のサンプルと比較してみると、エッジがより鮮明になっている事がわかると思います。
+違いがわかりにくいかもしれませんが、HD-DPIディスプレイをお持ちの方はこのサンプルを上のサンプルと比較してみて下さい。エッジがより鮮明になっている事がわかると思います。
 
-この記事では、非常に基本的でありながらも基本的なことを取り上げました。次は[three.jsが提供する基本的なプリミティブについて簡単に説明します。]((threejs-primitives.html).)
+基礎な内容ですがこの記事ではとても基本的な所を取り上げました。次は[three.jsが提供する基本的なプリミティブについて簡単に説明します。](threejs-primitives.html)