STERFIELD

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

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

Webデザイナー兼コーダー出身のフロントエンド開発者です。 UXデザインやチーム開発の効率化など、勉強中です。

SHARE

合わせて読みたい