Discussions

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

PropertyDescriptionTypeDefault
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''