Wraps the three.js GlobeControls class. Must be a child of TilesRenderer to receive ellipsoid context. All GlobeControls properties can be set as props.
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 /> );<GlobeControls
camera?: Camera
scene?: Object3D
domElement?: HTMLCanvasElement
/>On this page
Props
Override the default R3F camera.
Override the default R3F scene.
domElement?: HTMLCanvasElement
Override the default canvas element.