mrdoobからの
three.jsについてのトピックは、
一度ハブで
滑りましたが、まだ詳細に検討されていません。 この記事および（おそらく）後続の記事では、この省略を修正しようとします。 残念ながら、three.jsはわかりやすいドキュメントを提供していません。したがって、three.jsはすべての知識を実験的に取得し、WebGLの仕様、つまり トピックの著者への追加は大歓迎です。
この記事では、このエンジンの基本的な機能を示し、カメラ、光と影を操作し、オブジェクトの移動を教える簡単なアプリケーションを作成します。 記事の最後に、デモファイルへのリンクとスクリーンショットがあります。 要するに！
最初のステップ
私たちのHTMLは非常にシンプルで、質問を投げかけず、次のように見えます。
<!DOCTYPE html> <html> <head> <title>Three.js - dice</title> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; overflow: hidden; } </style> <script type="text/javascript" src="js/Three.js"></script> <script type="text/javascript" src="js/RequestAnimationFrame.js"></script> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/demoapp.js"></script> </head> <body> </body> </html>
この例では、jQueryを使用しますが、これは絶対に重要ではなく、jQueryなしで実行することは完全に可能です。 RequestAnimationFrame.jsは、ブラウザー間での作業（奇妙なことに）RequestAnimationFrameを保証するための小さなハックです（詳細は以下を参照）。
では、
demoapp.jsスクリプト
ファイルに直接行きましょう
イベント準備文書のファイル内のすべてのコードの処理を停止します
$(document).ready(function() { });
例の単純さを維持するために、three.jsデモの標準関数である
init（）および
animate（）のままにします。 1つ目は、表示したいすべてを初期化し、2つ目はrequestAnimationFrameを使用してrender
（）関数を呼び出し、すべての変更を描画します。 デモアプリケーションがより複雑になると、そのアーキテクチャは、backbone.jsに転送されます（ただし、これは別の記事で説明するトピックです）。
主な要素
本番に参加する主な要素（すべてではありませんが、three.jsにはかなり豊富なアクションがあります）：
1）カメラ（THREE.Camera）これらは、イベントの即興シーンに関する「目」です。
最初のパラメーターはオブジェクトからの距離を示し、2番目はアスペクト比を示します（原則として、ウィンドウの幅と高さから商が使用されます）、3番目と4番目は平面に関連しレンダリングで使用される近い/遠いパラメーターを示します。
camera = new THREE.Camera(30, window.innerWidth/window.innerHeight,1, 3000);
または、マウスの左ボタンを押したままシーンを中心に回転できるカメラをすぐに作成できます。右のボタンは上下に移動し、中央のボタンはシーンをズームします。 これは次のように行われます（カメラに送信されるパラメーターは、名前で明確に表れ、アプリケーションコードに表示されます）。
camera = new THREE.TrackballCamera({});
また、デカルト座標系が使用されていることに注意する必要があります。 x軸は画面の左上隅から右下に、z軸は右上から左下に、y軸は画面の下部から上にそれぞれ向けられています。
2）シーン（THREE.Scene）メイン要素。 （.addObjectまたはaddChildを使用して）作成したすべてのオブジェクトとプレーンを追加するのはステージ上です。 シーンの初期化は次のとおりです。
scene = new THREE.Scene();
3） モーター！ マッシュ（THREE.Mesh）three.jsのほとんどすべてのオブジェクトがコンパイルされるのは、キャッシュの助けを借りてです。 それを使用するには、メッシュのジオメトリとマテリアルを決定する必要があります。
ジオメトリは、シーンを構成するオブジェクト（立方体、球体、円柱、平面など）です。このトピックは非常に膨大であるため、ここでは詳しく説明しません。 ただし、マテリアルは膨大な問題であるため、
まず最初に2つのポイントのみを明確にすることができます。ジオメトリで指定されたマテリアルを使用するには、ほとんどの場合
MeshBasicMaterialで十分な
MeshFaceMaterialを使用する
必要があります。
mesh = new THREE.Mesh( geometry, material );
その後、安心してメッシュをシーンに追加できます
scene.addObject( mesh );
オブジェクトの削除もremoveObjectを使用したスナップです
scene.removeObject(mesh);
4）レンダラー（THREE.WebGLRenderer / CanvasRenderer）WebGLRendererとCanvasRendererの2種類のレンダラーを使用できます。 すでに名前で何が何であるかを理解できます。 また、予想どおり、WebGLRendererは弱いマシンではfpsを大幅に低下させることにも注意してください。 レンダラーの使用も非常に簡単です。
renderer = new THREE.WebGLRenderer( );
または
renderer = new THREE.CanvasRenderer();
レンダラーの初期化後に必要なアクションの1つは、そのサイズを設定することです。ここでは、必要に応じて、好きなサイズを自由に選択できます。
renderer.setSize( window.innerWidth, window.innerHeight );
そして最後に、ページにレンダラー要素を追加する必要があります。 これは次のように行われ、すべてのタイプのレンダラーで同じです。
container.appendChild( renderer.domElement );
またはjQueryの場合
container.append(renderer.domElement);
5）光。はい、たとえば、オブジェクトから影を取得するために、シーンに光を当てることが可能です（時には必要です）（もちろん、平行移動平面を使用して行うことができますが、これは例外として可能性が高いです）。 照明には3つのタイプがあります。
5.1）THREE.AmbientLightは、シーン全体に影響する照明です。 方向はなく、オブジェクトの場所に関係なく、すべてのシーンオブジェクトに等しく影響します。 したがって、このライトには座標軸上の位置がありません
5.2）THREE.PointLight-すべての方向の1点から来る照明。 通常の電球との比較は非常に適切だと思います。
5.3）THREE.DirectionalLight-特定の方向に（特定の点から原点まで）移動する光。 たとえば、日光はこのタイプの照明に起因します。
この例では、DirectionalLightのみを使用して、平面の上に配置されたオブジェクトの影を取得します。
知識を応用する
これで、アプリケーションコードに直接アクセスできます。 その中で、上記のすべての要素と、実行されたアクションに関するコメントを使用します。 まず、初期化関数とアニメーション関数を呼び出してアプリケーションを開始し、必要なグローバル変数を宣言します。
初期化機能を検討してください。
function init() {
アニメーションの実行：
function animate() { requestAnimationFrame( animate ); render(); }
この機能は、three.jsのほとんどのアプリケーションの標準部分です。 よく見てみましょう。 requestAnimationFrame（animate）は、クロスブラウザーアニメーションの動作を保証するための関数であり（詳細については
ここでも）、render（）関数の再帰呼び出しを提供します。
レンダリングカメラとオブジェクトの動きを設定する必要があるのはここです（もちろん、この関数で変数が見えるように事前に変数のスコープを設定する必要があります）
function render() {
この例では、githubから取得したthree.jsのビルドバージョンを使用したことに注意してください（通常のバージョンと比較して、THREE.xxx THREE.xxxGeometryの代わりに、図のジオメトリの呼び出しが変更されました。たとえば、THREE.CubeGeometryの場合、three.jsの古いバージョンは機能しません。ただし、THREE.Cubeは動作します。また、古いバージョンはTHREE.TrackBallCameraを認識しません。
要約：
最初の気取らないデモを作成し、基本コンポーネントに精通しました。これなしでは、three.jsに基づいたアプリケーションを作成したり、光を当てたり、アニメーションループを実行したりすることはできません。 将来的には、独自のテクスチャとオブジェクトのモデルを追加し、複雑なシーンを構築し、シーンオブジェクトにアクションを追加し、このすべての幸せをBackbone.jsに転送します。 アプリケーションのソースコードは
こちらから入手でき
ます 。
