Codeリーダブルコード開発補助php-cs-fixertiger2012.07.223Dレンダリングエンジンthree.jsをさわってみましたJavaScriptこんにちわ。Facebookを担当しています高橋です。先日、開発合宿に行って参りまして、『three.js』をさわってみたので簡単にご紹介したいと思います。three.jsとはhttp://mrdoob.github.com/three.js/オープンソースのJavascript3Dレンダリングエンジンです。こんなことやこんなことがJavascriptで実装できちゃうすごいやつです。簡単なコードで3Dレンダリングを行えるのはもちろんですがレンダリングの方式をWebGL、canvas、SVGから選択することができます。いずれもHTML5の技術ですが、まだまだブラウザのサポート状況はまちまちですのでブラウザによって方式を動的に変えるということも可能になります。WebGL以外は処理能力はかなり落ちてしまいますのであまり複雑なことはできないかもしれません。three.jsに登場する代表的概念three.jsを操るには理解しないといけない概念がいくつかあります。その代表的なものを説明したいと思います。・シーン簡単にいうと”空間”というところでしょうか。このシーンに以下に説明するオブジェクトやライトを配置していくという考え方になります。・カメラブラウザにはカメラから見た空間が投影されます。位置(x,y,z)とカメラの投影方法が定義されます。投影の方法はPerspective(遠近法)とOrthographic(正射法)の二つがあります。・レンダラーブラウザ上の描画領域(縦、横サイズ)とレンダリングの方式を定義するものです。レンダリングの方式は先述でも触れてますが、WebGL、canvas、SVGから選択することができます。レンダリングする際はシーンとカメラを指定します。・オブジェクト線や面、立体など描画される形のあるものです。・マテリアルオブジェクトの表面を表現するものです。光を反射する素材や画像(テクスチャ)などがあります。光源の種類によって位置、強さ、色などが定義できます。光源の種類はスポットライトや環境光などがあります。コード例では長々と説明しましたが、実際のコードで試していきたいと思います。シンプルな球体を表示してみます。three.jsはこちらでダウンロードできます。);}</script></body></html>ブラウザで動かしてみるとこんな感じです。3Dっぽくないですね。ライトを設置してみます。以下のコードinit()内に追加します。//シーンに追加こんな感じになります。雰囲気が出てきましたね。表面にテクスチャを施して金属の球体っぽくしてみます。マテリアルを作成しているあたりを以下のように変更します。テクスチャおー、いい感じですね。テクスチャは任意の画像を使えるのでこんなこともできちゃいます。最後にさらにオブジェクトを動かしたり、カメラを動かしたりアニメーションさせることも簡単にできちゃいます。これだけのコードでこんなことができるなんてすごいですね!three.jsはドキュメントがあまり整理されていないのでそこは期待できないですが、ソースに使い方が書いてたりサンプルが豊富なのでなんとかなります。アライドアーキテクツではエンジニアを随時募集しております。新技術が大好きという方はぜひ。採用サイトはこちらです。tiger最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。このブログを口実に無理矢理新しい技術に触れていきたいと思っています。US私たち”アライドアーキテクツのエンジニア”は”世界をよりよく変えたい”という想いを強く持ちながらWebサービスを創っています。”日本発、世界的なWebサービスを創る”ことをエンジニアチームは本気で考え、毎日チャレンジしています。