見つけたことをぶん投げる所

jsをメインとした記事を投げる予定。qiitaでやれ事案

新しくなった jThree v3 を使ってみた

注:この記事で使うjThreeはβ版でさえないです

jThree とは、jQuery 的な簡単な記法で web3D のオブジェクトを生成・操作するためのライブラリです。

今まで、というか jThree v2 までは、Three.js をラップすることで動作してましたが、

jThree v3 では独自開発によって webgl を弄っているようで、だいぶ高速化されたようです。

その jThree は、来月の初めの方でベータ版リリースという予定だそうですが、それさえ待たずに今回は試しに弄ってみました。

リンク達

reference: http://jthree.io/

jThree本体のgithub: https://github.com/jThreeJS/jThree

作ってみたサンプル(今回解説するコード): https://github.com/ahyahya/jThree-Under-Development-Sample

導入

npm 及び nodejs の環境は整っているものとします。

作業ディレクトリで、

$ git clone git@github.com:jThreeJS/jThree.git
$ cd jThree
$ npm install
$ npm run build

を実行すると、wwwroot ディレクトリに j3.js が生成されます。

jThree 開発用のデバッガで遊んでみるのもいいですが、今回は実践的な使い方を学ぶ目的のため、やめておきます。

もし j3.js をビルドするのが面倒くさいという場合は、僕が既にビルドしたものをダウンロードするのでも良いと思います。

こちらです:https://raw.githubusercontent.com/ahyahya/jThree-Under-Development-Sample/master/src/packages/j3.js

使い方

jThree での描画は、<canvas>内に行われます。

また、その canvas 内の3Dオブジェクトの構造などは、HTMLのようなノリで、

GOML(Geometry Object お察しLanguage)という独自記法によって管理されます。

よって、1つのhtmlに対して1つのgomlファイル、さらにそのgomlファイルを操作するためのjsファイルを用意します。

project-root/
 ├ src/
 │ ├ index.html
 │ ├ index.goml
 │ ├ index.js
 │ └ packages/
 │   └ j3.js
 └ app.js

今回はこのようなディレクトリ構造にしてみました。

本来は app.js は不要ですが、COR の都合上、http 上で作業しないとうまく動かないのでここでサーバを立ててます。

では実際に書いていきましょう。おもむろにindex.htmlを用意します。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8"/>
    <script type="text/javascript" src="./packages/j3.js" x-goml="./index.goml"></script>
    <script type="text/javascript" src="./index.js"></script>
  </head>
  <body>
    <div id="canvas" class="canvasContainer"/>
  </body>
</html>

ターゲットにしたい element に、適当に class を振っておいてください。今回はcanvasContainerです。

jThree と index.goml の読み込みはあんな感じで。

ローカルファイルだと、x-goml="./index.goml"の読み込みの部分で COR に弾かれますん。サーバを後で立てましょう

次に、index.goml を整備しましょう

index.goml

<goml>

  <resources>
    <material type="builtin.phong" name="phongMaterial" diffuse="red" specular="yellow" brightness="30"/>
  </resources>

  <canvases>
    <canvas clearColor="#eee" frame=".canvasContainer">
      <viewport cam="CAM1" id="main" width="640" height="480" name="MAIN"/>
    </canvas>
  </canvases>

  <scenes>
    <scene name="mainScene">
      <camera id="maincam" aspect="1" far="20" fovy="1/2p" name="CAM1" near="0.1" position="(0,8,10)" rotation="x(-30d)"></camera>
      <scenelight color="#333"/>
      <dlight color="#AAA" rotation="y(40d)"/>
      <plight color="white" distance="10" intensity="2" position="6,0,0"/>
      <plight color="white" distance="10" intensity="5" position="0,10,0"/>

      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="3,0,0" rotation="0,0,0"/>
      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="0,0,0" rotation="0,0,0"/>
      <mesh id="rotate-cube" geo="cube" mat="phongMaterial" position="-3,0,0" rotation="0,0,0"/>
    </scene>
  </scenes>

</goml>

注意すべきは、

<canvas clearColor="#eee" frame=".canvasContainer">

のように、さっき割り振った class をこっちの frame に割り当てることです。

scene 内に、実際に置きたいオブジェクトたちを置いていきます。

タグに関しては、referenceを見てください。

また、この時点で、しっかりサーバが立てられれば動作するはずです。

nodejs の koa を使って適当に立てましょう。

まずは必要なパッケージをインストールして、

$ npm i -S koa koa-static

コードを用意

app.js

var koa = require('koa');
var serve = require('koa-static');
var app = koa();

// static file serve
app.use(serve(__dirname + '/src'));

app.listen(process.env.PORT || 4000);
console.log('running on http://localhost:' + (process.env.PORT || 4000) + '/')

そしたら実行して確認しましょう。

$ node app.js

をしたら、ブラウザで http://localhost:4000/ にアクセスし、キューブが描画されてたら成功です。

回転でもさせてみようか

まだ、jThree v3 には jQuery 的な .animate() は実装されていません。(v2にはあります)

ですので、簡易的に attr を setInterval で随時更新してみましょう。

index.js

j3(() => {
  var i = 0;
  setInterval(() => {
    j3('#rotate-cube').attr('rotation', '0,'+i+',0');
    i += 3;
  }, 10);
});

jThree の基本として、j3jQuery$ です。

さっきと同様に実行してみてください。

こんな感じになれば成功です。

f:id:grooyv:20160315033824g:plain

良さげ

この動画は gif なので色合いがアレですが本来はもっと滑らかな色です。