Devtools

Mount it

Mount the panel next to your canvas. In React Three Fiber, give it your key or token the way you give useBakery3(), and it shows the scene in the page's one <Canvas>.

import { Bakery3Devtools } from '@oeave/bakery3/r3f';

<>
  <Canvas>
    <Scene />
  </Canvas>

  {import.meta.env.DEV && <Bakery3Devtools token={getToken} />}
</>

With several canvases on the page, put a <Bakery3Provider> inside the one to render and mount <Bakery3Devtools /> without a key or token. It then uses the provider's connection and scene.

<>
  <Canvas>
    <Bakery3Provider token={getToken}>
      <Scene />
    </Bakery3Provider>
  </Canvas>

  {import.meta.env.DEV && <Bakery3Devtools />}
</>

With neither a key nor a provider, the panel still opens after a moment. It says that no key or token was given, links to the Keys page, and logs one warning in the console.

Options

Both mounts take these:

<Bakery3Devtools> also takes these. Leave out apiKey and token to use <Bakery3Provider> instead.

mountBakery3Devtools also takes these:

What the panel shows

A missing or wrong key, a token the API refused and an empty balance show in the panel as soon as it asks for a price, with a link to the Keys page or the Billing page.

Control the panel from code

mountBakery3Devtools() returns the panel's handle. <Bakery3Devtools> hands you the same handle through onReady:

import type { DevPanel } from '@oeave/bakery3/r3f';

const panel = useRef<DevPanel | null>(null);

<Bakery3Devtools onReady={(handle) => (panel.current = handle)} />

The handle does this:

panel.open();
panel.close();
panel.setTab('bake');
panel.refresh();        // re-read bake candidates and history
panel.refreshCost();    // ask for a fresh estimate now
panel.setStatus('uploading 148 MB…', 'info');   // 'info' | 'error' | 'ok'
panel.setProgress('Baking pedestal · 3/12', 0.25);
panel.setProgress(null);                        // clear
panel.dispose();

dispose() also reverts any bake the panel applied and frees its lightmaps. In React that happens on unmount.

Pause your orbit controls during playback

Orbit controls and the timeline both move the camera, and the preview stutters if both run. Turn your controls off while the timeline plays.

<Bakery3Devtools
  token={getToken}
  timeline={tl}
  onPlaybackChange={(active) => {
    controls.current.enabled = !active;
  }}
/>

Bake with your own worker

The Bake tab calls bakery3.bake() by default, which is our hosted baking. To use a bake worker of your own, pass a bakeTransport: a function that takes a BakeSpec and its assets and returns a BakeBundle.

<Bakery3Devtools
  token={getToken}
  bakeTransport={async (spec, assets) => {
    const response = await fetch('/api/bake', {
      method: 'POST',
      body: pack(spec, assets),   // your own function
    });
    return response.json();
  }}
/>

If your bundle has relative URLs, set bakeBaseUrl to where they resolve.

Keep the panel out of production

{process.env.NODE_ENV === 'development' && <Bakery3Devtools token={getToken} />}

@oeave/bakery3/devtools is its own entry point, so an app that never imports it never bundles it. You can ship the panel in production behind your own access control, but it is made for development.

Use the panel without the hosted API

mountDevPanel is the same panel with no client attached. You supply every callback. Use it when the panel talks to a local worker or a proxy of your own.

import { mountDevPanel } from '@oeave/bakery3/devtools';

const panel = mountDevPanel({
  position: 'bottom-right',
  compatibility: () => report,
  estimate: (request) => post('/api/estimate', request),
  sceneVersion: () => scene.children.length,
  viewVersion: () => camera.position.toArray().join(),
  render: { onRender: (settings) => post('/api/render', settings) },
});

sceneVersion and viewVersion are cheap fingerprints of what is in the scene and where the camera is. The panel compares them a few times a second while it is open and asks for a new price when one changes: a change to the scene as soon as it settles, a camera move once the camera stops.

Show only the timeline

mountTimelinePanel gives you the timeline without the render and bake tabs. See Render video.