JS memo

お洒落にJavaScript。

2019年6月11日5:11

Zdogで可愛いキャラクターを3D化してみた

メインビジュアル

Zdogで可愛いキャラクターを3D化してみた

JavaScriptを使って簡単に3Dアニメーションを書くことができるライブラリー「Zdog」を使ってくるくる回転するミニオンを描いてみました。

目次

  1. Zdogを使って作った作品
  2. Zdogとは
  3. 作成手順
  4. まとめ

Zdogを使って作った作品

今回Zdogを使って作成したミニオンはこちら▼

See the Pen minion with Zdog by yuki (@yukimonkey3) on CodePen.

Zdogとは

最近話題沸騰のZdogとは一体何でしょうか。

Zdogの公式サイト https://zzz.dog/

公式サイトのキャプチャー

Zdogとはブラウザ上でフラットなデザインを3Dに見せることができる優れたJavaScriptのライブラリーで、canvas要素やsvgを扱うことができます。

公式サイトでは

  • ライブラリーのサイズが小さい(2100行、28KB)ので負担にならない
  • 滑らかな3Dが描ける
  • 実装しやすい(宣言型API)

がメリットだよ!と言っています。

そんなに簡単に高度な3Dがデザインできるのか?と疑いつつ、Twitterでも話題に上がっているのでZdogを実際に使って検証してみました。

作成手順

1. canvas要素を作成

HTMLファイルにZdogを使用して3Dを作成するcanvasをセットします。

<canvas class="zdog-canvas" width="300" height="300"></canvas>

2. ZdogのJavaScriptファイルを読み込む

同じにHTMLファイルにscriptタグでZdogのCDNを記述します。

<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>

3. 3Dを描く場所の指定

先ほどhtmlで指定したcanvasを3Dを描く場所にセットします。

let illo = new Zdog.Illustration({
  element: '.zdog-canvas',
});

4. 頭とメガネバンド

黄色い頭とメガネバンドを描いて土星のような物体を作成します。
この時に黒のメガネバンドを前と後ろの二段階に分けて、前のバンド→頭→後ろのバンドの順で描くと黄色の丸の外側にぐるっと巻いているように描くことができます。

作成手順の図1
// メガネバンド前方
new Zdog.Ellipse({
  addTo: illo,
  diameter: 210,
  quarters: 2,
  rotate: { x:8.05, z:1.5},
  stroke: 13,
  color: '#000',
});
// 黄色の顔
new Zdog.Shape({
  addTo: illo,
  stroke: 200,
  color: '#fcd65b',
});
// メガネバンド後方
new Zdog.Ellipse({
  addTo: illo,
  diameter: 210,
  quarters: 2,
  rotate: { x:8.05, z:4.7},
  stroke: 15,
  color: '#000',
});

5. 顔のパーツ

顔のパーツを描いていきます。

作成手順の図2
// 顔のパーツのグループ
let face_parts = new Zdog.Group({
  addTo: illo
});

// 目の白い部分
new Zdog.Hemisphere({
  addTo: face_parts,
  diameter: 85,
  stroke: false,
  translate: { y:-10,z: 90 },
  color: '#fff',
});

// 目の内側の黒い部分
new Zdog.Hemisphere({
  addTo: face_parts,
  diameter: 40,
  translate: { x:-10, y:-10, z: 100 },
  stroke: false,
  color: '#000',
});

// 目の外側の黒い部分
new Zdog.Ellipse({
  addTo: face_parts,
  diameter: 95,
  translate: { y:-10,z: 100 },
  stroke: 20,
  color: '#000',
});

// 口
new Zdog.Ellipse({
  addTo: face_parts,
  diameter: 70,
  quarters: 1,
  translate: { y: 45, z: 70 },
  color: "#000",
  stroke: 10,
  rotate: { z: 2.5},
});

6. レンダリングとアニメーション

最後にレンダリングして、x軸を中心に回転するアニメーションをつけます。

//レンダリング
illo.updateRenderGraph();

// アニメーション
function animate() {
  illo.rotate.x += 0.03;
  illo.updateRenderGraph();
  requestAnimationFrame( animate );
}
animate();

完成〜!

3Dキャラクター完成図

まとめ

「びっくりするぐらい簡単。」

Zdogで3Dをデザインしてみた率直な感想です。疑ってすみませんでした。20分ほどしか作業していないのにこれだけ滑らかで可愛い3Dをデザインすることができました。
ただ、あくまでも擬似的なので要素同士の位置関係が回す角度によっては適切に見えないことがあります。例えばこのミニオンをy軸で回すとメガネのバンドの前後関係がずれてしまいます。
もし解決策を発見したら教えてください!