AI导哈

设计与多媒体

r3f-lighting

enzed/r3f-skills

Light React Three Fiber scenes with direct lights, environment maps, and shadows. Use for light placement, image-based lighting, shadow artifacts, and lighting performance.

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

安装命令

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

SKILL.md

React Three Fiber lighting

Check installed Three.js, Fiber, and Drei versions and the renderer first. This example targets Fiber 9 / React 19, Three.js r185, and WebGL.

Start with a deliberate lighting setup

  • Use environment lighting for PBR reflections/fill and direct lights for direction and real-time shadowing. More ambient light will not restore missing metallic reflections.
  • A scene background and scene.environment serve different purposes. Drei Environment assigns lighting; background additionally makes it visible behind the scene.
  • Prefer an owned HDR/EXR asset in production. Drei presets are useful for prototyping but depend on external hosting. Check loader support before choosing newer formats.
  • Sky is visible sky geometry, not automatically a matching sun light or environment. Align the sky, direct light, and environment when visual consistency matters.

Shadowed scene

Mount inside <Canvas shadows="percentage">. On Three.js r182+, PCFShadowMap is soft; Fiber 9's bare shadows selects the deprecated PCFSoftShadowMap.

相关 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-materialsenzed/r3f-skillsChoose 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.前端开发1981r3f-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.前端开发1981