<Snapshots />


The <Snapshots /> is a button that will trigger the window.threekit.treble.takeSnapshot() when pressed and download the specified snapshots.

Code Examples

import { ThreekitProvider, Player, Snapshots } from '@threekit-tools/treble';

const Component = () => {
  return (
            cameras={[undefined, 'birdsey-camera']}
            config={{ format: 'jpeg' }}

The Snapshot takes two props: camerasList and snapshotsConfig.

The camerasList take a list of cameras to take snapshots from. It can be a single string or an array of strings depending on how many cameras are to be used for the snapshot. To take a snapshot from the user's current view, we specify that camera as undefined, both as an individual camera value or as part of the array of cameras. e.g. const cameras = [undefined, 'snapshot-camera-alt']

The snapshotConfig allows us to define the following values:

const snapshotsConfig = {
  format: 'png' | 'jpeg',
  filename: 'snapshot-filename',



These cameras must be setup to the configurator using the reserved camera attribute.


orientationSets whether to align the buttons horizontally or verticallyvertical | horizontalhorizontal
shapeSets the shape of the button.round | squareround
typeSets the type of button.hollow | standard | accent | primary | threekitthreekit
classNameA className to the widget container.string''