来週は韓国の光復節です。この日は昔から、家やアパートの窓の外に国旗を掲げる習わしがあります。せっかくなので、この日の記念と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()が全体を更新して描き直すので、ループの中で呼んでいます。
公式ドキュメント#
使ったコードはCodePenで見られます。
作ってみたもの#
See the Pen 광복절 by Jared Lynskey (@jared-lynskey)
on CodePen.
