# GlobeControls

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

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

Wraps the three.js GlobeControls class. Must be a child of TilesRenderer to receive ellipsoid
context. All GlobeControls properties can be set as props.

Example: Drag to rotate the globe, right drag or shift drag to tilt, and scroll to zoom

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

const URL = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}';
const overlay = new XYZTilesOverlay( { url: URL } );

function App() {

	return (
		<Canvas camera={ { position: [ 0, 0, 1.75e7 ] } }>
			<TilesRenderer group={ { rotation: [ - Math.PI / 2, 0, 0 ] } }>
				<TilesPlugin plugin={ GeneratedSurfacePlugin } args={ { overlay, applyOverlayTexture: true } } />
				<GlobeControls enableDamping />
			</TilesRenderer>
		</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.