EastNorthUpFrame

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 /> );