Skip to content

Looking Glass用のThree.jsライブラリ入門

このガイドは、HoloPlay.jsライブラリを使用し、Looking Glass用最初のThree.jsシーンの設定方法を説明します。このガイドでは、斜にに重なる3つの立方体を表示するサンプルを作成します。動作サンプルをこちらで見ることができます。

cubes

ステップ1:設定

まだなじみのないの皆様、Three.jsはWebGLの上に構築された本当に素晴らしい3Dウェブライブラリーです。

始める前にダウンロードする必要があるので、彼らのサイトへ移動し、左上の"ダウンロード"ボタンを押して -- そこにいる間に、フレームワークを使って作られた素晴らしいな作品をついでにチェックしてください!

Three.jsをダウンロードしたら、ファイルを解凍してください。そして、ここでHoloplay JavaScript ライブラリーをダウンロードしてください。

では、そろそろ自分のプロジェクトを始めましょう!

デスクトップに「Three JS Tutorial」という名前のフォルダを作成しましょう。 これが、Three.jsプロジェクトのフォルダになります。

そのフォルダの中に、別のフォルダを作り、 "js"と命名しましょう。 このフォルダは、HoloPlay JavaScriptライブラリーやThree.js自体のような、Three.jsプロジェクトで使用必要のすべてのJavaScriptファイルを入れます。

js folder js folder contents

あなたのholoplay.jsおよびthree.jsスクリプトをこのフォルダに入れて、私たちのHTMLで使えるようにします。

シーンを作成の準備はほぼ整いましたが、先ずはコンピューターにローカルホストを設定します。ほとんどのブラウザではローカル保存されたHTMLファイルからのThree.jsの実行ができないため、これは重要です。MACをお使いの方の場合、このプロセスは非常に簡単です--このチュートリアル でPHPローカルホストの設定方法が解説されています -- しかし、もしWindowsお使いの方にはプロセスはもっと複雑で、このチュートリアル に従って設定ください。WindowsにLinux bash シェルをインストールするすることもできますし、これについては今後解説しようと思います。

どんなアプローチでも、デスクトップ上で "ThreeJSTutorial"フォルダのローカルホストを開くと、作業中のものは明確にわかります。

ステップ2:私達のシーンを作る

これで、やっとコーディングを始めることができます! テキストエディタのThreeJSTutorialフォルダを開き、ルートフォルダ( "js"というフォルダではない)に新しいファイルを作成し、index.htmlと命名します。これは私達の3D Webページを実行するためのメインスクリプトになります。

index

HTMLとCSSの定型的な部分から始める必要がありますが、このコードは非常に簡単で、Three.jsでCSSをあまり使用しなくても大丈夫です。以下はそのコードスニペットです。

<!DOCTYPE html>
<html>
  <head>
    <title>
      Looking Glass Tutorial
    </title>
    <style>
      body 
      { 
        margin: 0; 
      }
      canvas 
      {
        width: 100%; 
        height: 100%; 
      };
    </style>
  </head>

  <body>

  </body>
</html>

The <head> segment isn't really too important here, it's really just setting the name of our project and the CSS. The CSS simply makes the canvas element take up our entire browser page, which will be the canvas used by Three.js. Where we'll be focusing our attention is in the body segment of this script.

First, we need to include our three.js and holoplay.js files. After those are included, we can start writing the code for our scene inside another <script> tag.

ここでの <head>セグメントはそれほど重要ではなく、プロジェクトの名前とCSSを設定するだけです。 CSSが行っているのは、Three.jsで使用される、ブラウザページ全体を占めるキャンバスを作成することです。注目すべきは、このスクリプトの本文部分です。

先ず、three.jsファイルとholoplay.jsファイルを読み込ませる必要があります。 そして、別の<script>タグの中のシーンでのコードを書き始めることができます。

<body>
  <script src="js/three.js"></script>
  <script src="js/holoplay.js"></script>
  <script>
    //Our scene code here
  </script>
</body>

これで必要なライブラリーがインポートされて、私達のシーンロジックで使うことができるようになります。基本的なシーンロジックをいれましょう。

<script>
  //Basic elements for a Three.js/HoloPlay scene
  var scene, camera, renderer, holoplay;

  //Lighting elements
  var directionalLight;
  var ambientLight;

  //Scene objects
  var cubeGeometry;
  var cubeMaterial;
  var cubes;

  //Initialize our variables
  function init(){

  }

  //Render the scene
  function draw(){

  }

  //Game loop
  function RunApp(){
    requestAnimationFrame(RunApp);
    draw();
  }

  init();
  RunApp();

