Help us improve
Share bugs, ideas, or general feedback.
From frontend-craft
Guides Canvas 2D, Three.js/WebGL, and React Three Fiber rendering with patterns for DPI scaling, animation loops, GPU resource cleanup, and accessibility. Activates on Canvas, Three.js, WebGL, 3D, or game rendering topics.
npx claudepluginhub bovinphang/frontend-craftHow this skill is triggered — by the user, by Claude, or both
Slash command
/frontend-craft:fec-canvas-threejsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
在浏览器中实现高性能 2D/3D 图形渲染。
Creates 3D scenes, interactive experiences, and visual effects using Three.js best practices for WebGL rendering, geometries, lighting, animations, and OrbitControls.
Builds interactive 3D web scenes with Three.js using WebGL/WebGPU. Guides on scenes, cameras, renderers, geometries, materials, meshes, lights, animations, and OrbitControls.
Builds Three.js and React Three Fiber (R3F) projects: 3D scenes, useFrame animations, GLTF/GLB models, Rapier physics, WebGPU, performance optimization, Vite scaffolding, Drei helpers.
Share bugs, ideas, or general feedback.
在浏览器中实现高性能 2D/3D 图形渲染。
requestAnimationFrame,不可见或无变化时暂停,卸载时取消。aria-label、替代文本或 DOM 版摘要;交互式图形要有键盘兜底。const dpr = Math.min(window.devicePixelRatio || 1, 2);
canvas.width = width * dpr;
canvas.height = height * dpr;
canvas.style.width = `${width}px`;
canvas.style.height = `${height}px`;
ctx.scale(dpr, dpr);
let animationId = 0;
function animate() {
animationId = requestAnimationFrame(animate);
renderer.render(scene, camera);
}
return () => {
cancelAnimationFrame(animationId);
geometry.dispose();
material.dispose();
renderer.dispose();
};
Load references/rendering-patterns.md for Canvas 2D drawing, animation loops, Three.js scene setup, React Three Fiber, InstancedMesh, and performance cleanup.
dispose() 会造成 GPU 内存泄漏。fec-web-workers,但渲染本身仍在主线程/渲染线程协调。2D/3D 场景清晰、响应式、可清理,关键设备上接近 60fps;用户能通过替代文本或键盘路径理解/操作核心内容。
fec-web-workers — 图形任务中的昂贵计算搬到后台线程。fec-svg-animation — 小型矢量图标、路径描边和 UI 微动效优先用 SVG。fec-accessibility-check — 图形替代文本和键盘兜底深审。