3D Graphics with Three.js
Skill ยืนยันแล้ว3D web graphics with Three.js (WebGL/WebGPU). Capabilities: scenes, cameras, geometries, materials, lights, animations, model loading (GLTF/FBX), PBR materials, shadows, post-processing (bloom, SSAO, SSR), custom shaders, instancing, LOD, physics, VR/XR. Actions: create, build, animate, render 3D scenes/models. Keywords: Three.js, WebGL, WebGPU, 3D graphics, scene, camera, geometry, material, light, animation, GLTF, FBX, OrbitControls, PBR, shadow mapping, post-processing, bloom, SSAO, shader, instancing, LOD, WebXR, VR, AR, product configurator, data visualization, architectural walkthrough, interactive 3D, canvas. Use when: creating 3D visualizations, building WebGL/WebGPU apps, loading 3D models, adding animations, implementing VR/XR, creating interactive graphics, building product configurators.
This skill provides a structured learning path and detailed reference for using the Three.js library to create 3D web graphics. It covers scene setup, asset loading, materials, animations, post-processing, physics, VR/XR integration, and advanced rendering techniques, with practical code examples and links to external resources.
การติดตั้ง
npx skills add samhvw8/dot-claudeเรียกใช้ Vercel skills CLI (skills.sh) ผ่าน npx — ต้องติดตั้ง Node.js ในเครื่อง และมี agent ที่รองรับ skills อย่างน้อยหนึ่งตัว (Claude Code, Cursor, Codex, …) ทั้งนี้สมมติว่า repo ใช้รูปแบบ agentskills.io
ส่วนขยายที่คล้ายกัน
React Three Fiber Textures
85React Three Fiber textures - useTexture, texture loading, environment maps, texture configuration. Use when loading images, working with PBR texture sets, cubemaps, HDR environments, or optimizing texture usage.
React Three Fiber Fundamentals
85React Three Fiber fundamentals - Canvas, hooks (useFrame, useThree), JSX elements, events, refs. Use when setting up R3F scenes, creating components, handling the render loop, or working with Three.js objects in React.
Blind Spot Detective
99Systematically identify what's missing in non-fiction writing—both blind spots (inherent limitations) and blank spots (gaps that could be addressed). Use before finalizing non-fiction or when feedback feels incomplete.
React Three Fiber Post-Processing
98React Three Fiber post-processing - @react-three/postprocessing, bloom, DOF, screen effects. Use when adding visual effects, color grading, blur, glow, or creating custom screen-space shaders.
Customer Journey Mapper
98Maps the full customer journey from first touch to advocacy. Generates a comprehensive customer-journey.md with all stages, touchpoints, emotions, pain points, opportunities, Mermaid diagrams, and metrics. Use when mapping customer experience, designing onboarding flows, identifying churn risks, or optimizing conversion funnels.
ReClaude
98Refactor CLAUDE.md files to follow progressive disclosure principles. Use when CLAUDE.md is too long or disorganized.