</script>

シーン変数の初期化から始めます: scene、camera、renderer、及び holoplay。

//Initialize our variables
function init(){
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(13.5, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0,0,20);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  holoplay = new HoloPlay(scene, camera, renderer);
}

私たちのシーンは単なる典型的なThree.jsシーンで、本質的に他のすべてのオブジェクトを内部に格納するためのオブジェクトです。

シーン内のカメラは視野が非常に狭く設定されていますが、これはそのほうがLooking Glassでの見栄えが良くなる傾向がある為です。

カメラのZ軸上の位置を20に設定して、(0,0,0)の位置に描画したものが確実にカメラに入るようにします。

rendererはWebGLを使用してWebページ上の3Dジオメトリをレンダリングします。

このオブジェクトのDOM要素をdocument.bodyに追加して、実際にブラウザー・ページに描画されるようにします。

これらすべてをHoloPlayオブジェクトのコンストラクタに渡して、通常描画するものを3Dイメージに変換するときに参照できるようにします。

最後に、ウィンドウのサイズが変更されたときにオブジェクトをリセットする便利な関数を追加します。

そのためには、カメラとレンダラのキー変数の一部をリセットする関数を実行するイベントリスナーをドキュメントに追加します。init()関数の下に次のように記述します。

//Resize window on size change
window.addEventListener('resize', function(){
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer.setSize(width, height);

  camera.aspect = width/height;
  camera.updateProjectionMatrix();
});

シーンをセットアップして準備ができたら、シーンを構成するオブジェクトを追加します。その前に、draw()関数に行を追加して、シーンで何が起こっているかを画面に表示して確認できるようにします。ここで追加する行は次のとおりです。

//Render the scene
function draw(){
  holoplay.render();
}

何も変化は見られませんが、実際にはシーンがモニターもしくはLooking Glassにレンダリングされています。ただこのシーンは、まだ中身が空っぽなんです!

empty scene

この関数呼び出しによって、シーン内にあるものを見ることができます。ただし、その前に、Webページを開いたときに、Three.jsドライバがないことを知らせる警告が表示されます。Looking Glass本体からキャリブレーションデータを読み取るには、このドライバをコンピュータにインストールする必要があります。一度インストールすれば、再度インストールする必要はありません。

OKをクリックすると、Drivers for Webページが開きます。ご仕様のOSに対応したインストーラーをダウンロードしてください。ダウンロードが完了したら、インストーラーを実行します。

Installer

インストーラを実行すると、ユーザーアカウント制御指示のダイアログが出てきます。「はい」ボタンをクリックしてください。

Installer 2

ドライバがインストールされて、レンダラが正常に設定されていれば、ドキュメントに記述したシーンを実際に表示して見ることができます。私達はシーンに3つの立方体を描画しようとしているところですが、立方体を美しく見せるにはライトが必要です。そうでなければ、最も単純なマテリアル以外では立方体を表示できません。上記で宣言していた2種類のライト、ディレクショナルライトとアンビエントライトをシーンに追加します。

ディレクショナルライトは太陽光のように機能し、シーン内で特定の方向にのみライトを照らします。ディレクショナルライトに面しているオブジェクトの面は、ディレクショナルライトに面していないオブジェクトの面よりも明るくなります。実際のところ、ディレクショナルライトが当たっていない面はまっ黒になります。これはあまり見栄えが良くありません。こういった時がアンビエントライトの出番です。アンビエントライトは、ライトの方向やライトの位置に関係なく、シーン内のオブジェクトのすべての面をライトで照らします。これでシーンの見栄えがかなり良くなります。一般的には、アンビエントライトはディレクショナルライトよりも暗くするべきでしょう。これらをシーンに追加してみましょう。

//Initialize our variables
function init(){
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(12.5, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0,0,20);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  holoplay = new HoloPlay(scene, camera, renderer);

  directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
  directionalLight.position.set (0, 1, 2);
  scene.add(directionalLight);

  ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
  scene.add(ambientLight);
}

新しいTHREE.DirectionalLightを作成し、カラーを白(16進数の0xFFFFFF)に、明かりの強さを1に設定します。次に、scene.add()でこれをシーンに追加します。この操作を行わないと、シーン内にいくらオブジェクトを追加しても、それらは表示されません(明かりが無いのですから)。アンビエントライトもカラーは白ですが、明かりの強さは低めで0.4です。これもシーンに追加します。

