@fonsecabarreto/genesis-gl-react 0.1.3 → 0.1.31

package/dist/chunk-MINHVZ2M.js

@@ -0,0 +1,267 @@
+// src/hooks/useGenesisGL.ts
+import { useRef, useEffect, useState } from "react";
+import { WebGLCore as WebGLCoreImpl } from "@fonsecabarreto/genesis-gl-core/Core/classes/WebGLCore";
+import { Viewport as ViewportImpl } from "@fonsecabarreto/genesis-gl-core/Core/classes/Viewport";
+import { Renderer as RendererImpl } from "@fonsecabarreto/genesis-gl-core/Core/classes/Renderer";
+import { Scene as SceneImpl } from "@fonsecabarreto/genesis-gl-core/Core/classes/Scene";
+import { loadOBJWithMTL } from "@fonsecabarreto/genesis-gl-core/Core/utils/parse-obj";
+var nullLoadOBJ = () => Promise.reject(new Error("GenesisGL not initialized"));
+function useGenesisGL(options) {
+  const [context, setContext] = useState({
+    renderer: null,
+    scene: null,
+    viewport: null,
+    webglCore: null,
+    loadOBJ: nullLoadOBJ
+  });
+  const contextRef = useRef(context);
+  useEffect(() => {
+    const {
+      canvasRef,
+      onReady,
+      onError,
+      width,
+      height,
+      initialYaw,
+      initialPitch,
+      initialZoom
+    } = options;
+    if (!canvasRef.current) return;
+    try {
+      const canvas = canvasRef.current;
+      const vpWidth = width ?? window.innerWidth;
+      const vpHeight = height ?? window.innerHeight;
+      const webglCore = new WebGLCoreImpl(canvas);
+      const viewport = new ViewportImpl(canvas, vpWidth, vpHeight, webglCore, {
+        pointerLock: false
+      });
+      const renderer = new RendererImpl(webglCore, viewport);
+      const scene = SceneImpl.withDefaultLights(webglCore);
+      viewport.camera.target = [0, 0, 0];
+      viewport.camera.position = [4, 2, 8];
+      if (initialYaw !== void 0) viewport.camera.yaw = initialYaw;
+      if (initialPitch !== void 0) viewport.camera.pitch = initialPitch;
+      if (initialZoom !== void 0) viewport.camera.setZoom(initialZoom);
+      viewport.camera.invalidate();
+      const loadOBJ = (objUrl, opts = {}) => loadOBJWithMTL(
+        webglCore,
+        objUrl,
+        opts.mtlUrl ?? null,
+        opts.translation,
+        opts.scale
+      );
+      const ctx = {
+        renderer,
+        scene,
+        viewport,
+        webglCore,
+        loadOBJ
+      };
+      contextRef.current = ctx;
+      setContext(ctx);
+      if (onReady) onReady(ctx);
+    } catch (error) {
+      const err = error instanceof Error ? error : new Error(String(error));
+      console.error("Failed to initialize GenesisGL:", err);
+      if (onError) onError(err);
+    }
+    return () => {
+      const { scene, viewport, webglCore } = contextRef.current;
+      if (scene && webglCore) scene.dispose(webglCore);
+      if (viewport) viewport.dispose();
+      if (webglCore) webglCore.dispose();
+    };
+  }, []);
+  return context;
+}
+
+// src/hooks/useRenderer.ts
+import { useRef as useRef2, useEffect as useEffect2 } from "react";
+function useRenderer(options) {
+  const { renderer, onFrame, enabled = true } = options;
+  const animationIdRef = useRef2(null);
+  useEffect2(() => {
+    if (!renderer || !enabled) return;
+    const animate = (time) => {
+      if (onFrame) onFrame(time);
+      animationIdRef.current = requestAnimationFrame(animate);
+    };
+    animationIdRef.current = requestAnimationFrame(animate);
+    return () => {
+      if (animationIdRef.current !== null) {
+        cancelAnimationFrame(animationIdRef.current);
+      }
+    };
+  }, [renderer, onFrame, enabled]);
+}
+
+// src/hooks/useWorldToScreen.ts
+import { useState as useState2, useCallback } from "react";
+function mat4TransformVec4(m, x, y, z, w) {
+  return {
+    x: m[0] * x + m[4] * y + m[8] * z + m[12] * w,
+    y: m[1] * x + m[5] * y + m[9] * z + m[13] * w,
+    z: m[2] * x + m[6] * y + m[10] * z + m[14] * w,
+    w: m[3] * x + m[7] * y + m[11] * z + m[15] * w
+  };
+}
+function useWorldToScreen(context) {
+  const [, forceUpdate] = useState2(0);
+  const project = useCallback(
+    (worldX, worldY, worldZ) => {
+      if (!context?.viewport) return { x: 0, y: 0, visible: false };
+      const { viewport } = context;
+      const camera = viewport.camera;
+      const canvas = viewport.getCanvas();
+      const view = camera.getViewMatrix();
+      const proj = camera.getProjectionMatrix();
+      const v = mat4TransformVec4(view, worldX, worldY, worldZ, 1);
+      const c = mat4TransformVec4(proj, v.x, v.y, v.z, v.w);
+      if (Math.abs(c.w) < 1e-6) return { x: 0, y: 0, visible: false };
+      const ndcX = c.x / c.w;
+      const ndcY = c.y / c.w;
+      const ndcZ = c.z / c.w;
+      const visible = ndcZ > -1 && ndcZ < 1 && Math.abs(ndcX) < 1.2 && Math.abs(ndcY) < 1.2;
+      return {
+        x: (ndcX + 1) * 0.5 * canvas.clientWidth,
+        y: (1 - ndcY) * 0.5 * canvas.clientHeight,
+        visible
+      };
+    },
+    [context]
+  );
+  const tick = useCallback(() => forceUpdate((n) => n + 1), []);
+  return { project, tick };
+}
+
+// src/hooks/useCameraControls.ts
+import { useCallback as useCallback2, useState as useState3 } from "react";
+var DEFAULT_YAW = 0;
+var DEFAULT_PITCH = 0;
+var DEFAULT_ZOOM = 1;
+function useCameraControls(ctx) {
+  const [camera, setCameraState] = useState3({
+    yaw: DEFAULT_YAW,
+    pitch: DEFAULT_PITCH,
+    zoom: DEFAULT_ZOOM
+  });
+  const sync = useCallback2((c) => {
+    setCameraState({ yaw: c.yaw, pitch: c.pitch, zoom: c.zoom });
+  }, []);
+  const rotate = useCallback2(
+    (deltaYaw, deltaPitch) => {
+      const c = ctx?.viewport?.camera;
+      if (!c) return;
+      c.rotate(deltaYaw, deltaPitch);
+      sync(c);
+    },
+    [ctx, sync]
+  );
+  const zoomBy = useCallback2(
+    (delta) => {
+      const c = ctx?.viewport?.camera;
+      if (!c) return;
+      c.zoomBy(delta);
+      sync(c);
+    },
+    [ctx, sync]
+  );
+  const setZoom = useCallback2(
+    (zoom) => {
+      const c = ctx?.viewport?.camera;
+      if (!c) return;
+      c.setZoom(zoom);
+      sync(c);
+    },
+    [ctx, sync]
+  );
+  const setYaw = useCallback2(
+    (yaw) => {
+      const c = ctx?.viewport?.camera;
+      if (!c) return;
+      c.yaw = yaw;
+      c.invalidate();
+      sync(c);
+    },
+    [ctx, sync]
+  );
+  const setPitch = useCallback2(
+    (pitch) => {
+      const c = ctx?.viewport?.camera;
+      if (!c) return;
+      c.pitch = pitch;
+      c.invalidate();
+      sync(c);
+    },
+    [ctx, sync]
+  );
+  const reset = useCallback2(() => {
+    const c = ctx?.viewport?.camera;
+    if (!c) return;
+    c.yaw = DEFAULT_YAW;
+    c.pitch = DEFAULT_PITCH;
+    c.invalidate();
+    c.setZoom(DEFAULT_ZOOM);
+    sync(c);
+  }, [ctx, sync]);
+  return { camera, rotate, setYaw, setPitch, zoomBy, setZoom, reset };
+}
+
+// src/hooks/useCameraMouseDrag.ts
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
+import { MouseDragControl } from "@fonsecabarreto/genesis-gl-core/Core";
+var SENSITIVITY = 8e-3;
+function useCameraMouseDrag(ctx, canvasRef) {
+  const { rotate } = useCameraControls(ctx);
+  const rotateRef = useRef3(rotate);
+  rotateRef.current = rotate;
+  useEffect3(() => {
+    const el = canvasRef.current;
+    if (!el || !ctx) return;
+    const drag = new MouseDragControl(el);
+    const onDrag = (dx, dy, button) => {
+      if (button !== 2) return;
+      rotateRef.current(-dx * SENSITIVITY, dy * SENSITIVITY);
+    };
+    drag.onChange(onDrag);
+    drag.enable();
+    const onMouseDown = (e) => {
+      if (e.button !== 2) return;
+      el.style.cursor = "grabbing";
+    };
+    const onMouseUp = (e) => {
+      if (e.button !== 2) return;
+      el.style.cursor = "grab";
+    };
+    const onMouseEnter = () => {
+      el.style.cursor = "grab";
+    };
+    const onMouseLeave = () => {
+      el.style.cursor = "";
+    };
+    const onContextMenu = (e) => e.preventDefault();
+    el.addEventListener("mousedown", onMouseDown);
+    el.addEventListener("mouseenter", onMouseEnter);
+    el.addEventListener("mouseleave", onMouseLeave);
+    window.addEventListener("mouseup", onMouseUp);
+    el.addEventListener("contextmenu", onContextMenu);
+    return () => {
+      drag.disable();
+      el.removeEventListener("mousedown", onMouseDown);
+      el.removeEventListener("mouseenter", onMouseEnter);
+      el.removeEventListener("mouseleave", onMouseLeave);
+      window.removeEventListener("mouseup", onMouseUp);
+      el.removeEventListener("contextmenu", onContextMenu);
+      el.style.cursor = "";
+    };
+  }, [ctx]);
+}
+
+export {
+  useGenesisGL,
+  useRenderer,
+  useWorldToScreen,
+  useCameraControls,
+  useCameraMouseDrag
+};
+//# sourceMappingURL=chunk-MINHVZ2M.js.map

