# EnvironmentControls

component in `3d-tiles-renderer/r3f`

```js
import { EnvironmentControls } from '3d-tiles-renderer/r3f';
```

Wraps the three.js EnvironmentControls class. Automatically attaches to the R3F camera, scene,
and canvas. All EnvironmentControls properties can be set as props.

Example: Drag to pan, right drag or shift drag to orbit, and scroll to zoom

```jsx
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { TilesRenderer, EnvironmentControls } from '3d-tiles-renderer/r3f';

const URL = 'https://raw.githubusercontent.com/NASA-AMMOS/3DTilesSampleData/master/msl-dingo-gap/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize/0528_0260184_to_s64o256_colorize_tileset.json';

function App() {

	return (
		<Canvas camera={ { position: [ 20, 10, 20 ] } }>
			<group rotation-x={ Math.PI / 2 }>
				<TilesRenderer url={ URL } />
			</group>
			<EnvironmentControls enableDamping />
		</Canvas>
	);

}

createRoot( document.getElementById( 'root' ) ).render( <App /> );
```

## Props

- `camera`, `Camera`, optional: Override the default R3F camera.
- `scene`, `Object3D`, optional: Override the default R3F scene.
- `domElement`, `HTMLCanvasElement`, optional: Override the default canvas element.