ここでページを更新しても、何も表示されません。しかし、このページはシーン内に何か物があればそれを見ることができるように既に設定されています。ならばシーンにキューブを置いてみましょう!

//Initialize our variables
function init(){
  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(12.5, window.innerWidth/window.innerHeight, 0.1, 1000);
  camera.position.set(0,0,20);

  renderer = new THREE.WebGLRenderer();
  renderer.setSize(window.innerWidth, window.innerHeight);
  document.body.appendChild(renderer.domElement);

  holoplay = new HoloPlay(scene, camera, renderer);

  directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
  directionalLight.position.set (0, 1, 2);
  scene.add(directionalLight);

  ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
  scene.add(ambientLight);

  cubes = [];

  cubeGeometry = new THREE.BoxGeometry(1,1,1);
  cubeMaterial = new THREE.MeshLambertMaterial();

  for(var i = 0; i < 3; i++){
    cubes.push(new THREE.Mesh(cubeGeometry, cubeMaterial));
    cubes[i].position.set(1 - i, 1 - i, 1 - i);
    scene.add(cubes[i]);
  }
}

まず、3つのキューブを管理する為のcubes変数を空の配列として宣言します。次にキューブの外観を操作する為のジオメトリとマテリアルを作成します。THREE.BoxGeomety(1,1,1)はジオメトリを立方体の形状に設定し、その大きさを「1」に設定しています。次に、新しいLambertマテリアル(デフォルトでは白)を作成しています。これにより、キューブを艶消しなな外観にすることができます。これで複数のキューブを表示する準備は完了です。

forループでは、新しくキューブを作成して配列に追加します。次に、それらの位置を左下から右上および前にずらすように設定し、シーンに追加します。スクリプトを保存してブラウザーのページを更新すると、キューブが表示され、それはLooking Glassの中で1つの白い塔になっています!

cubes

目標達成です。本物の3Dウェブサイトが初めて完成し、今あなたのLooking Glassに表示されています。

参照用にindex.htmlファイルの完全なコードを次に示します。

<!DOCTYPE html>
<html>
  <head>
    <title>
      Looking Glass Tutorial
    </title>
    <style>
      body 
      { 
        margin: 0; 
      }
      canvas 
      {
        width: 100%; 
        height: 100%; 
      };
    </style>
  </head>

  <body>
    <script src="js/three.js"></script>
    <script src="js/holoplay.js"></script>

<script>
      //Basic elements for a Three.js/HoloPlay scene
      var scene, camera, renderer, holoplay;

      //Lighting elements
      var directionalLight;
      var ambientLight;

      //Scene objects
      var cubeGeometry;
      var cubeMaterial;
      var cubes;

      //Initialize our variables
      function init(){
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(12.5, window.innerWidth/window.innerHeight, 0.1, 1000);
        camera.position.set(0,0,20);
        renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);
        holoplay = new HoloPlay(scene, camera, renderer);
        directionalLight = new THREE.DirectionalLight(0xFFFFFF, 1);
        directionalLight.position.set (0, 1, 2);
        scene.add(directionalLight);
        ambientLight = new THREE.AmbientLight(0xFFFFFF, 0.4);
        scene.add(ambientLight);
        cubes = [];
        cubeGeometry = new THREE.BoxGeometry(1,1,1);
        cubeMaterial = new THREE.MeshLambertMaterial();
        for(var i = 0; i < 3; i++){
          cubes.push(new THREE.Mesh(cubeGeometry, cubeMaterial));
          cubes[i].position.set(1 - i, 1 - i, 1 - i);
          scene.add(cubes[i]);
        }
      }

      //Resize window on size change
      window.addEventListener('resize', function(){
        var width = window.innerWidth;
        var height = window.innerHeight;
        renderer.setSize(width, height);
        camera.aspect = width/height;
        camera.updateProjectionMatrix();
      });

      //Render the scene
      function draw(){
        holoplay.render();
      }

      //Game loop
      function RunApp(){
        requestAnimationFrame(RunApp);
        draw();
      }

      init();
      RunApp();

    </script>
  </body>
</html>

その他ご質問やご意見がございましたら、future@lookingglassfactory.com.までメールをお送りください。