package/dist/chunk-MINHVZ2M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/useGenesisGL.ts","../src/hooks/useRenderer.ts","../src/hooks/useWorldToScreen.ts","../src/hooks/useCameraControls.ts","../src/hooks/useCameraMouseDrag.ts"],"sourcesContent":["import { useRef, useEffect, useState } from 'react';\nimport type {\n  WebGLCore,\n  Scene,\n  Renderer,\n  Viewport,\n  Model,\n} from '@fonsecabarreto/genesis-gl-core/Core';\nimport { WebGLCore as WebGLCoreImpl } from '@fonsecabarreto/genesis-gl-core/Core/classes/WebGLCore';\nimport { Viewport as ViewportImpl } from '@fonsecabarreto/genesis-gl-core/Core/classes/Viewport';\nimport { Renderer as RendererImpl } from '@fonsecabarreto/genesis-gl-core/Core/classes/Renderer';\nimport { Scene as SceneImpl } from '@fonsecabarreto/genesis-gl-core/Core/classes/Scene';\nimport { loadOBJWithMTL } from '@fonsecabarreto/genesis-gl-core/Core/utils/parse-obj';\nexport interface LoadOBJOptions {\n  mtlUrl?: string | null;\n  translation?: [number, number, number];\n  scale?: [number, number, number];\n}\n\nexport interface GenesisGLContext {\n  renderer: Renderer | null;\n  scene: Scene | null;\n  viewport: Viewport | null;\n  webglCore: WebGLCore | null;\n  loadOBJ: (objUrl: string, options?: LoadOBJOptions) => Promise<Model>;\n}\n\nexport interface UseGenesisGLOptions {\n  canvasRef: React.RefObject<HTMLCanvasElement>;\n  width?: number;\n  height?: number;\n  initialYaw?: number;\n  initialPitch?: number;\n  initialZoom?: number;\n  onReady?: (context: GenesisGLContext) => void;\n  onError?: (error: Error) => void;\n}\n\nconst nullLoadOBJ = (): Promise<never> =>\n  Promise.reject(new Error('GenesisGL not initialized'));\n\nexport function useGenesisGL(options: UseGenesisGLOptions): GenesisGLContext {\n  const [context, setContext] = useState<GenesisGLContext>({\n    renderer: null,\n    scene: null,\n    viewport: null,\n    webglCore: null,\n    loadOBJ: nullLoadOBJ,\n  });\n\n  const contextRef = useRef<GenesisGLContext>(context);\n\n  useEffect(() => {\n    const {\n      canvasRef,\n      onReady,\n      onError,\n      width,\n      height,\n      initialYaw,\n      initialPitch,\n      initialZoom,\n    } = options;\n    if (!canvasRef.current) return;\n\n    try {\n      const canvas = canvasRef.current;\n      const vpWidth = width ?? window.innerWidth;\n      const vpHeight = height ?? window.innerHeight;\n\n      const webglCore = new WebGLCoreImpl(canvas);\n      const viewport = new ViewportImpl(canvas, vpWidth, vpHeight, webglCore, {\n        pointerLock: false,\n      });\n      const renderer = new RendererImpl(webglCore, viewport);\n      const scene = SceneImpl.withDefaultLights(webglCore);\n\n      viewport.camera.target = [0, 0, 0];\n      viewport.camera.position = [4, 2, 8];\n      if (initialYaw !== undefined) viewport.camera.yaw = initialYaw;\n      if (initialPitch !== undefined) viewport.camera.pitch = initialPitch;\n      if (initialZoom !== undefined) viewport.camera.setZoom(initialZoom);\n      viewport.camera.invalidate();\n\n      const loadOBJ = (objUrl: string, opts: LoadOBJOptions = {}) =>\n        loadOBJWithMTL(\n          webglCore,\n          objUrl,\n          opts.mtlUrl ?? null,\n          opts.translation,\n          opts.scale,\n        );\n\n      const ctx: GenesisGLContext = {\n        renderer,\n        scene,\n        viewport,\n        webglCore,\n        loadOBJ,\n      };\n      contextRef.current = ctx;\n      setContext(ctx);\n\n      if (onReady) onReady(ctx);\n    } catch (error) {\n      const err = error instanceof Error ? error : new Error(String(error));\n      console.error('Failed to initialize GenesisGL:', err);\n      if (onError) onError(err);\n    }\n\n    return () => {\n      const { scene, viewport, webglCore } = contextRef.current;\n      if (scene && webglCore) scene.dispose(webglCore);\n      if (viewport) viewport.dispose();\n      if (webglCore) webglCore.dispose();\n    };\n  }, []);\n\n  return context;\n}\n","import { useRef, useEffect } from 'react';\nimport type { Renderer } from '../../../GenesisGL/src/Core/classes/Renderer';\n\nexport interface UseRendererOptions {\n  renderer: Renderer | null;\n  onFrame?: (time: number) => void;\n  enabled?: boolean;\n}\n\n/**\n * Hook to manage the render loop with requestAnimationFrame.\n * Handles starting/stopping animation and cleanup.\n */\nexport function useRenderer(options: UseRendererOptions): void {\n  const { renderer, onFrame, enabled = true } = options;\n  const animationIdRef = useRef<number | null>(null);\n\n  useEffect(() => {\n    if (!renderer || !enabled) return;\n\n    const animate = (time: number) => {\n      if (onFrame) onFrame(time);\n      animationIdRef.current = requestAnimationFrame(animate);\n    };\n\n    animationIdRef.current = requestAnimationFrame(animate);\n\n    return () => {\n      if (animationIdRef.current !== null) {\n        cancelAnimationFrame(animationIdRef.current);\n      }\n    };\n  }, [renderer, onFrame, enabled]);\n}\n","import { useState, useCallback } from 'react';\nimport type { GenesisGLContext } from './useGenesisGL';\n\nexport interface ScreenPoint {\n  x: number;\n  y: number;\n  visible: boolean;\n}\n\nfunction mat4TransformVec4(m: Float32Array, x: number, y: number, z: number, w: number) {\n  return {\n    x: m[0] * x + m[4] * y + m[8] * z + m[12] * w,\n    y: m[1] * x + m[5] * y + m[9] * z + m[13] * w,\n    z: m[2] * x + m[6] * y + m[10] * z + m[14] * w,\n    w: m[3] * x + m[7] * y + m[11] * z + m[15] * w,\n  };\n}\n\nexport function useWorldToScreen(context: GenesisGLContext | null) {\n  const [, forceUpdate] = useState(0);\n\n  const project = useCallback(\n    (worldX: number, worldY: number, worldZ: number): ScreenPoint => {\n      if (!context?.viewport) return { x: 0, y: 0, visible: false };\n\n      const { viewport } = context;\n      const camera = viewport.camera;\n      const canvas = viewport.getCanvas();\n\n      const view = camera.getViewMatrix() as unknown as Float32Array;\n      const proj = camera.getProjectionMatrix() as unknown as Float32Array;\n\n      // view * worldPos\n      const v = mat4TransformVec4(view, worldX, worldY, worldZ, 1);\n      // proj * (view * worldPos)\n      const c = mat4TransformVec4(proj, v.x, v.y, v.z, v.w);\n\n      if (Math.abs(c.w) < 1e-6) return { x: 0, y: 0, visible: false };\n\n      const ndcX = c.x / c.w;\n      const ndcY = c.y / c.w;\n      const ndcZ = c.z / c.w;\n\n      const visible = ndcZ > -1 && ndcZ < 1 && Math.abs(ndcX) < 1.2 && Math.abs(ndcY) < 1.2;\n\n      return {\n        x: ((ndcX + 1) * 0.5) * canvas.clientWidth,\n        y: ((1 - ndcY) * 0.5) * canvas.clientHeight,\n        visible,\n      };\n    },\n    [context],\n  );\n\n  // expose a tick function callers can plug into onFrame to re-render\n  const tick = useCallback(() => forceUpdate((n) => n + 1), []);\n\n  return { project, tick };\n}\n","import { useCallback, useState } from 'react';\nimport type { GenesisGLContext } from './useGenesisGL';\n\nexport interface CameraState {\n  yaw: number;\n  pitch: number;\n  zoom: number;\n}\n\nexport interface UseCameraControlsResult {\n  camera: CameraState;\n  rotate: (deltaYaw: number, deltaPitch: number) => void;\n  setYaw: (yaw: number) => void;\n  setPitch: (pitch: number) => void;\n  zoomBy: (delta: number) => void;\n  setZoom: (zoom: number) => void;\n  reset: () => void;\n}\n\nconst DEFAULT_YAW = 0;\nconst DEFAULT_PITCH = 0;\nconst DEFAULT_ZOOM = 1;\n\nexport function useCameraControls(\n  ctx: GenesisGLContext | null,\n): UseCameraControlsResult {\n  const [camera, setCameraState] = useState<CameraState>({\n    yaw: DEFAULT_YAW,\n    pitch: DEFAULT_PITCH,\n    zoom: DEFAULT_ZOOM,\n  });\n\n  const sync = useCallback((c: { yaw: number; pitch: number; zoom: number }) => {\n    setCameraState({ yaw: c.yaw, pitch: c.pitch, zoom: c.zoom });\n  }, []);\n\n  const rotate = useCallback(\n    (deltaYaw: number, deltaPitch: number) => {\n      const c = ctx?.viewport?.camera;\n      if (!c) return;\n      c.rotate(deltaYaw, deltaPitch);\n      sync(c);\n    },\n    [ctx, sync],\n  );\n\n  const zoomBy = useCallback(\n    (delta: number) => {\n      const c = ctx?.viewport?.camera;\n      if (!c) return;\n      c.zoomBy(delta);\n      sync(c);\n    },\n    [ctx, sync],\n  );\n\n  const setZoom = useCallback(\n    (zoom: number) => {\n      const c = ctx?.viewport?.camera;\n      if (!c) return;\n      c.setZoom(zoom);\n      sync(c);\n    },\n    [ctx, sync],\n  );\n\n  const setYaw = useCallback(\n    (yaw: number) => {\n      const c = ctx?.viewport?.camera;\n      if (!c) return;\n      c.yaw = yaw;\n      c.invalidate();\n      sync(c);\n    },\n    [ctx, sync],\n  );\n\n  const setPitch = useCallback(\n    (pitch: number) => {\n      const c = ctx?.viewport?.camera;\n      if (!c) return;\n      c.pitch = pitch;\n      c.invalidate();\n      sync(c);\n    },\n    [ctx, sync],\n  );\n\n  const reset = useCallback(() => {\n    const c = ctx?.viewport?.camera;\n    if (!c) return;\n    c.yaw = DEFAULT_YAW;\n    c.pitch = DEFAULT_PITCH;\n    c.invalidate();\n    c.setZoom(DEFAULT_ZOOM);\n    sync(c);\n  }, [ctx, sync]);\n\n  return { camera, rotate, setYaw, setPitch, zoomBy, setZoom, reset };\n}\n","import { useEffect, useRef } from 'react';\nimport { MouseDragControl } from '@fonsecabarreto/genesis-gl-core/Core';\nimport { useCameraControls } from './useCameraControls';\nimport type { GenesisGLContext } from './useGenesisGL';\n\nconst SENSITIVITY = 0.008;\n\nexport function useCameraMouseDrag(\n  ctx: GenesisGLContext | null,\n  canvasRef: React.RefObject<HTMLElement | null>,\n) {\n  const { rotate } = useCameraControls(ctx);\n  const rotateRef = useRef(rotate);\n  rotateRef.current = rotate;\n\n  useEffect(() => {\n    const el = canvasRef.current;\n    if (!el || !ctx) return;\n\n    const drag = new MouseDragControl(el);\n\n    const onDrag = (dx: number, dy: number, button: number) => {\n      if (button !== 2) return;\n      rotateRef.current(-dx * SENSITIVITY, dy * SENSITIVITY);\n    };\n\n    drag.onChange(onDrag);\n    drag.enable();\n\n    const onMouseDown = (e: MouseEvent) => {\n      if (e.button !== 2) return;\n      el.style.cursor = 'grabbing';\n    };\n\n    const onMouseUp = (e: MouseEvent) => {\n      if (e.button !== 2) return;\n      el.style.cursor = 'grab';\n    };\n\n    const onMouseEnter = () => {\n      el.style.cursor = 'grab';\n    };\n\n    const onMouseLeave = () => {\n      el.style.cursor = '';\n    };\n\n    const onContextMenu = (e: Event) => e.preventDefault();\n\n    el.addEventListener('mousedown', onMouseDown);\n    el.addEventListener('mouseenter', onMouseEnter);\n    el.addEventListener('mouseleave', onMouseLeave);\n    window.addEventListener('mouseup', onMouseUp);\n    el.addEventListener('contextmenu', onContextMenu);\n\n    return () => {\n      drag.disable();\n      el.removeEventListener('mousedown', onMouseDown);\n      el.removeEventListener('mouseenter', onMouseEnter);\n      el.removeEventListener('mouseleave', onMouseLeave);\n      window.removeEventListener('mouseup', onMouseUp);\n      el.removeEventListener('contextmenu', onContextMenu);\n      el.style.cursor = '';\n    };\n  }, [ctx]);\n}\n"],"mappings":"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","names":["useRef","useEffect","useState","useCallback","useState","useEffect","useRef","useRef","useEffect"]}

package/dist/chunk-PJM4LJXC.js

@@ -0,0 +1,394 @@
+import {
+  useCameraControls,
+  useCameraMouseDrag,
+  useGenesisGL,
+  useRenderer,
+  useWorldToScreen
+} from "./chunk-QXHXGH2T.js";
+
+// src/components/GenesisGLCanvas.tsx
+import React, { useRef, useCallback } from "react";
+import { jsx } from "react/jsx-runtime";
+var GenesisGLCanvas = React.forwardRef(
+  ({
+    onReady,
+    onFrame,
+    width,
+    height,
+    initialYaw,
+    initialPitch,
+    initialZoom,
+    style,
+    className
+  }, ref) => {
+    const canvasRef = useRef(null);
+    const setRef = useCallback(
+      (el) => {
+        canvasRef.current = el;
+        if (typeof ref === "function") ref(el);
+        else if (ref) ref.current = el;
+      },
+      [ref]
+    );
+    const onFrameRef = useRef(onFrame);
+    onFrameRef.current = onFrame;
+    const genesisContext = useGenesisGL({
+      canvasRef,
+      width,
+      height,
+      initialYaw,
+      initialPitch,
+      initialZoom,
+      onReady
+    });
+    const genesisContextRef = useRef(genesisContext);
+    genesisContextRef.current = genesisContext;
+    const stableOnFrame = useCallback((time) => {
+      const { renderer, scene } = genesisContextRef.current;
+      if (renderer && scene) {
+        renderer.render(scene);
+        onFrameRef.current?.(time);
+      }
+    }, []);
+    useRenderer({ renderer: genesisContext.renderer, onFrame: stableOnFrame });
+    useCameraMouseDrag(genesisContext, canvasRef);
+    return /* @__PURE__ */ jsx(
+      "canvas",
+      {
+        ref: setRef,
+        style: { display: "block", width: "100%", height: "100%", ...style },
+        className
+      }
+    );
+  }
+);
+GenesisGLCanvas.displayName = "GenesisGLCanvas";
+
+// src/components/RotationControls.tsx
+import { useState } from "react";
+import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+var STEP = 0.05;
+function IconBtn({
+  children,
+  title,
+  onClick,
+  color
+}) {
+  const [active, setActive] = useState(false);
+  const [hover, setHover] = useState(false);
+  return /* @__PURE__ */ jsx2(
+    "button",
+    {
+      title,
+      onClick,
+      onMouseEnter: () => setHover(true),
+      onMouseLeave: () => {
+        setHover(false);
+        setActive(false);
+      },
+      onMouseDown: () => setActive(true),
+      onMouseUp: () => setActive(false),
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        width: "22px",
+        height: "22px",
+        border: `1px solid ${hover ? color + "88" : color + "33"}`,
+        borderRadius: "5px",
+        background: active ? color + "30" : hover ? color + "18" : color + "0c",
+        color: hover ? color : color + "aa",
+        cursor: "pointer",
+        fontSize: "11px",
+        fontWeight: 700,
+        lineHeight: 1,
+        padding: 0,
+        transition: "all 0.12s",
+        transform: active ? "scale(0.88)" : "scale(1)",
+        flexShrink: 0
+      },
+      children
+    }
+  );
+}
+function AxisPill({
+  label,
+  color,
+  value,
+  onDec,
+  onInc,
+  onReset
+}) {
+  const deg = (value * 180 / Math.PI).toFixed(1);
+  const normalized = (value % (Math.PI * 2) + Math.PI * 2) % (Math.PI * 2);
+  const pct = normalized / (Math.PI * 2) * 100;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "5px",
+        background: color + "0a",
+        border: `1px solid ${color}22`,
+        borderRadius: "8px",
+        padding: "5px 7px",
+        flex: 1,
+        minWidth: 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { position: "relative", width: "18px", height: "18px", flexShrink: 0 }, children: [
+          /* @__PURE__ */ jsxs("svg", { width: "18", height: "18", viewBox: "0 0 18 18", children: [
+            /* @__PURE__ */ jsx2("circle", { cx: "9", cy: "9", r: "7", fill: "none", stroke: color + "22", strokeWidth: "2" }),
+            /* @__PURE__ */ jsx2(
+              "circle",
+              {
+                cx: "9",
+                cy: "9",
+                r: "7",
+                fill: "none",
+                stroke: color,
+                strokeWidth: "2",
+                strokeDasharray: `${pct / 100 * 44} 44`,
+                strokeLinecap: "round",
+                transform: "rotate(-90 9 9)",
+                style: { transition: "stroke-dasharray 0.1s ease" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx2(
+            "span",
+            {
+              style: {
+                position: "absolute",
+                inset: 0,
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center",
+                fontSize: "7px",
+                fontWeight: 800,
+                color,
+                letterSpacing: "-0.02em"
+              },
+              children: label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "span",
+          {
+            style: {
+              fontSize: "10px",
+              color: color + "cc",
+              fontVariantNumeric: "tabular-nums",
+              width: "36px",
+              textAlign: "right",
+              flexShrink: 0
+            },
+            children: [
+              deg,
+              "\xB0"
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "3px", marginLeft: "2px" }, children: [
+          /* @__PURE__ */ jsx2(IconBtn, { color, title: `\u2212${label}`, onClick: onDec, children: "\u2212" }),
+          /* @__PURE__ */ jsx2(IconBtn, { color, title: `+${label}`, onClick: onInc, children: "+" }),
+          /* @__PURE__ */ jsx2(IconBtn, { color: color + "88", title: "Reset", onClick: onReset, children: "\u21BA" })
+        ] })
+      ]
+    }
+  );
+}
+function RotationControls({ context, style }) {
+  const { camera, rotate, setYaw, setPitch, reset } = useCameraControls(context);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        gap: "6px",
+        background: "rgba(8,8,12,0.78)",
+        border: "1px solid rgba(255,255,255,0.07)",
+        borderRadius: "12px",
+        padding: "6px 8px",
+        backdropFilter: "blur(16px)",
+        boxShadow: "0 4px 24px rgba(0,0,0,0.5)",
+        fontFamily: '"Inter", system-ui, monospace',
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsx2(
+          "div",
+          {
+            title: context ? "Camera ready" : "Waiting for context\u2026",
+            style: {
+              width: "6px",
+              height: "6px",
+              borderRadius: "50%",
+              background: context ? "#c3e88d" : "#555",
+              boxShadow: context ? "0 0 6px #c3e88daa" : "none",
+              flexShrink: 0,
+              transition: "all 0.3s"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          AxisPill,
+          {
+            label: "Yaw",
+            color: "#ff5370",
+            value: camera.yaw,
+            onDec: () => rotate(-STEP, 0),
+            onInc: () => rotate(STEP, 0),
+            onReset: () => setYaw(0)
+          }
+        ),
+        /* @__PURE__ */ jsx2(
+          AxisPill,
+          {
+            label: "Pitch",
+            color: "#82aaff",
+            value: camera.pitch,
+            onDec: () => rotate(0, -STEP),
+            onInc: () => rotate(0, STEP),
+            onReset: () => setPitch(0)
+          }
+        ),
+        /* @__PURE__ */ jsx2(IconBtn, { color: "#ffffff", title: "Reset all", onClick: reset, children: "\u2298" })
+      ]
+    }
+  );
+}
+
+// src/components/FaceLabel.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function transformLocalToWorld(m, x, y, z) {
+  return {
+    x: m[0] * x + m[4] * y + m[8] * z + m[12],
+    y: m[1] * x + m[5] * y + m[9] * z + m[13],
+    z: m[2] * x + m[6] * y + m[10] * z + m[14]
+  };
+}
+function cross(ax, ay, az, bx, by, bz) {
+  return {
+    x: ay * bz - az * by,
+    y: az * bx - ax * bz,
+    z: ax * by - ay * bx
+  };
+}
+function solveHomography(w, h, p) {
+  const [p0, p1, p2, p3] = p;
+  const sx = [0, w, w, 0];
+  const sy = [0, 0, h, h];
+  const dx = [p0.x, p1.x, p2.x, p3.x];
+  const dy = [p0.y, p1.y, p2.y, p3.y];
+  const M = [];
+  for (let i = 0; i < 4; i++) {
+    M.push([sx[i], sy[i], 1, 0, 0, 0, -dx[i] * sx[i], -dx[i] * sy[i], dx[i]]);
+    M.push([0, 0, 0, sx[i], sy[i], 1, -dy[i] * sx[i], -dy[i] * sy[i], dy[i]]);
+  }
+  const n = 8;
+  for (let col = 0; col < n; col++) {
+    let maxRow = col;
+    for (let row = col + 1; row < n; row++) {
+      if (Math.abs(M[row][col]) > Math.abs(M[maxRow][col])) maxRow = row;
+    }
+    [M[col], M[maxRow]] = [M[maxRow], M[col]];
+    if (Math.abs(M[col][col]) < 1e-10) return null;
+    const pivot = M[col][col];
+    for (let k = col; k <= n; k++) M[col][k] /= pivot;
+    for (let row = 0; row < n; row++) {
+      if (row === col) continue;
+      const f = M[row][col];
+      for (let k = col; k <= n; k++) M[row][k] -= f * M[col][k];
+    }
+  }
+  return M.map((row) => row[n]);
+}
+function buildMatrix3d(w, h, p) {
+  const hv = solveHomography(w, h, p);
+  if (!hv) return "none";
+  const [h00, h01, h02, h10, h11, h12, h20, h21] = hv;
+  return `matrix3d(${h00},${h10},0,${h20},${h01},${h11},0,${h21},0,0,1,0,${h02},${h12},0,1)`;
+}
+function FaceSkin({
+  context,
+  model,
+  corners,
+  children,
+  style,
+  className,
+  surfaceWidth = 300,
+  surfaceHeight = 200
+}) {
+  const { project } = useWorldToScreen(context);
+  if (!model || !context) return null;
+  const mm = model.getModelMatrix();
+  const worldPts = corners.map(
+    ([lx, ly, lz]) => transformLocalToWorld(mm, lx, ly, lz)
+  );
+  const e1x = worldPts[1].x - worldPts[0].x;
+  const e1y = worldPts[1].y - worldPts[0].y;
+  const e1z = worldPts[1].z - worldPts[0].z;
+  const e2x = worldPts[3].x - worldPts[0].x;
+  const e2y = worldPts[3].y - worldPts[0].y;
+  const e2z = worldPts[3].z - worldPts[0].z;
+  const normal = cross(e1x, e1y, e1z, e2x, e2y, e2z);
+  const camera = context.viewport.camera;
+  const radius = Math.sqrt(
+    (camera.position[0] - camera.target[0]) ** 2 + (camera.position[1] - camera.target[1]) ** 2 + (camera.position[2] - camera.target[2]) ** 2
+  );
+  const eyeX = camera.target[0] + radius * Math.cos(camera.pitch) * Math.sin(camera.yaw);
+  const eyeY = camera.target[1] + radius * Math.sin(camera.pitch);
+  const eyeZ = camera.target[2] + radius * Math.cos(camera.pitch) * Math.cos(camera.yaw);
+  const toCamera = {
+    x: eyeX - worldPts[0].x,
+    y: eyeY - worldPts[0].y,
+    z: eyeZ - worldPts[0].z
+  };
+  const dot = normal.x * toCamera.x + normal.y * toCamera.y + normal.z * toCamera.z;
+  if (dot <= 0) return null;
+  const screenPts = worldPts.map((w) => project(w.x, w.y, w.z));
+  if (screenPts.some((pt) => !pt.visible)) return null;
+  const remapped = [screenPts[3], screenPts[2], screenPts[1], screenPts[0]];
+  const matrix = buildMatrix3d(surfaceWidth, surfaceHeight, remapped);
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        inset: 0,
+        pointerEvents: "none",
+        overflow: "hidden"
+      },
+      children: /* @__PURE__ */ jsx3(
+        "div",
+        {
+          className,
+          style: {
+            position: "absolute",
+            top: 0,
+            left: 0,
+            width: surfaceWidth,
+            height: surfaceHeight,
+            transformOrigin: "0 0",
+            transform: matrix,
+            overflow: "hidden",
+            pointerEvents: "auto",
+            ...style
+          },
+          children
+        }
+      )
+    }
+  );
+}
+
+export {
+  GenesisGLCanvas,
+  RotationControls,
+  FaceSkin
+};
+//# sourceMappingURL=chunk-PJM4LJXC.js.map