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空間内に図形を描画することができます。

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

ミツオカミツオカ
WEB上で3Dが動かせるなんて、なんだか感激・・・!

球体を描いてみよう!

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

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

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

表示画面

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

コード解説

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

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

canvas要素を配置

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

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

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

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

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

レンダラーを作る

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

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

シーンを作る

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

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

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

カメラを作る

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

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

球体を作る

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

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

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

描画する

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

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

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

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

一緒に働いてくれる仲間を募集中!

ライトコードでは、仲間を募集しております!

ライトコードのモットーは「好きなことを仕事にするエンジニア集団」。そのため、あなたがやりたい仕事を全力で応援します。

どうせなら、好きなことを仕事にする方が人生は何倍も素晴らしいものになるはず!また、ライトコードはこれからの会社ですので、みんなで新しい事業や組織を作っていく楽しみもあります。

あなたからのご応募をお待ちしております!

ライトコードでは一緒に働いていただける方を募集しております!
お気軽にご応募ください。

採用情報はこちら

書いた人はこんな人

ライトコードメディア編集部
ライトコードメディア編集部
「好きなことを仕事にするエンジニア集団」の(株)ライトコードのメディア編集部が書いている記事です。

関連記事