Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:threejs

Cảnh 3D Three.js

Xây scene Three.js WebGL/WebGPU với model, animation, physics, XR, particle, shader, tối ưu, 556 ví dụ có thể tìm kiếm, 60 API class và 20 template use case.

Chốt phạm vi 3D browser

Tìm reference đóng gói

Chọn cấp reference

Dựng scene tối thiểu

Nguyên tắc 01

Bắt đầu từ ví dụ có thể tìm kiếm và reference theo cấp trước khi tự nghĩ kiến trúc scene

Nguyên tắc 02

Scene, camera, renderer, gắn canvas, lighting và loop là xương sống tối thiểu

Nguyên tắc 03

Dùng GLTF/PBR/texture/EnvMap và loader đúng cho workflow model production

Nguyên tắc 04

Tối ưu bằng instancing, LOD, batching, geometry, material, texture, shader và WebGPU chỉ sau khi hành vi scene đã rõ

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Chốt phạm vi 3D browser Xác nhận yêu cầu là scene 3D, game, visualization, nạp model, animation, physics, XR, particle effect, shader hoặc tối ưu hiệu năng render.
2 Tìm reference đóng gói Dùng `python3 scripts/search.py` trong examples, API, use-cases hoặc categories để tìm pattern phù hợp trước khi tự nghĩ kiến trúc scene.

Xử lý

Agent / skill thực thi

3 Chọn cấp reference Nạp fundamentals trước, rồi loaders, textures, cameras, lights, animations, geometry, materials, interaction, controls, performance, shaders, physics, XR hoặc WebGPU khi cần.
4 Dựng scene tối thiểu Tạo scene, camera, renderer, gắn canvas, pixel ratio, ánh sáng, nạp model khi cần và animation loop trước khi thêm hiệu ứng.

Kiểm chứng

Gate, review, xác thực

5 Thêm nội dung và tương tác Thêm asset GLTF/FBX/OBJ, texture, vật liệu PBR, control, raycasting, postprocessing, AnimationMixer, physics, XR hoặc hệ WebGPU.
6 Tối ưu theo reference Dùng reference hiệu năng cho lựa chọn instancing, LOD, batching, geometry, material, texture, shader và WebGPU compute.

Đóng

Báo cáo, bàn giao, artifact

7 Xác minh hành vi runtime Kiểm camera framing, control, việc nạp asset, độ ổn định animation loop, resize, hỗ trợ WebXR/WebGPU và trạng thái fallback.
8 Trỏ tới nguồn live Dùng docs, examples, editor hoặc cộng đồng Three.js chính thức khi cần chi tiết API hiện tại ngoài guidance đóng gói.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:threejs [3D scene or feature]

Đối số

[3D scene or feature] Bắt buộc

Scene hoặc tính năng 3D

Yêu cầu Three.js bằng ngôn ngữ tự nhiên, gồm framework và version, browser hoặc thiết bị đích, chính sách fallback WebGL/WebGPU, kích thước canvas, kiểu tương tác, định dạng asset, ngân sách hiệu năng, phương án accessibility và bằng chứng runtime mong đợi. Skill không có mode cấp cao nhất được tài liệu hóa.

/ak:threejs "Add trình xem sản phẩm GLTF dễ tiếp cận với OrbitControls, trạng thái loading và error, fallback WebGL, phương án thay thế bàn phím, disposal khi unmount, và mục tiêu 60 fps trên mobile tầm trung"

Option dùng chung

--domain examples|api|use-cases|categories

Miền tìm kiếm

Giới hạn helper search đóng gói vào example, API summary, gợi ý use case hoặc category. Helper tìm trong CSV local và không tải source example live.

/ak:threejs "Tìm camera --domain api trước khi thêm hướng dẫn PerspectiveCamera"

--use-case

Tra use case

Resolve một dòng use case đóng gói thành example được đề xuất. Đây chỉ là khám phá reference, không triển khai hay tải source.

/ak:threejs "Tìm tài liệu tham khảo product configurator --use-case trước khi triển khai"

--category <name>

Category example

Lọc example đóng gói theo category như webgpu, webxr, physics hoặc webgl postprocessing.

/ak:threejs "List các mẫu particle WebGPU --category webgpu -n 10"

--complexity low|medium|high

Lọc độ phức tạp

Lọc example đóng gói theo nhãn độ phức tạp đi kèm. Nhãn này là hướng dẫn, không phải chi phí runtime đã đo.

/ak:threejs "Tìm ví dụ trực quan hóa kiến trúc độ phức tạp cao --complexity high"

-n <max_results>

Số kết quả

Đổi số match search đóng gói mà helper local trả về.

/ak:threejs "Tìm ví dụ webgl postprocessing depth of field -n 10"

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Viewer sản phẩm accessible Khuyến nghị

/ak:threejs accessible GLTF product viewer with OrbitControls, PBR lighting, loading and error states, and WebGL fallback

Dùng khi:: Dùng khi trang commerce hoặc demo cần viewer model 3D trên browser với loading, control và fallback rõ ràng.
Kết quả:: Tìm reference product configurator và loader đóng gói, rồi ánh xạ scene, camera, renderer, GLTFLoader, material PBR, control, fallback và bước xác minh.

Particle WebGPU

/ak:threejs particle compute WebGPU visualization for a large point cloud

Dùng khi:: Dùng khi tập điểm lớn hoặc hiệu ứng cần pattern particle Three.js, reference hướng compute hoặc render thân thiện GPU.
Kết quả:: Dùng search example/category cho particle và WebGPU, rồi chọn pattern BufferGeometry, shader, compute, fallback và hiệu năng phù hợp runtime đã cài.

Scene XR có physics

/ak:threejs WebXR room walkthrough with physics collisions and controller interactions

Dùng khi:: Dùng khi scene VR hoặc AR trên browser cần di chuyển nhập vai, va chạm, input controller hoặc fallback theo capability.
Kết quả:: Nạp reference physics và WebXR, rồi phác thảo asset, ánh sáng, control, ranh giới va chạm, kiểm tra hỗ trợ browser, fallback và bằng chứng xác minh runtime.

Tìm API/example

/ak:threejs search PerspectiveCamera API and webgl postprocessing examples for depth of field

Dùng khi:: Dùng khi bạn cần example Three.js đóng gói local, tóm tắt API, category hoặc gợi ý use case trước khi code.
Kết quả:: Áp dụng workflow search local trong examples, API, use-cases hoặc categories, rồi báo reference đóng gói gần nhất và cách điều chỉnh.

Phạm vi xử lý

Scene WebGL và WebGPU
Nạp model GLTF, FBX và OBJ
Vật liệu PBR, texture, light và shadow
AnimationMixer, control, raycasting và postprocessing
Physics và trải nghiệm WebXR
Particle, custom GLSL shader và hiệu năng render