mujoco-react 9.4.0 → 9.6.0

package/dist/index.js

@@ -1,11 +1,11 @@
-import { withContacts, getContact } from './chunk-VDSEPZYQ.js';
-export { RobotActuators, RobotBodies, RobotCameras, RobotGeoms, RobotJoints, RobotKeyframes, RobotResources, RobotSensors, RobotSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, registerRobotResources, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-VDSEPZYQ.js';
+import { withContacts, getContact, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, CAPTURE_EXCLUDE_KEY } from './chunk-4JHALVB2.js';
+export { CAPTURE_EXCLUDE_KEY, RobotActuators, RobotBodies, RobotCameras, RobotGeoms, RobotJoints, RobotKeyframes, RobotResources, RobotSensors, RobotSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, captureCameraFrame, captureCameraFrameBlob, createCameraFrameCaptureSession, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, registerRobotResources, renderCameraFrameToCanvas, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-4JHALVB2.js';
 import loadMujoco from '@mujoco/mujoco';
 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 THREE12 from 'three';
+import * as THREE11 from 'three';
 import { PivotControls } from '@react-three/drei';
 
 var MujocoContext = createContext({
@@ -105,16 +105,16 @@ function MujocoProvider({
     }
   );
 }
-var CapsuleGeometry = class extends THREE12.BufferGeometry {
+var CapsuleGeometry = class extends THREE11.BufferGeometry {
   parameters;
   constructor(radius = 1, length = 1, capSegments = 4, radialSegments = 8) {
     super();
     this.type = "CapsuleGeometry";
     this.parameters = { radius, length, capSegments, radialSegments };
-    const path = new THREE12.Path();
+    const path = new THREE11.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 THREE12.LatheGeometry(path.getPoints(capSegments), radialSegments);
+    const latheGeometry = new THREE11.LatheGeometry(path.getPoints(capSegments), radialSegments);
     const self = this;
     self.setIndex(latheGeometry.getIndex());
     self.setAttribute("position", latheGeometry.getAttribute("position"));
@@ -122,27 +122,27 @@ var CapsuleGeometry = class extends THREE12.BufferGeometry {
     self.setAttribute("uv", latheGeometry.getAttribute("uv"));
   }
 };
-var Reflector = class extends THREE12.Mesh {
+var Reflector = class extends THREE11.Mesh {
   isReflector = true;
   camera;
-  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();
+  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();
   virtualCamera;
   renderTarget;
   constructor(geometry, options = {}) {
     super(geometry);
     this.type = "Reflector";
-    this.camera = new THREE12.PerspectiveCamera();
-    const color = options.color !== void 0 ? new THREE12.Color(options.color) : new THREE12.Color(8355711);
+    this.camera = new THREE11.PerspectiveCamera();
+    const color = options.color !== void 0 ? new THREE11.Color(options.color) : new THREE11.Color(8355711);
     const textureWidth = options.textureWidth || 512;
     const textureHeight = options.textureHeight || 512;
     const clipBias = options.clipBias || 0;
@@ -150,11 +150,11 @@ var Reflector = class extends THREE12.Mesh {
     const blendTexture = options.texture || void 0;
     const mixStrength = options.mixStrength !== void 0 ? options.mixStrength : 0.25;
     this.virtualCamera = this.camera;
-    this.renderTarget = new THREE12.WebGLRenderTarget(textureWidth, textureHeight, {
+    this.renderTarget = new THREE11.WebGLRenderTarget(textureWidth, textureHeight, {
       samples: multisample,
-      type: THREE12.HalfFloatType
+      type: THREE11.HalfFloatType
     });
-    this.material = new THREE12.MeshPhysicalMaterial({
+    this.material = new THREE11.MeshPhysicalMaterial({
       map: blendTexture,
       color,
       roughness: 0.5,
@@ -280,7 +280,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 THREE12.Color(16777215);
+    const color = new THREE11.Color(16777215);
     let opacity = 1;
     if (matId >= 0) {
       const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
@@ -295,16 +295,16 @@ var GeomBuilder = class {
     let geo = null;
     const getVal = (v) => v?.value ?? v;
     if (type === getVal(MG.mjGEOM_PLANE)) {
-      geo = new THREE12.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
+      geo = new THREE11.PlaneGeometry(size[0] * 2 || 5, size[1] * 2 || 5);
     } else if (type === getVal(MG.mjGEOM_SPHERE)) {
-      geo = new THREE12.SphereGeometry(size[0], 24, 24);
+      geo = new THREE11.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 THREE12.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
+      geo = new THREE11.BoxGeometry(size[0] * 2, size[1] * 2, size[2] * 2);
     } else if (type === getVal(MG.mjGEOM_CYLINDER)) {
-      geo = new THREE12.CylinderGeometry(size[0], size[0], size[1] * 2, 24);
+      geo = new THREE11.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];
@@ -312,8 +312,8 @@ var GeomBuilder = class {
       const vNum = mjModel.mesh_vertnum[mId];
       const fAdr = mjModel.mesh_faceadr[mId];
       const fNum = mjModel.mesh_facenum[mId];
-      geo = new THREE12.BufferGeometry();
-      geo.setAttribute("position", new THREE12.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+      geo = new THREE11.BufferGeometry();
+      geo.setAttribute("position", new THREE11.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();
     }
@@ -328,7 +328,7 @@ var GeomBuilder = class {
           mixStrength: 0.25
         });
       } else {
-        mesh = new THREE12.Mesh(geo, new THREE12.MeshStandardMaterial({
+        mesh = new THREE11.Mesh(geo, new THREE11.MeshStandardMaterial({
           color,
           transparent: opacity < 1,
           opacity,
@@ -1142,7 +1142,7 @@ function SceneRenderer(props) {
     }
     const refs = [];
     for (let i = 0; i < model.nbody; i++) {
-      const bodyGroup = new THREE12.Group();
+      const bodyGroup = new THREE11.Group();
       bodyGroup.userData.bodyID = i;
       const bodyName = getName(model, model.name_bodyadr[i]);
       if (!hiddenBodiesRef.current.has(bodyName)) {
@@ -1171,9 +1171,9 @@ function SceneRenderer(props) {
         const alpha = interpolation.alpha;
         const i3 = i * 3;
         ref.position.set(
-          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)
+          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)
         );
         const i4 = i * 4;
         _previousQuat.set(
@@ -1228,8 +1228,8 @@ function SceneRenderer(props) {
     }
   );
 }
-var _previousQuat = new THREE12.Quaternion();
-var _currentQuat = new THREE12.Quaternion();
+var _previousQuat = new THREE11.Quaternion();
+var _currentQuat = new THREE11.Quaternion();
 function isTargetRef(target) {
   return Boolean(target && typeof target === "object" && "current" in target);
 }
@@ -1338,244 +1338,6 @@ function useFrameCapture(defaultOptions = {}) {
     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 getCaptureDimensions(renderer, 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)
-  );
-  return { width, height };
-}
-function prepareCaptureCamera(camera, options, fallbackCamera, width, height) {
-  if (options.camera) {
-    camera.copy(options.camera);
-  }
-  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);
-}
-function readRenderTargetToCanvas(renderer, target, canvas, context, pixels, imageData, width, height) {
-  renderer.readRenderTargetPixels(target, 0, 0, width, height, pixels);
-  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 getCameraFrameCaptureSource(options) {
-  if (options.source) return options.source;
-  if (options.cameraName) {
-    return { kind: "mujoco-camera", cameraName: options.cameraName };
-  }
-  if (options.siteName) {
-    return { kind: "mujoco-site", siteName: options.siteName };
-  }
-  if (options.bodyName) {
-    return { kind: "mujoco-body", bodyName: options.bodyName };
-  }
-  if (options.camera) return { kind: "custom-camera" };
-  if (options.position || options.lookAt || options.quaternion) {
-    return { kind: "explicit-pose" };
-  }
-  return { kind: "fallback-camera" };
-}
-function createCameraFrameCaptureSession(renderer, scene, fallbackCamera, options = {}) {
-  const { width, height } = getCaptureDimensions(renderer, options);
-  const camera = createCaptureCamera(options, fallbackCamera, width, height);
-  const target = new THREE12.WebGLRenderTarget(width, height, {
-    format: THREE12.RGBAFormat,
-    type: THREE12.UnsignedByteType
-  });
-  const canvas = document.createElement("canvas");
-  canvas.width = width;
-  canvas.height = height;
-  const context = canvas.getContext("2d");
-  if (!context) {
-    target.dispose();
-    throw new Error("Unable to create a 2D canvas for camera frame capture.");
-  }
-  const drawContext = context;
-  const pixels = new Uint8Array(width * height * 4);
-  const imageData = drawContext.createImageData(width, height);
-  function capture(nextOptions = {}) {
-    const captureOptions = { ...options, ...nextOptions };
-    const nextDimensions = getCaptureDimensions(renderer, captureOptions);
-    if (nextDimensions.width !== width || nextDimensions.height !== height) {
-      throw new Error(
-        "Camera frame capture sessions require stable width and height."
-      );
-    }
-    prepareCaptureCamera(
-      camera,
-      captureOptions,
-      fallbackCamera,
-      width,
-      height
-    );
-    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);
-      readRenderTargetToCanvas(
-        renderer,
-        target,
-        canvas,
-        drawContext,
-        pixels,
-        imageData,
-        width,
-        height
-      );
-      return {
-        canvas,
-        camera,
-        width,
-        height,
-        source: getCameraFrameCaptureSource(captureOptions)
-      };
-    } finally {
-      renderer.setRenderTarget(previousTarget);
-      renderer.xr.enabled = previousXrEnabled;
-    }
-  }
-  return {
-    width,
-    height,
-    capture,
-    captureDataUrl(nextOptions = {}) {
-      const type = nextOptions.type ?? options.type ?? "image/png";
-      const result = capture(nextOptions);
-      return {
-        ...result,
-        dataUrl: result.canvas.toDataURL(
-          type,
-          nextOptions.quality ?? options.quality
-        ),
-        type
-      };
-    },
-    async captureBlob(nextOptions = {}) {
-      const type = nextOptions.type ?? options.type ?? "image/png";
-      const result = capture(nextOptions);
-      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,
-          nextOptions.quality ?? options.quality
-        );
-      });
-      return { ...result, blob, type };
-    },
-    dispose() {
-      target.dispose();
-    }
-  };
-}
-function renderCameraFrameToCanvas(renderer, scene, fallbackCamera, options = {}) {
-  const session = createCameraFrameCaptureSession(
-    renderer,
-    scene,
-    fallbackCamera,
-    options
-  );
-  try {
-    return session.capture();
-  } finally {
-    session.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 };
-}
 
 // src/rendering/cameraFrameSource.ts
 var MountedCameraFrameSourceSuggestionMatch = {
@@ -1780,8 +1542,7 @@ function resolveMountedCameraFrameSource(key, options) {
     { bodyName: key }
   ];
   const aliasCandidates = normalizeAliasCandidates(options.aliases?.[key]);
-  const candidates = [...directCandidates, ...aliasCandidates];
-  for (const selector of candidates) {
+  for (const selector of aliasCandidates) {
     if (!isSelectorMounted(selector, cameraNames, siteNames, bodyNames)) {
       continue;
     }
@@ -1804,6 +1565,14 @@ function resolveMountedCameraFrameSource(key, options) {
       return { key, selector, source };
     }
   }
+  for (const selector of directCandidates) {
+    if (!isSelectorMounted(selector, cameraNames, siteNames, bodyNames)) {
+      continue;
+    }
+    const source = getMountedCameraFrameCaptureSource(selector);
+    if (!source) continue;
+    return { key, selector, source };
+  }
   return null;
 }
 function createMountedCameraFrameSequencePlan(cameraKeys, options) {
@@ -2041,8 +1810,8 @@ var _applyPoint = new Float64Array(3);
 var _rayPnt = new Float64Array(3);
 var _rayVec = new Float64Array(3);
 var _rayGeomId = new Int32Array(1);
-var _projRaycaster = new THREE12.Raycaster();
-var _projNdc = new THREE12.Vector2();
+var _projRaycaster = new THREE11.Raycaster();
+var _projNdc = new THREE11.Vector2();
 function waitForNextAnimationFrame2() {
   return new Promise((resolve) => {
     requestAnimationFrame(() => resolve());
@@ -2058,16 +1827,16 @@ function throwIfCameraSequenceAborted(signal) {
 function vector3FromArray(values, offset) {
   return [values[offset], values[offset + 1], values[offset + 2]];
 }
-function quaternionFromArray(values, offset) {
+function quaternionFromMujocoQuat(values, offset) {
   return [
-    values[offset],
     values[offset + 1],
     values[offset + 2],
-    values[offset + 3]
+    values[offset + 3],
+    values[offset]
   ];
 }
 function quaternionFromXmat(values, offset) {
-  const matrix = new THREE12.Matrix4();
+  const matrix = new THREE11.Matrix4();
   matrix.set(
     values[offset],
     values[offset + 1],
@@ -2086,7 +1855,7 @@ function quaternionFromXmat(values, offset) {
     0,
     1
   );
-  const quaternion = new THREE12.Quaternion().setFromRotationMatrix(matrix);
+  const quaternion = new THREE11.Quaternion().setFromRotationMatrix(matrix);
   return [quaternion.x, quaternion.y, quaternion.z, quaternion.w];
 }
 function omitResolvedCameraSelectors(options) {
@@ -2759,7 +2528,7 @@ function MujocoSimProvider({
         bodyId: model.cam_bodyid?.[i] ?? -1,
         fov: model.cam_fovy?.[i] ?? null,
         position: model.cam_pos ? vector3FromArray(model.cam_pos, posOffset) : null,
-        quaternion: model.cam_quat ? quaternionFromArray(model.cam_quat, quatOffset) : null
+        quaternion: model.cam_quat ? quaternionFromMujocoQuat(model.cam_quat, quatOffset) : null
       });
     }
     return result;
@@ -2778,7 +2547,7 @@ function MujocoSimProvider({
           throw new Error(`MuJoCo camera "${options.cameraName}" was not found.`);
         }
         const position = data.cam_xpos ? vector3FromArray(data.cam_xpos, cameraId * 3) : model.cam_pos ? vector3FromArray(model.cam_pos, cameraId * 3) : void 0;
-        const quaternion = data.cam_xmat ? quaternionFromXmat(data.cam_xmat, cameraId * 9) : model.cam_quat ? quaternionFromArray(model.cam_quat, cameraId * 4) : void 0;
+        const quaternion = data.cam_xmat ? quaternionFromXmat(data.cam_xmat, cameraId * 9) : model.cam_quat ? quaternionFromMujocoQuat(model.cam_quat, cameraId * 4) : void 0;
         if (!position || !quaternion) {
           throw new Error(
             `MuJoCo camera "${options.cameraName}" does not expose a capture pose.`
@@ -2864,7 +2633,7 @@ function MujocoSimProvider({
       const geomId = _rayGeomId[0];
       const bodyId = geomId >= 0 ? model.geom_bodyid[geomId] : -1;
       return {
-        point: new THREE12.Vector3(
+        point: new THREE11.Vector3(
           origin.x + dir.x * dist,
           origin.y + dir.y * dist,
           origin.z + dir.z * dist
@@ -3144,7 +2913,7 @@ function MujocoSimProvider({
           const cameraFrames = {};
           for (const { key, captureOptions, mountedSource, session } of captureSessions) {
             const resolvedCaptureOptions = resolveCameraCaptureOptions(captureOptions);
-            const cameraFrame = session.captureDataUrl({
+            const cameraFrame = await session.captureDataUrlAsync({
               ...resolvedCaptureOptions,
               source: mountedSource ?? resolvedCaptureOptions.source
             });
@@ -3833,7 +3602,7 @@ function solve6x6(A, b, x) {
 }
 
 // src/hooks/useIkController.ts
-var _syncMat4 = new THREE12.Matrix4();
+var _syncMat4 = new THREE11.Matrix4();
 function syncGizmoToSite(data, siteId, target) {
   if (siteId === -1) return;
   const sitePos = data.site_xpos.subarray(siteId * 3, siteId * 3 + 3);
@@ -3865,7 +3634,7 @@ var useIkController = createControllerHook(
     const { mjModelRef, mjDataRef, mujocoRef, resetCallbacks, status } = useMujocoContext();
     const ikEnabledRef = useRef(false);
     const ikCalculatingRef = useRef(false);
-    const ikTargetRef = useRef(new THREE12.Group());
+    const ikTargetRef = useRef(new THREE11.Group());
     const siteIdRef = useRef(-1);
     const controlGroupRef = useRef(null);
     const genericIkRef = useRef(new GenericIK(mujocoRef.current));
@@ -3873,10 +3642,10 @@ var useIkController = createControllerHook(
     const needsInitialSync = useRef(true);
     const gizmoAnimRef = useRef({
       active: false,
-      startPos: new THREE12.Vector3(),
-      endPos: new THREE12.Vector3(),
-      startRot: new THREE12.Quaternion(),
-      endRot: new THREE12.Quaternion(),
+      startPos: new THREE11.Vector3(),
+      endPos: new THREE11.Vector3(),
+      startRot: new THREE11.Quaternion(),
+      endRot: new THREE11.Quaternion(),
       startTime: 0,
       duration: 1e3
     });
@@ -3919,7 +3688,14 @@ var useIkController = createControllerHook(
           position,
           quaternion,
           currentQ,
-          { damping: config.damping, maxIterations: config.maxIterations }
+          {
+            damping: config.damping,
+            epsilon: config.epsilon,
+            maxIterations: config.maxIterations,
+            posWeight: config.posWeight,
+            rotWeight: config.rotWeight,
+            tolerance: config.tolerance
+          }
         );
       },
       [config, mjModelRef, mjDataRef]
@@ -4021,8 +3797,8 @@ var useIkController = createControllerHook(
         const target = ikTargetRef.current;
         if (!target) return;
         const targetPos = pos.clone();
-        const targetRot = new THREE12.Quaternion().setFromEuler(
-          new THREE12.Euler(Math.PI, 0, 0)
+        const targetRot = new THREE11.Quaternion().setFromEuler(
+          new THREE11.Euler(Math.PI, 0, 0)
         );
         if (duration > 0) {
           const ga = gizmoAnimRef.current;
@@ -4047,7 +3823,7 @@ var useIkController = createControllerHook(
         if (!ikCalculatingRef.current || !target) return null;
         return {
           pos: target.position.clone(),
-          rot: new THREE12.Euler().setFromQuaternion(target.quaternion)
+          rot: new THREE11.Euler().setFromQuaternion(target.quaternion)
         };
       },
       []
@@ -4143,10 +3919,10 @@ function Body({
   if (!hasChildren) return null;
   return /* @__PURE__ */ jsx("group", { ref: groupRef, children });
 }
-var _mat4 = new THREE12.Matrix4();
-var _pos = new THREE12.Vector3();
-var _quat = new THREE12.Quaternion();
-var _scale = new THREE12.Vector3(1, 1, 1);
+var _mat4 = new THREE11.Matrix4();
+var _pos = new THREE11.Vector3();
+var _quat = new THREE11.Quaternion();
+var _scale = new THREE11.Vector3(1, 1, 1);
 function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const { ikTargetRef, siteIdRef, ikEnabledRef, setIkEnabled } = controller;
@@ -4198,47 +3974,54 @@ function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ref: wrapperRef, children: /* @__PURE__ */ jsx(
-    PivotControls,
+  return /* @__PURE__ */ jsx(
+    "group",
     {
-      ref: pivotRef,
-      autoTransform: true,
-      scale,
-      fixed: false,
-      depthTest: false,
-      disableScaling: true,
-      onDragStart: () => {
-        draggingRef.current = true;
-        if (!onDrag) {
-          if (!ikEnabledRef.current) setIkEnabled(true);
-        }
-        if (controls) controls.enabled = false;
-      },
-      onDragEnd: () => {
-        draggingRef.current = false;
-        if (pivotRef.current) {
-          pivotRef.current.matrix.identity();
-          pivotRef.current.matrixWorldNeedsUpdate = true;
-        }
-        if (controls) controls.enabled = true;
-      },
-      onDrag: (_l, _dl, world) => {
-        world.decompose(_pos, _quat, _scale);
-        if (onDrag) {
-          onDrag({ position: _pos.clone(), quaternion: _quat.clone() });
-        } else {
-          const target = ikTargetRef.current;
-          if (target) {
-            target.position.copy(_pos);
-            target.quaternion.copy(_quat);
-          }
+      ref: wrapperRef,
+      userData: { [CAPTURE_EXCLUDE_KEY]: true },
+      children: /* @__PURE__ */ jsx(
+        PivotControls,
+        {
+          ref: pivotRef,
+          autoTransform: true,
+          scale,
+          fixed: false,
+          depthTest: false,
+          disableScaling: true,
+          onDragStart: () => {
+            draggingRef.current = true;
+            if (!onDrag) {
+              if (!ikEnabledRef.current) setIkEnabled(true);
+            }
+            if (controls) controls.enabled = false;
+          },
+          onDragEnd: () => {
+            draggingRef.current = false;
+            if (pivotRef.current) {
+              pivotRef.current.matrix.identity();
+              pivotRef.current.matrixWorldNeedsUpdate = true;
+            }
+            if (controls) controls.enabled = true;
+          },
+          onDrag: (_l, _dl, world) => {
+            world.decompose(_pos, _quat, _scale);
+            if (onDrag) {
+              onDrag({ position: _pos.clone(), quaternion: _quat.clone() });
+            } else {
+              const target = ikTargetRef.current;
+              if (target) {
+                target.position.copy(_pos);
+                target.quaternion.copy(_quat);
+              }
+            }
+          },
+          children: /* @__PURE__ */ jsx("mesh", { visible: false, children: /* @__PURE__ */ jsx("sphereGeometry", { args: [1e-3] }) })
         }
-      },
-      children: /* @__PURE__ */ jsx("mesh", { visible: false, children: /* @__PURE__ */ jsx("sphereGeometry", { args: [1e-3] }) })
+      )
     }
-  ) });
+  );
 }
-var _dummy = new THREE12.Object3D();
+var _dummy = new THREE11.Object3D();
 function ContactMarkers({
   maxContacts = 100,
   radius = 8e-3,
@@ -4274,19 +4057,29 @@ function ContactMarkers({
     mesh.instanceMatrix.needsUpdate = true;
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsx("group", { ...groupProps, children: /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, maxContacts], frustumCulled: false, renderOrder: 999, children: [
-    /* @__PURE__ */ jsx("sphereGeometry", { args: [radius, 8, 8] }),
-    /* @__PURE__ */ jsx("meshBasicMaterial", { color, depthTest: false })
-  ] }) });
+  return /* @__PURE__ */ jsx(
+    "group",
+    {
+      ...groupProps,
+      userData: {
+        ...groupProps.userData,
+        [CAPTURE_EXCLUDE_KEY]: true
+      },
+      children: /* @__PURE__ */ jsxs("instancedMesh", { ref: meshRef, args: [void 0, void 0, maxContacts], frustumCulled: false, renderOrder: 999, children: [
+        /* @__PURE__ */ jsx("sphereGeometry", { args: [radius, 8, 8] }),
+        /* @__PURE__ */ jsx("meshBasicMaterial", { color, depthTest: false })
+      ] })
+    }
+  );
 }
 var _force = new Float64Array(3);
 var _torque = new Float64Array(3);
 var _point = new Float64Array(3);
-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();
+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();
 function DragInteraction({
   stiffness = 250,
   showArrow = true,
@@ -4297,19 +4090,20 @@ function DragInteraction({
   const draggingRef = useRef(false);
   const bodyIdRef = useRef(-1);
   const grabDistanceRef = useRef(0);
-  const localHitRef = useRef(new THREE12.Vector3());
-  const grabWorldRef = useRef(new THREE12.Vector3());
-  const mouseWorldRef = useRef(new THREE12.Vector3());
+  const localHitRef = useRef(new THREE11.Vector3());
+  const grabWorldRef = useRef(new THREE11.Vector3());
+  const mouseWorldRef = useRef(new THREE11.Vector3());
   const arrowRef = useRef(null);
   const groupRef = useRef(null);
   useEffect(() => {
     if (!showArrow || !groupRef.current) return;
-    const arrow = new THREE12.ArrowHelper(
-      new THREE12.Vector3(0, 1, 0),
-      new THREE12.Vector3(),
+    const arrow = new THREE11.ArrowHelper(
+      new THREE11.Vector3(0, 1, 0),
+      new THREE11.Vector3(),
       0.1,
       16729156
     );
+    arrow.userData[CAPTURE_EXCLUDE_KEY] = true;
     arrow.visible = false;
     arrow.line.material.transparent = true;
     arrow.line.material.opacity = 0.6;
@@ -4488,7 +4282,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 THREE12.Color(dr, dg, db);
+      const color = new THREE11.Color(dr, dg, db);
       const px = lightPos[3 * i];
       const py = lightPos[3 * i + 1];
       const pz = lightPos[3 * i + 2];
@@ -4496,7 +4290,7 @@ function useSceneLights(intensity = 1) {
       const dy = lightDir[3 * i + 1];
       const dz = lightDir[3 * i + 2];
       if (isDirectional) {
-        const light = new THREE12.DirectionalLight(color, finalIntensity);
+        const light = new THREE11.DirectionalLight(color, finalIntensity);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -4519,7 +4313,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 THREE12.SpotLight(color, finalIntensity, 0, angle, exponent / 128);
+        const light = new THREE11.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;
@@ -4802,16 +4596,20 @@ var JOINT_COLORS = {
   3: 16776960
   // hinge - yellow
 };
-var _v3a = new THREE12.Vector3();
-new THREE12.Vector3();
-var _quat2 = new THREE12.Quaternion();
-var _contactPos = new THREE12.Vector3();
-var _contactNormal = new THREE12.Vector3();
+var _v3a = new THREE11.Vector3();
+new THREE11.Vector3();
+var _quat2 = new THREE11.Quaternion();
+var _cameraMatrix = new THREE11.Matrix4();
+var _contactPos = new THREE11.Vector3();
+var _contactNormal = new THREE11.Vector3();
 var MAX_CONTACT_ARROWS = 50;
+var CAMERA_DEBUG_LENGTH = 0.12;
+var CAMERA_DEBUG_FRUSTUM_DEPTH = 0.08;
 function Debug({
   showGeoms = false,
   showSites = false,
   showJoints = false,
+  showCameras = false,
   showContacts = false,
   showCOM = false,
   showInertia = false,
@@ -4827,6 +4625,7 @@ function Debug({
     const geoms = [];
     const sites = [];
     const joints = [];
+    const cameras = [];
     const comMarkers = [];
     if (showGeoms) {
       for (let i = 0; i < model.ngeom; i++) {
@@ -4835,21 +4634,21 @@ function Debug({
         let geometry = null;
         switch (type) {
           case 2:
-            geometry = new THREE12.SphereGeometry(s[3 * i], 12, 8);
+            geometry = new THREE11.SphereGeometry(s[3 * i], 12, 8);
             break;
           case 3:
-            geometry = new THREE12.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
+            geometry = new THREE11.CapsuleGeometry(s[3 * i], s[3 * i + 1] * 2, 6, 8);
             break;
           case 5:
-            geometry = new THREE12.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
+            geometry = new THREE11.CylinderGeometry(s[3 * i], s[3 * i], s[3 * i + 1] * 2, 12);
             break;
           case 6:
-            geometry = new THREE12.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
+            geometry = new THREE11.BoxGeometry(s[3 * i] * 2, s[3 * i + 1] * 2, s[3 * i + 2] * 2);
             break;
         }
         if (geometry) {
-          const mat = new THREE12.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
-          const mesh = new THREE12.Mesh(geometry, mat);
+          const mat = new THREE11.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
+          const mesh = new THREE11.Mesh(geometry, mat);
           mesh.userData.geomId = i;
           mesh.userData.bodyId = model.geom_bodyid[i];
           geoms.push(mesh);
@@ -4872,9 +4671,9 @@ function Debug({
           }
           if (maxGeomSize > 0) radius = maxGeomSize * 0.15;
         }
-        const geometry = new THREE12.OctahedronGeometry(radius);
-        const mat = new THREE12.MeshBasicMaterial({ color: 16711935, depthTest: false });
-        const mesh = new THREE12.Mesh(geometry, mat);
+        const geometry = new THREE11.OctahedronGeometry(radius);
+        const mat = new THREE11.MeshBasicMaterial({ color: 16711935, depthTest: false });
+        const mesh = new THREE11.Mesh(geometry, mat);
         mesh.renderOrder = 999;
         mesh.frustumCulled = false;
         mesh.userData.siteId = i;
@@ -4886,9 +4685,9 @@ function Debug({
         ctx.font = "bold 36px monospace";
         ctx.textAlign = "center";
         ctx.fillText(getName(model, model.name_siteadr[i]), 128, 42);
-        const tex = new THREE12.CanvasTexture(canvas);
-        const spriteMat = new THREE12.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
-        const sprite = new THREE12.Sprite(spriteMat);
+        const tex = new THREE11.CanvasTexture(canvas);
+        const spriteMat = new THREE11.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
+        const sprite = new THREE11.Sprite(spriteMat);
         const labelScale = radius * 15;
         sprite.scale.set(labelScale, labelScale * 0.25, 1);
         sprite.position.y = radius * 2;
@@ -4911,9 +4710,9 @@ function Debug({
           }
         }
         const arrowLen = Math.max(maxGeomSize * 0.8, 0.05);
-        const arrow = new THREE12.ArrowHelper(
-          new THREE12.Vector3(0, 0, 1),
-          new THREE12.Vector3(),
+        const arrow = new THREE11.ArrowHelper(
+          new THREE11.Vector3(0, 0, 1),
+          new THREE11.Vector3(),
           arrowLen,
           color,
           arrowLen * 0.25,
@@ -4921,7 +4720,7 @@ function Debug({
         );
         arrow.renderOrder = 999;
         arrow.frustumCulled = false;
-        arrow.line.material = new THREE12.LineBasicMaterial({ color, depthTest: false });
+        arrow.line.material = new THREE11.LineBasicMaterial({ color, depthTest: false });
         arrow.cone.material.depthTest = false;
         arrow.line.renderOrder = 999;
         arrow.line.frustumCulled = false;
@@ -4934,17 +4733,88 @@ function Debug({
         joints.push(arrow);
       }
     }
+    if (showCameras && model.ncam && model.name_camadr) {
+      for (let i = 0; i < model.ncam; i++) {
+        const group = new THREE11.Group();
+        group.userData.cameraId = i;
+        group.renderOrder = 999;
+        group.frustumCulled = false;
+        const marker = new THREE11.Mesh(
+          new THREE11.BoxGeometry(0.014, 9e-3, 6e-3),
+          new THREE11.MeshBasicMaterial({ color: 3718648, depthTest: false })
+        );
+        marker.renderOrder = 999;
+        marker.frustumCulled = false;
+        group.add(marker);
+        const forward = new THREE11.ArrowHelper(
+          new THREE11.Vector3(0, 0, -1),
+          new THREE11.Vector3(),
+          CAMERA_DEBUG_LENGTH,
+          3718648,
+          CAMERA_DEBUG_LENGTH * 0.24,
+          CAMERA_DEBUG_LENGTH * 0.11
+        );
+        forward.renderOrder = 999;
+        forward.frustumCulled = false;
+        forward.line.material = new THREE11.LineBasicMaterial({
+          color: 3718648,
+          depthTest: false
+        });
+        forward.cone.material.depthTest = false;
+        group.add(forward);
+        const frustumGeometry = new THREE11.BufferGeometry();
+        frustumGeometry.setAttribute(
+          "position",
+          new THREE11.Float32BufferAttribute(new Float32Array(8 * 2 * 3), 3)
+        );
+        const frustum = new THREE11.LineSegments(
+          frustumGeometry,
+          new THREE11.LineBasicMaterial({
+            color: 3718648,
+            transparent: true,
+            opacity: 0.8,
+            depthTest: false
+          })
+        );
+        frustum.renderOrder = 999;
+        frustum.frustumCulled = false;
+        group.userData.frustum = frustum;
+        group.add(frustum);
+        const canvas = document.createElement("canvas");
+        canvas.width = 256;
+        canvas.height = 64;
+        const ctx = canvas.getContext("2d");
+        ctx.fillStyle = "#38bdf8";
+        ctx.font = "bold 32px monospace";
+        ctx.textAlign = "center";
+        ctx.fillText(getName(model, model.name_camadr[i]), 128, 42);
+        const texture = new THREE11.CanvasTexture(canvas);
+        const sprite = new THREE11.Sprite(
+          new THREE11.SpriteMaterial({
+            map: texture,
+            depthTest: false,
+            transparent: true
+          })
+        );
+        sprite.position.set(0, 0.014, 0.01);
+        sprite.scale.set(0.04, 0.01, 1);
+        sprite.renderOrder = 999;
+        group.userData.label = sprite;
+        group.add(sprite);
+        cameras.push(group);
+      }
+    }
     if (showCOM) {
       for (let i = 1; i < model.nbody; i++) {
-        const geometry = new THREE12.SphereGeometry(5e-3, 6, 6);
-        const mat = new THREE12.MeshBasicMaterial({ color: 16711680 });
-        const mesh = new THREE12.Mesh(geometry, mat);
+        const geometry = new THREE11.SphereGeometry(5e-3, 6, 6);
+        const mat = new THREE11.MeshBasicMaterial({ color: 16711680 });
+        const mesh = new THREE11.Mesh(geometry, mat);
         mesh.userData.bodyId = i;
         comMarkers.push(mesh);
       }
     }
-    return { geoms, sites, joints, comMarkers };
-  }, [status, mjModelRef, showGeoms, showSites, showJoints, showCOM]);
+    return { geoms, sites, joints, cameras, comMarkers };
+  }, [status, mjModelRef, showGeoms, showSites, showJoints, showCameras, showCOM]);
   useEffect(() => {
     const group = groupRef.current;
     if (!group || !debugGeometry) return;
@@ -4952,6 +4822,7 @@ function Debug({
       ...debugGeometry.geoms,
       ...debugGeometry.sites,
       ...debugGeometry.joints,
+      ...debugGeometry.cameras,
       ...debugGeometry.comMarkers
     ];
     for (const obj of allObjects) group.add(obj);
@@ -5014,6 +4885,68 @@ function Debug({
         arrow.setDirection(_v3a);
       }
     }
+    const camXpos = data.cam_xpos;
+    const camXmat = data.cam_xmat;
+    if (camXpos && camXmat) {
+      for (const group of debugGeometry.cameras) {
+        const cameraId = group.userData.cameraId;
+        const i3 = cameraId * 3;
+        const i9 = cameraId * 9;
+        group.position.set(
+          camXpos[i3],
+          camXpos[i3 + 1],
+          camXpos[i3 + 2]
+        );
+        _cameraMatrix.set(
+          camXmat[i9],
+          camXmat[i9 + 1],
+          camXmat[i9 + 2],
+          0,
+          camXmat[i9 + 3],
+          camXmat[i9 + 4],
+          camXmat[i9 + 5],
+          0,
+          camXmat[i9 + 6],
+          camXmat[i9 + 7],
+          camXmat[i9 + 8],
+          0,
+          0,
+          0,
+          0,
+          1
+        );
+        group.quaternion.setFromRotationMatrix(_cameraMatrix);
+        const fovy = model.cam_fovy?.[cameraId] ?? 45;
+        const halfHeight = Math.tan(THREE11.MathUtils.degToRad(fovy) / 2) * CAMERA_DEBUG_FRUSTUM_DEPTH;
+        const halfWidth = halfHeight * 4 / 3;
+        const positions = group.userData.frustum.geometry.attributes.position;
+        const array = positions.array;
+        const points = [
+          [0, 0, 0],
+          [-halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [0, 0, 0],
+          [halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [0, 0, 0],
+          [halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [0, 0, 0],
+          [-halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [-halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [-halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [-halfWidth, -halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH],
+          [-halfWidth, halfHeight, -CAMERA_DEBUG_FRUSTUM_DEPTH]
+        ];
+        for (let i = 0; i < points.length; i += 1) {
+          array[i * 3] = points[i][0];
+          array[i * 3 + 1] = points[i][1];
+          array[i * 3 + 2] = points[i][2];
+        }
+        positions.needsUpdate = true;
+      }
+    }
     for (const mesh of debugGeometry.comMarkers) {
       const bid = mesh.userData.bodyId;
       const i3 = bid * 3;
@@ -5029,9 +4962,9 @@ function Debug({
     contactPoolInitRef.current = true;
     const pool = [];
     for (let i = 0; i < MAX_CONTACT_ARROWS; i++) {
-      const arrow = new THREE12.ArrowHelper(
-        new THREE12.Vector3(0, 1, 0),
-        new THREE12.Vector3(),
+      const arrow = new THREE11.ArrowHelper(
+        new THREE11.Vector3(0, 1, 0),
+        new THREE11.Vector3(),
         0.1,
         16729156,
         0.03,
@@ -5081,14 +5014,24 @@ function Debug({
     }
   });
   if (status !== "ready") return null;
-  return /* @__PURE__ */ jsxs("group", { ...groupProps, children: [
-    /* @__PURE__ */ jsx("group", { ref: groupRef }),
-    showContacts && /* @__PURE__ */ jsx("group", { ref: contactGroupRef })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "group",
+    {
+      ...groupProps,
+      userData: {
+        ...groupProps.userData,
+        [CAPTURE_EXCLUDE_KEY]: true
+      },
+      children: [
+        /* @__PURE__ */ jsx("group", { ref: groupRef }),
+        showContacts && /* @__PURE__ */ jsx("group", { ref: contactGroupRef })
+      ]
+    }
+  );
 }
-var DEFAULT_TENDON_COLOR = new THREE12.Color(0.3, 0.3, 0.8);
+var DEFAULT_TENDON_COLOR = new THREE11.Color(0.3, 0.3, 0.8);
 var DEFAULT_TENDON_WIDTH = 2e-3;
-new THREE12.Vector3();
+new THREE11.Vector3();
 function TendonRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const groupRef = useRef(null);
@@ -5102,7 +5045,7 @@ function TendonRenderer(props) {
     if (!model || !data || !group) return;
     const ntendon = model.ntendon ?? 0;
     if (ntendon === 0) return;
-    const material = new THREE12.MeshStandardMaterial({
+    const material = new THREE11.MeshStandardMaterial({
       color: DEFAULT_TENDON_COLOR,
       roughness: 0.6,
       metalness: 0.1
@@ -5117,11 +5060,11 @@ function TendonRenderer(props) {
         curves.push(null);
         continue;
       }
-      const points = Array.from({ length: wrapNum }, () => new THREE12.Vector3());
-      const curve = new THREE12.CatmullRomCurve3(points, false);
+      const points = Array.from({ length: wrapNum }, () => new THREE11.Vector3());
+      const curve = new THREE11.CatmullRomCurve3(points, false);
       const segments = Math.max(wrapNum * 2, 4);
-      const geometry = new THREE12.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
-      const mesh = new THREE12.Mesh(geometry, material);
+      const geometry = new THREE11.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
+      const mesh = new THREE11.Mesh(geometry, material);
       mesh.frustumCulled = false;
       group.add(mesh);
       meshes.push(mesh);
@@ -5176,11 +5119,11 @@ function TendonRenderer(props) {
       if (curve.points.length !== validCount) {
         curve.points.length = validCount;
         while (curve.points.length < validCount) {
-          curve.points.push(new THREE12.Vector3());
+          curve.points.push(new THREE11.Vector3());
         }
       }
       mesh.geometry.dispose();
-      mesh.geometry = new THREE12.TubeGeometry(
+      mesh.geometry = new THREE11.TubeGeometry(
         curve,
         Math.max(validCount * 2, 4),
         DEFAULT_TENDON_WIDTH,
@@ -5207,24 +5150,24 @@ function FlexRenderer(props) {
       const vertAdr = model.flex_vertadr[f];
       const vertNum = model.flex_vertnum[f];
       if (vertNum === 0) continue;
-      const geometry = new THREE12.BufferGeometry();
+      const geometry = new THREE11.BufferGeometry();
       const positions = new Float32Array(vertNum * 3);
-      geometry.setAttribute("position", new THREE12.BufferAttribute(positions, 3));
+      geometry.setAttribute("position", new THREE11.BufferAttribute(positions, 3));
       geometry.computeVertexNormals();
-      let color = new THREE12.Color(0.5, 0.5, 0.5);
+      let color = new THREE11.Color(0.5, 0.5, 0.5);
       if (model.flex_rgba) {
-        color = new THREE12.Color(
+        color = new THREE11.Color(
           model.flex_rgba[4 * f],
           model.flex_rgba[4 * f + 1],
           model.flex_rgba[4 * f + 2]
         );
       }
-      const material = new THREE12.MeshStandardMaterial({
+      const material = new THREE11.MeshStandardMaterial({
         color,
         roughness: 0.7,
-        side: THREE12.DoubleSide
+        side: THREE11.DoubleSide
       });
-      const mesh = new THREE12.Mesh(geometry, material);
+      const mesh = new THREE11.Mesh(geometry, material);
       mesh.userData.flexId = f;
       mesh.userData.vertAdr = vertAdr;
       mesh.userData.vertNum = vertNum;
@@ -5260,7 +5203,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 THREE12.Matrix4();
+var _matrix = new THREE11.Matrix4();
 function getGeomInfo(model, geomId) {
   const size = model.geom_size.subarray(geomId * 3, geomId * 3 + 3);
   const type = model.geom_type[geomId];
@@ -5282,10 +5225,10 @@ function geomSignature(model, geomId) {
   return [type, size, mat, data, rgba].join("|");
 }
 function firstMesh(object) {
-  if (object instanceof THREE12.Mesh) return object;
+  if (object instanceof THREE11.Mesh) return object;
   let mesh = null;
   object.traverse((child) => {
-    if (!mesh && child instanceof THREE12.Mesh) mesh = child;
+    if (!mesh && child instanceof THREE11.Mesh) mesh = child;
   });
   return mesh;
 }
@@ -5714,12 +5657,12 @@ function useActuators() {
     return actuators;
   }, [status, mjModelRef]);
 }
-var _mat42 = new THREE12.Matrix4();
+var _mat42 = new THREE11.Matrix4();
 function useSitePosition(siteName) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const siteIdRef = useRef(-1);
-  const positionRef = useRef(new THREE12.Vector3());
-  const quaternionRef = useRef(new THREE12.Quaternion());
+  const positionRef = useRef(new THREE11.Vector3());
+  const quaternionRef = useRef(new THREE11.Quaternion());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") {
@@ -5910,10 +5853,10 @@ function useJointState(name) {
 function useBodyState(name) {
   const { mjModelRef, status } = useMujocoContext();
   const bodyIdRef = useRef(-1);
-  const position = useRef(new THREE12.Vector3());
-  const quaternion = useRef(new THREE12.Quaternion());
-  const linearVelocity = useRef(new THREE12.Vector3());
-  const angularVelocity = useRef(new THREE12.Vector3());
+  const position = useRef(new THREE11.Vector3());
+  const quaternion = useRef(new THREE11.Quaternion());
+  const linearVelocity = useRef(new THREE11.Vector3());
+  const angularVelocity = useRef(new THREE11.Vector3());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") return;
@@ -6035,6 +5978,135 @@ function useKeyboardTeleop(config) {
     }
   });
 }
+var DEFAULT_TRANSLATE_SPEED = 0.25;
+var DEFAULT_ROTATE_SPEED = 1;
+var _translation = new THREE11.Vector3();
+var _axis = new THREE11.Vector3();
+var _quat3 = new THREE11.Quaternion();
+function actionSign(action) {
+  return action.endsWith("+") ? 1 : -1;
+}
+function actionBase(action) {
+  return action.slice(0, -1);
+}
+function applyRotation(target, action, amount, frame) {
+  const base = actionBase(action);
+  if (base === "pitch") {
+    _axis.set(1, 0, 0);
+  } else if (base === "yaw") {
+    _axis.set(0, 1, 0);
+  } else if (base === "roll") {
+    _axis.set(0, 0, 1);
+  } else {
+    return;
+  }
+  _quat3.setFromAxisAngle(_axis, amount);
+  if (frame === "target") {
+    target.quaternion.multiply(_quat3);
+  } else {
+    target.quaternion.premultiply(_quat3);
+  }
+}
+function addTranslation(action, amount) {
+  switch (action) {
+    case "x+":
+      _translation.x += amount;
+      break;
+    case "x-":
+      _translation.x -= amount;
+      break;
+    case "y+":
+      _translation.y += amount;
+      break;
+    case "y-":
+      _translation.y -= amount;
+      break;
+    case "z+":
+      _translation.z += amount;
+      break;
+    case "z-":
+      _translation.z -= amount;
+      break;
+  }
+}
+function useKeyboardIkTarget(config) {
+  const pressedRef = useRef(/* @__PURE__ */ new Set());
+  const wasActiveRef = useRef(false);
+  const configRef = useRef(config);
+  configRef.current = config;
+  const boundCodes = useMemo(() => {
+    return new Set((config?.bindings ?? []).map((binding) => binding.code));
+  }, [config?.bindings]);
+  useEffect(() => {
+    const onKeyDown = (event) => {
+      const current = configRef.current;
+      if (!current || current.enabled === false || !boundCodes.has(event.code)) return;
+      if (current.preventDefault !== false) event.preventDefault();
+      pressedRef.current.add(event.code);
+    };
+    const onKeyUp = (event) => {
+      const current = configRef.current;
+      if (boundCodes.has(event.code) && current?.preventDefault !== false) {
+        event.preventDefault();
+      }
+      pressedRef.current.delete(event.code);
+    };
+    const onBlur = () => {
+      pressedRef.current.clear();
+      wasActiveRef.current = false;
+    };
+    window.addEventListener("keydown", onKeyDown);
+    window.addEventListener("keyup", onKeyUp);
+    window.addEventListener("blur", onBlur);
+    return () => {
+      window.removeEventListener("keydown", onKeyDown);
+      window.removeEventListener("keyup", onKeyUp);
+      window.removeEventListener("blur", onBlur);
+    };
+  }, [boundCodes]);
+  useFrame((_state, delta) => {
+    const current = configRef.current;
+    const controller = current?.controller;
+    if (!current || current.enabled === false || !controller) {
+      wasActiveRef.current = false;
+      return;
+    }
+    const activeBindings = [];
+    for (const binding of current.bindings) {
+      if (pressedRef.current.has(binding.code)) activeBindings.push(binding);
+    }
+    if (activeBindings.length === 0) {
+      wasActiveRef.current = false;
+      return;
+    }
+    if (!wasActiveRef.current) {
+      if (current.syncOnStart !== false) controller.syncTargetToSite();
+      if (current.autoEnableIk !== false && !controller.ikEnabledRef.current) {
+        controller.setIkEnabled(true);
+      }
+    }
+    wasActiveRef.current = true;
+    const target = controller.ikTargetRef.current;
+    if (!target) return;
+    const frame = current.frame ?? "world";
+    _translation.set(0, 0, 0);
+    for (const binding of activeBindings) {
+      const translateSpeed = binding.translateSpeed ?? current.translateSpeed ?? DEFAULT_TRANSLATE_SPEED;
+      const rotateSpeed = binding.rotateSpeed ?? current.rotateSpeed ?? DEFAULT_ROTATE_SPEED;
+      const amount = actionSign(binding.action) * delta;
+      const base = actionBase(binding.action);
+      if (base === "x" || base === "y" || base === "z") {
+        addTranslation(binding.action, translateSpeed * delta);
+      } else {
+        applyRotation(target, binding.action, rotateSpeed * amount, frame);
+      }
+    }
+    if (_translation.lengthSq() > 0) {
+      if (frame === "target") _translation.applyQuaternion(target.quaternion);
+      target.position.add(_translation);
+    }
+  });
+}
 function usePolicy(config) {
   const lastActionTimeRef = useRef(0);
   const lastObservationRef = useRef(null);
@@ -6501,7 +6573,7 @@ function useSelectionHighlight(bodyId, options = {}) {
       }
     }
     prevRef.current = [];
-    const highlightColor = new THREE12.Color(color);
+    const highlightColor = new THREE11.Color(color);
     for (const mesh of meshes) {
       const mat = mesh.material;
       if (mat.emissive) {
@@ -6528,15 +6600,15 @@ function useSelectionHighlight(bodyId, options = {}) {
 }
 function useCameraAnimation() {
   const { camera } = useThree();
-  const orbitTargetRef = useRef(new THREE12.Vector3(0, 0, 0));
+  const orbitTargetRef = useRef(new THREE11.Vector3(0, 0, 0));
   const cameraAnimRef = useRef({
     active: false,
-    startPos: new THREE12.Vector3(),
-    endPos: new THREE12.Vector3(),
-    startRot: new THREE12.Quaternion(),
-    endRot: new THREE12.Quaternion(),
-    startTarget: new THREE12.Vector3(),
-    endTarget: new THREE12.Vector3(),
+    startPos: new THREE11.Vector3(),
+    endPos: new THREE11.Vector3(),
+    startRot: new THREE11.Quaternion(),
+    endRot: new THREE11.Quaternion(),
+    startTarget: new THREE11.Vector3(),
+    endTarget: new THREE11.Vector3(),
     startTime: 0,
     duration: 0,
     resolve: null
@@ -6608,12 +6680,6 @@ function useCameraAnimation() {
  *
  * 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
@@ -6801,6 +6867,6 @@ function useCameraAnimation() {
  * useCameraAnimation — composable camera animation hook.
  */
 
-export { Body, ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkGizmo, InstancedGeomRenderer, MountedCameraFrameSequenceManifestStatus, MountedCameraFrameSequenceReadinessStatus, MountedCameraFrameSourceSuggestionMatch, MujocoCanvas, MujocoPhysics, MujocoProvider, MujocoSimProvider, SceneLights, SplatCollisionProxyPreview, TendonRenderer, TrajectoryPlayer, buildObservation, canFetchSplatCollisionProxyXml, captureCameraFrame, captureCameraFrameBlob, captureFrame, captureFrameBlob, createCameraFrameCaptureSession, createContiguousControlGroup, createController, createControllerHook, createMountedCameraFrameSequenceManifest, createMountedCameraFrameSequencePlan, createMountedCameraFrameSequencePlanFromApi, createMountedCameraFrameSequenceReadiness, createMountedCameraFrameSourceSuggestions, fetchSplatCollisionProxyXml, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getActuatedJoints, getCameraFrameCaptureSourceTarget, getControlMap, getMountedCameraFrameCaptureSource, getName, isMountedCameraFrameCaptureSource, loadScene, parseSplatCollisionProxyGeoms, recordMountedCameraFrameSequence, renderCameraFrameToCanvas, resolveControlGroup, resolveMountedCameraFrameSource, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyMeshes, useBodyState, useCameraAnimation, useCameraFrameCapture, useCameraSequenceRecorder, useContactEvents, useContacts, useCtrl, useCtrlNoise, useFrameCapture, useGamepad, useGravityCompensation, useIkController, useJointState, useKeyboardTeleop, useMountedCameraSequenceRecorder, useMujoco, useMujocoWasm, useObservation, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useSplatCollisionProxyGeoms, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
+export { Body, ContactListener, ContactMarkers, Debug, DragInteraction, FlexRenderer, IkGizmo, InstancedGeomRenderer, MountedCameraFrameSequenceManifestStatus, MountedCameraFrameSequenceReadinessStatus, MountedCameraFrameSourceSuggestionMatch, MujocoCanvas, MujocoPhysics, MujocoProvider, MujocoSimProvider, SceneLights, SplatCollisionProxyPreview, TendonRenderer, TrajectoryPlayer, buildObservation, canFetchSplatCollisionProxyXml, captureFrame, captureFrameBlob, createContiguousControlGroup, createController, createControllerHook, createMountedCameraFrameSequenceManifest, createMountedCameraFrameSequencePlan, createMountedCameraFrameSequencePlanFromApi, createMountedCameraFrameSequenceReadiness, createMountedCameraFrameSourceSuggestions, fetchSplatCollisionProxyXml, findActuatorByName, findBodyByName, findGeomByName, findJointByName, findKeyframeByName, findSensorByName, findSiteByName, findTendonByName, getActuatedJoints, getCameraFrameCaptureSourceTarget, getControlMap, getMountedCameraFrameCaptureSource, getName, isMountedCameraFrameCaptureSource, loadScene, parseSplatCollisionProxyGeoms, recordMountedCameraFrameSequence, resolveControlGroup, resolveMountedCameraFrameSource, useActuators, useAfterPhysicsStep, useBeforePhysicsStep, useBodyMeshes, useBodyState, useCameraAnimation, useCameraFrameCapture, useCameraSequenceRecorder, useContactEvents, useContacts, useCtrl, useCtrlNoise, useFrameCapture, useGamepad, useGravityCompensation, useIkController, useJointState, useKeyboardIkTarget, useKeyboardTeleop, useMountedCameraSequenceRecorder, useMujoco, useMujocoWasm, useObservation, usePolicy, useSceneLights, useSelectionHighlight, useSensor, useSensors, useSitePosition, useSplatCollisionProxyGeoms, useTrajectoryPlayer, useTrajectoryRecorder, useVideoRecorder };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map