Zoom

<Zoom />

Overview

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 (
    <ThreekitProvider>
      <Player>
        <Player.MiddleRightWidgets>
          <Zoom orientation="vertical" />
        </Player.MiddleRightWidgets>
      </Player>
    </ThreekitProvider>
  );
};

Props

Property	Description	Type	Default
orientation	Sets whether to align the buttons horizontally or vertically	vertical | horizontal	horizontal
step	The amount to step the zoom by.	number	1
shape	Sets the shape of the button.	round | square	round
type	Sets the type of button.	hollow | standard | accent | primary | threekit	threekit
className	A className to the widget container.	string	''