↓ メインコンテンツへスキップ

Zdog JavaScript Frontend

Zdog:疑似3DのJavaScriptライブラリで光復節の太極旗を掲げる

Zdogはcanvas・SVG向けの小さな疑似3Dエンジンです。図形は3D空間にあるのに、描画はフラット。最小限のコード例と、光復節に合わせて太極旗を掲げたCodePenを載せています。

Zdog:疑似3DのJavaScriptライブラリで光復節の太極旗を掲げる

来週は韓国の光復節です。この日は昔から、家やアパートの窓の外に国旗を掲げる習わしがあります。せっかくなので、この日の記念とJavaScriptの腕磨きを兼ねて、気になっていた疑似3Dライブラリを試してみることにしました。

光復節(8月15日)は、1945年に日本の植民地支配が終わったことを記念する韓国の祝日です。Zdogは、<canvas>やSVGに3Dっぽいイラストを描くための小さなJavaScriptライブラリです。図形は実際に3D空間に置かれていて3Dの物体のように回転しますが、描かれるのは平面の図形なので、3Dレンダリングというより、回して見られるフラットなイラストに近い見た目になります。旗のようなシンプルなものにはちょうどいい道具です。

Zdogの最小限の例
#

図形2つ、ドラッグで回転、そしてアニメーションのループです。

<canvas class="zdog-canvas" width="240" height="240"></canvas>
<script src="https://unpkg.com/zdog@1/dist/zdog.dist.min.js"></script>
<script>
  const illo = new Zdog.Illustration({
    element: '.zdog-canvas',
    dragRotate: true, // drag to turn the scene
  });

  // a square, pushed back
  new Zdog.Rect({
    addTo: illo,
    width: 80,
    height: 80,
    translate: { z: -30 },
    stroke: 8,
    color: '#0047a0',
  });

  // a filled circle, pulled forward
  new Zdog.Ellipse({
    addTo: illo,
    diameter: 60,
    translate: { z: 30 },
    stroke: 8,
    color: '#cd2e3a',
    fill: true,
  });

  function animate() {
    illo.rotate.y += 0.02;
    illo.updateRenderGraph();
    requestAnimationFrame(animate);
  }
  animate();
</script>

図形はaddToでシーンに追加します。3Dらしさを生んでいるのはtranslate.zで、シーンを回すと円が四角形の前に回り込んできます。updateRenderGraph()が全体を更新して描き直すので、ループの中で呼んでいます。

公式ドキュメント
#

https://zzz.dog/

使ったコードはCodePenで見られます。

作ってみたもの
#

See the Pen 광복절 by Jared Lynskey (@jared-lynskey) on CodePen.