Allied ArchitectsAllied ArchitectsEngineer Blog

3Dレンダリングエンジンthree.jsをさわってみました

2012/07/22 JavaScript

こんにちわ。モニプラ for 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はこちらでダウンロードできます。

ブラウザで動かしてみるとこんな感じです。

全く3Dっぽくないですね。
ライトを設置してみます。

以下のコードinit()内に追加します。

こんな感じになります。

ちょっと雰囲気が出てきましたね。
さらに表面にテクスチャを施して金属の球体っぽくしてみます。
マテリアルを作成しているあたりを以下のように変更します。

おー、いい感じですね。
テクスチャは任意の画像を使えるのでこんなこともできちゃいます。

最後に

さらにオブジェクトを動かしたり、カメラを動かしたりアニメーションさせることも簡単にできちゃいます。
たったこれだけのコードでこんなことができるなんてすごいですね!
three.jsはドキュメントがあまり整理されていないのでそこは期待できないですが、
ソースに使い方が書いてたりサンプルが豊富なのでなんとかなります。

アライドアーキテクツではエンジニアを随時募集しております。
新技術が大好きという方はぜひ。採用サイトはこちらです。

tiger
  • tiger
  • Webエンジニア
  • 最近ではコードを書く機会がめっきり減って来てプログラマー35歳限界説に恐怖しています。 このブログを口実に無理矢理新しい技術に触れていきたいと思っています。

RELATION ENTRY

シェルスクリプトだけでMySQLのクエリ結果をメールで通知する

シェルスクリプトだけでMySQLのクエリ...

2014/10/9 Shell

こんにちは。tigerです。 8月のことになりますが僕がPM的な立ち位置で関わっているGreenSnapという新サービスをリリースいたしました。 今回はそのときに作成したシェルスクリプトを晒しちゃいたいと思います。 はじめに WebサービスにつきものなのがKPIですよね。 KPIは...

続きを読む

Facebook発の新言語HackをHeroku上で動かす

Facebook発の新言語HackをHe...

2014/06/17 PHP

こんにちは。tigerです。 最近ではブログのネタが思いつかず、このブログを引退しようかと本気で考えています。 今回は奇跡的に思いついた「Hack × Heroku」をお送りしたいと思います。 Hackとは http://hacklang.org/ 2014年3月に発表されたFac...

続きを読む

tigerの記事一覧へ

ページTOPへ