Tóm tắt nhanh:
ak-threejsdựng thứ 3D chạy trong trình duyệt: trình xem sản phẩm, biểu đồ điểm 3D, hiệu ứng hạt, tour 360 độ có VR, scene có vật lý. Nó đọc bản Three.js và renderer đang cài, tra ví dụ trong dữ liệu đi kèm rồi viết code hợp đúng bản đó, kèm phần dọn tài nguyên khi gỡ scene. Nó chỉ coi là xong khi đã thấy hình và thử tương tác, không coi "không lỗi console" là đủ.
Công khai: mình là maintainer của AgentKit và có quan hệ affiliate: link AgentKit trong bài là link affiliate, mua qua link này bạn được giảm 30%.
Tóm tắt
Dùng khi bạn cần một scene hoặc tính năng 3D trong trình duyệt, hoặc khi scene đang có bị giật cần đo và sửa. Nói rõ renderer (WebGL hay WebGPU) và ràng buộc hiệu năng nếu đã biết, để nó đỡ phải đoán.
flowchart LR
A["Mô tả scene hoặc tính năng 3D"] --> B["ak-threejs"]
B --> C["Code Three.js hợp với bản đang cài"]
C --> D["Đã xem hình và thử tương tác"]
C --> E["Có số đo nếu hiệu năng là yêu cầu"]Nó dựa trên 4 ý:
| Ý | Câu hỏi | Ví dụ |
|---|---|---|
| Tra trước khi viết | Lấy ví dụ và API ở đâu cho đúng? | Nhờ "trình xem sản phẩm" thì nó tra theo loại dự án đó và ra ví dụ GLTF, vật liệu PBR, ánh sáng môi trường |
| Đúng bản, đúng renderer | Project chạy Three.js bản nào, WebGL hay WebGPU? | Công thức WebGPU hoặc TSL không dán thẳng vào project WebGL; đường import GLTFLoader phải khớp bản đang cài |
| Xong là khi thấy hình | Bằng chứng nào cho thấy scene đúng? | Mở trang, thấy model, kéo xoay được; hiệu năng là yêu cầu thì đo thời gian mỗi khung hình |
| Dọn khi gỡ scene | Rời trang có scene thì phải làm gì? | Dừng requestAnimationFrame, gỡ listener, giải phóng geometry, material, texture |
Kiến thức đi kèm chia theo cấp, từ nền tảng (scene graph) tới chuyên sâu (vật lý, WebXR, WebGPU và compute shader). Nó chỉ mở cấp cần cho việc bạn nhờ.
Prompt mẫu cho trình xem sản phẩm:
/ak-threejs Trình xem sản phẩm 3D cho trang <tên sản phẩm>, nạp file model.glb.
Khách kéo chuột để xoay, cuộn để phóng to, bấm nút để đổi 3 màu vỏ.
Ràng buộc: giữ layout trang hiện có, chạy được trên điện thoại.
Xong khi: thấy model trên trang đang chạy, đổi màu không phải tải lại.Skill này không có cờ. Sau /ak-threejs bạn mô tả scene hoặc tính năng 3D. Các tuỳ chọn lọc của công cụ tìm kiếm bên trong do skill tự chạy, bạn không cần gõ.
Phần dưới đây là bản chi tiết: luồng chạy, 5 tình huống kèm prompt, cách ghi đầu vào, lịch sử thay đổi theo bản ak và các lỗi hay vấp. Bản chi tiết và trang trực quan dành cho subscriber. Agent của bạn cũng tìm được trong đó qua MCP của portal.
Mở khi tài khoản có quyền subscriber
Bài này dành cho subscriber
Khi tài khoản có quyền, toàn bộ bài, bản visual tương tác và lệnh gọi từ agent đều mở.
- Đăng nhập hoặc tạo tài khoản modernEngineerQuyền đọc gắn với email tài khoản.
- Chọn gói trên trang Bảng giáGói 1, 3 hoặc 12 tháng, trả bằng chuyển khoản VietQR. Quyền đọc mở khoảng một phút sau khi tiền về.
- Hoặc nhập mã Facebook subscriberNgười ủng hộ trang qua Facebook nhận mã kích hoạt qua tin nhắn mỗi tháng.
Đã là subscriber? Đăng nhập để đọc.
Dùng bài này trong agent của bạn
Lấy API keyChép đoạn dưới, dán vào Claude Code, Codex hay agent bạn đang dùng. Agent đọc bài rồi đối chiếu với repo đang mở.
Đọc bài "ak-threejs: dựng scene 3D Three.js hợp đúng bản đang cài" trên modernEngineer rồi áp dụng vào repo này.
1. Gọi tool content_get của MCP server modernengineer với locale "vi", slug "ak-threejs". Nếu chưa nối MCP server modernengineer, dừng lại và hướng dẫn tôi nối theo https://modernengineer.dev/vi/mcp.
2. Tóm tắt các bước chính của bài, chỉ ra bước nào áp dụng được cho repo này.
3. Đề xuất thay đổi cụ thể và hỏi tôi trước khi sửa file.Nối MCP cho Claude Code (một lần)
claude mcp add --transport http modernengineer \
https://api.modernengineer.dev/mcp \
--header "Authorization: Bearer <API key>"Đọc trọn bài qua MCP cần API key của tài khoản subscriber hoặc đã mua guide này. Không có quyền, agent sẽ chỉ đọc được phần mở đầu.
- Phiên bản
- v1.0.0
- Cập nhật
- 22/10/2026
- Giấy phép
- Bảo lưu mọi quyền
- Slug
- ak-threejs
