@zkmake/three-studio 0.2.0 → 0.3.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -1
- package/dist/react.d.ts +7 -1
- package/dist/react.js +2 -2
- package/dist/react.js.map +1 -1
- package/package.json +4 -2
package/README.md
CHANGED
|
@@ -74,7 +74,9 @@ useFrame(({ clock }) => {
|
|
|
74
74
|
```
|
|
75
75
|
|
|
76
76
|
Building the `<Canvas>` yourself? Put `<StudioRig state={resolveStudio(config, location.search)} />`
|
|
77
|
-
inside it for the same wiring.
|
|
77
|
+
inside it for the same wiring. Or hand `<Studio>` the `Canvas` component to mount: on React Three
|
|
78
|
+
Fiber 10, whose default `Canvas` is WebGPU, a game drawn with WebGL (GLSL material patches) passes
|
|
79
|
+
`Canvas={Canvas}` from `@react-three/fiber/legacy`.
|
|
78
80
|
|
|
79
81
|
## Vanilla three
|
|
80
82
|
|
package/dist/react.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { a as StudioVariant, i as StudioState, n as StudioConfig } from "./state-KovV7yXI.js";
|
|
2
2
|
import { r as StudioHandle, t as MountStudioOptions } from "./mount-CeU8JUWr.js";
|
|
3
3
|
import { CanvasProps } from "@react-three/fiber";
|
|
4
|
-
import { CSSProperties, ReactNode } from "react";
|
|
4
|
+
import { CSSProperties, ComponentType, ReactNode } from "react";
|
|
5
5
|
/** A variant `<Studio>` can draw: what goes in the canvas, and optionally DOM over it. */
|
|
6
6
|
export type StudioReactVariant = StudioVariant & {
|
|
7
7
|
render: (state: StudioState) => ReactNode;
|
|
@@ -36,6 +36,12 @@ export type StudioProps<V extends StudioReactVariant> = RigOptions & {
|
|
|
36
36
|
* merged over `{ preserveDrawingBuffer: true }`; `camera` objects over the view's lens.
|
|
37
37
|
*/
|
|
38
38
|
canvas?: CanvasOptions | ((state: StudioState<V>) => CanvasOptions) | undefined;
|
|
39
|
+
/**
|
|
40
|
+
* The `<Canvas>` component to mount. Default `@react-three/fiber`'s. An app whose game draws
|
|
41
|
+
* through another passes that one, e.g. R3F 10's WebGL `Canvas` from `@react-three/fiber/legacy`
|
|
42
|
+
* (the default there is WebGPU, which GLSL material patches don't run on).
|
|
43
|
+
*/
|
|
44
|
+
Canvas?: ComponentType<CanvasProps> | undefined;
|
|
39
45
|
/** What every variant stands in: lights, ground, background. */
|
|
40
46
|
stage?: ((state: StudioState<V>) => ReactNode) | undefined;
|
|
41
47
|
onReady?: ((studio: StudioHandle) => void) | undefined;
|
package/dist/react.js
CHANGED
|
@@ -85,7 +85,7 @@ function StudioRig({ state, onReady, children, ...options }) {
|
|
|
85
85
|
* createRoot(root).render(<Studio config={{ areas: { trees: { variants: TREES } } }} />);
|
|
86
86
|
*/
|
|
87
87
|
function Studio(props) {
|
|
88
|
-
const { config, search, stage, className, style, canvas, ...rig } = props;
|
|
88
|
+
const { config, search, stage, className, style, canvas, Canvas: Frame = Canvas, ...rig } = props;
|
|
89
89
|
const state = useMemo(() => resolveStudio(config, search ?? globalThis.location?.search ?? ""), [config, search]);
|
|
90
90
|
const own = typeof canvas === "function" ? canvas(state) : canvas ?? {};
|
|
91
91
|
const { view } = state;
|
|
@@ -111,7 +111,7 @@ function Studio(props) {
|
|
|
111
111
|
...style
|
|
112
112
|
},
|
|
113
113
|
"data-studio": state.tag,
|
|
114
|
-
children: [/* @__PURE__ */ jsx(
|
|
114
|
+
children: [/* @__PURE__ */ jsx(Frame, {
|
|
115
115
|
...own,
|
|
116
116
|
gl,
|
|
117
117
|
camera,
|
package/dist/react.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * `@zkmake/three-studio/react`: `<Studio>` is a whole mockups or model-studio page for React Three\n * Fiber, from a config of areas and variants; `<StudioRig>` adds the same wiring to a `<Canvas>`\n * the page builds itself. Variants read the page state through `useStudio()`, and freeze their\n * animations on `?t=` through `useStudioTime()`.\n */\nimport { Canvas, type CanvasProps, useFrame, useThree } from \"@react-three/fiber\";\nimport {\n type CSSProperties,\n createContext,\n type ReactNode,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n resolveStudio,\n type StudioConfig,\n type StudioState,\n studioTime,\n type StudioVariant,\n} from \"../core/state.ts\";\nimport { mountStudio, type MountStudioOptions, type StudioHandle } from \"../ui/mount.ts\";\n\n/** A variant `<Studio>` can draw: what goes in the canvas, and optionally DOM over it. */\nexport type StudioReactVariant = StudioVariant & {\n render: (state: StudioState) => ReactNode;\n /** DOM over the canvas (a HUD mockup). Not in `saveShot`'s image, which is the canvas alone. */\n hud?: ((state: StudioState) => ReactNode) | undefined;\n};\n\ntype RigOptions = Pick<\n MountStudioOptions,\n \"controls\" | \"audit\" | \"overlay\" | \"globals\" | \"shotEndpoint\"\n>;\n\nconst StudioContext = createContext<StudioState | null>(null);\n\n/** The page state: area, variant, view and switches. Inside `<Studio>` or `<StudioRig>`. */\nexport function useStudio(): StudioState {\n const state = useContext(StudioContext);\n\n if (!state) {\n throw new Error(\"three-studio: useStudio() needs a <Studio> or <StudioRig> above it\");\n }\n\n return state;\n}\n\n/** Maps a clock time to the one to draw: frozen at `?t=` when set. */\nexport function useStudioTime(): (elapsed: number) => number {\n const state = useStudio();\n\n return (elapsed) => studioTime(state, elapsed);\n}\n\nexport type StudioRigProps = RigOptions & {\n state: StudioState;\n /** Called once mounted, with the handle (`setView`, `saveShot`, `stats`). */\n onReady?: ((studio: StudioHandle) => void) | undefined;\n children?: ReactNode;\n};\n\n/**\n * Inside a `<Canvas>`: puts the camera at the state's view, adds orbit controls, three-audit's\n * console helpers, the overlay with its readout, and `window.studio`. Options are read on mount.\n * `saveShot` draws through R3F's own loop, so post-processing that renders in `useFrame` is kept.\n */\nexport function StudioRig({ state, onReady, children, ...options }: StudioRigProps) {\n const gl = useThree((root) => root.gl);\n const scene = useThree((root) => root.scene);\n const camera = useThree((root) => root.camera);\n const advance = useThree((root) => root.advance);\n const invalidate = useThree((root) => root.invalidate);\n const latest = useRef({ options, onReady });\n const handle = useRef<StudioHandle | null>(null);\n\n useEffect(() => {\n latest.current = { options, onReady };\n });\n\n useLayoutEffect(() => {\n const studio = mountStudio({\n ...latest.current.options,\n state,\n renderer: gl,\n scene,\n camera,\n render: () => advance(performance.now(), true),\n });\n const redraw = () => invalidate();\n\n studio.controls?.addEventListener(\"change\", redraw);\n handle.current = studio;\n latest.current.onReady?.(studio);\n invalidate();\n\n return () => {\n studio.controls?.removeEventListener(\"change\", redraw);\n handle.current = null;\n studio.dispose();\n };\n }, [state, gl, scene, camera, advance, invalidate]);\n\n useFrame(() => handle.current?.update());\n\n return <StudioContext.Provider value={state}>{children}</StudioContext.Provider>;\n}\n\ntype CanvasOptions = Omit<CanvasProps, \"children\">;\n\nexport type StudioProps<V extends StudioReactVariant> = RigOptions & {\n config: StudioConfig<V>;\n /** The query to read. Default `window.location.search`. */\n search?: string | undefined;\n /**\n * The game's `<Canvas>` settings (tone mapping, `dpr`, `shadows`, fog in `scene`), so variants\n * look as they will in the game. A function gets the state, for per-area fog. `gl` objects are\n * merged over `{ preserveDrawingBuffer: true }`; `camera` objects over the view's lens.\n */\n canvas?: CanvasOptions | ((state: StudioState<V>) => CanvasOptions) | undefined;\n /** What every variant stands in: lights, ground, background. */\n stage?: ((state: StudioState<V>) => ReactNode) | undefined;\n onReady?: ((studio: StudioHandle) => void) | undefined;\n className?: string | undefined;\n style?: CSSProperties | undefined;\n};\n\n/**\n * A studio page: the canvas filling its parent, the variant inside a group tagged\n * `userData.studioObject = \"<area>-<variant>\"`, the stage around it, and the rig. Links reload the\n * page, so each variant mounts fresh.\n *\n * createRoot(root).render(<Studio config={{ areas: { trees: { variants: TREES } } }} />);\n */\nexport function Studio<V extends StudioReactVariant>(props: StudioProps<V>) {\n const { config, search, stage, className, style, canvas, ...rig } = props;\n const state = useMemo(\n () => resolveStudio(config, search ?? globalThis.location?.search ?? \"\"),\n [config, search],\n );\n const own = typeof canvas === \"function\" ? canvas(state) : (canvas ?? {});\n const { view } = state;\n const lens = {\n fov: view.fov ?? 40,\n near: view.near ?? 0.1,\n far: view.far ?? 2000,\n position: [...view.position] as [number, number, number],\n };\n const gl =\n own.gl === undefined || isPlainObject(own.gl)\n ? { preserveDrawingBuffer: true, ...(own.gl as object | undefined) }\n : own.gl;\n const camera =\n own.camera === undefined || isPlainObject(own.camera)\n ? { ...lens, ...(own.camera as object | undefined) }\n : own.camera;\n\n return (\n <div\n className={className}\n style={{ position: \"absolute\", inset: 0, ...style }}\n data-studio={state.tag}\n >\n <
|
|
1
|
+
{"version":3,"file":"react.js","names":[],"sources":["../src/react/index.tsx"],"sourcesContent":["/**\n * `@zkmake/three-studio/react`: `<Studio>` is a whole mockups or model-studio page for React Three\n * Fiber, from a config of areas and variants; `<StudioRig>` adds the same wiring to a `<Canvas>`\n * the page builds itself. Variants read the page state through `useStudio()`, and freeze their\n * animations on `?t=` through `useStudioTime()`.\n */\nimport { Canvas, type CanvasProps, useFrame, useThree } from \"@react-three/fiber\";\nimport {\n type ComponentType,\n type CSSProperties,\n createContext,\n type ReactNode,\n useContext,\n useEffect,\n useLayoutEffect,\n useMemo,\n useRef,\n} from \"react\";\n\nimport {\n resolveStudio,\n type StudioConfig,\n type StudioState,\n studioTime,\n type StudioVariant,\n} from \"../core/state.ts\";\nimport { mountStudio, type MountStudioOptions, type StudioHandle } from \"../ui/mount.ts\";\n\n/** A variant `<Studio>` can draw: what goes in the canvas, and optionally DOM over it. */\nexport type StudioReactVariant = StudioVariant & {\n render: (state: StudioState) => ReactNode;\n /** DOM over the canvas (a HUD mockup). Not in `saveShot`'s image, which is the canvas alone. */\n hud?: ((state: StudioState) => ReactNode) | undefined;\n};\n\ntype RigOptions = Pick<\n MountStudioOptions,\n \"controls\" | \"audit\" | \"overlay\" | \"globals\" | \"shotEndpoint\"\n>;\n\nconst StudioContext = createContext<StudioState | null>(null);\n\n/** The page state: area, variant, view and switches. Inside `<Studio>` or `<StudioRig>`. */\nexport function useStudio(): StudioState {\n const state = useContext(StudioContext);\n\n if (!state) {\n throw new Error(\"three-studio: useStudio() needs a <Studio> or <StudioRig> above it\");\n }\n\n return state;\n}\n\n/** Maps a clock time to the one to draw: frozen at `?t=` when set. */\nexport function useStudioTime(): (elapsed: number) => number {\n const state = useStudio();\n\n return (elapsed) => studioTime(state, elapsed);\n}\n\nexport type StudioRigProps = RigOptions & {\n state: StudioState;\n /** Called once mounted, with the handle (`setView`, `saveShot`, `stats`). */\n onReady?: ((studio: StudioHandle) => void) | undefined;\n children?: ReactNode;\n};\n\n/**\n * Inside a `<Canvas>`: puts the camera at the state's view, adds orbit controls, three-audit's\n * console helpers, the overlay with its readout, and `window.studio`. Options are read on mount.\n * `saveShot` draws through R3F's own loop, so post-processing that renders in `useFrame` is kept.\n */\nexport function StudioRig({ state, onReady, children, ...options }: StudioRigProps) {\n const gl = useThree((root) => root.gl);\n const scene = useThree((root) => root.scene);\n const camera = useThree((root) => root.camera);\n const advance = useThree((root) => root.advance);\n const invalidate = useThree((root) => root.invalidate);\n const latest = useRef({ options, onReady });\n const handle = useRef<StudioHandle | null>(null);\n\n useEffect(() => {\n latest.current = { options, onReady };\n });\n\n useLayoutEffect(() => {\n const studio = mountStudio({\n ...latest.current.options,\n state,\n renderer: gl,\n scene,\n camera,\n render: () => advance(performance.now(), true),\n });\n const redraw = () => invalidate();\n\n studio.controls?.addEventListener(\"change\", redraw);\n handle.current = studio;\n latest.current.onReady?.(studio);\n invalidate();\n\n return () => {\n studio.controls?.removeEventListener(\"change\", redraw);\n handle.current = null;\n studio.dispose();\n };\n }, [state, gl, scene, camera, advance, invalidate]);\n\n useFrame(() => handle.current?.update());\n\n return <StudioContext.Provider value={state}>{children}</StudioContext.Provider>;\n}\n\ntype CanvasOptions = Omit<CanvasProps, \"children\">;\n\nexport type StudioProps<V extends StudioReactVariant> = RigOptions & {\n config: StudioConfig<V>;\n /** The query to read. Default `window.location.search`. */\n search?: string | undefined;\n /**\n * The game's `<Canvas>` settings (tone mapping, `dpr`, `shadows`, fog in `scene`), so variants\n * look as they will in the game. A function gets the state, for per-area fog. `gl` objects are\n * merged over `{ preserveDrawingBuffer: true }`; `camera` objects over the view's lens.\n */\n canvas?: CanvasOptions | ((state: StudioState<V>) => CanvasOptions) | undefined;\n /**\n * The `<Canvas>` component to mount. Default `@react-three/fiber`'s. An app whose game draws\n * through another passes that one, e.g. R3F 10's WebGL `Canvas` from `@react-three/fiber/legacy`\n * (the default there is WebGPU, which GLSL material patches don't run on).\n */\n Canvas?: ComponentType<CanvasProps> | undefined;\n /** What every variant stands in: lights, ground, background. */\n stage?: ((state: StudioState<V>) => ReactNode) | undefined;\n onReady?: ((studio: StudioHandle) => void) | undefined;\n className?: string | undefined;\n style?: CSSProperties | undefined;\n};\n\n/**\n * A studio page: the canvas filling its parent, the variant inside a group tagged\n * `userData.studioObject = \"<area>-<variant>\"`, the stage around it, and the rig. Links reload the\n * page, so each variant mounts fresh.\n *\n * createRoot(root).render(<Studio config={{ areas: { trees: { variants: TREES } } }} />);\n */\nexport function Studio<V extends StudioReactVariant>(props: StudioProps<V>) {\n const { config, search, stage, className, style, canvas, Canvas: Frame = Canvas, ...rig } = props;\n const state = useMemo(\n () => resolveStudio(config, search ?? globalThis.location?.search ?? \"\"),\n [config, search],\n );\n const own = typeof canvas === \"function\" ? canvas(state) : (canvas ?? {});\n const { view } = state;\n const lens = {\n fov: view.fov ?? 40,\n near: view.near ?? 0.1,\n far: view.far ?? 2000,\n position: [...view.position] as [number, number, number],\n };\n const gl =\n own.gl === undefined || isPlainObject(own.gl)\n ? { preserveDrawingBuffer: true, ...(own.gl as object | undefined) }\n : own.gl;\n const camera =\n own.camera === undefined || isPlainObject(own.camera)\n ? { ...lens, ...(own.camera as object | undefined) }\n : own.camera;\n\n return (\n <div\n className={className}\n style={{ position: \"absolute\", inset: 0, ...style }}\n data-studio={state.tag}\n >\n <Frame {...own} gl={gl as CanvasProps[\"gl\"]} camera={camera as CanvasProps[\"camera\"]}>\n <StudioRig state={state} {...rig}>\n {stage?.(state)}\n <group userData={{ studioObject: state.tag }}>{state.variant.render(state)}</group>\n </StudioRig>\n </Frame>\n {state.variant.hud ? (\n <StudioContext.Provider value={state}>{state.variant.hud(state)}</StudioContext.Provider>\n ) : null}\n </div>\n );\n}\n\nconst isPlainObject = (value: unknown): value is object =>\n typeof value === \"object\" &&\n value !== null &&\n !Array.isArray(value) &&\n Object.getPrototypeOf(value) === Object.prototype;\n"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@zkmake/three-studio",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.3.1",
|
|
4
4
|
"description": "A dev page for three.js scenes: areas, variants and camera views from the URL, an orbit rig, a draw-call readout, audit helpers and screenshots an agent can take, plus a CLI to save and diff them. Vanilla three and React Three Fiber.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"devtools",
|
|
@@ -51,7 +51,7 @@
|
|
|
51
51
|
"typecheck": "tsc"
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@zkmake/three-audit": "^0.
|
|
54
|
+
"@zkmake/three-audit": "^0.6.0"
|
|
55
55
|
},
|
|
56
56
|
"devDependencies": {
|
|
57
57
|
"@arethetypeswrong/core": "catalog:",
|
|
@@ -59,9 +59,11 @@
|
|
|
59
59
|
"@react-three/test-renderer": "catalog:",
|
|
60
60
|
"@types/node": "catalog:",
|
|
61
61
|
"@types/react": "catalog:",
|
|
62
|
+
"@types/react-dom": "catalog:",
|
|
62
63
|
"@types/three": "catalog:",
|
|
63
64
|
"publint": "catalog:",
|
|
64
65
|
"react": "catalog:",
|
|
66
|
+
"react-dom": "catalog:",
|
|
65
67
|
"three": "catalog:",
|
|
66
68
|
"tsdown": "catalog:",
|
|
67
69
|
"typescript": "catalog:",
|