다음 주는 광복절입니다. 이날이면 다들 집이나 아파트 창밖에 태극기를 내걸죠. 이날을 기념할 겸, JavaScript 실력도 갈고닦을 겸, 눈여겨보던 유사 3D 라이브러리를 한번 써 보기로 했습니다.
광복절(8월 15일)은 1945년 일제강점기가 끝난 것을 기념하는 날이죠. Zdog은 <canvas>나 SVG에 3D 느낌의 일러스트를 그리는 작은 JavaScript 라이브러리입니다. 도형은 실제로 3D 공간 안에 놓이고 3D 물체처럼 돌아가지만, 그려지는 건 평면 도형이라 3D 렌더링이라기보다 돌려 볼 수 있는 평면 일러스트에 가깝습니다. 깃발처럼 단순한 걸 만들기에 딱 맞죠.
Zdog 최소 예제#
도형 두 개, 드래그로 회전, 그리고 애니메이션 루프입니다.
<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.
