doc: translate complete of rendering on demand

threejs/lessons/ja/threejs-rendering-on-demand.md

@@ -1,9 +1,9 @@
-Title: Three.jsの要求されたレンダリング
+Title: Three.jsで要求されたレンダリング
 Description: 少ないエネルギーの使い方
 TOC: 要求されたレンダリング
 
-多くの人にとっては当たり前の事かもしれませんが、ほとんどのThree.js Exampleでは連続したレンダリングをします。
-言い換えると `requestAnimationFrame`ループ、または "*rAF loop*"ループは以下のようになります。
+多くの人にとって当然かもしれませんが、ほとんどのThree.js exampleでは連続したレンダリングをします。
+言い換えると `requestAnimationFrame` ループ、または"*rAF loop*"ループは以下のようになります。
 
 ```js
 function render() {
@@ -13,22 +13,22 @@ function render() {
 requestAnimationFrame(render);
 ```
 
-アニメーションするものには意味がありますがしないものにはどうでしょう？
-連続してレンダリングする事はデバイスの電力浪費しますし、ポータブルデバイスを使用している場合はバッテリーを浪費します。
+アニメーションする時は意味がありますがしない時はどうでしょう？
+連続したレンダリングはデバイスの電力浪費になり、ポータブルデバイスを使用している場合はバッテリーを浪費します。
 
-これを解決する最も明確な方法は、最初に一度レンダリングして何かが変更された時だけレンダリングする事です。
-テクスチャやモデルの最終的な読込、外部ソースからのデータ受取、ユーザーによる設定やカメラ調整などその他の関連する入力などが含まれます。
+これを解決する最も明確な方法は、最初に一度レンダリングして何か変更された時だけレンダリングする事です。
+変更にはテクスチャやモデルの読込完了、外部ソースからのデータ受取、ユーザーによる設定やカメラ調整などその他の関連する入力などが含まれます。
 
 [レスポンシブデザインの記事](threejs-responsive.html)を例に要求に応じてレンダリングするように修正してみましょう。
 
-最初に `OrbitControls` を追加します。
+最初に `OrbitControls` を追加します。これで何かの変更を反映してレンダリングする事ができます。
 
 ```js
 import * as THREE from './resources/three/r119/build/three.module.js';
 +import {OrbitControls} from './resources/threejs/r119/examples/jsm/controls/OrbitControls.js';
 ```
 
-次に以下のようにセットアップします。
+次に以下のように設定します。
 
 ```js
 const fov = 75;
@@ -43,7 +43,7 @@ camera.position.z = 2;
 +controls.update();
 ```
 
-キューブはアニメーションの必要がないのでトラッキングは必要はありません。
+cubesのアニメーションは必要がないのでトラッキングは必要はありません。
 
 ```js
 -const cubes = [
@@ -56,7 +56,7 @@ camera.position.z = 2;
 +makeInstance(geometry, 0xaa8844,  2);
 ```
 
-つまり、キューブをアニメーションさせるコードと `requestAnimationFrame` の呼出を削除する事ができます。
+cubesをアニメーションさせるコードと `requestAnimationFrame` の呼出を削除する事ができます。
 
 ```js
 -function render(time) {
@@ -91,14 +91,14 @@ render();
 ```
 
 `OrbitControls` がカメラ設定を変更する時はレンダリングする必要があります。
-幸いな事に`OrbitControls` は何かが変更された時は `change` イベントをdispatchします。
+幸いな事に `OrbitControls` は何か変更された時に `change` イベントをdispatchします。
 
 ```js
 controls.addEventListener('change', render);
 ```
 
