AI导哈

前端开发

r3f-materials

enzed/r3f-skills

Choose and configure React Three Fiber surface materials, PBR, transparency, and transmission. Use for mesh appearance and material cost; use shader guidance for custom GLSL or TSL code.

  • 1981 次安装
  • 131 星标
  • 收录于

安装命令

npx skills add https://github.com/enzed/r3f-skills --skill r3f-materials

SKILL.md

React Three Fiber materials

Inspect the installed renderer, Three.js, Fiber, and Drei versions first. Examples use Fiber 9 / React 19 with WebGL. Do not assume Drei shader-based materials work unchanged with WebGPU.

Choose the least complex material that fits

Need Starting point Constraint
Unlit artwork or UI surface meshBasicMaterial Still participates in output color/tone-mapping policy
Ordinary PBR surface meshStandardMaterial Metals especially need an environment or suitable lights
Clearcoat, transmission, sheen meshPhysicalMaterial Enable only needed features; more shader work
Stylized lighting meshToonMaterial Needs lights; gradient maps need appropriate filtering
Normal debugging meshNormalMaterial Useful for geometry/normal inspection
Custom shading ShaderMaterial or node material Match WebGL/GLSL versus WebGPU/TSL

PBR surface with environment lighting

Mount below Canvas. This small procedural environment avoids a remote preset dependency.

相关 Skills

r3f-interactionenzed/r3f-skillsImplement React Three Fiber pointer events, picking, dragging, keyboard input, and camera controls. Use for scene interaction and event propagation, rather than animation or physics simulation itself.设计与多媒体3298r3f-fundamentalsenzed/r3f-skillsSet up React Three Fiber scenes, Canvas, typed JSX, hooks, and resource ownership. Use for scene architecture and render-loop setup, rather than detailed materials or effects.设计与多媒体2172r3f-animationenzed/r3f-skillsAnimate React Three Fiber objects with useFrame, damping, and GLTF clips. Use for procedural motion, animation transitions, or demand-loop animation; use physics guidance for collision-driven movement.设计与多媒体2078r3f-postprocessingenzed/r3f-skillsConfigure React Three Fiber postprocessing, bloom, selection effects, ambient occlusion, and depth of field. Use for composer pipelines and screen-space effects, rather than mesh material shaders.前端开发1999r3f-geometryenzed/r3f-skillsBuild React Three Fiber geometry, custom buffers, instanced meshes, points, and lines. Use for shape construction and geometry draw-call optimization, rather than material appearance.前端开发1981r3f-shadersenzed/r3f-skillsImplement custom GLSL or TSL materials in React Three Fiber, including uniforms and vertex deformation. Use for shader code and shader debugging, rather than ordinary PBR settings or composer effects.前端开发1976