Blog

WebGLのJSライブラリー「Three.js」を使ってみた

前回のブログでご紹介したWebGLJSライブラリーである「Three.js」を実際に使ってみました。

使い方は、こちらのサイト→(多彩な表現力のWebGLを扱いやすくする「Three.js」)を参考にさせていただきました。

 

↓こちらがデモです(Google Chromeでの閲覧推奨)。

DEMO

※Safariで見る場合は、「Safari」→「環境設定」→「詳細」で「メニューバーに”開発”メニューを表示」のチェックボックスにチェックを入れ、「開発」→で「WebGLを有効にする」にチェックを入れます。

 

方法

まずはこちら(Three.js公式サイト)からThree.jsをダウンロードします。

ダウンロードできたら、ページを載せるサーバにアップロードして、HTMLでダウンロードしたThree.jsを読み込みます。

今回はミニファイされたthree.min.jsを読み込んでいます。

 

HTML

Three.jsではbody直下に描画領域を直接読み込むことが多いようなのですが、

自由な場所に配置することを想定して、divを設置し、こちらに描画領域を読み込むことにしました。

 

CSS

今回は空に浮かんでるイメージにしたかったので、

空色のグラデーションをdivに設定しました。

 

ではいよいよ本体となるJSです。

JavaScript

 

基本的な流れは、

  1. レンダラーの初期化
  2. シーンの作成
  3. カメラの作成
  4. ライトの作成
  5. 表示する物体の作成
  6. レンダリング

となります。

「Three.js」を使うと、これらの設定を分かりやすく設定することができます。

私は今回初めてWebGLを扱いましたが、とても馴染みやすい印象を感じました。

初めてWebGLに挑戦される方には、とてもオススメです。

 

今回は簡単な直方体を作成しましたが、「Three.js」は3Dソフトで作成したモデルデータを、

変換後読み込むためのコンバータなどもいくつか用意されており、

比較的簡単にWebGLで表示することができるようです。

次回はモデルデータの読み込みに挑戦してみたいと思います。

 

Author Profile

ninomiya
ninomiya

Webデザイナー兼コーダーです。
イラストを描くのも好きです。
SVGとCanvasを使ったWEBアプリにも興味があります。
よろしくお願いいたします。

» 投稿一覧
  • Launch Cart次世代ECサイト構築システム 初期月額無料
  • LaunchMovie ECに特化した動画制作サービス

Archive

ページTOPへ