-ウィンドウのサイズを変更した時の対応も必要です。
-前は連続してレンダリングしていたので自動的に処理をしてたのですが、ウィンドウのサイズが変わった時にレンダリングする必要があります。
+ウィンドウのリサイズ時の対応も必要です。
+前は連続したレンダリングで自動的な処理でしたが、ウィンドウのリサイズ時にレンダリングする必要があります。
 
 ```js
 window.addEventListener('resize', render);
@@ -108,16 +108,17 @@ window.addEventListener('resize', render);
 
 {{{example url="../threejs-render-on-demand.html" }}}
 
-`OrbitControls`には柔軟な慣性を加えるオプションがあります。
+`OrbitControls` には慣性のようなものを追加して動きを滑らかにするオプションがあります。
 これを有効にするには `enableDamping` プロパティをtrueに設定します。
 
 ```js
 controls.enableDamping = true;
 ```
 
-render関数で `controls.update` を呼び出す必要があるので `OrbitControls` が動きを滑らかにするために新しいカメラ設定を反映する事ができます。
-この設定は動きを滑らかにしてくれます。ただ、無限ループになってしまうので `change` イベントから直接 `render` を呼び出す事はできません。
-コントロールは `change` イベントを送信して `render` を呼び出し `render` は `controls.update` を呼び出します。
+`enableDamping` をオンにした状態で、render関数内で `controls.update` を呼び出す必要があります。
+これで動きを滑らかにする新しいカメラ設定を `OrbitControls` に与えてくれます。
+この設定は動きを滑らかにしてくれますが、無限ループになってしまうので `change` イベントから直接 `render` を呼び出す事はできません。
+controlsは `change` イベントを送信し `render` を呼び出します。 `render` は `controls.update` を呼び出します。
 `controltrols.update` は別の `change` イベントを送信します。
 
 この問題は `requestAnimationFrame` を使い `render` を呼び出す事で解決できます。
@@ -157,13 +158,13 @@ render();
 +window.addEventListener('resize', requestRenderIfNotRequested);
 ```
 
-違いがわかりにくいかもしれませんが、以下の例をクリックして矢印キーを使って移動したりドラッグして回転させてみて下さい。
-次に上記の例をクリックして同じ事をしてみて下さい。
-上記の例は矢印キーを押したりドラッグしたりするとスナップし以下の例はスライドします。
+違いがわかりにくいかもしれません。以下のサンプルで矢印キーを使って移動したりドラッグして回転させてみて下さい。
+次にこのページの一番上のサンプルで同じ事をしてみて下さい。
+一番上のサンプルでは矢印キーを押したりドラッグしたりするとスナップし、以下のサンプルではスライドします。
 
 {{{example url="../threejs-render-on-demand-w-damping.html" }}}
 
-シンプルなdat.GUIのGUIを追加し、変更を要求に応じてレンダリングできるようにしてみましょう。
+シンプルなdat.GUIを追加し、GUIで値の変更時にレンダリングを要求してみましょう。
 
 ```js
 import * as THREE from './resources/three/r119/build/three.module.js';
@@ -205,10 +206,10 @@ function makeInstance(geometry, color, x) {
 }
 ```
 
-dat.GUIコントロールには`onChange`メソッドがあり、GUIが値を変更した時に呼び出されるコールバックを渡す事ができます。今回は `requestRenderIfNotRequested`を呼び出すだけです。
-`folder.open` を呼び出すとフォルダが展開できます。
+dat.GUIには `onChange` メソッドがあり、GUIで値を変更時にコールバックを渡す事ができます。今回は `requestRenderIfNotRequested` をコールバックするだけです。
+`folder.open` でフォルダ展開できます。
 
 {{{example url="../threejs-render-on-demand-w-gui.html" }}}
 
-three.jsを連続ではなく、要求に応じてレンダリングさせる方法のヒントになれば幸いです。
+three.jsを連続したレンダリングでなく、要求に応じてレンダリングさせる方法のヒントになれば幸いです。
 three.jsを要求に応じてレンダリングするアプリ/ページはあまり一般的ではありませんが、three.jsを使用しているページの多くはゲームや3Dアニメーション、エディタ、3Dグラフ生成、商品カタログなどのアートです。