Web初心者がGrimore.jsでクリスマスツリーを作ることにした #JavaScript

この記事について

Grimore.jsで簡易のクリスマス（に使う）ツリーを作ります

イントロダクション

「もう明日はクリスマスということで，クリスマスツリー作るぞー！」
ってやる気になったのはいいものの，家に作るのは邪魔だし……．

友人「Grimore.jsで作ろうず！あ、作製したらアドベントカレンダーに投稿してね」
私「ｱｯ､ﾊｲ」

ということでGrimore.jsでクリスマスツリー作ります．

なお、Grimore.jsについての概要は，
私より詳しい方がアドベントカレンダーに書いている思うのでここでは省略します．

1. 根元の色を変える

以下のコードを入力すると，下のような青い円柱が表示されます．

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>クリスマスツリー</title>
    <script src="https://unpkg.com/grimoirejs-preset-basic@1.5.0/register/grimoire-preset-basic.min.js" charset="utf-8"></script>
    <link href="./index.css" rel="stylesheet">
    <script src="./grimoire.js" charset="utf-8"></script>
  </head>
  <body>
    <script type="text/goml" src="./grimoire.goml" id="canvas"></script>
  </body>
</html>

grimoire.goml

<goml width="fit" height="fit">
    <geometry name="cylinder" type="cylinder" />
    <scene>
        <camera class="camera" near="0.01" far="40.0" aspect="1.5" fovy="45d" position="0,0,20">
            <camera.components>
                <MouseCameraControl/>
            </camera.components>
        </camera>
        <mesh geometry="cylinder" position="0,0,0" scale="3,3,3" color="#6a5acd"/>
    </scene>
</goml>

なおこのコードは，Grimoire.jsのコードを少しイジっただけのものです．

しかし、ツリーの根本が青色というのは色々とおかしいので、茶色にします。また，scaleの値も変えてみたいと思います．

index.html

（前略）
    <mesh geometry="cylinder" position="0,0,0" scale="3,3,3" color="#6a5acd"/>
（後略）

の部分を、

index.html

（前略）
    <mesh geometry="cylinder" position="0,0,0" scale="1,3,1" color="#734333"/>
（後略）

と変更します．
すると，ツリーの根元っぽい形が出来上がりました！

2. ツリーの草の部分を作成する

まず，ツリーの草の形に近い円錐を作成します．
コード中のcylinderを作成しているスクリプトの下に，円錐を作成するスクリプトを書きます．
今回追加した部分は，２行目の"<geometry name= ..."と11行目の"<mesh geometry= ..."から始まる行です．

index.html

<goml width="fit" height="fit">
    <geometry name="cylinder" type="cylinder"/>
    <geometry name="cone" type="cone"/>
    <scene>
        <camera class="camera" near="0.01" far="40.0" aspect="1.5" fovy="45d" position="0,0,20">
            <camera.components>
                <MouseCameraControl/>
            </camera.components>
        </camera>
        <mesh geometry="cylinder" position="0,0,0" scale="1,3,1" color="#734333"/>
        <mesh geometry="cone" position="0,3,0" color="green"/>
    </scene>
</goml>

草生える〜（小さい）
ので草の部分大きくします．

index.html

（前略）
     <mesh geometry="cone" position="0,3,0" color="green"/>
（後略）

の部分を、

index.html

（前略）
     <mesh geometry="cone" position="0,3,0" color="green" scale="4, 4, 4"/>
（後略）

と変更します．

それっぽく見えるようになりましたが，これをさらにツリーぽく見せたいと思います．
そのために，アトリビュートのdivideを追加します
やることは簡単で，3行目の

index.html

（前略）
     <geometry name="cone" type="cone"/>
（後略）

の部分に対して，

index.html

（前略）
     <geometry name="cone" type="cone" divide="7"/>
（後略）

といったように，後ろにアトリビュートを追加すればいいだけなんです！
こうすると，先程までの無機物なツリーが...

ということで、クリスマス（に使う）ツリーが完成しました！