Three.js with Backstage Lite

@unseenco/backstage/threejs supports both full Backstage and lite: autoAddObject, autoAddMaterial, and autoAddCamera only need ISheet and onValuesChange, so they work with @unseenco/backstage/core-lite.

Peer dependencies

In package.json, declare peers for the stack you ship—one core and one studio per app:

Runtime	Studio (dev)
@unseenco/backstage	@unseenco/backstage/studio
@unseenco/backstage/core-lite	@unseenco/backstage/studio-lite

Do not mix full core with studio-lite (or core-lite with full studio) in the same bundle.

Studio extension

Import the extension from /extension so production does not pull Studio:

import studio from '@unseenco/backstage/studio-lite'
import extension from '@unseenco/backstage/threejs/extension'

studio.initialize()
studio.extend(
  extension({
    renderer,
    studio,
    scenes: [{name: 'Main', scene, camera}],
  }),
)

Runtime in production:

import {autoAddObject} from '@unseenco/backstage/threejs'
import {getProject} from '@unseenco/backstage/core-lite'

See the Three.js extension guide for configureBackstageThreejs, shared materials, and orbit mode—the APIs are the same; only package names change.

Playground reference

Monorepo playground (yarn playground):

• /shared/backstage-lite-three/ — core-lite + studio-lite + Three.js extension with bundled state.json.
• /shared/backstage-lite/ — DOM-only lite demo (no Three.js).

?backstage-lite-peers (playground only)

Lite Three.js demos in the playground import:

import {autoAddObject} from '@unseenco/backstage/threejs?backstage-lite-peers'
import {buildExtension} from '@unseenco/backstage/threejs/extension?backstage-lite-peers'

That query suffix is resolved by a Vite plugin in packages/playground so the demo graph aliases threejs peers to lite packages. Do not use ?backstage-lite-peers in published apps—install and import @unseenco/backstage/core-lite, @unseenco/backstage/studio-lite, and normal @unseenco/backstage/threejs paths instead.

Related

• Getting started
• Variants