Xây 3D web scene có thể xác minh với ak:threejs

Dùng ak:threejs để lập kế hoạch, triển khai hoặc review Three.js scene có WebGL hay WebGPU, model, material, interaction, animation, post-processing, physics hoặc XR. Skill kết hợp reference theo cấp độ với local search index của example, API summary, category và use case đã đóng gói.

Chọn ak:threejs cho 3D trên browser

Dùng Skill khi

• Bạn cần product configurator, game, visualization, panorama, architectural scene, particle system, custom shader hoặc WebXR experience.
• Bạn cần load GLTF, FBX, OBJ, texture, animation clip hoặc environment map.
• Bạn đang profile draw call, geometry, texture, material, shadow, post-processing hoặc WebGPU compute work.
• Bạn muốn tìm example local trước khi điều chỉnh code cho Three.js version đã cài.

Chọn workflow khác khi

• Bạn cần 3D frame-deterministic trong video lập trình. Dùng ak:remotion cùng rule Three.js riêng cho Remotion.
• Bạn cần UI styling hoặc product UX thông thường thay vì 3D scene được render.
• Bạn chỉ cần API fact chính thức hiện tại. Kiểm tra version đã cài cùng primary Three.js documentation; reference đóng gói có thể cũ.

Chuẩn bị scene contract

• Nêu framework và exact Three.js version, browser cùng thiết bị đích, WebGL/WebGPU fallback policy, canvas size, interaction model, asset format và performance budget.
• Cung cấp model, texture, HDR map, audio và font có license. Xác định remote URL, CORS requirement, decoder hoặc transcoder file và download size tối đa.
• Xác định accessibility alternative cho thông tin hay action chỉ có trong canvas, gồm keyboard control, label, reduced motion và fallback không 3D khi cần.
• Chỉ cài Python nếu dùng search CLI đóng gói. Search đọc CSV đóng gói và không fetch live example được liệt kê trong result.

Chạy Skill

/ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

/ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

$ak:threejs "Add an accessible GLTF product viewer with OrbitControls, loading and error states, WebGL fallback, keyboard alternatives, disposal on unmount, and a 60 fps target on mid-range mobile"

Skill không có top-level mode được tài liệu hóa. Local search helper hỗ trợ:

Theo dõi các stage có thể quan sát

1. Kiểm tra renderer boundary. Xác nhận version đã cài, browser support, canvas ownership, scene lifecycle, asset, fallback và budget.
2. Search và chọn pattern. Dùng packaged example cùng progressive reference, rồi đối chiếu import và API với release đã cài.
3. Xây minimum scene. Thiết lập scene, camera, renderer, resize handling, loading/error feedback, color space, lighting và cleanup trước effect.
4. Thêm interaction và content. Load asset, cung cấp control cùng accessible alternative và giữ state transition có thể quan sát.
5. Tối ưu từ measurement. Profile draw call, triangle, texture memory, frame time, loading, layout shift và target-device behavior trước khi chọn instancing, LOD, compression, pass resolution thấp hoặc WebGPU.
6. Xác minh và report. Ghi file, asset, browser, device, fallback, performance measurement, visual check, accessibility evidence và gap.

Làm rõ asset, device và experimental API

• URL model, texture, font, audio, decoder và environment map có thể tạo network request và lộ user IP hoặc referrer data cho host.
• WebXR có thể yêu cầu immersive session, controller, hand tracking, spatial audio, hit testing hoặc room-scale feature. Xin user intent cùng browser permission; không giả định hardware support.
• Physics cần library bên ngoài. WebGPU compute và node-material feature có thể cần WebGPU renderer; cung cấp WebGL path đã test khi được yêu cầu.
• Dispose geometry, material, texture, control, listener, render target và renderer khi hết ownership. Giữ nguyên source asset.
• Shader và remote asset là code hoặc content input. Review license, provenance, CORS, memory và failure behavior trước khi ship.

Xác minh output và giới hạn

Một lần chạy hoàn tất nên có source diff, asset manifest, loading cùng error state, renderer fallback, cleanup evidence, keyboard và pointer behavior, reduced-motion handling cùng kết quả đo trên target device. Kiểm tra visual, color space, material và light behavior, resize, pixel ratio, mobile orientation, focus, canvas alternative, draw call, frame time, memory và lỗi asset thiếu hay không decode được.

Packaged example, API summary, browser note và reference code là guidance tại một thời điểm, không phải live Three.js documentation. Stable và beta chứa cùng resource ak:threejs trong các release được tài liệu hóa. Tiếp tục với Runtime adapter hoặc Tổng quan Engineer Kit.