# EastNorthUpFrame

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

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

Creates a group positioned and oriented at a geographic coordinate on the tileset ellipsoid.
Must be a child of TilesRenderer. Does not modify the tileset transform.

Example: Placing east, north and up axes at a latitude and longitude on the globe

```jsx
import { MathUtils } from 'three';
import { LineSegments2 } from 'three/addons/lines/LineSegments2.js';
import { LineSegmentsGeometry } from 'three/addons/lines/LineSegmentsGeometry.js';
import { LineMaterial } from 'three/addons/lines/LineMaterial.js';
import { createRoot } from 'react-dom/client';
import { Canvas } from '@react-three/fiber';
import { TilesRenderer, TilesPlugin, GlobeControls, EastNorthUpFrame } 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 } );

// east ( red ), north ( green ) and up ( blue ) axes
const axes = new LineSegments2(
	new LineSegmentsGeometry()
		.setPositions( [ 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0, 1 ] )
		.setColors( [ 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1, 0, 0, 0, 1, 0, 0, 1 ] ),
	new LineMaterial( { vertexColors: true, linewidth: 4 } ),
);

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 />
				<EastNorthUpFrame lat={ 34.2013 * MathUtils.DEG2RAD } lon={ - 118.1714 * MathUtils.DEG2RAD }>
					<primitive object={ axes } scale={ 1.5e6 } raycast={ () => {} } />
				</EastNorthUpFrame>
			</TilesRenderer>
		</Canvas>
	);

}

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

## Props

- `lat`, `number`, optional, default `0`: Latitude in radians.
- `lon`, `number`, optional, default `0`: Longitude in radians.
- `height`, `number`, optional, default `0`: Height above the ellipsoid in meters.
- `az`, `number`, optional, default `0`: Azimuth rotation in radians, applied first.
- `el`, `number`, optional, default `0`: Elevation rotation in radians, applied second.
- `roll`, `number`, optional, default `0`: Roll rotation in radians, applied third.
- `ellipsoid`, `Ellipsoid`, optional: Ellipsoid to use when no TilesRenderer parent is present.
- `children`, `ReactNode`, optional: Children positioned relative to the east-north-up frame.