<Zoom />


The <Zoom /> widget allows the user to control the zoom property of the Threekit Player.

The component is built using the useZoom hook. It provides a pair of + and - buttons the user can click to update the zoom.

It defaults to single increments changes but also accepts increment values to use instead.

Code Example

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

const Component = () => {
  return (
          <Zoom orientation="vertical" />


orientationSets whether to align the buttons horizontally or verticallyvertical | horizontalhorizontal
stepThe amount to step the zoom by.number1
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''