r3f-lighting by enzed/r3f-skills
npx skills add https://github.com/enzed/r3f-skills --skill r3f-lightingimport { Canvas } from '@react-three/fiber'
function Scene() {
return (
<Canvas shadows>
{/* 环境填充光 */}
<ambientLight intensity={0.5} />
{/* 主光源(带阴影) */}
<directionalLight
position={[5, 5, 5]}
intensity={1}
castShadow
shadow-mapSize={[2048, 2048]}
/>
{/* 物体 */}
<mesh castShadow receiveShadow>
<boxGeometry />
<meshStandardMaterial color="orange" />
</mesh>
{/* 地面 */}
<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial color="#888" />
</mesh>
</Canvas>
)
}
| 光源类型 | 描述 | 阴影支持 | 性能开销 |
|---|---|---|---|
| ambientLight | 均匀环境光 | 否 | 极低 |
| hemisphereLight |
广告位招租
在这里展示您的产品或服务
触达数万 AI 开发者,精准高效
| 天空/地面渐变光 |
| 否 |
| 极低 |
| directionalLight | 平行光(太阳) | 是 | 低 |
| pointLight | 点光源(灯泡) | 是 | 中 |
| spotLight | 聚光灯 | 是 | 中 |
| rectAreaLight | 区域光(窗户) | 否* | 高 |
均匀照亮所有物体。无方向性,无阴影。
<ambientLight
color="#ffffff" // 或 color={new THREE.Color('#ffffff')}
intensity={0.5}
/>
从天空到地面的渐变光。适用于户外场景。
<hemisphereLight
color="#87ceeb" // 天空颜色
groundColor="#8b4513" // 地面颜色
intensity={0.6}
position={[0, 50, 0]}
/>
平行光线。模拟远距离光源(太阳)。
<directionalLight
color="#ffffff"
intensity={1}
position={[5, 10, 5]}
// 阴影配置
castShadow
shadow-mapSize={[2048, 2048]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
shadow-bias={-0.0001}
shadow-normalBias={0.02}
/>
// 带目标(光线指向目标)
function DirectionalWithTarget() {
const lightRef = useRef()
return (
<>
<directionalLight
ref={lightRef}
position={[5, 10, 5]}
target-position={[0, 0, 0]}
/>
</>
)
}
向所有方向发射光线。类似灯泡。
<pointLight
color="#ffffff"
intensity={1}
position={[0, 5, 0]}
distance={100} // 最大范围(0 = 无限)
decay={2} // 光线衰减(物理正确值 = 2)
// 阴影
castShadow
shadow-mapSize={[1024, 1024]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-bias={-0.005}
/>
锥形光线。类似手电筒。
<spotLight
color="#ffffff"
intensity={1}
position={[0, 10, 0]}
angle={Math.PI / 6} // 锥角(最大 Math.PI/2)
penumbra={0.5} // 软边(0-1)
distance={100} // 范围
decay={2} // 衰减
// 目标
target-position={[0, 0, 0]}
// 阴影
castShadow
shadow-mapSize={[1024, 1024]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-camera-fov={30}
shadow-bias={-0.0001}
/>
// 聚光灯辅助器
import { useHelper } from '@react-three/drei'
import { SpotLightHelper } from 'three'
function SpotLightWithHelper() {
const lightRef = useRef()
useHelper(lightRef, SpotLightHelper, 'cyan')
return <spotLight ref={lightRef} position={[0, 5, 0]} />
}
矩形区域光。适用于柔和、真实的光照。
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'
function AreaLight() {
const lightRef = useRef()
return (
<>
<rectAreaLight
ref={lightRef}
color="#ffffff"
intensity={5}
width={4}
height={2}
position={[0, 5, 0]}
rotation={[-Math.PI / 2, 0, 0]} // 指向下方
/>
</>
)
}
// 注意:RectAreaLight 仅适用于 MeshStandardMaterial 和 MeshPhysicalMaterial
// 原生不支持投射阴影
<Canvas
shadows // 或 shadows="soft" | "basic" | "percentage" | "variance"
>
// 基础阴影(最快,硬边)
<Canvas shadows="basic">
// PCF 阴影(默认,过滤)
<Canvas shadows>
// 软阴影(PCFSoft,更柔和边缘)
<Canvas shadows="soft">
// VSM 阴影(方差阴影贴图)
<Canvas shadows="variance">
// 光源必须投射阴影
<directionalLight castShadow />
// 物体必须投射和/或接收阴影
<mesh castShadow receiveShadow>
<boxGeometry />
<meshStandardMaterial />
</mesh>
// 地面通常只接收阴影
<mesh receiveShadow>
<planeGeometry args={[100, 100]} />
<meshStandardMaterial />
</mesh>
import { useHelper } from '@react-three/drei'
import { CameraHelper } from 'three'
function LightWithShadowHelper() {
const lightRef = useRef()
// 可视化阴影相机视锥体
useHelper(lightRef.current?.shadow.camera, CameraHelper)
return (
<directionalLight
ref={lightRef}
castShadow
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
/>
)
}
HDR 环境光照,支持预设或自定义文件。
import { Environment } from '@react-three/drei'
// 预设环境
<Environment
preset="sunset" // apartment, city, dawn, forest, lobby, night, park, studio, sunset, warehouse
background // 同时用作背景
backgroundBlurriness={0} // 背景模糊度
backgroundIntensity={1} // 背景亮度
environmentIntensity={1} // 光照强度
/>
// 自定义 HDR 文件
<Environment files="/hdri/studio.hdr" />
// 立方体贴图(6张图片)
<Environment
files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
path="/textures/cube/"
/>
// 地面投影
<Environment
preset="city"
ground={{
height: 15,
radius: 100,
scale: 100,
}}
/>
在 Environment 中创建自定义光形状。
import { Environment, Lightformer } from '@react-three/drei'
<Environment>
<Lightformer
form="ring" // circle, ring, rect
intensity={2}
color="white"
scale={10}
position={[0, 5, -5]}
target={[0, 0, 0]} // 指向目标
/>
<Lightformer
form="rect"
intensity={1}
color="red"
scale={[5, 2]}
position={[-5, 5, 0]}
/>
</Environment>
带太阳的程序化天空。
import { Sky } from '@react-three/drei'
<Sky
distance={450000}
sunPosition={[0, 1, 0]} // 或根据倾角/方位角计算
inclination={0.6} // 太阳高度(0 = 地平线,0.5 = 天顶)
azimuth={0.25} // 太阳绕地平线旋转
turbidity={10} // 浑浊度
rayleigh={2} // 光线散射
mieCoefficient={0.005}
mieDirectionalG={0.8}
/>
星空背景。
import { Stars } from '@react-three/drei'
<Stars
radius={100} // 球体半径
depth={50} // 星星分布深度
count={5000} // 星星数量
factor={4} // 大小因子
saturation={0} // 颜色饱和度
fade // 边缘淡出
speed={1} // 闪烁速度
/>
产品展示的快速光照设置。
import { Stage } from '@react-three/drei'
<Stage
preset="rembrandt" // rembrandt, portrait, upfront, soft
intensity={1}
shadows="contact" // false, 'contact', 'accumulative', true
environment="city"
adjustCamera={1.2} // 调整相机以适应内容
>
<Model />
</Stage>
无需阴影映射的快速伪阴影。
import { ContactShadows } from '@react-three/drei'
<ContactShadows
position={[0, -0.5, 0]}
opacity={0.5}
scale={10}
blur={1}
far={10}
resolution={256}
color="#000000"
frames={1} // 渲染一次(适用于静态场景)
/>
// 对于动画场景
<ContactShadows frames={Infinity} />
柔和、累积的阴影。
import { AccumulativeShadows, RandomizedLight } from '@react-three/drei'
<AccumulativeShadows
position={[0, -0.5, 0]}
scale={10}
color="#316d39"
opacity={0.8}
frames={100}
temporal // 随时间平滑累积
>
<RandomizedLight
amount={8}
radius={4}
ambient={0.5}
intensity={1}
position={[5, 5, -10]}
bias={0.001}
/>
</AccumulativeShadows>
全局启用 PCF 软阴影。
import { SoftShadows } from '@react-three/drei'
<Canvas shadows>
<SoftShadows
size={25}
samples={10}
focus={0}
/>
</Canvas>
为静态场景烘焙阴影。
import { BakeShadows } from '@react-three/drei'
<Canvas shadows>
<BakeShadows /> {/* 挂载时烘焙一次阴影 */}
</Canvas>
function ThreePointLighting() {
return (
<>
{/* 主光 */}
<directionalLight
position={[5, 5, 5]}
intensity={1}
castShadow
/>
{/* 填充光(较柔和,相对侧) */}
<directionalLight
position={[-5, 3, 5]}
intensity={0.5}
/>
{/* 背光(轮廓光) */}
<directionalLight
position={[0, 5, -5]}
intensity={0.3}
/>
{/* 环境填充光 */}
<ambientLight intensity={0.2} />
</>
)
}
import { Sky, Environment } from '@react-three/drei'
function OutdoorLighting() {
return (
<>
<Sky sunPosition={[100, 100, 100]} />
<Environment preset="dawn" />
<directionalLight
position={[50, 100, 50]}
intensity={1.5}
castShadow
shadow-mapSize={[2048, 2048]}
shadow-camera-far={200}
shadow-camera-left={-50}
shadow-camera-right={50}
shadow-camera-top={50}
shadow-camera-bottom={-50}
/>
<hemisphereLight
color="#87ceeb"
groundColor="#8b4513"
intensity={0.5}
/>
</>
)
}
import { Environment, Lightformer, ContactShadows } from '@react-three/drei'
function StudioLighting() {
return (
<>
<Environment resolution={256}>
{/* 主光 */}
<Lightformer
form="rect"
intensity={4}
position={[5, 5, -5]}
scale={[10, 5]}
target={[0, 0, 0]}
/>
{/* 填充光 */}
<Lightformer
form="rect"
intensity={2}
position={[-5, 5, 5]}
scale={[10, 5]}
/>
{/* 轮廓光 */}
<Lightformer
form="ring"
intensity={1}
position={[0, 5, -10]}
scale={5}
/>
</Environment>
<ContactShadows
position={[0, -0.5, 0]}
opacity={0.5}
blur={2}
/>
</>
)
}
import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function AnimatedLight() {
const lightRef = useRef()
useFrame(({ clock }) => {
const t = clock.elapsedTime
// 绕场景轨道运动
lightRef.current.position.x = Math.cos(t) * 5
lightRef.current.position.z = Math.sin(t) * 5
// 脉动强度
lightRef.current.intensity = 1 + Math.sin(t * 2) * 0.5
// 颜色循环
lightRef.current.color.setHSL((t * 0.1) % 1, 1, 0.5)
})
return (
<pointLight ref={lightRef} position={[5, 3, 0]} castShadow />
)
}
import { useHelper } from '@react-three/drei'
import {
DirectionalLightHelper,
PointLightHelper,
SpotLightHelper,
HemisphereLightHelper,
} from 'three'
function LightWithHelpers() {
const dirLightRef = useRef()
const pointLightRef = useRef()
const spotLightRef = useRef()
const hemiLightRef = useRef()
useHelper(dirLightRef, DirectionalLightHelper, 5, 'red')
useHelper(pointLightRef, PointLightHelper, 1, 'green')
useHelper(spotLightRef, SpotLightHelper, 'blue')
useHelper(hemiLightRef, HemisphereLightHelper, 5, 'yellow', 'brown')
return (
<>
<directionalLight ref={dirLightRef} position={[5, 5, 5]} />
<pointLight ref={pointLightRef} position={[-5, 5, 0]} />
<spotLight ref={spotLightRef} position={[0, 5, 5]} />
<hemisphereLight ref={hemiLightRef} />
</>
)
}
// 选择性阴影
<mesh castShadow={isHero}>
<boxGeometry />
</mesh>
// 仅在需要时更新阴影
<ContactShadows frames={isAnimating ? Infinity : 1} />
// 使用图层排除物体受光影响
<directionalLight layers={1} />
<mesh layers={1}> {/* 受光源影响 */}
<mesh layers={2}> {/* 不受光源影响 */}
r3f-materials - 材质对光的响应r3f-textures - 环境贴图r3f-postprocessing - 辉光和光照效果每周安装量
256
代码仓库
GitHub 星标数
58
首次出现
2026年1月20日
安全审计
安装于
codex200
gemini-cli198
opencode193
github-copilot177
cursor176
claude-code162
import { Canvas } from '@react-three/fiber'
function Scene() {
return (
<Canvas shadows>
{/* Ambient fill */}
<ambientLight intensity={0.5} />
{/* Main light with shadows */}
<directionalLight
position={[5, 5, 5]}
intensity={1}
castShadow
shadow-mapSize={[2048, 2048]}
/>
{/* Objects */}
<mesh castShadow receiveShadow>
<boxGeometry />
<meshStandardMaterial color="orange" />
</mesh>
{/* Ground */}
<mesh receiveShadow rotation={[-Math.PI / 2, 0, 0]} position={[0, -0.5, 0]}>
<planeGeometry args={[10, 10]} />
<meshStandardMaterial color="#888" />
</mesh>
</Canvas>
)
}
| Light | Description | Shadow Support | Cost |
|---|---|---|---|
| ambientLight | Uniform everywhere | No | Very Low |
| hemisphereLight | Sky/ground gradient | No | Very Low |
| directionalLight | Parallel rays (sun) | Yes | Low |
| pointLight | Omnidirectional (bulb) | Yes | Medium |
| spotLight | Cone-shaped | Yes | Medium |
| rectAreaLight | Area light (window) | No* | High |
Illuminates all objects equally. No direction, no shadows.
<ambientLight
color="#ffffff" // or color={new THREE.Color('#ffffff')}
intensity={0.5}
/>
Gradient from sky to ground. Good for outdoor scenes.
<hemisphereLight
color="#87ceeb" // Sky color
groundColor="#8b4513" // Ground color
intensity={0.6}
position={[0, 50, 0]}
/>
Parallel light rays. Simulates distant light (sun).
<directionalLight
color="#ffffff"
intensity={1}
position={[5, 10, 5]}
// Shadow configuration
castShadow
shadow-mapSize={[2048, 2048]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
shadow-bias={-0.0001}
shadow-normalBias={0.02}
/>
// With target (light points at target)
function DirectionalWithTarget() {
const lightRef = useRef()
return (
<>
<directionalLight
ref={lightRef}
position={[5, 10, 5]}
target-position={[0, 0, 0]}
/>
</>
)
}
Emits light in all directions. Like a light bulb.
<pointLight
color="#ffffff"
intensity={1}
position={[0, 5, 0]}
distance={100} // Maximum range (0 = infinite)
decay={2} // Light falloff (physically correct = 2)
// Shadows
castShadow
shadow-mapSize={[1024, 1024]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-bias={-0.005}
/>
Cone-shaped light. Like a flashlight.
<spotLight
color="#ffffff"
intensity={1}
position={[0, 10, 0]}
angle={Math.PI / 6} // Cone angle (max Math.PI/2)
penumbra={0.5} // Soft edge (0-1)
distance={100} // Range
decay={2} // Falloff
// Target
target-position={[0, 0, 0]}
// Shadows
castShadow
shadow-mapSize={[1024, 1024]}
shadow-camera-near={0.5}
shadow-camera-far={50}
shadow-camera-fov={30}
shadow-bias={-0.0001}
/>
// SpotLight helper
import { useHelper } from '@react-three/drei'
import { SpotLightHelper } from 'three'
function SpotLightWithHelper() {
const lightRef = useRef()
useHelper(lightRef, SpotLightHelper, 'cyan')
return <spotLight ref={lightRef} position={[0, 5, 0]} />
}
Rectangular area light. Great for soft, realistic lighting.
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper'
function AreaLight() {
const lightRef = useRef()
return (
<>
<rectAreaLight
ref={lightRef}
color="#ffffff"
intensity={5}
width={4}
height={2}
position={[0, 5, 0]}
rotation={[-Math.PI / 2, 0, 0]} // Point downward
/>
</>
)
}
// Note: RectAreaLight only works with MeshStandardMaterial and MeshPhysicalMaterial
// Does not cast shadows natively
<Canvas
shadows // or shadows="soft" | "basic" | "percentage" | "variance"
>
// Basic shadows (fastest, hard edges)
<Canvas shadows="basic">
// PCF shadows (default, filtered)
<Canvas shadows>
// Soft shadows (PCFSoft, softer edges)
<Canvas shadows="soft">
// VSM shadows (variance shadow map)
<Canvas shadows="variance">
// Light must cast shadows
<directionalLight castShadow />
// Objects must cast and/or receive shadows
<mesh castShadow receiveShadow>
<boxGeometry />
<meshStandardMaterial />
</mesh>
// Ground typically only receives
<mesh receiveShadow>
<planeGeometry args={[100, 100]} />
<meshStandardMaterial />
</mesh>
import { useHelper } from '@react-three/drei'
import { CameraHelper } from 'three'
function LightWithShadowHelper() {
const lightRef = useRef()
// Visualize shadow camera frustum
useHelper(lightRef.current?.shadow.camera, CameraHelper)
return (
<directionalLight
ref={lightRef}
castShadow
shadow-camera-left={-10}
shadow-camera-right={10}
shadow-camera-top={10}
shadow-camera-bottom={-10}
/>
)
}
HDR environment lighting with presets or custom files.
import { Environment } from '@react-three/drei'
// Preset environments
<Environment
preset="sunset" // apartment, city, dawn, forest, lobby, night, park, studio, sunset, warehouse
background // Also use as background
backgroundBlurriness={0} // Background blur
backgroundIntensity={1} // Background brightness
environmentIntensity={1} // Lighting intensity
/>
// Custom HDR file
<Environment files="/hdri/studio.hdr" />
// Cube map (6 images)
<Environment
files={['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']}
path="/textures/cube/"
/>
// Ground projection
<Environment
preset="city"
ground={{
height: 15,
radius: 100,
scale: 100,
}}
/>
Create custom light shapes inside Environment.
import { Environment, Lightformer } from '@react-three/drei'
<Environment>
<Lightformer
form="ring" // circle, ring, rect
intensity={2}
color="white"
scale={10}
position={[0, 5, -5]}
target={[0, 0, 0]} // Point at target
/>
<Lightformer
form="rect"
intensity={1}
color="red"
scale={[5, 2]}
position={[-5, 5, 0]}
/>
</Environment>
Procedural sky with sun.
import { Sky } from '@react-three/drei'
<Sky
distance={450000}
sunPosition={[0, 1, 0]} // Or calculate from inclination/azimuth
inclination={0.6} // Sun elevation (0 = horizon, 0.5 = zenith)
azimuth={0.25} // Sun rotation around horizon
turbidity={10} // Haziness
rayleigh={2} // Light scattering
mieCoefficient={0.005}
mieDirectionalG={0.8}
/>
Starfield background.
import { Stars } from '@react-three/drei'
<Stars
radius={100} // Sphere radius
depth={50} // Depth of star distribution
count={5000} // Number of stars
factor={4} // Size factor
saturation={0} // Color saturation
fade // Fade at edges
speed={1} // Twinkle speed
/>
Quick lighting setup for product showcase.
import { Stage } from '@react-three/drei'
<Stage
preset="rembrandt" // rembrandt, portrait, upfront, soft
intensity={1}
shadows="contact" // false, 'contact', 'accumulative', true
environment="city"
adjustCamera={1.2} // Adjust camera to fit content
>
<Model />
</Stage>
Fast fake shadows without shadow mapping.
import { ContactShadows } from '@react-three/drei'
<ContactShadows
position={[0, -0.5, 0]}
opacity={0.5}
scale={10}
blur={1}
far={10}
resolution={256}
color="#000000"
frames={1} // Render once (for static scenes)
/>
// For animated scenes
<ContactShadows frames={Infinity} />
Soft, accumulated shadows.
import { AccumulativeShadows, RandomizedLight } from '@react-three/drei'
<AccumulativeShadows
position={[0, -0.5, 0]}
scale={10}
color="#316d39"
opacity={0.8}
frames={100}
temporal // Smooth accumulation over time
>
<RandomizedLight
amount={8}
radius={4}
ambient={0.5}
intensity={1}
position={[5, 5, -10]}
bias={0.001}
/>
</AccumulativeShadows>
Enable PCF soft shadows globally.
import { SoftShadows } from '@react-three/drei'
<Canvas shadows>
<SoftShadows
size={25}
samples={10}
focus={0}
/>
</Canvas>
Bake shadows for static scenes.
import { BakeShadows } from '@react-three/drei'
<Canvas shadows>
<BakeShadows /> {/* Bakes shadows once on mount */}
</Canvas>
function ThreePointLighting() {
return (
<>
{/* Key light (main) */}
<directionalLight
position={[5, 5, 5]}
intensity={1}
castShadow
/>
{/* Fill light (softer, opposite side) */}
<directionalLight
position={[-5, 3, 5]}
intensity={0.5}
/>
{/* Back light (rim lighting) */}
<directionalLight
position={[0, 5, -5]}
intensity={0.3}
/>
{/* Ambient fill */}
<ambientLight intensity={0.2} />
</>
)
}
import { Sky, Environment } from '@react-three/drei'
function OutdoorLighting() {
return (
<>
<Sky sunPosition={[100, 100, 100]} />
<Environment preset="dawn" />
<directionalLight
position={[50, 100, 50]}
intensity={1.5}
castShadow
shadow-mapSize={[2048, 2048]}
shadow-camera-far={200}
shadow-camera-left={-50}
shadow-camera-right={50}
shadow-camera-top={50}
shadow-camera-bottom={-50}
/>
<hemisphereLight
color="#87ceeb"
groundColor="#8b4513"
intensity={0.5}
/>
</>
)
}
import { Environment, Lightformer, ContactShadows } from '@react-three/drei'
function StudioLighting() {
return (
<>
<Environment resolution={256}>
{/* Key light */}
<Lightformer
form="rect"
intensity={4}
position={[5, 5, -5]}
scale={[10, 5]}
target={[0, 0, 0]}
/>
{/* Fill light */}
<Lightformer
form="rect"
intensity={2}
position={[-5, 5, 5]}
scale={[10, 5]}
/>
{/* Rim light */}
<Lightformer
form="ring"
intensity={1}
position={[0, 5, -10]}
scale={5}
/>
</Environment>
<ContactShadows
position={[0, -0.5, 0]}
opacity={0.5}
blur={2}
/>
</>
)
}
import { useFrame } from '@react-three/fiber'
import { useRef } from 'react'
function AnimatedLight() {
const lightRef = useRef()
useFrame(({ clock }) => {
const t = clock.elapsedTime
// Orbit around scene
lightRef.current.position.x = Math.cos(t) * 5
lightRef.current.position.z = Math.sin(t) * 5
// Pulsing intensity
lightRef.current.intensity = 1 + Math.sin(t * 2) * 0.5
// Color cycling
lightRef.current.color.setHSL((t * 0.1) % 1, 1, 0.5)
})
return (
<pointLight ref={lightRef} position={[5, 3, 0]} castShadow />
)
}
import { useHelper } from '@react-three/drei'
import {
DirectionalLightHelper,
PointLightHelper,
SpotLightHelper,
HemisphereLightHelper,
} from 'three'
function LightWithHelpers() {
const dirLightRef = useRef()
const pointLightRef = useRef()
const spotLightRef = useRef()
const hemiLightRef = useRef()
useHelper(dirLightRef, DirectionalLightHelper, 5, 'red')
useHelper(pointLightRef, PointLightHelper, 1, 'green')
useHelper(spotLightRef, SpotLightHelper, 'blue')
useHelper(hemiLightRef, HemisphereLightHelper, 5, 'yellow', 'brown')
return (
<>
<directionalLight ref={dirLightRef} position={[5, 5, 5]} />
<pointLight ref={pointLightRef} position={[-5, 5, 0]} />
<spotLight ref={spotLightRef} position={[0, 5, 5]} />
<hemisphereLight ref={hemiLightRef} />
</>
)
}
// Selective shadows
<mesh castShadow={isHero}>
<boxGeometry />
</mesh>
// Only update shadows when needed
<ContactShadows frames={isAnimating ? Infinity : 1} />
// Use layers to exclude objects from lights
<directionalLight layers={1} />
<mesh layers={1}> {/* Affected by light */}
<mesh layers={2}> {/* Not affected */}
r3f-materials - Material light responser3f-textures - Environment mapsr3f-postprocessing - Bloom and light effectsWeekly Installs
256
Repository
GitHub Stars
58
First Seen
Jan 20, 2026
Security Audits
Gen Agent Trust HubPassSocketPassSnykPass
Installed on
codex200
gemini-cli198
opencode193
github-copilot177
cursor176
claude-code162
ManimGL 最佳实践指南:场景、动画、3D 与交互式开发教程
830 周安装
Nx Import 使用指南:从源仓库导入代码并保留Git历史
250 周安装
OpenPencil CLI 工具:.fig 设计文件命令行操作与 MCP 服务器 | 设计自动化
250 周安装
学术深度研究技能:AI驱动的学术文献综述与多源验证工具,生成APA格式报告
250 周安装
React PDF 渲染器 - 使用 JSON 生成 PDF 文档,支持自定义组件和流式渲染
250 周安装
后端安全编码专家 | 安全开发实践、漏洞预防与防御性编程技术指南
250 周安装
TanStack Form:高性能无头表单库,支持TypeScript、Zod、Valibot验证
250 周安装