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図形を動かしていければと思っています。

ライトコードよりお知らせ

にゃんこ師匠にゃんこ師匠
システム開発のご相談やご依頼はこちら
ミツオカミツオカ
ライトコードの採用募集はこちら
にゃんこ師匠にゃんこ師匠
社長と一杯飲みながらお話してみたい方はこちら
ミツオカミツオカ
フリーランスエンジニア様の募集はこちら
にゃんこ師匠にゃんこ師匠
その他、お問い合わせはこちら
ミツオカミツオカ
   
お気軽にお問い合わせください!せっかくなので、別の記事もぜひ読んでいって下さいね!

一緒に働いてくれる仲間を募集しております!

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

当社のモットーは「好きなことを仕事にするエンジニア集団」「エンジニアによるエンジニアのための会社」。エンジニアであるあなたの「やってみたいこと」を全力で応援する会社です。

また、ライトコードは現在、急成長中!だからこそ、あなたにお任せしたいやりがいのあるお仕事は沢山あります。「コアメンバー」として活躍してくれる、あなたからのご応募をお待ちしております!

なお、ご応募の前に、「話しだけ聞いてみたい」「社内の雰囲気を知りたい」という方はこちらをご覧ください。

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

採用情報はこちら

関連記事