↓ 본문으로 건너뛰기

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 최소 예제
#

도형 두 개, 드래그로 회전, 그리고 애니메이션 루프입니다.

<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.