JavaScript初心者がGrimoire.jsをつかってみた話 #WebGL

ハンズオンに参加してきました！
そのときに「GrimoireのAdventCalendar参加してよ」と言われるがまま2日、書きます。

作ったもの

月が地球のまわりを回るだけです…

GIFは最初、月が地球の後ろなので出てくるまで時間がかかります。下のソースコードでも読んで気長に待っていただくか、Web版をご覧ください。

Web版(マウスコントロール付き)

タイトルにもある通り、JavaScript初心者でXMLも触ったことないし、サッパリなので、詳しくは公式ページのTutorialとかExampleを参照していただけるとわかりやすいと思います？

Grimoire.jsではXMLベースのGOMLというマークアップ言語で3Dオブジェクトを描画します。

<goml height="fit">
<!--太陽光の表現(http://grimoire.gl/example/phong.htmlからコピペ[※1])-->
    <import-material typeName="phong" src="./index.sort"/>
    <material id="earth-material" texture="earth_day.jpg" type="phong" color="#fff" specular="#555" ambient="#000" sun="n(1,0,-1)" power="1"/>
    <material id="moon-material" texture="moon.jpg" type="phong" color="#fff" specular="#555" ambient="#000" sun="n(1,0,-1)" power="1"/>
<!--太陽光の表現ここまで-->
    <scene>
    <!--カメラの設定-->
        <camera class="camera" near="0.01" far="400.0" aspect="1.5" position="0,5.17638,19.32" rotation="-0.2618,0,0">
            <camera.components>
                <MouseCameraControl />
            </camera.components>
        </camera>
    <!--地球の生成-->
        <mesh id="earth" geometry="sphere" scale="4,4,4" position="0,0,0" rotation="0,0,0" material="#earth-material">
        <mesh.components>
        <!--自転コンポーネントの付与-->
            <Rotation speed="5" />
        </mesh.components>
        </mesh>
    <!--月の生成-->
        <mesh id="moon" geometry="sphere" scale="1,1,1" position="0,0,0" rotation="0,0,0" material="#moon-material">
        <mesh.components>
        <!--自転コンポーネントの付与-->
            <Rotation speed="0.183" initialValue="-90" />
        <!--公転コンポーネントの付与-->
            <Revolution radius="10" speed="0.183" />
        </mesh.components>
        </mesh>
    </scene>
</goml>

<!--[※1]お解りの方も多いかと思いますが、これを動かすにはURL先のindex.sortも必要です。-->

どうだったか

インターネットで公開するならそれなりのクオリティがほしいってだけで太陽光をつけたので、
これがなければ初心者でも多少のJavaScriptとXMLかHTMLの経験でこれくらいの描画はイチから絶対に書けます。

表示する位置の指定はHTMLの、

<!DOCTYPE html>
<html>
<head>
    <title>Grimoire OSK Hands on</title>
    <script type="text/javascript" src="grimoire-preset-basic.min.js"></script>
    <script type="text/javascript" src="main.js"></script>
    <style type="text/css">
        html, body{
            background-color: #000;
            height: 100%;
        }
    </style>
</head>
<body>
    <div style="color: #FFF; font-weight: bold;">速さ調整</div>
    <input type="range" onchange="onSpeedChange(this);" value="10">

    <!--ここ↓のscriptタグ-->
    <script id="main" type="text/goml" src="index.goml"></script>

</body>
</html>

コメントで示したようにscriptタグを書いた位置にタグ内に書いたidに対応したGOMLによって生成されたキャンバスが埋め込まれるので、
簡単でしょ？

あなたのWebサイトをで華やかに彩りませんか？