Tản bộ đêm ở Kyoto thời gian thực, render gói gọn trong 1 file HTML duy nhất

Màn tản bộ 3D tương tác 5 chương qua một ngôi chùa trên núi ở Kyoto, dựng hoàn toàn trong một file HTML duy nhất mà không cần build step.

Lập trình viên Meng To vừa ra mắt Kage, một dự án WebGL mã nguồn mở đạt 856 star trên GitHub tuần này. Khi bạn cuộn chuột, camera Three.js sẽ dẫn bạn đi dọc con đường núi rợp bóng lồng đèn, những ngôi chùa dựng bằng thuật toán, sương mù và lá rơi. Bối cảnh kết hợp ánh sáng 3D thời gian thực với ảnh nền và các lớp tiền cảnh tĩnh, tạo nên hiệu ứng chiều sâu rất hút mắt.

Vì sao đáng chú ý: Những dự án web kiểu này thường đòi hỏi công cụ build phức tạp, trình quản lý gói và hàng tá thư viện đi kèm. Kage bỏ hết. Toàn bộ CSS, logic tương tác và phần dựng cảnh 3D đều được nhét thẳng vào index.html cùng một file script Three.js local. Một minh chứng cho thấy file tĩnh đơn giản có thể làm được nhiều thứ thế nào.

Tóm tắt nhanh nếu bạn muốn chạy thử hoặc soi code:

• Clone repo về rồi chạy python3 -m http.server 4173 để xem trên máy.
• Đọc file PROMPT.md ở thư mục gốc để xem yêu cầu thiết kế cho góc quay camera và bố cục cảnh.
• Lưu ý: thư viện Three.js đi kèm có giấy phép MIT, nhưng tác giả chưa cấp phép để bạn tái sử dụng phần code riêng hay hình ảnh của Kage.

Một bằng chứng cho thấy web vẫn có thể kỳ diệu mà chẳng cần gõ npm install.