3DモデリングWebアプリの作り方(1)

3DモデリングWebアプリの作り方(1)

平田孝広
平田孝広 (ID263) 公認maker 2014/05/28
0

3DモデリングできるWebアプリを作る方法を説明します。

第1回

はじめまして、普段はフリーランスのソフトウェアエンジニアを生業としながら、趣味で作品制作もやってます。

子供の頃から幾何学的形状に興味があり、大学ではプロダクトデザイン先攻、仕事でCGソフトウェア開発してたこともあり、2013年1月に下記メビウスリングデザイナー(好みのメビウスリングをWeb上でデザインでき、デザインした3DデータをダウンロードできるWebアプリ)というのをリリースしました。

>メビウスリングデザイナー
http://fabable.net/ring/mebius/

操作方法

・ブラウザはChromeかFirefoxをご使用ください。
・マウス操作:回転(左ボタンドラッグ)、前後移動(中ボタンドラッグ)、上下左右移動(右ボタンドラッグ)
・左のメニューで好みのメビウスリングをデザインし、左上部の「3D Data Dowinload」ボタンで、作成した3Dデータをダウンロードできます。

実際に銀で生成したのが右下の画像です。

最初NASA主催のハッカソン( Inter National Space Apps Challenge Tokyo 2012)で参加したチームで制作したastro-ornament(指定した日時の3つの惑星の位置からできる3角形をある軸に回転してできるリングをデザインし3Dデータを生成し3Dプリントしてアクセサリーを作る)のソフトウェアを提案し開発しました。そのWebバージョンを作ろうとして、Maker Faire Tokyo 2012でMebius Ring Designerという名で展示(その場でリングをデザイン、3Dプリンターを使ってその場で3Dプリントし販売)したのがきっかけになってます。

>Inter National Space Apps Challenge Tokyo 2012
http://tokyo.spaceappschallenge.org/

>astro-ornament
http://www.a-ornament.com/

>Maker Faire Tokyo 2012
http://makezine.jp/event/mft2012/

そのような3DモデリングWebアプリの作り方をなるべく分かりやすく説明していこうと思ってます。

Webアプリ作りに必要なもの

3DモデリングWebアプリ作っていくにあたって、下記のものが必要になります。
・パソコン:WindowsかMacのパソコン
・インターネット環境
・ブラウザ:ChromeかFireFox(なるべく最新バージョンをご使用ください)
・MeshLab:3Dデータ編集アプリケーション(生成した3Dデータを確認するのに使用します)

ブラウザでChromeを使用したい場合は、下記URLからダウンロードしてください。
http://www.google.co.jp/intl/ja/chrome/browser/
FireFoxでしたら、下記URLからダウンロードしてください。
http://www.mozilla.jp/firefox/

MeshLabは、http://meshlab.sourceforge.net/ の右のDownloadの下のリストから、使用するパソコンに合ったものをダウンロードしてください。(下記画像参照)

次回からは実際にWebアプリを作っていくところを説明していきますので、よろしくお願いします。

参考にしてくれた記事

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

違反について