Plugin that renders a Deep Zoom Image (DZI) as a tiled overlay. Only a single embedded "Image" is supported. See the Deep Zoom specification and OpenSeadragon.
import { TilesRenderer, EnvironmentControls } from '3d-tiles-renderer/three';
import { GeneratedSurfacePlugin, DeepZoomOverlay } from '3d-tiles-renderer/three/plugins';
// scene, camera and renderer are initialized here
const URL = 'https://openseadragon.github.io/example-images/duomo/duomo.dzi';
const tiles = new TilesRenderer();
tiles.registerPlugin( new GeneratedSurfacePlugin( {
overlay: new DeepZoomOverlay( { url: URL } ),
applyOverlayTexture: true,
} ) );
tiles.setCamera( camera );
scene.add( tiles.group );
camera.position.set( 0, 0, 1.5 );
camera.near = 0.001;
camera.updateProjectionMatrix();
const controls = new EnvironmentControls( scene, camera, renderer.domElement );
controls.minDistance = 0.01;
controls.cameraRadius = 0;
controls.enableDamping = true;
controls.fallbackPlane.normal.set( 0, 0, 1 );
controls.up.set( 0, 0, 1 );
renderer.setAnimationLoop( () => {
controls.update();
camera.updateMatrixWorld();
tiles.setResolutionFromRenderer( camera, renderer );
tiles.update();
renderer.render( scene, camera );
} );On this page
Methods
new DeepZoomOverlay(
options?: {
// URL to the `.dzi` descriptor file.
url?: string
}
)Inherited
From ImageOverlay
- Properties