Using Player Widgets

note

The Threekit Player doesn't place nicely with the demos feature of our documentation. If you don't see the 3D visuals, please refresh the page and the Player should load and render as expected.

Live Editor

function ThreekitApp() {
  return (
    <ThreekitProvider {...threekitConfig} threekitEnv={'preview'}>
      <Player>
        <Player.TopRightWidgets>
          <Snapshots />
        </Player.TopRightWidgets>
        <Player.MiddleRightWidgets>
          <Zoom orientation="vertical" />
        </Player.MiddleRightWidgets>
      </Player>
    </ThreekitProvider>
  );
}

function ThreekitApp() {
  return (
    <ThreekitProvider {...threekitConfig} threekitEnv={'preview'}>
      <Player>
        <Player.TopRightWidgets>
          <Snapshots />
        </Player.TopRightWidgets>
        <Player.MiddleRightWidgets>
          <Zoom orientation="vertical" />
        </Player.MiddleRightWidgets>
      </Player>
    </ThreekitProvider>
  );
}

Result