この記事では、このエンジンの基本的な機能を示し、カメラ、光と影を操作し、オブジェクトの移動を教える簡単なアプリケーションを作成します。 記事の最後に、デモファイルへのリンクとスクリーンショットがあります。 要するに！
最初のステップ
私たちのHTMLは非常にシンプルで、質問を投げかけず、次のように見えます。
<!DOCTYPE html> <html> <head> <title>Three.js - dice</title> <meta charset="utf-8"> <style> body { margin: 0; padding: 0; overflow: hidden; } </style> <!-- libs --> <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> <!-- app --> <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({/**parameters**/});
また、デカルト座標系が使用されていることに注意する必要があります。 x軸は画面の左上隅から右下に、z軸は右上から左下に、y軸は画面の下部から上にそれぞれ向けられています。
2）シーン（THREE.Scene）
メイン要素。 （.addObjectまたはaddChildを使用して）作成したすべてのオブジェクトとプレーンを追加するのはステージ上です。 シーンの初期化は次のとおりです。
scene = new THREE.Scene();
3）
three.jsのほとんどすべてのオブジェクトがコンパイルされるのは、キャッシュの助けを借りてです。 それを使用するには、メッシュのジオメトリとマテリアルを決定する必要があります。
ジオメトリは、シーンを構成するオブジェクト（立方体、球体、円柱、平面など）です。このトピックは非常に膨大であるため、ここでは詳しく説明しません。 ただし、マテリアルは膨大な問題であるため、 まず最初に2つのポイントのみを明確にすることができます。ジオメトリで指定されたマテリアルを使用するには、ほとんどの場合MeshBasicMaterialで十分なMeshFaceMaterialを使用する必要があります。
mesh = new THREE.Mesh( geometry, material );
その後、安心してメッシュをシーンに追加できます
scene.addObject( mesh );// .addChild
オブジェクトの削除も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のみを使用して、平面の上に配置されたオブジェクトの影を取得します。
知識を応用する
これで、アプリケーションコードに直接アクセスできます。 その中で、上記のすべての要素と、実行されたアクションに関するコメントを使用します。 まず、初期化関数とアニメーション関数を呼び出してアプリケーションを開始し、必要なグローバル変数を宣言します。
// var container, camera, scene, renderer, floormesh, cubeMesh, phi = 0; init(); animate();
初期化機能を検討してください。
function init() { // container = $( 'div' ).attr('id','cardfield'); $('body').append( container ); // camera = new THREE.TrackballCamera({ fov: 45, aspect: window.innerWidth / window.innerHeight, near: 1, far: 10000, rotateSpeed: 1.0, zoomSpeed: 1.2, panSpeed: 0.8, noZoom: false, noPan: false }); // , , camera.position.z = 250; camera.position.y = 175; camera.target.position.y = -75; // scene = new THREE.Scene(); // "". 600600 5 var floorgeo = new THREE.CubeGeometry(600,600,5); // floormesh = new THREE.Mesh(floorgeo, new THREE.MeshBasicMaterial({color: 0x248C0F, opacity:0.9})); // floormesh.position.y = -200; // , . floormesh.rotation.x = 90 * Math.PI / 180; // scene.addChild(floormesh); // var materials = [ // new THREE.MeshBasicMaterial( { color: 0xE01B4C }), // new THREE.MeshBasicMaterial( { color: 0x34609E }), // new THREE.MeshBasicMaterial( { color: 0x7CAD18 }), // new THREE.MeshBasicMaterial( { color: 0x00EDB2 }), // new THREE.MeshBasicMaterial( { color: 0xED7700 }), // new THREE.MeshBasicMaterial( { color: 0xB5B1AE }) // ]; // 50 1, var cube = new THREE.CubeGeometry( 50, 50, 50, 1, 1, 1, materials ); // , // , cubeMesh = new THREE.Mesh( cube, new THREE.MeshFaceMaterial() ); // y cubeMesh.position.y = -10; // scene.addChild( cubeMesh ); // new THREE.ShadowVolume( cubeMesh ); // light = new THREE.DirectionalLight( 0xffffff ); //, light.castShadow = true; // -150, . ( 1 y 0 x z), //, light.position.set( 0, 1, 0 ); // scene.addChild( light ); // renderer = new THREE.WebGLRenderer(); // renderer.setSize( window.innerWidth, window.innerHeight ); // container.append( renderer.domElement ); }
アニメーションの実行：
function animate() { requestAnimationFrame( animate ); render(); }
この機能は、three.jsのほとんどのアプリケーションの標準部分です。 よく見てみましょう。 requestAnimationFrame（animate）は、クロスブラウザーアニメーションの動作を保証するための関数であり（詳細についてはここでも）、render（）関数の再帰呼び出しを提供します。
レンダリング
カメラとオブジェクトの動きを設定する必要があるのはここです（もちろん、この関数で変数が見えるように事前に変数のスコープを設定する必要があります）
function render() { // ( ) cubeMesh.rotation.x += 0.5 * Math.PI / 90; cubeMesh.rotation.y += 1.0 * Math.PI / 90; cubeMesh.rotation.z += 1.5 * Math.PI / 90; // , x y cubeMesh.position.x = Math.sin( phi ) * 50; cubeMesh.position.y = Math.cos( phi ) * 50; // phi+= 0.05; // renderer.render(scene, camera); }
この例では、githubから取得したthree.jsのビルドバージョンを使用したことに注意してください（通常のバージョンと比較して、THREE.xxx THREE.xxxGeometryの代わりに、図のジオメトリの呼び出しが変更されました。たとえば、THREE.CubeGeometryの場合、three.jsの古いバージョンは機能しません。ただし、THREE.Cubeは動作します。また、古いバージョンはTHREE.TrackBallCameraを認識しません。
要約：
最初の気取らないデモを作成し、基本コンポーネントに精通しました。これなしでは、three.jsに基づいたアプリケーションを作成したり、光を当てたり、アニメーションループを実行したりすることはできません。 将来的には、独自のテクスチャとオブジェクトのモデルを追加し、複雑なシーンを構築し、シーンオブジェクトにアクションを追加し、このすべての幸せをBackbone.jsに転送します。 アプリケーションのソースコードはこちらから入手できます 。
