mujoco-react 9.0.0 → 9.2.0

package/dist/index.js

@@ -4,7 +4,7 @@ import defaultMujocoWasmUrl from '@mujoco/mujoco/mujoco.wasm?url';
 import { createContext, forwardRef, useEffect, useContext, useState, useRef, useCallback, useMemo, useLayoutEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
-import * as THREE11 from 'three';
+import * as THREE12 from 'three';
 import { PivotControls } from '@react-three/drei';
 
 var MujocoContext = createContext({
@@ -178,16 +178,16 @@ function withContacts(data, read) {
     contacts.delete?.();
   }
 }
-var CapsuleGeometry = class extends THREE11.BufferGeometry {
+var CapsuleGeometry = class extends THREE12.BufferGeometry {
   parameters;
   constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
     super();
     this.type = "CapsuleGeometry";
     this.parameters = { radius, length, capSegments, radialSegments };
-    const path = new THREE11.Path();
+    const path = new THREE12.Path();
     path.absarc(0, -length / 2, radius, Math.PI * 1.5, 0, false);
     path.absarc(0, length / 2, radius, 0, Math.PI * 0.5, false);
-    const latheGeometry = new THREE11.LatheGeometry(path.getPoints(capSegments), radialSegments);
+    const latheGeometry = new THREE12.LatheGeometry(path.getPoints(capSegments), radialSegments);
     const self = this;
     self.setIndex(latheGeometry.getIndex());
     self.setAttribute("position", latheGeometry.getAttribute("position"));
@@ -195,27 +195,27 @@ var CapsuleGeometry = class extends THREE11.BufferGeometry {
     self.setAttribute("uv", latheGeometry.getAttribute("uv"));
   }
 };
-var Reflector = class extends THREE11.Mesh {
+var Reflector = class extends THREE12.Mesh {
   isReflector = true;
   camera;
-  reflectorPlane = new THREE11.Plane();
-  normal = new THREE11.Vector3();
-  reflectorWorldPosition = new THREE11.Vector3();
-  cameraWorldPosition = new THREE11.Vector3();
-  rotationMatrix = new THREE11.Matrix4();
-  lookAtPosition = new THREE11.Vector3(0, 0, -1);
-  clipPlane = new THREE11.Vector4();
-  view = new THREE11.Vector3();
-  target = new THREE11.Vector3();
-  q = new THREE11.Vector4();
-  textureMatrix = new THREE11.Matrix4();
+  reflectorPlane = new THREE12.Plane();
+  normal = new THREE12.Vector3();
+  reflectorWorldPosition = new THREE12.Vector3();
+  cameraWorldPosition = new THREE12.Vector3();
+  rotationMatrix = new THREE12.Matrix4();
+  lookAtPosition = new THREE12.Vector3(0, 0, -1);
+  clipPlane = new THREE12.Vector4();
+  view = new THREE12.Vector3();
+  target = new THREE12.Vector3();
+  q = new THREE12.Vector4();
+  textureMatrix = new THREE12.Matrix4();
   virtualCamera;
   renderTarget;
   constructor(geometry, options = {}) {
     super(geometry);
     this.type = "Reflector";
-    this.camera = new THREE11.PerspectiveCamera();
-    const color = options.color !== void 0 ? new THREE11.Color(options.color) : new THREE11.Color(8355711);
+    this.camera = new THREE12.PerspectiveCamera();
+    const color = options.color !== void 0 ? new THREE12.Color(options.color) : new THREE12.Color(8355711);
     const textureWidth = options.textureWidth || 512;
     const textureHeight = options.textureHeight || 512;
     const clipBias = options.clipBias || 0;
@@ -223,11 +223,11 @@ var Reflector = class extends THREE11.Mesh {
     const blendTexture = options.texture || void 0;
     const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
     this.virtualCamera = this.camera;
-    this.renderTarget = new THREE11.WebGLRenderTarget(textureWidth, textureHeight, {
+    this.renderTarget = new THREE12.WebGLRenderTarget(textureWidth, textureHeight, {
       samples: multisample,
-      type: THREE11.HalfFloatType
+      type: THREE12.HalfFloatType
     });
-    this.material = new THREE11.MeshPhysicalMaterial({
+    this.material = new THREE12.MeshPhysicalMaterial({
       map: blendTexture,
       color,
       roughness: 0.5,
@@ -353,7 +353,7 @@ var GeomBuilder = class {
     const pos = mjModel.geom_pos.subarray(g * 3, g * 3 + 3);
     const quat = mjModel.geom_quat.subarray(g * 4, g * 4 + 4);
     const matId = mjModel.geom_matid[g];
-    const color = new THREE11.Color(16777215);
+    const color = new THREE12.Color(16777215);
     let opacity = 1;
     if (matId >= 0) {
       const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
@@ -368,16 +368,16 @@ var GeomBuilder = class {
     let geo = null;
     const getVal = (v) => v?.value ?? v;
     if (type === getVal(MG.mjGEOM_PLANE)) {
-      geo = new THREE11.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
+      geo = new THREE12.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
     } else if (type === getVal(MG.mjGEOM_SPHERE)) {
-      geo = new THREE11.SphereGeometry(size[0], 24, 24);
+      geo = new THREE12.SphereGeometry(size[0], 24, 24);
     } else if (type === getVal(MG.mjGEOM_CAPSULE)) {
       geo = new CapsuleGeometry(size[0], size[1] * 2, 24, 12);
       geo.rotateX(Math.PI / 2);
     } else if (type === getVal(MG.mjGEOM_BOX)) {
-      geo = new THREE11.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
+      geo = new THREE12.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
     } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
-      geo = new THREE11.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
+      geo = new THREE12.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
       geo.rotateX(Math.PI / 2);
     } else if (type === getVal(MG.mjGEOM_MESH)) {
       const mId = mjModel.geom_dataid[g];
@@ -385,8 +385,8 @@ var GeomBuilder = class {
       const vNum = mjModel.mesh_vertnum[mId];
       const fAdr = mjModel.mesh_faceadr[mId];
       const fNum = mjModel.mesh_facenum[mId];
-      geo = new THREE11.BufferGeometry();
-      geo.setAttribute("position", new THREE11.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+      geo = new THREE12.BufferGeometry();
+      geo.setAttribute("position", new THREE12.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
       geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
       geo.computeVertexNormals();
     }
@@ -401,7 +401,7 @@ var GeomBuilder = class {
           mixStrength: 0.25
         });
       } else {
-        mesh = new THREE11.Mesh(geo, new THREE11.MeshStandardMaterial({
+        mesh = new THREE12.Mesh(geo, new THREE12.MeshStandardMaterial({
           color,
           transparent: opacity < 1,
           opacity,
@@ -1206,7 +1206,7 @@ function SceneRenderer(props) {
     }
     const refs = [];
     for (let i = 0; i < model.nbody; i++) {
-      const bodyGroup = new THREE11.Group();
+      const bodyGroup = new THREE12.Group();
       bodyGroup.userData.bodyID = i;
       const bodyName = getName(model, model.name_bodyadr[i]);
       if (!hiddenBodiesRef.current.has(bodyName)) {
@@ -1235,9 +1235,9 @@ function SceneRenderer(props) {
         const alpha = interpolation.alpha;
         const i3 = i * 3;
         ref.position.set(
-          THREE11.MathUtils.lerp(interpolation.previousXpos[i3], interpolation.currentXpos[i3], alpha),
-          THREE11.MathUtils.lerp(interpolation.previousXpos[i3 + 1], interpolation.currentXpos[i3 + 1], alpha),
-          THREE11.MathUtils.lerp(interpolation.previousXpos[i3 + 2], interpolation.currentXpos[i3 + 2], alpha)
+          THREE12.MathUtils.lerp(interpolation.previousXpos[i3], interpolation.currentXpos[i3], alpha),
+          THREE12.MathUtils.lerp(interpolation.previousXpos[i3 + 1], interpolation.currentXpos[i3 + 1], alpha),
+          THREE12.MathUtils.lerp(interpolation.previousXpos[i3 + 2], interpolation.currentXpos[i3 + 2], alpha)
         );
         const i4 = i * 4;
         _previousQuat.set(
@@ -1292,8 +1292,234 @@ function SceneRenderer(props) {
     }
   );
 }
-var _previousQuat = new THREE11.Quaternion();
-var _currentQuat = new THREE11.Quaternion();
+var _previousQuat = new THREE12.Quaternion();
+var _currentQuat = new THREE12.Quaternion();
+function isTargetRef(target) {
+  return Boolean(target && typeof target === "object" && "current" in target);
+}
+function resolveCanvasTarget(target) {
+  const resolvedTarget = isTargetRef(target) ? target.current : target;
+  if (!resolvedTarget) {
+    throw new Error("No frame capture target is available.");
+  }
+  if (resolvedTarget instanceof HTMLCanvasElement) {
+    return resolvedTarget;
+  }
+  const canvas = resolvedTarget.querySelector("canvas");
+  if (!canvas) {
+    throw new Error("Frame capture target does not contain a canvas.");
+  }
+  return canvas;
+}
+function waitForNextAnimationFrame() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
+async function captureFrame(options) {
+  const type = options.type ?? "image/png";
+  const canvas = resolveCanvasTarget(options.target);
+  if (options.waitForAnimationFrame ?? true) {
+    await waitForNextAnimationFrame();
+  }
+  return {
+    canvas,
+    dataUrl: canvas.toDataURL(type, options.quality),
+    type
+  };
+}
+async function captureFrameBlob(options) {
+  const type = options.type ?? "image/png";
+  const canvas = resolveCanvasTarget(options.target);
+  if (options.waitForAnimationFrame ?? true) {
+    await waitForNextAnimationFrame();
+  }
+  const blob = await new Promise((resolve, reject) => {
+    canvas.toBlob(
+      (nextBlob) => {
+        if (nextBlob) {
+          resolve(nextBlob);
+        } else {
+          reject(new Error("Canvas frame capture did not produce a Blob."));
+        }
+      },
+      type,
+      options.quality
+    );
+  });
+  return { canvas, blob, type };
+}
+function useFrameCapture(defaultOptions = {}) {
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setError(null);
+  }, []);
+  const capture = useCallback(
+    async (options = {}) => {
+      setStatus("capturing");
+      setError(null);
+      try {
+        const result = await captureFrame({ ...defaultOptions, ...options });
+        setStatus("captured");
+        return result;
+      } catch (nextError) {
+        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the current canvas frame.");
+        setError(error2);
+        setStatus("error");
+        throw error2;
+      }
+    },
+    [defaultOptions]
+  );
+  const captureBlob = useCallback(
+    async (options = {}) => {
+      setStatus("capturing");
+      setError(null);
+      try {
+        const result = await captureFrameBlob({
+          ...defaultOptions,
+          ...options
+        });
+        setStatus("captured");
+        return result;
+      } catch (nextError) {
+        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the current canvas frame.");
+        setError(error2);
+        setStatus("error");
+        throw error2;
+      }
+    },
+    [defaultOptions]
+  );
+  return {
+    status,
+    error,
+    isCapturing: status === "capturing",
+    capture,
+    captureBlob,
+    reset
+  };
+}
+function toVector3(value, fallback) {
+  if (!value) return fallback.clone();
+  return value instanceof THREE12.Vector3 ? value.clone() : new THREE12.Vector3(value[0], value[1], value[2]);
+}
+function applyCameraPose(camera, options, fallbackCamera) {
+  camera.position.copy(toVector3(options.position, fallbackCamera.position));
+  camera.up.copy(toVector3(options.up, fallbackCamera.up));
+  if (options.quaternion) {
+    if (options.quaternion instanceof THREE12.Quaternion) {
+      camera.quaternion.copy(options.quaternion);
+    } else {
+      camera.quaternion.set(
+        options.quaternion[0],
+        options.quaternion[1],
+        options.quaternion[2],
+        options.quaternion[3]
+      );
+    }
+  } else if (options.lookAt) {
+    camera.lookAt(toVector3(options.lookAt, new THREE12.Vector3()));
+  } else {
+    camera.quaternion.copy(fallbackCamera.quaternion);
+  }
+  camera.updateMatrixWorld();
+}
+function createCaptureCamera(options, fallbackCamera, width, height) {
+  const camera = options.camera ? options.camera.clone() : fallbackCamera instanceof THREE12.PerspectiveCamera ? fallbackCamera.clone() : new THREE12.PerspectiveCamera(45, width / height, 0.01, 100);
+  if (camera instanceof THREE12.PerspectiveCamera) {
+    camera.aspect = width / height;
+    camera.fov = options.fov ?? camera.fov;
+    camera.near = options.near ?? camera.near;
+    camera.far = options.far ?? camera.far;
+    camera.updateProjectionMatrix();
+  }
+  applyCameraPose(camera, options, fallbackCamera);
+  return camera;
+}
+function readRenderTargetToCanvas(renderer, target, width, height) {
+  const pixels = new Uint8Array(width * height * 4);
+  renderer.readRenderTargetPixels(target, 0, 0, width, height, pixels);
+  const canvas = document.createElement("canvas");
+  canvas.width = width;
+  canvas.height = height;
+  const context = canvas.getContext("2d");
+  if (!context) {
+    throw new Error("Unable to create a 2D canvas for camera frame capture.");
+  }
+  const imageData = context.createImageData(width, height);
+  const rowBytes = width * 4;
+  for (let y = 0; y < height; y += 1) {
+    const sourceStart = (height - y - 1) * rowBytes;
+    const targetStart = y * rowBytes;
+    imageData.data.set(
+      pixels.subarray(sourceStart, sourceStart + rowBytes),
+      targetStart
+    );
+  }
+  context.putImageData(imageData, 0, 0);
+  return canvas;
+}
+function renderCameraFrameToCanvas(renderer, scene, fallbackCamera, options = {}) {
+  const width = Math.max(1, Math.floor(options.width ?? renderer.domElement.width));
+  const height = Math.max(1, Math.floor(options.height ?? renderer.domElement.height));
+  const camera = createCaptureCamera(options, fallbackCamera, width, height);
+  const target = new THREE12.WebGLRenderTarget(width, height, {
+    format: THREE12.RGBAFormat,
+    type: THREE12.UnsignedByteType
+  });
+  const previousTarget = renderer.getRenderTarget();
+  const previousXrEnabled = renderer.xr.enabled;
+  scene.updateMatrixWorld(true);
+  try {
+    renderer.xr.enabled = false;
+    renderer.setRenderTarget(target);
+    renderer.clear();
+    renderer.render(scene, camera);
+    const canvas = readRenderTargetToCanvas(renderer, target, width, height);
+    return { canvas, camera, width, height };
+  } finally {
+    renderer.setRenderTarget(previousTarget);
+    renderer.xr.enabled = previousXrEnabled;
+    target.dispose();
+  }
+}
+async function captureCameraFrame(renderer, scene, fallbackCamera, options = {}) {
+  const type = options.type ?? "image/png";
+  const result = renderCameraFrameToCanvas(
+    renderer,
+    scene,
+    fallbackCamera,
+    options
+  );
+  return {
+    ...result,
+    dataUrl: result.canvas.toDataURL(type, options.quality),
+    type
+  };
+}
+async function captureCameraFrameBlob(renderer, scene, fallbackCamera, options = {}) {
+  const type = options.type ?? "image/png";
+  const result = renderCameraFrameToCanvas(
+    renderer,
+    scene,
+    fallbackCamera,
+    options
+  );
+  const blob = await new Promise((resolve, reject) => {
+    result.canvas.toBlob(
+      (nextBlob) => {
+        if (nextBlob) resolve(nextBlob);
+        else reject(new Error("Camera frame capture did not produce a Blob."));
+      },
+      type,
+      options.quality
+    );
+  });
+  return { ...result, blob, type };
+}
 var JOINT_TYPE_NAMES2 = ["free", "ball", "slide", "hinge"];
 var GEOM_TYPE_NAMES = ["plane", "hfield", "sphere", "capsule", "ellipsoid", "cylinder", "box", "mesh"];
 var SENSOR_TYPE_NAMES = {
@@ -1369,8 +1595,13 @@ var _applyPoint = new Float64Array(3);
 var _rayPnt = new Float64Array(3);
 var _rayVec = new Float64Array(3);
 var _rayGeomId = new Int32Array(1);
-var _projRaycaster = new THREE11.Raycaster();
-var _projNdc = new THREE11.Vector2();
+var _projRaycaster = new THREE12.Raycaster();
+var _projNdc = new THREE12.Vector2();
+function waitForNextAnimationFrame2() {
+  return new Promise((resolve) => {
+    requestAnimationFrame(() => resolve());
+  });
+}
 var MujocoSimContext = createContext(null);
 function useMujocoContext() {
   const ctx = useContext(MujocoSimContext);
@@ -1455,7 +1686,7 @@ function MujocoSimProvider({
   interpolate,
   children
 }) {
-  const { gl, camera } = useThree();
+  const { gl, camera, scene } = useThree();
   const [status, setStatus] = useState("loading");
   const mjModelRef = useRef(null);
   const mjDataRef = useRef(null);
@@ -1704,6 +1935,27 @@ function MujocoSimProvider({
   const step = useCallback((n = 1) => {
     stepsToRunRef.current = n;
   }, []);
+  const stepImmediately = useCallback((steps = 1) => {
+    const model = mjModelRef.current;
+    const data = mjDataRef.current;
+    if (!model || !data) return false;
+    for (let stepIndex = 0; stepIndex < steps; stepIndex += 1) {
+      for (let i = 0; i < model.nv; i += 1) {
+        data.qfrc_applied[i] = 0;
+      }
+      for (const cb of beforeStepCallbacks.current) {
+        cb({ model, data });
+      }
+      mujoco.mj_step(model, data);
+      for (const cb of afterStepCallbacks.current) {
+        cb({ model, data });
+      }
+      onStepRef.current?.({ time: data.time, model, data });
+    }
+    physicsAccumulatorRef.current = 0;
+    interpolationStateRef.current.valid = false;
+    return true;
+  }, [mujoco]);
   const getTime = useCallback(() => {
     return mjDataRef.current?.time ?? 0;
   }, []);
@@ -2014,7 +2266,7 @@ function MujocoSimProvider({
       const geomId = _rayGeomId[0];
       const bodyId = geomId >= 0 ? model.geom_bodyid[geomId] : -1;
       return {
-        point: new THREE11.Vector3(
+        point: new THREE12.Vector3(
           origin.x + dir.x * dist,
           origin.y + dir.y * dist,
           origin.z + dir.z * dist
@@ -2145,6 +2397,85 @@ function MujocoSimProvider({
     },
     [gl]
   );
+  const getCanvas = useCallback(() => {
+    return gl.domElement ?? null;
+  }, [gl]);
+  const captureFrameApi = useCallback(
+    (options = {}) => {
+      return captureFrame({ ...options, target: gl.domElement });
+    },
+    [gl]
+  );
+  const captureFrameBlobApi = useCallback(
+    (options = {}) => {
+      return captureFrameBlob({ ...options, target: gl.domElement });
+    },
+    [gl]
+  );
+  const captureCameraFrameApi = useCallback(
+    (options = {}) => {
+      return captureCameraFrame(gl, scene, camera, options);
+    },
+    [camera, gl, scene]
+  );
+  const captureCameraFrameBlobApi = useCallback(
+    (options = {}) => {
+      return captureCameraFrameBlob(gl, scene, camera, options);
+    },
+    [camera, gl, scene]
+  );
+  const recordCameraSequenceApi = useCallback(
+    async (options) => {
+      const frameCount = Math.max(0, Math.floor(options.frames));
+      const stepsPerFrame = Math.max(1, Math.floor(options.stepsPerFrame ?? 1));
+      const cameras = options.cameras;
+      const frames = [];
+      const wasPaused = pausedRef.current;
+      if (frameCount === 0 || cameras.length === 0) {
+        return {
+          frames,
+          cameraKeys: cameras.map((sequenceCamera) => sequenceCamera.key),
+          frameCount: 0
+        };
+      }
+      try {
+        pausedRef.current = true;
+        stepsToRunRef.current = 0;
+        if (options.reset) reset();
+        for (let frameIndex = 0; frameIndex < frameCount; frameIndex += 1) {
+          if (frameIndex > 0 || options.captureInitialFrame === false) {
+            stepImmediately(stepsPerFrame);
+          }
+          await waitForNextAnimationFrame2();
+          const cameraFrames = {};
+          for (const sequenceCamera of cameras) {
+            const { key, ...captureOptions } = sequenceCamera;
+            cameraFrames[key] = await captureCameraFrame(
+              gl,
+              scene,
+              camera,
+              captureOptions
+            );
+          }
+          const frame = {
+            frameIndex,
+            time: getTime(),
+            cameras: cameraFrames
+          };
+          frames.push(frame);
+          await options.onFrame?.(frame);
+        }
+      } finally {
+        pausedRef.current = wasPaused;
+      }
+      return {
+        frames,
+        cameraKeys: cameras.map((sequenceCamera) => sequenceCamera.key),
+        frameCount: frames.length
+      };
+    },
+    [camera, getTime, gl, reset, scene, stepImmediately]
+  );
   const project2DTo3D = useCallback(
     (x, y, cameraPos, lookAt) => {
       const virtCam = camera.clone();
@@ -2155,9 +2486,9 @@ function MujocoSimProvider({
       _projNdc.set(x * 2 - 1, -(y * 2 - 1));
       _projRaycaster.setFromCamera(_projNdc, virtCam);
       const objects = [];
-      const scene = camera.parent;
-      if (scene) {
-        scene.traverse((c) => {
+      const scene2 = camera.parent;
+      if (scene2) {
+        scene2.traverse((c) => {
           if (c.isMesh) objects.push(c);
         });
       }
@@ -2251,7 +2582,13 @@ function MujocoSimProvider({
       addBody: addBodyApi,
       removeBody: removeBodyApi,
       recompile: recompileApi,
+      getCanvas,
       getCanvasSnapshot,
+      captureFrame: captureFrameApi,
+      captureFrameBlob: captureFrameBlobApi,
+      captureCameraFrame: captureCameraFrameApi,
+      captureCameraFrameBlob: captureCameraFrameBlobApi,
+      recordCameraSequence: recordCameraSequenceApi,
       project2DTo3D,
       setBodyMass,
       setGeomFriction,
@@ -2303,7 +2640,13 @@ function MujocoSimProvider({
       addBodyApi,
       removeBodyApi,
       recompileApi,
+      getCanvas,
       getCanvasSnapshot,
+      captureFrameApi,
+      captureFrameBlobApi,
+      captureCameraFrameApi,
+      captureCameraFrameBlobApi,
+      recordCameraSequenceApi,
       project2DTo3D,
       setBodyMass,
       setGeomFriction,
@@ -2770,7 +3113,7 @@ function solve6x6(A, b, x) {
 }
 
 // src/hooks/useIkController.ts
-var _syncMat4 = new THREE11.Matrix4();
+var _syncMat4 = new THREE12.Matrix4();
 function syncGizmoToSite(data, siteId, target) {
   if (siteId === -1) return;
   const sitePos = data.site_xpos.subarray(siteId * 3, siteId * 3 + 3);
@@ -2802,7 +3145,7 @@ var useIkController = createControllerHook(
     const { mjModelRef, mjDataRef, mujocoRef, resetCallbacks, status } = useMujocoContext();
     const ikEnabledRef = useRef(false);
     const ikCalculatingRef = useRef(false);
-    const ikTargetRef = useRef(new THREE11.Group());
+    const ikTargetRef = useRef(new THREE12.Group());
     const siteIdRef = useRef(-1);
     const controlGroupRef = useRef(null);
     const genericIkRef = useRef(new GenericIK(mujocoRef.current));
@@ -2810,10 +3153,10 @@ var useIkController = createControllerHook(
     const needsInitialSync = useRef(true);
     const gizmoAnimRef = useRef({
       active: false,
-      startPos: new THREE11.Vector3(),
-      endPos: new THREE11.Vector3(),
-      startRot: new THREE11.Quaternion(),
-      endRot: new THREE11.Quaternion(),
+      startPos: new THREE12.Vector3(),
+      endPos: new THREE12.Vector3(),
+      startRot: new THREE12.Quaternion(),
+      endRot: new THREE12.Quaternion(),
       startTime: 0,
       duration: 1e3
     });
@@ -2958,8 +3301,8 @@ var useIkController = createControllerHook(
         const target = ikTargetRef.current;
         if (!target) return;
         const targetPos = pos.clone();
-        const targetRot = new THREE11.Quaternion().setFromEuler(
-          new THREE11.Euler(Math.PI, 0, 0)
+        const targetRot = new THREE12.Quaternion().setFromEuler(
+          new THREE12.Euler(Math.PI, 0, 0)
         );
         if (duration > 0) {
           const ga = gizmoAnimRef.current;
@@ -2984,7 +3327,7 @@ var useIkController = createControllerHook(
         if (!ikCalculatingRef.current || !target) return null;
         return {
           pos: target.position.clone(),
-          rot: new THREE11.Euler().setFromQuaternion(target.quaternion)
+          rot: new THREE12.Euler().setFromQuaternion(target.quaternion)
         };
       },
       []
@@ -3080,10 +3423,10 @@ function Body({
   if (!hasChildren) return null;
   return /* @__PURE__ */ jsx("group", { ref: groupRef, children });
 }
-var _mat4 = new THREE11.Matrix4();
-var _pos = new THREE11.Vector3();
-var _quat = new THREE11.Quaternion();
-var _scale = new THREE11.Vector3(1, 1, 1);
+var _mat4 = new THREE12.Matrix4();
+var _pos = new THREE12.Vector3();
+var _quat = new THREE12.Quaternion();
+var _scale = new THREE12.Vector3(1, 1, 1);
 function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const { ikTargetRef, siteIdRef, ikEnabledRef, setIkEnabled } = controller;
@@ -3175,7 +3518,7 @@ function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
     }
   ) });
 }
-var _dummy = new THREE11.Object3D();
+var _dummy = new THREE12.Object3D();
 function ContactMarkers({
   maxContacts = 100,
   radius = 8e-3,
@@ -3219,11 +3562,11 @@ function ContactMarkers({
 var _force = new Float64Array(3);
 var _torque = new Float64Array(3);
 var _point = new Float64Array(3);
-var _bodyPos = new THREE11.Vector3();
-var _bodyQuat = new THREE11.Quaternion();
-var _worldHit = new THREE11.Vector3();
-var _raycaster = new THREE11.Raycaster();
-var _mouse = new THREE11.Vector2();
+var _bodyPos = new THREE12.Vector3();
+var _bodyQuat = new THREE12.Quaternion();
+var _worldHit = new THREE12.Vector3();
+var _raycaster = new THREE12.Raycaster();
+var _mouse = new THREE12.Vector2();
 function DragInteraction({
   stiffness = 250,
   showArrow = true,
@@ -3234,16 +3577,16 @@ function DragInteraction({
   const draggingRef = useRef(false);
   const bodyIdRef = useRef(-1);
   const grabDistanceRef = useRef(0);
-  const localHitRef = useRef(new THREE11.Vector3());
-  const grabWorldRef = useRef(new THREE11.Vector3());
-  const mouseWorldRef = useRef(new THREE11.Vector3());
+  const localHitRef = useRef(new THREE12.Vector3());
+  const grabWorldRef = useRef(new THREE12.Vector3());
+  const mouseWorldRef = useRef(new THREE12.Vector3());
   const arrowRef = useRef(null);
   const groupRef = useRef(null);
   useEffect(() => {
     if (!showArrow || !groupRef.current) return;
-    const arrow = new THREE11.ArrowHelper(
-      new THREE11.Vector3(0, 1, 0),
-      new THREE11.Vector3(),
+    const arrow = new THREE12.ArrowHelper(
+      new THREE12.Vector3(0, 1, 0),
+      new THREE12.Vector3(),
       0.1,
       16729156
     );
@@ -3425,7 +3768,7 @@ function useSceneLights(intensity = 1) {
       const dr = lightDiffuse ? lightDiffuse[3 * i] : 1;
       const dg = lightDiffuse ? lightDiffuse[3 * i + 1] : 1;
       const db = lightDiffuse ? lightDiffuse[3 * i + 2] : 1;
-      const color = new THREE11.Color(dr, dg, db);
+      const color = new THREE12.Color(dr, dg, db);
       const px = lightPos[3 * i];
       const py = lightPos[3 * i + 1];
       const pz = lightPos[3 * i + 2];
@@ -3433,7 +3776,7 @@ function useSceneLights(intensity = 1) {
       const dy = lightDir[3 * i + 1];
       const dz = lightDir[3 * i + 2];
       if (isDirectional) {
-        const light = new THREE11.DirectionalLight(color, finalIntensity);
+        const light = new THREE12.DirectionalLight(color, finalIntensity);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -3456,7 +3799,7 @@ function useSceneLights(intensity = 1) {
         const cutoff = lightCutoff ? lightCutoff[i] : 45;
         const exponent = lightExponent ? lightExponent[i] : 10;
         const angle = cutoff * Math.PI / 180;
-        const light = new THREE11.SpotLight(color, finalIntensity, 0, angle, exponent / 128);
+        const light = new THREE12.SpotLight(color, finalIntensity, 0, angle, exponent / 128);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -3514,11 +3857,11 @@ var JOINT_COLORS = {
   3: 16776960
   // hinge - yellow
 };
-var _v3a = new THREE11.Vector3();
-new THREE11.Vector3();
-var _quat2 = new THREE11.Quaternion();
-var _contactPos = new THREE11.Vector3();
-var _contactNormal = new THREE11.Vector3();
+var _v3a = new THREE12.Vector3();
+new THREE12.Vector3();
+var _quat2 = new THREE12.Quaternion();
+var _contactPos = new THREE12.Vector3();
+var _contactNormal = new THREE12.Vector3();
 var MAX_CONTACT_ARROWS = 50;
 function Debug({
   showGeoms = false,
@@ -3547,21 +3890,21 @@ function Debug({
         let geometry = null;
         switch (type) {
           case 2:
-            geometry = new THREE11.SphereGeometry(s[3 * i], 12, 8);
+            geometry = new THREE12.SphereGeometry(s[3 * i], 12, 8);
             break;
           case 3:
-            geometry = new THREE11.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
+            geometry = new THREE12.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
             break;
           case 5:
-            geometry = new THREE11.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
+            geometry = new THREE12.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
             break;
           case 6:
-            geometry = new THREE11.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
+            geometry = new THREE12.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
             break;
         }
         if (geometry) {
-          const mat = new THREE11.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
-          const mesh = new THREE11.Mesh(geometry, mat);
+          const mat = new THREE12.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
+          const mesh = new THREE12.Mesh(geometry, mat);
           mesh.userData.geomId = i;
           mesh.userData.bodyId = model.geom_bodyid[i];
           geoms.push(mesh);
@@ -3584,9 +3927,9 @@ function Debug({
           }
           if (maxGeomSize > 0) radius = maxGeomSize * 0.15;
         }
-        const geometry = new THREE11.OctahedronGeometry(radius);
-        const mat = new THREE11.MeshBasicMaterial({ color: 16711935, depthTest: false });
-        const mesh = new THREE11.Mesh(geometry, mat);
+        const geometry = new THREE12.OctahedronGeometry(radius);
+        const mat = new THREE12.MeshBasicMaterial({ color: 16711935, depthTest: false });
+        const mesh = new THREE12.Mesh(geometry, mat);
         mesh.renderOrder = 999;
         mesh.frustumCulled = false;
         mesh.userData.siteId = i;
@@ -3598,9 +3941,9 @@ function Debug({
         ctx.font = "bold 36px monospace";
         ctx.textAlign = "center";
         ctx.fillText(getName(model, model.name_siteadr[i]), 128, 42);
-        const tex = new THREE11.CanvasTexture(canvas);
-        const spriteMat = new THREE11.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
-        const sprite = new THREE11.Sprite(spriteMat);
+        const tex = new THREE12.CanvasTexture(canvas);
+        const spriteMat = new THREE12.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
+        const sprite = new THREE12.Sprite(spriteMat);
         const labelScale = radius * 15;
         sprite.scale.set(labelScale, labelScale * 0.25, 1);
         sprite.position.y = radius * 2;
@@ -3623,9 +3966,9 @@ function Debug({
           }
         }
         const arrowLen = Math.max(maxGeomSize * 0.8, 0.05);
-        const arrow = new THREE11.ArrowHelper(
-          new THREE11.Vector3(0, 0, 1),
-          new THREE11.Vector3(),
+        const arrow = new THREE12.ArrowHelper(
+          new THREE12.Vector3(0, 0, 1),
+          new THREE12.Vector3(),
           arrowLen,
           color,
           arrowLen * 0.25,
@@ -3633,7 +3976,7 @@ function Debug({
         );
         arrow.renderOrder = 999;
         arrow.frustumCulled = false;
-        arrow.line.material = new THREE11.LineBasicMaterial({ color, depthTest: false });
+        arrow.line.material = new THREE12.LineBasicMaterial({ color, depthTest: false });
         arrow.cone.material.depthTest = false;
         arrow.line.renderOrder = 999;
         arrow.line.frustumCulled = false;
@@ -3648,9 +3991,9 @@ function Debug({
     }
     if (showCOM) {
       for (let i = 1; i < model.nbody; i++) {
-        const geometry = new THREE11.SphereGeometry(5e-3, 6, 6);
-        const mat = new THREE11.MeshBasicMaterial({ color: 16711680 });
-        const mesh = new THREE11.Mesh(geometry, mat);
+        const geometry = new THREE12.SphereGeometry(5e-3, 6, 6);
+        const mat = new THREE12.MeshBasicMaterial({ color: 16711680 });
+        const mesh = new THREE12.Mesh(geometry, mat);
         mesh.userData.bodyId = i;
         comMarkers.push(mesh);
       }
@@ -3741,9 +4084,9 @@ function Debug({
     contactPoolInitRef.current = true;
     const pool = [];
     for (let i = 0; i < MAX_CONTACT_ARROWS; i++) {
-      const arrow = new THREE11.ArrowHelper(
-        new THREE11.Vector3(0, 1, 0),
-        new THREE11.Vector3(),
+      const arrow = new THREE12.ArrowHelper(
+        new THREE12.Vector3(0, 1, 0),
+        new THREE12.Vector3(),
         0.1,
         16729156,
         0.03,
@@ -3798,9 +4141,9 @@ function Debug({
     showContacts && /* @__PURE__ */ jsx("group", { ref: contactGroupRef })
   ] });
 }
-var DEFAULT_TENDON_COLOR = new THREE11.Color(0.3, 0.3, 0.8);
+var DEFAULT_TENDON_COLOR = new THREE12.Color(0.3, 0.3, 0.8);
 var DEFAULT_TENDON_WIDTH = 2e-3;
-new THREE11.Vector3();
+new THREE12.Vector3();
 function TendonRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const groupRef = useRef(null);
@@ -3814,7 +4157,7 @@ function TendonRenderer(props) {
     if (!model || !data || !group) return;
     const ntendon = model.ntendon ?? 0;
     if (ntendon === 0) return;
-    const material = new THREE11.MeshStandardMaterial({
+    const material = new THREE12.MeshStandardMaterial({
       color: DEFAULT_TENDON_COLOR,
       roughness: 0.6,
       metalness: 0.1
@@ -3829,11 +4172,11 @@ function TendonRenderer(props) {
         curves.push(null);
         continue;
       }
-      const points = Array.from({ length: wrapNum }, () => new THREE11.Vector3());
-      const curve = new THREE11.CatmullRomCurve3(points, false);
+      const points = Array.from({ length: wrapNum }, () => new THREE12.Vector3());
+      const curve = new THREE12.CatmullRomCurve3(points, false);
       const segments = Math.max(wrapNum * 2, 4);
-      const geometry = new THREE11.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
-      const mesh = new THREE11.Mesh(geometry, material);
+      const geometry = new THREE12.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
+      const mesh = new THREE12.Mesh(geometry, material);
       mesh.frustumCulled = false;
       group.add(mesh);
       meshes.push(mesh);
@@ -3888,11 +4231,11 @@ function TendonRenderer(props) {
       if (curve.points.length !== validCount) {
         curve.points.length = validCount;
         while (curve.points.length < validCount) {
-          curve.points.push(new THREE11.Vector3());
+          curve.points.push(new THREE12.Vector3());
         }
       }
       mesh.geometry.dispose();
-      mesh.geometry = new THREE11.TubeGeometry(
+      mesh.geometry = new THREE12.TubeGeometry(
         curve,
         Math.max(validCount * 2, 4),
         DEFAULT_TENDON_WIDTH,
@@ -3919,24 +4262,24 @@ function FlexRenderer(props) {
       const vertAdr = model.flex_vertadr[f];
       const vertNum = model.flex_vertnum[f];
       if (vertNum === 0) continue;
-      const geometry = new THREE11.BufferGeometry();
+      const geometry = new THREE12.BufferGeometry();
       const positions = new Float32Array(vertNum * 3);
-      geometry.setAttribute("position", new THREE11.BufferAttribute(positions, 3));
+      geometry.setAttribute("position", new THREE12.BufferAttribute(positions, 3));
       geometry.computeVertexNormals();
-      let color = new THREE11.Color(0.5, 0.5, 0.5);
+      let color = new THREE12.Color(0.5, 0.5, 0.5);
       if (model.flex_rgba) {
-        color = new THREE11.Color(
+        color = new THREE12.Color(
           model.flex_rgba[4 * f],
           model.flex_rgba[4 * f + 1],
           model.flex_rgba[4 * f + 2]
         );
       }
-      const material = new THREE11.MeshStandardMaterial({
+      const material = new THREE12.MeshStandardMaterial({
         color,
         roughness: 0.7,
-        side: THREE11.DoubleSide
+        side: THREE12.DoubleSide
       });
-      const mesh = new THREE11.Mesh(geometry, material);
+      const mesh = new THREE12.Mesh(geometry, material);
       mesh.userData.flexId = f;
       mesh.userData.vertAdr = vertAdr;
       mesh.userData.vertNum = vertNum;
@@ -3972,7 +4315,7 @@ function FlexRenderer(props) {
   return /* @__PURE__ */ jsx("group", { ...props, ref: groupRef });
 }
 var GEOM_TYPE_NAMES2 = ["plane", "hfield", "sphere", "capsule", "ellipsoid", "cylinder", "box", "mesh"];
-var _matrix = new THREE11.Matrix4();
+var _matrix = new THREE12.Matrix4();
 function getGeomInfo(model, geomId) {
   const size = model.geom_size.subarray(geomId * 3, geomId * 3 + 3);
   const type = model.geom_type[geomId];
@@ -3994,10 +4337,10 @@ function geomSignature(model, geomId) {
   return [type, size, mat, data, rgba].join("|");
 }
 function firstMesh(object) {
-  if (object instanceof THREE11.Mesh) return object;
+  if (object instanceof THREE12.Mesh) return object;
   let mesh = null;
   object.traverse((child) => {
-    if (!mesh && child instanceof THREE11.Mesh) mesh = child;
+    if (!mesh && child instanceof THREE12.Mesh) mesh = child;
   });
   return mesh;
 }
@@ -4426,12 +4769,12 @@ function useActuators() {
     return actuators;
   }, [status, mjModelRef]);
 }
-var _mat42 = new THREE11.Matrix4();
+var _mat42 = new THREE12.Matrix4();
 function useSitePosition(siteName) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const siteIdRef = useRef(-1);
-  const positionRef = useRef(new THREE11.Vector3());
-  const quaternionRef = useRef(new THREE11.Quaternion());
+  const positionRef = useRef(new THREE12.Vector3());
+  const quaternionRef = useRef(new THREE12.Quaternion());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") {
@@ -4622,10 +4965,10 @@ function useJointState(name) {
 function useBodyState(name) {
   const { mjModelRef, status } = useMujocoContext();
   const bodyIdRef = useRef(-1);
-  const position = useRef(new THREE11.Vector3());
-  const quaternion = useRef(new THREE11.Quaternion());
-  const linearVelocity = useRef(new THREE11.Vector3());
-  const angularVelocity = useRef(new THREE11.Vector3());
+  const position = useRef(new THREE12.Vector3());
+  const quaternion = useRef(new THREE12.Quaternion());
+  const linearVelocity = useRef(new THREE12.Vector3());
+  const angularVelocity = useRef(new THREE12.Vector3());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") return;
@@ -4979,62 +5322,8 @@ function useVideoRecorder(options = {}) {
     }
   };
 }
-function isTargetRef(target) {
-  return Boolean(target && typeof target === "object" && "current" in target);
-}
-function resolveCanvasTarget(target) {
-  const resolvedTarget = isTargetRef(target) ? target.current : target;
-  if (!resolvedTarget) {
-    throw new Error("No frame capture target is available.");
-  }
-  if (resolvedTarget instanceof HTMLCanvasElement) {
-    return resolvedTarget;
-  }
-  const canvas = resolvedTarget.querySelector("canvas");
-  if (!canvas) {
-    throw new Error("Frame capture target does not contain a canvas.");
-  }
-  return canvas;
-}
-function waitForNextAnimationFrame() {
-  return new Promise((resolve) => {
-    requestAnimationFrame(() => resolve());
-  });
-}
-async function captureFrame(options) {
-  const type = options.type ?? "image/png";
-  const canvas = resolveCanvasTarget(options.target);
-  if (options.waitForAnimationFrame ?? true) {
-    await waitForNextAnimationFrame();
-  }
-  return {
-    canvas,
-    dataUrl: canvas.toDataURL(type, options.quality),
-    type
-  };
-}
-async function captureFrameBlob(options) {
-  const type = options.type ?? "image/png";
-  const canvas = resolveCanvasTarget(options.target);
-  if (options.waitForAnimationFrame ?? true) {
-    await waitForNextAnimationFrame();
-  }
-  const blob = await new Promise((resolve, reject) => {
-    canvas.toBlob(
-      (nextBlob) => {
-        if (nextBlob) {
-          resolve(nextBlob);
-        } else {
-          reject(new Error("Canvas frame capture did not produce a Blob."));
-        }
-      },
-      type,
-      options.quality
-    );
-  });
-  return { canvas, blob, type };
-}
-function useFrameCapture(defaultOptions = {}) {
+function useCameraFrameCapture(defaultOptions = {}) {
+  const mujoco = useMujoco();
   const [status, setStatus] = useState("idle");
   const [error, setError] = useState(null);
   const reset = useCallback(() => {
@@ -5043,40 +5332,49 @@ function useFrameCapture(defaultOptions = {}) {
   }, []);
   const capture = useCallback(
     async (options = {}) => {
+      if (!mujoco.api) {
+        throw new Error("MuJoCo scene is not ready for camera frame capture.");
+      }
       setStatus("capturing");
       setError(null);
       try {
-        const result = await captureFrame({ ...defaultOptions, ...options });
+        const result = await mujoco.api.captureCameraFrame({
+          ...defaultOptions,
+          ...options
+        });
         setStatus("captured");
         return result;
       } catch (nextError) {
-        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the current canvas frame.");
+        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the requested camera frame.");
         setError(error2);
         setStatus("error");
         throw error2;
       }
     },
-    [defaultOptions]
+    [defaultOptions, mujoco.api]
   );
   const captureBlob = useCallback(
     async (options = {}) => {
+      if (!mujoco.api) {
+        throw new Error("MuJoCo scene is not ready for camera frame capture.");
+      }
       setStatus("capturing");
       setError(null);
       try {
-        const result = await captureFrameBlob({
+        const result = await mujoco.api.captureCameraFrameBlob({
           ...defaultOptions,
           ...options
         });
         setStatus("captured");
         return result;
       } catch (nextError) {
-        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the current canvas frame.");
+        const error2 = nextError instanceof Error ? nextError : new Error("Unable to capture the requested camera frame.");
         setError(error2);
         setStatus("error");
         throw error2;
       }
     },
-    [defaultOptions]
+    [defaultOptions, mujoco.api]
   );
   return {
     status,
@@ -5087,6 +5385,42 @@ function useFrameCapture(defaultOptions = {}) {
     reset
   };
 }
+function useCameraSequenceRecorder() {
+  const mujoco = useMujoco();
+  const [status, setStatus] = useState("idle");
+  const [error, setError] = useState(null);
+  const reset = useCallback(() => {
+    setStatus("idle");
+    setError(null);
+  }, []);
+  const record = useCallback(
+    async (options) => {
+      if (!mujoco.api) {
+        throw new Error("MuJoCo scene is not ready for camera sequence recording.");
+      }
+      setStatus("capturing");
+      setError(null);
+      try {
+        const result = await mujoco.api.recordCameraSequence(options);
+        setStatus("captured");
+        return result;
+      } catch (nextError) {
+        const error2 = nextError instanceof Error ? nextError : new Error("Unable to record the requested camera sequence.");
+        setError(error2);
+        setStatus("error");
+        throw error2;
+      }
+    },
+    [mujoco.api]
+  );
+  return {
+    status,
+    error,
+    isRecording: status === "capturing",
+    record,
+    reset
+  };
+}
 function useCtrlNoise(config = {}) {
   const { mjModelRef } = useMujocoContext();
   const configRef = useRef(config);
@@ -5138,7 +5472,7 @@ function useSelectionHighlight(bodyId, options = {}) {
       }
     }
     prevRef.current = [];
-    const highlightColor = new THREE11.Color(color);
+    const highlightColor = new THREE12.Color(color);
     for (const mesh of meshes) {
       const mat = mesh.material;
       if (mat.emissive) {
@@ -5165,15 +5499,15 @@ function useSelectionHighlight(bodyId, options = {}) {
 }
 function useCameraAnimation() {
   const { camera } = useThree();
-  const orbitTargetRef = useRef(new THREE11.Vector3(0, 0, 0));
+  const orbitTargetRef = useRef(new THREE12.Vector3(0, 0, 0));
   const cameraAnimRef = useRef({
     active: false,
-    startPos: new THREE11.Vector3(),
-    endPos: new THREE11.Vector3(),
-    startRot: new THREE11.Quaternion(),
-    endRot: new THREE11.Quaternion(),
-    startTarget: new THREE11.Vector3(),
-    endTarget: new THREE11.Vector3(),
+    startPos: new THREE12.Vector3(),
+    endPos: new THREE12.Vector3(),
+    startRot: new THREE12.Quaternion(),
+    endRot: new THREE12.Quaternion(),
+    startTarget: new THREE12.Vector3(),
+    endTarget: new THREE12.Vector3(),
     startTime: 0,
     duration: 0,
     resolve: null
@@ -5239,6 +5573,18 @@ function useCameraAnimation() {
  * @license
  * SPDX-License-Identifier: Apache-2.0
 */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * useFrameCapture — still-frame capture for canvas-backed MuJoCo/R3F scenes.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * Offscreen camera-frame capture for R3F/MuJoCo scenes.
+ */
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0
@@ -5376,7 +5722,13 @@ function useCameraAnimation() {
  * @license
  * SPDX-License-Identifier: Apache-2.0
  *
- * useFrameCapture — still-frame capture for canvas-backed MuJoCo/R3F scenes.
+ * React state wrapper around MuJoCo/R3F offscreen camera-frame capture.
+ */
+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ *
+ * React state wrapper around fixed-camera simulation sequence recording.
  */
 /**
  * @license
@@ -5408,6 +5760,6 @@ function useCameraAnimation() {
  * useCameraAnimation — composable camera animation hook.
  */
 
-export { Body, ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkGizmo, InstancedGeomRenderer, MujocoCanvas, MujocoPhysics, MujocoProvider, MujocoSimProvider, RobotActuators, RobotBodies, RobotGeoms, RobotJoints, RobotKeyframes, RobotResources, RobotSensors, RobotSites, SceneLights, TendonRenderer, TrajectoryPlayer, buildObservation, captureFrame, captureFrameBlob, createContiguousControlGroup, createController, createControllerHook, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getActuatedJoints, getContact, getControlMap, getName, loadScene, registerRobotResources, resolveControlGroup, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyMeshes, useBodyState, useCameraAnimation, useContactEvents, useContacts, useCtrl, useCtrlNoise, useFrameCapture, useGamepad, useGravityCompensation, useIkController, useJointState, useKeyboardTeleop, useMujoco, useMujocoWasm, useObservation, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
+export { Body, ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkGizmo, InstancedGeomRenderer, MujocoCanvas, MujocoPhysics, MujocoProvider, MujocoSimProvider, RobotActuators, RobotBodies, RobotGeoms, RobotJoints, RobotKeyframes, RobotResources, RobotSensors, RobotSites, SceneLights, TendonRenderer, TrajectoryPlayer, buildObservation, captureCameraFrame, captureCameraFrameBlob, captureFrame, captureFrameBlob, createContiguousControlGroup, createController, createControllerHook, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getActuatedJoints, getContact, getControlMap, getName, loadScene, registerRobotResources, renderCameraFrameToCanvas, resolveControlGroup, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyMeshes, useBodyState, useCameraAnimation, useCameraFrameCapture, useCameraSequenceRecorder, useContactEvents, useContacts, useCtrl, useCtrlNoise, useFrameCapture, useGamepad, useGravityCompensation, useIkController, useJointState, useKeyboardTeleop, useMujoco, useMujocoWasm, useObservation, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map