3Dモデリングソフト、Sculptrisでモデルを作ってHTML5で動かす。

あむちょです。

3Dモデリングに手を出してみました。

PR アプリ作ってます

Unityという3Dゲーム開発エンジンに手をだしたものの、肝心の3Dモデルがないと始まらないので勉強がてらネコを作ったついでに、html5で動かしてみました。

bandicam 2013-08-30 20-30-37-572

今回使ったソフトはSculptrisというもので、なんと言っても簡単な操作が特徴です。粘土をこねる感覚で、説明読まなくても何となく形になります。しかも無料。

Sculptris 公式サイト

あくまでモデリング専用なので、アニメーションといった作業はBlender等のソフトが必要になりますが、Blenderは操作方法が複雑すぎて心が折れます。

bandicam 2013-08-31 05-53-25-503

それに比べてSculptrisは非常にシンプルなインターフェイスです。

bandicam 2013-08-31 05-52-49-331

これにサクッと体を付ける。

bandicam 2013-08-30 20-31-02-150

こいつに色をつけて、どっから見てもネコの完成です。

bandicam 2013-08-31 04-06-52-837

これをUnityにインポートすればゲームで使うことができます。せっかくなので、このネコをHTML5のcanvas上に表示してみました。

さすが20万ポリゴン、すごく重たいです。

3D Cat

jsc3dというライブラリーを使いました。使い方は簡単で、

<br />
    var canvas = document.getElementById(&#8216;cv&#8217;);<br />
    var viewer = new JSC3D.Viewer(canvas);<br />
    viewer.setParameter(&#8216;SceneUrl&#8217;, &#8216;model/cat.obj&#8217;);<br />
    viewer.setParameter(&#8216;ModelColor&#8217;, &#8216;#CAA618&#8217;);<br />
    viewer.setParameter(&#8216;BackgroundColor1&#8217;, &#8216;#FFFFFF&#8217;);<br />
    viewer.setParameter(&#8216;BackgroundColor2&#8217;, &#8216;#383840&#8217;);<br />
    viewer.setParameter(&#8216;RenderMode&#8217;, &#8216;texturesmooth&#8217;);</p>
<p>    viewer.init();<br />
    viewer.update();</p>
<p>    var ctx = canvas.getContext(&#8216;2d&#8217;);</p>
<p>    viewer.onmouseup = function(x, y) {<br />
        viewer.update(true);<br />
    };<br />

モデルデータのobjを指定して、パラメータを設定した後、init()とupdate()で描画されます。いちおうiPhoneでも動きました。

あとは、Blenderでアニメーションをつければゲームで使えそうです(頼んだよあべっち)。

bandicam 2013-08-31 06-28-54-658

どんなゲームを作ろうか。

4 Comments

コメント