Fresopiya
場所にもお金にも時間にも、何にも縛られない自由な状態になったら一体人間は何をしてどこに向かうのか。

まずはとにかく自由を目指すエンジニアのブログです。
「哲学」と「プログラミング」と「政治経済」、「ブログ」がメインになるかと。
Three.js

【Three.js】Web上で3Dオブジェクトの実装方法

どうも、とがみんです。

3次元コンピューターグラフィックス作るの楽しそうだなと思い、勉強することにしました。

この記事では、「Three.js」を利用して立方体を回転させるプログラムを紹介していこうと思います。


実装する物

今回実装するのは、以下のような立方体が回転している物です。

「HTMLファイル」と「JSファイル」は以下のようになっています。

次に、3Dコンテンツの実装方法と上記コードの説明をしていきます。

3Dコンテンツ実装準備

Three.jsライブラリを読み込む

まず、「Three.js」のライブラリを読み込みます。

CDN(コンテンツ・デリバリー・ネットワーク)で提供されているURLを記述することで、「Three.js」のライブラリを手軽に導入することができます。

canvas要素を用意する

「Three.js」では、HTML5のcanvas要素を利用します。作成した3Dコンテンツはcanvasタグの中に描画されます。

JavaScriptの読み込み

3Dコンテンツは、ページの読み込みが終わってから実行させています。「JavaScript」のファイルに以下のコードを記述し、init()関数の中のコードが、htmlページの読み込み完了時に呼び出されます。

3Dコンテンツを表示する関数を、ページロード後以外でも、ボタンを押した時や、画面をリサイズした時に呼び出すこともできます。

次に実際に3Dコンテンツの表示に関わる部分について説明していきます。

3Dコンテンツの制作

3Dコンテンツの制作に当たって、以下のステップがあります。

  • レンダラーの作成
  • シーンの作成
  • カメラの作成
  • ライトの作成
  • 3Dオブジェクトの作成
  • アニメーション

それぞれについて説明していきます。

レンダラーを作成する

WebGLのレンダリングをするためのレンダラーを作成します。レンダリングとは、表示用のデータを元に、内容を整形して表示することです。

このコードで、canvas内に、立方体等の描画がされます。

canvas: document.querySelector(‘#cube’)にて、HTMLファイルに配置したcanvas要素のIDを指定します。

>Window.devicePixelRatio

シーンを作成する

次にシーンを作成します。シーンとは3D空間のことで、3Dオブジェクトや光源を置くための空間です。

カメラを作成する

3Dのコンテンツを制作するにあたって、それをどの視点から観察するかといったものを決めます。

画角:カメラで撮影した際、実際に映る範囲を角度で表したもの。
アスペクト比:縦横の画面比率。

ライトを作成する

ライトを用いることによって、物体に光を当てることができます。
光の色、強さ、光源の位置を以下でしています。

立方体を作成する

3Dのオブジェクトは、形の座標情報のジオメトリと、表面の素材のマテリアルの2つの要素からできており、それらを別々に定義してから、メッシュ(部品・3Dオブジェクト)を作成します。

ジオメトリ:表示する物体の形状。
マテリアル:物体の質感。素材。
メッシュ:部品。ジオメトリにマテリアルを適用させたもの。

アニメーション

次にアニメーションについてです。

初回読み込み時に、tick()関数が呼び出され、その後はrequestAnimationFrame(tick);によって、一定間隔で指定したtick()関数を呼び出します。実行間隔は表示するブラウザに依存します。

以下のコードで、立方体が、x軸、y軸、z軸方向に回転するようになっています。

このようにして、回転する立方体が出来上がりました。

まとめ

「Three.js」を利用して、回転する立方体を作成しました。
今後より複雑な3Dオブジェクトも作っていきたいです。

参考文献

>簡単なThree.jsサンプルを試そう