Zdog: thư viện JavaScript giả 3D, và lá cờ Hàn Quốc mừng Gwangbokjeol

Tuần sau là Gwangbokjeol (광복절), ngày Quang phục 15/8 của Hàn Quốc, kỷ niệm ngày đất nước thoát khỏi ách thống trị của Nhật. Theo truyền thống, vào dịp này người ta treo quốc kỳ trước nhà hoặc ngoài cửa sổ căn hộ. Nhân ngày lễ, và cũng để luyện thêm tay nghề JavaScript, tôi thử dùng một thư viện giả 3D khá hay để làm một lá cờ ảo.

Zdog là một thư viện JavaScript nhỏ gọn để vẽ hình minh hoạ kiểu 3D lên <canvas> hoặc SVG. Các hình khối có vị trí thật trong không gian 3D và xoay được như vật thể 3D, nhưng lại được vẽ thành hình phẳng, nên kết quả trông giống một bức minh hoạ phẳng có thể xoay qua xoay lại hơn là một bản dựng 3D (3D render). Làm một lá cờ đơn giản thì rất hợp.

Ví dụ Zdog tối giản

#

Hai hình khối, kéo chuột để xoay, và một vòng lặp hoạt ảnh (animation loop):

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

Mỗi hình được gắn vào khung cảnh bằng addTo, và chính translate.z tạo ra cảm giác 3D: xoay khung cảnh thì hình tròn sẽ vòng ra phía trước hình vuông. updateRenderGraph() cập nhật và vẽ lại toàn bộ, nên nó nằm trong vòng lặp.

Tài liệu chính thức

#

https://zzz.dog/

Toàn bộ mã nguồn của ví dụ này có trên CodePen, bạn cứ vào xem.

Ví dụ của tôi

#