ぷい！Zdogで3Dモルカーを実装する

# はじめに
モルカーがかわいくてブラウザ上でつついて遊びたいなと思い、てきとうに検索してたら[Zdog](https://zzz.dog/)という3Dエンジンを見つけたので使ってみました。

# モルカーとは
百聞は一見に如かず!
1話約3分なので見ましょう!
[モルカー1話:バンダイチャンネル](https://www.b-ch.com/titles/7173/)
[モルカー2話:YouTube](https://youtu.be/OQicZA-bU9A)

# 作ったもの
ブラウザ上で動かせる3Dモルカー
[デモ](https://suechon.github.io/molcar/)

# 実装
今回はhtmlファイル一つだけでささっとつくりました
入門的なのはこちらの記事が良かったです
[かわいい3Dエンジン「Zdog」の紹介](https://qiita.com/sushidesu/items/78192e63f9e94a7305f2)

## html

```html
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Zdog Tutorial</title>
    <script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
</head>

  <body>
    <canvas width="500" height="500" class="zdog-canvas"></canvas>
    <script>
     //ここに3Dの実装をしていく
    </script>
  </body>
</html>
```

`<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>`
インストールするのめんどくさかったのでCDN使ってます

## JavaScript
全部は長いので[GitHub](https://github.com/Suechon/molcar)見てください

```js
  <script>
        const mainColor = "#f2ebd1"
        const pink = "pink"
        const brown = "#705444"

        const illo = new Zdog.Illustration({
            element: '.zdog-canvas',
            dragRotate: true
        })
(省略)
        let anchor = new Zdog.Anchor({
            addTo: illo,
        });
        let body = new Zdog.Shape({
            addTo: anchor,
            stroke: 200,
            color: mainColor,
            path: [{ x: 0, y: 0 }
                , {
                arc: [
                    { x: 0, y: 0, z: 0 },
                    { x: 0, y: 0, z: -90 },
                ]
            },],
        })
```
* まず` const illo = new Zdog.Illustration({})`で親インスタンスを生成します
* 次に親となるオブジェクトを決めます。今回は`anchor`をトップにしてその下に`body`があります。以降`body`に対してその他のオブジェクトを紐づけていきます
* [Shape](https://zzz.dog/shapes)はそのままだと球体ですが、pathを使うと直線や曲線を作ることができます。

### arc
arcは楕円曲線をつくれます

```js
new Zdog.Shape({
  addTo: illo,
  path: [
    { x: -60, y: -60 },   // start
    { arc: [
      { x:  20, y: -60 }, // corner
      { x:  20, y:  20 }, // end point
    ]},
    { arc: [ // start next arc from last end point
      { x:  20, y:  60 }, // corner
      { x:  60, y:  60 }, // end point
    ]},
  ],
  closed: false,
  stroke: 20,
  color: '#636'
});

```
![arc.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/22b6f770-2401-3002-a982-8442904e7f1f.png)

赤の点(-60,-60)が始点となり、arcで指定されてる座標(20,-60),(20,20)/(20,60),(60,60)で作られる四角形の中に納まるよう曲線が描画されます。
yは下が+上が-です。
ここではモルカーの体の描画に使いたかったので、直線になるように指定してます。
他には、マズルを作るところでも使用してます。

<br /><br />

```js
   let rightNose = new Zdog.Shape({
            addTo: body,
            path: [
                { x: 10, y: 70, z: 65 },
                {
                    bezier: [
                        { x: 15, y: 60, z: 65 },
                        { x: 10, y: 75, z: 60 },
                        { x: 0, y: 75, z: 60 },
                        { x: 0, y: 85, z: 55 },
                    ]
                },
                { x: 0, y: 85, z: 55 },
            ],
            closed: false,
            stroke: 5,
            color: brown
        });
```
* 鼻…　ωのところのコードです
* ここではベジェ曲線を使用してます
![bezier.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/236151/deab0d23-99db-cc9c-c752-54790a1b77c1.png)
※z軸は省略<br />
座標いまいちですが…<br />
始点(10,70)と終点(0,85)をωのガイドラインとして(0,75)から終点までを鼻の下、始点から(0,75)までが鼻になるようにしてます。<br />
左右あわせてωになるようにしてます。

# 参考
[Zdog公式](https://zzz.dog/)
[かわいい3Dエンジン「Zdog」の紹介](https://qiita.com/sushidesu/items/78192e63f9e94a7305f2) 
# 最後に
3Dのものを作るのは初めてでしたが、わりと直感的に書けるので実装しやすかったです。
細かい描画の実装は難しいのでポテトちゃんとかは作れなさそうです…