1. HOME
  2. ブログ
  3. IT技術
  4. three.jsではじめての3D図形を描画しよう!

three.jsではじめての3D図形を描画しよう!

three.jsの基礎

インタラクティブでリアルな3D図形の描画に使えるフレームワークが「three.js」です。

three.jsでは、図形の描画は、次のように書いていきます。

(1) renderer=「描画エンジン」(THREE.WebGLRendererクラス)
(2) scene=「画面」(THREE.Sceneクラス)
(3) camera=「カメラ」(THREE.PerspectiveCameraクラス)
(4) 上記の文の呼び出しの前に、「描きたい3D図形」を準備しておく。

(4)の図形については、「形」と「質感」を設定し、作成していくことになります。

three.jsでは、最低この4つの要素をつくれば、3D空間内に図形を描画することができます。

それでは、早速作っていくことにしましょう!

【three.jsの公式サイト】
https://threejs.org

球体を描いてみよう!

まずは、球体を描くコード全体を示してみたいと思います。

試しに、HTMLファイルを用意して、貼り付けて実行してみてください。

こちらのコードにつきましては、次の章で詳しく解説していきたいと思います。

表示画面

画面には、以下のような「球体」が表示されるかと思います。

コード解説

それでは、コードについて解説していきたいと思います。

まずは、図形を表示する要素を用意します。

canvas要素を配置

まずは、divを用意します。

そこにレンダラーが生成するcanvas要素を配置します。

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

cdn経由でthree.jsライブラリを読み込みます。

また、ページ読み込み時にコールするstartThree()関数にthree.jsの処理を書いていきます。

レンダラーを作る

つぎに、WebGLのレンダリング(描画)をするためのレンダラーを作成します。

「サイズ」「背景色」「アンチエイリアス」「解像度」などが設定できます。

シーンを作る

上記のように、シーンを作ります。

シーンとは、描画の対象となるスペースです。

このように、描く図形を追加していくことで、図形が描画されます。

カメラを作る

また、シーンをどのように見るかという設定がカメラです。

「縦方向の視野角」「アスペクト比」を指定して作成します。

球体を作る

それでは、実際に描く図形を作っていきましょう。

図形は、「形状」と「質感」を合わせたオブジェクトとして作成します。

ここでは、球体を作成したいと思います。

描画する

最後に、レンダラーのrender()メソッドの引数にシーンとカメラを渡して、図形を描画します。

以下のような、画像が表示されます。

以上が、three.jsによる3D図形描画の手順となります。

今回は、基礎の基礎ですが、今後は、色々な3D図形を動かしていければと思っています。

こちらの記事もオススメ!

書いた人はこんな人

ライトコード社員ブログ
ライトコード社員ブログ
「好きなことを仕事にするエンジニア集団」の(株)ライトコードです!
ライトコードは、福岡、東京、大阪の3拠点で事業展開するIT企業です。
現在は、国内を代表する大手IT企業を取引先にもち、ITシステムの受託事業が中心。
いずれも直取引で、月間PV数1億を超えるWebサービスのシステム開発・運営、インフラの構築・運用に携わっています。

システム開発依頼・お見積もりは大歓迎!
また、WEBエンジニアとモバイルエンジニアも積極採用中です!

ご応募をお待ちしております!

関連記事

採用情報

\ あの有名サービスに参画!? /

バックエンドエンジニア

\ クリエイティブの最前線 /

フロントエンドエンジニア

\ 世界を変える…! /

Androidエンジニア

\ みんなが使うアプリを創る /

iOSエンジニア