Three.jsを諦めた人のためのWebComponents作りました

先月の7日にPolymerのコードラボがありスタッフ側で参加したんですが、その際空いた時間にというか自分のセッションの時間以外はずっと当日のLTネタとしてthree.jsのWebComponentsを作ってました。

で、なんとなく動くようになったものを実際に触ってると「これ真面目に作ったら結構いいモノになるんでは？」という予感がしてイベント終了後もちびちび機能を作りこんでて、ようやくある程度動くようになってきたので公開します。

http://technohippy.github.io/three-canvas/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="bower_components/webcomponentsjs/webcomponents.js"></script>
    <link rel="import" href="bower_components/three-canvas/dist/three-canvas.html">
  </head>
  <body>
    <three-canvas width="200" height="200" antialias="true" clearColor="#000000" defaultLight="true">
      <three-camera position="0,0,8" lookAt="0,0,0" controls="orbit"></three-camera>
      <three-box name="box" width="1" height="1" depth="1" rotation="0.2,0.2,0" color="#ff0000"></three-box>
    </three-canvas>
    <button onclick="rotateBox()">Rotate a Box</button>
    <script>
    function rotateBox() {
      var canvas = document.getElementsByTagName('three-canvas')[0];
      var threeJsMesh = canvas.scene.getObjectByName('box');
      threeJsMesh.rotation.x += 0.1;
    }
    </script>
  </body>
</html>

これだけの記述でcanvasに立方体を表示してマウスで視点移動させたり、ボタン押下で回転させたりできます。

「Polymerを使ってthree.jsをラップしただけでしょ」と言われたらまさにそのとおりなんですが、「宣言的に3Dのシーンを定義して、複雑な動きや設定が必要であればthree.jsオブジェクトを取り出して使用する」というのは、小規模な3Dの利用に限れば実際なかなかいい感じなのでちょっと試していただきたく。環境にbowerが入ってたらとても簡単で

$ bower install three-canvas

して、HTMLファイルのheadに

<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="bower_components/three-canvas/dist/three-canvas.html">

を追加するだけ。

その後はチュートリアルを参考にいろいろ試していただければ。特にControlsやLoaderの利用、Shaderの定義あたりはキレイにまとめられた気がしてます。

まだ作り始めたばかりなので当然シリアスな用途には向いていません。ただ、three.jsに挑戦して真っ黒なキャンバスから先に進まなかった人は、とりあえずこの辺参考に何かしらのシーンを表示して、そこから取り出したthree.jsオブジェクトを操作してみたりするとモチベーションが保ちやすいのではないかと思います。

基本的にthree.jsを使う際にまず必要になるシーン構築を簡単にするだけのライブラリなので「ラッパーを覚えてもthree.jsの知識が身につかなくて無駄」という心配はそれほどないはずです。後でこのライブラリに依存しないように作り変えたければ、シーン構築部分をthree.jsで置き換えるだけなので大した手間ではないはずですし。

three.jsの機能が豊富すぎてまだまだ実装が追いついていませんが、要望があれば優先的に実装します。お気軽にissue追加またはpullreqください。