three.jsのすすめ – 簡単な立方体の表示

前回は、three.jsをダウンロードしてHTMLファイルに読み込むところまで行いました。今回は、前回のコードをベースに簡単な立方体を画面に表示させたいと思います。

天下り的ですが、立方体を表示させるコードは次のようになります。

このように、three.jsで3Dモデルを表示するための基本的な流れは

1. シーンの作成
2. カメラの作成
3. メッシュ(物体)を作成してシーンへ追加
4. レンダラーを作成して描画

となります。上から順に見ていきましょう。

1. シーンの作成

まず、シーンを作成します。シーンとは、表示させたいすべての物体と光源が含まれる場を定義するオブジェクトです。今回のように、表示させたい物体が一つの場合でも作成する必要があります。

2. カメラの作成

次に、カメラを作成します。カメラとは、先ほど作成したシーンをどのように画面上に表示させるかを定義するオブジェクトです。詳しくは次回以降にご説明しますが、今回の場合は現実世界と見た目が近いPerspectiveCamera(投資投影カメラ)を使用し、以下のパラメーターを設定しています。

視野角 90
描画される領域の縦横比 window.innerWidth / window.innerHeight

(window.innerWidth, Heightはブラウザの表示領域の幅と高さです)

どのくらい近くから描画するか 1
どのくらい遠くまで描画するか 10000
カメラの位置の空間座標 (400, 300, 1000)

3. メッシュ(物体)を作成してシーンへ追加

次に、メッシュを作成します。メッシュという名前ですが、表示させたい物体(今回であれば立方体)のことです。メッシュは、形状を定義するジオメトリと表面の見え方を定義するマテリアルで構成されます。今回の場合は、ジオメトリとして縦横高さがすべて400のBoxGeometry(直方体ジオメトリ)、マテリアルとして白色(16進数のリテラルで表記)のワイヤフレームのMeshBasicMaterial(影が付かない基本的なマテリアル)を指定しています。メッシュを作成したら、シーンに追加するのを忘れないようにします。

4. レンダラーを作成して描画

最後に、レンダラーを作成します。レンダラーは、作成したシーンとカメラを基に、3DCGを画面に描画するためのオブジェクトです。作成したレンダラーは、HTMLのDOM要素に追加する必要があり、今回の場合はbodyタグに追加しています。レンダラーのrenderメソッドをシーンとカメラを引数として実行することで描画が行われます。(ページトップの画像が実際に描画された3Dイメージです。)

どんなに複雑なモデルであっても基本的な流れは同じです。three.jsを使うと、いかに簡単に3Dモデルを表示させることができるか、ご覧いただけたのではないでしょうか。

次回以降は、three.jsに登場する各オブジェクトの詳細について見ていきたいと思います。


“three.jsのすすめ – 簡単な立方体の表示” への2件の返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です