> ## Documentation Index
> Fetch the complete documentation index at: https://dadd.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# SceneLights

> Auto-create Three.js lights from MJCF definitions

Reads `<light>` elements from the loaded MuJoCo model and creates corresponding Three.js lights.

## Usage

```tsx theme={null}
<MujocoCanvas config={config}>
  <SceneLights />
</MujocoCanvas>
```

### With Intensity Multiplier

```tsx theme={null}
<SceneLights intensity={1.5} />
```

## Props

<ParamField body="intensity" type="number" default="1.0">
  Multiplier applied to all light intensities.
</ParamField>

## Light Mapping

| MJCF `light_type` | Three.js Light     |
| ----------------- | ------------------ |
| `0` (directional) | `DirectionalLight` |
| `1` (spot)        | `SpotLight`        |

The component reads from the MuJoCo model:

* `model.nlight` — number of lights
* `light_pos` — position
* `light_dir` — direction
* `light_diffuse` — color
* `light_castshadow` — shadow casting
* `light_attenuation` — attenuation coefficients
* `light_cutoff` — spotlight cone angle

## Hook Alternative

For imperative usage inside your own components, use [`useSceneLights`](/hooks/use-scene-lights):

```tsx theme={null}
import { useSceneLights } from "mujoco-react";

function MyScene() {
  useSceneLights(1.5);
  // ... your other scene setup
  return <mesh />;
}
```

## Alternative

You can also enable MJCF lights via the `mjcfLights` prop on `MujocoCanvas`:

```tsx theme={null}
<MujocoCanvas config={config} mjcfLights>
```

Or skip both and define your own Three.js lights:

```tsx theme={null}
<MujocoCanvas config={config}>
  <ambientLight intensity={0.7} />
  <directionalLight position={[1, 2, 5]} castShadow />
</MujocoCanvas>
```

## Notes

* Lights are created once when the model loads and cleaned up on unmount
* If your MJCF has no `<light>` elements, this component does nothing
* The component delegates to `useSceneLights` internally