3DモデリングWebアプリの作り方(2)「3DモデリングWebアプリを開発」

3DモデリングWebアプリの作り方(2)「3DモデリングWebアプリを開発」

平田孝広
平田孝広 (ID263) 公認maker 2014/07/09
0

前回( https://media.dmm-make.com/item/907/ )に続き、今回は3DWebプログラミングの方法と、簡単なコーディングを行うところまで説明します。

Web上で3D描画をするには?

今回、3DモデリングWebアプリを作るにあたって
「three.js( http://threejs.org/ )」を使用します。

three.jsというのは、3次元の表現をとても楽に開発できるMITライセンスのjavascriptライブラリです。

(three.jsサイトの左にあるリストの「examples」に、色々なサンプルがあるので興味のある方は確認してみましょう!)

簡単なサンプルコードを触ってみる

three.jsを使った簡単なサンプルコードを、jsdo.itという(Web上でHTML、CSS、JavaScriptを記述してその場で実行できる)Webサービスに用意しましたので実際に触ってみましょう。
http://jsdo.it/dengurix2/6mkm

上記リンク先をChromeで開いて、画面右の再生ボタン(もしくは上部「Play」)
をクリックすると、右の画面に直方体(実際には立方体)が表示されます。

操作方法は、マウス左ボタンドラッグで回転、マウスホイールで前後移動、マウスボタン右ドラッグで上下左右に移動できます。

右上の「download」ボタンクリックすると、cube.stlというファイルがダウンロードされます。cube.stlファイルは、実際に表示されている直方体の3Dデータ(stlフォーマット)です。(「download」が表示されない場合は「Open Controls」をクリックしてください)

3Dデータを確認してみる

次に、ダウンロードした3Dデータを前回お伝えしたMeshLab( http://meshlab.sourceforge.net/ )というソフトウェアを使って読み込んで確認してみます。

リンク先のページの右のリストの「Download V1.3.3」の下から、ご使用のパソコン環境をダウンロードして、ソフトウェアを起動してください。起動後、上部メニュー「File」>「Import Mesh」で、先ほどダウンロードしたcube.stlを選択すると画面に直法体が表示されます。マウス右ドラッグで回転できます。

(MeshLabでcube.stlを表示した状態)

サンプルコードの説明

では、どういう風にアプリが作られているかご説明しましょう。
先ほどのサンプルコードの左画面上部の「javascript」をクリックすると実際に直方体を描画しているソースコードが表示されます。ソースコードの流れは下のようになります。

・全体で使用する変数(数字や文字やオブジェクトが入る)を用意
・実行する関数を記述
・初期化する関数:(最初に一度だけ実行される)
 - htmlの設定
 - レンダラ(描画)の設定
 - 空間(シーン)を用意
 - カメラを用意してシーンに配置(マウスでカメラを操作する設定も)
 - ライトを用意してシーンに配置
 - ジオメトリ(オブジェクト)を作ってシーンに配置
・ループする関数:(何回も実行)
 - カメラからの見えるシーンを描画

実際に直方体を描画している箇所は、72行目〜76行目です。

形状を変更してみる

プログラミングの事始めとして、直方体の形状を変更してみましょう。

サンプルコードを修正するには、画面右上部の「Fork」と書いた赤いボタンをクリックしてください。jsdo.itを初めて使用する場合はログインする必要があります。

Forkができると、jsdo.itの自分のアカウント上で編集出来るようになります(もし編集できない場合は、左下の黄色い「Edit」ボタンをクリックすると編集できるようになります)。

「javaScript」をクリックして、72行目のパラメーター
THREE.BoxGeometry( 10, 10, 10 ) ,
の10の数字を変更して、上部の「Save」ボタンをクリックしてみてください。すると直方体のサイズが変更して表示されます。パラメーターは、左からx軸、y軸、z軸のサイズになります(描画画面の赤、緑、青のラインは、それぞれx軸、y軸、z軸を表しています)。

右上の「download」ボタンをクリックすれば変更した3Dデータがダウンロードできますので、MeshLabで確認してみてください。
ソースコードをダウンロードしたい場合は、上部の「Finish Editing」をクリックして、2つの画面の下に表示される「Download」をクリックするとhtml、javascript、CSSの各ファイルがダウンロードできます。

以上が3DモデリングのWebアプリのとても基本的な説明になります。

次回は、3Dフォーマットや別の形状の作り方など説明していきたいと思います。

補足資料

three.jsを使った3Dプログラミングについて、もっと詳しく知りたい場合は下記をご参照ください。

書籍:
『three.jsによるHTML5 3Dグラフィックス〈上〉―ブラウザで実現するOpenGL(WebGL)の世界』
http://www.amazon.co.jp/three-jsによるHTML5-3Dグラフィックス%E3%80%88上〉―ブラウザで実現するOpenGL-WebGL-の世界-遠藤/dp/4877833242/

『three.jsによるHTML5 3Dグラフィックス 下―ブラウザで実現するOpenGL(WebGL)の世界』
http://www.amazon.co.jp/three-jsによるHTML5-3Dグラフィックス-下―ブラウザで実現するOpenGL-WebGL-の世界/dp/4877833315/

参考にしてくれた記事

記事が登録されていません。
この記事を参考にして、新しく記事を投稿しよう!

違反について