mujoco-react 12.2.1 → 12.3.0

package/dist/index.js

@@ -1,12 +1,12 @@
 import { displayFields } from './chunk-U2Y2BODT.js';
-import { withContacts, getContact, captureCameraFrame, captureCameraFrameBlob, captureCameraRGBD, createCameraFrameCaptureSession, CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, createCaptureCamera, prepareCaptureCamera } from './chunk-OIMH4U5U.js';
-export { CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAMERA_FRAME_CAPTURE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, ModelActuators, ModelBodies, ModelCameras, ModelGeoms, ModelJoints, ModelKeyframes, ModelResources, ModelSensors, ModelSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, captureCameraFrame, captureCameraFrameBlob, captureCameraFrameTensor, captureCameraRGBD, createCameraFrameCaptureSession, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, dataUrlToPolicyImageTensor, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, imageDataToPolicyImageTensor, pixelsToPolicyImageTensor, registerModelResources, renderCameraFrameToCanvas, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-OIMH4U5U.js';
+import { withContacts, getContact, captureCameraFrame, captureCameraFrameBlob, captureCameraRGBD, createCameraFrameCaptureSession, CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, createCaptureCamera, prepareCaptureCamera } from './chunk-FVSVETBC.js';
+export { CAMERA_FRAME_CAPTURE_PRE_RENDER_USER_DATA_KEY, CAMERA_FRAME_CAPTURE_RENDER_USER_DATA_KEY, CAPTURE_EXCLUDE_KEY, ModelActuators, ModelBodies, ModelCameras, ModelGeoms, ModelJoints, ModelKeyframes, ModelResources, ModelSensors, ModelSites, ScenarioLighting, SplatEnvironment, SplatEnvironmentReadinessStatus, VisualScenarioEffects, captureCameraFrame, captureCameraFrameBlob, captureCameraFrameTensor, captureCameraRGBD, createCameraFrameCaptureSession, createPairedSplatEnvironment, createSparkSplatViewerUrl, createSplatEnvironmentUserData, createSplatSceneConfig, createVisualScenarioExecutionContext, dataUrlToPolicyImageTensor, getContact, getScenarioBackground, getScenarioCameraPosition, getSplatEnvironmentReadiness, imageDataToPolicyImageTensor, pixelsToPolicyImageTensor, registerModelResources, renderCameraFrameToCanvas, useSplatEnvironment, useSplatSceneConfig, useVisualScenarioEffects, useVisualScenarioExecutionContext, withSplatEnvironment } from './chunk-FVSVETBC.js';
 import loadMujoco from '@mujoco/mujoco';
 import defaultMujocoWasmUrl from '@mujoco/mujoco/mujoco.wasm?url';
 import { createContext, forwardRef, useRef, useEffect, useContext, useState, useCallback, useMemo, useLayoutEffect, useId } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import { Canvas, useThree, useFrame } from '@react-three/fiber';
-import * as THREE12 from 'three';
+import * as THREE13 from 'three';
 import { mergeVertices } from 'three/examples/jsm/utils/BufferGeometryUtils.js';
 import { PivotControls } from '@react-three/drei';
 
@@ -1766,16 +1766,227 @@ async function attachSimulationRuntime(module, api, waitForDisplay, invalidate,
     throw error;
   }
 }
-var CapsuleGeometry = class extends THREE12.BufferGeometry {
+var MAX_LIGHTS = 8;
+var vertexShader = `
+  uniform vec4 diffuse;
+  uniform float emission, specular, shininess;
+  uniform int lightCount;
+  uniform float lightMode[8];
+  uniform vec3 lightPos[8], lightDir[8], lightAmbient[8], lightDiffuse[8], lightSpecular[8], lightAttenuation[8];
+  uniform float lightCutoff[8], lightExponent[8];
+  uniform bool explicitUV;
+  uniform vec2 repeatScale;
+  uniform vec3 cubeScale;
+  varying vec3 cubeCoord;
+  varying vec4 litColor;
+  varying vec2 texCoord;
+  void main() {
+    vec4 p = modelViewMatrix * vec4(position, 1.0);
+    vec3 n = normalize(normalMatrix * normal);
+    vec3 v = normalize(-p.xyz);
+    vec3 rgb = diffuse.rgb * emission;
+    if (lightCount == 0) rgb += diffuse.rgb * 0.3;
+    for (int i=0; i<8; i++) {
+      if (i>=lightCount) break;
+      vec3 l;
+      float attenuation = 1.0;
+      if (lightMode[i] > 1.5) l = vec3(0.0, 0.0, 1.0);
+      else if (lightMode[i] > 0.5) l = normalize(-(viewMatrix * vec4(lightDir[i],0.0)).xyz);
+      else {
+        vec3 delta = (viewMatrix * vec4(lightPos[i],1.0)).xyz - p.xyz;
+        float distance = length(delta);
+        l = normalize(delta);
+        vec3 a = lightAttenuation[i];
+        attenuation = 1.0 / max(1e-8, a.x+a.y*distance+a.z*distance*distance);
+        vec3 direction = normalize((viewMatrix * vec4(lightDir[i],0.0)).xyz);
+        float spot = dot(-l,direction);
+        if(lightCutoff[i] >= -1.0) attenuation *= spot >= lightCutoff[i] ? (lightExponent[i] > 0.0 ? pow(max(0.0,spot),lightExponent[i]) : 1.0) : 0.0;
+      }
+      float lambert = max(0.0,dot(n,l));
+      vec3 h = normalize(l+v);
+      float shine = lambert > 0.0 && specular > 0.0 ? (shininess > 0.0 ? pow(max(0.0,dot(n,h)),shininess) : 1.0) : 0.0;
+      rgb += attenuation*(diffuse.rgb*(lightAmbient[i]+lambert*lightDiffuse[i])+specular*shine*lightSpecular[i]);
+    }
+    litColor = vec4(clamp(rgb,0.0,1.0),diffuse.a);
+    cubeCoord = position*cubeScale;
+    texCoord = explicitUV ? vec2(uv.x,1.0-uv.y) : vec2(.5*repeatScale.x*position.x-.5,-.5*repeatScale.y*position.y-.5);
+    gl_Position = projectionMatrix*p;
+  }`;
+var fragmentShader = `
+  uniform bool useMap;
+  uniform sampler2D colorMap;
+  uniform bool useCube;
+  uniform samplerCube cubeMap;
+  varying vec3 cubeCoord;
+  varying vec4 litColor;
+  varying vec2 texCoord;
+  void main() {
+    gl_FragColor = litColor * (useMap ? texture2D(colorMap,texCoord) : (useCube ? textureCube(cubeMap,cubeCoord) : vec4(1.0)));
+  }`;
+var textureCache = /* @__PURE__ */ new WeakMap();
+function acquireTexture(model, id) {
+  const m = model;
+  let cache = textureCache.get(model);
+  if (!cache) {
+    cache = /* @__PURE__ */ new Map();
+    textureCache.set(model, cache);
+  }
+  let entry = cache.get(id);
+  if (!entry) {
+    const width = model.tex_width[id], height = model.tex_height[id], channels = model.tex_nchannel[id];
+    if (channels !== 3 && channels !== 4) throw new Error("Classic RGB textures require three or four channels");
+    const bytes = model.tex_data.subarray(model.tex_adr[id], model.tex_adr[id] + width * height * channels);
+    const rgba = new Uint8Array(width * height * 4);
+    for (let i = 0; i < width * height; i++) {
+      rgba.set(bytes.subarray(i * channels, i * channels + 3), i * 4);
+      rgba[i * 4 + 3] = channels === 4 ? bytes[i * channels + 3] : 255;
+    }
+    let texture;
+    if (m.tex_type[id] === 0) {
+      texture = new THREE13.DataTexture(rgba, width, height, THREE13.RGBAFormat);
+      texture.colorSpace = m.tex_colorspace[id] === 2 ? THREE13.SRGBColorSpace : THREE13.LinearSRGBColorSpace;
+      texture.wrapS = texture.wrapT = THREE13.RepeatWrapping;
+      texture.magFilter = THREE13.LinearFilter;
+      texture.minFilter = THREE13.LinearMipmapLinearFilter;
+      texture.generateMipmaps = true;
+    } else if (m.tex_type[id] === 1) {
+      if (height !== 6 * width) throw new Error("Classic cube texture must contain six square faces");
+      const faces = Array.from({ length: 6 }, (_, i) => new THREE13.DataTexture(rgba.subarray(i * width * width * 4, (i + 1) * width * width * 4), width, width, THREE13.RGBAFormat));
+      texture = new THREE13.CubeTexture(faces);
+      texture.colorSpace = THREE13.LinearSRGBColorSpace;
+    } else throw new Error("Classic materials require a 2D or cube RGB texture");
+    texture.flipY = false;
+    texture.needsUpdate = true;
+    entry = { texture, references: 0 };
+    cache.set(id, entry);
+  }
+  entry.references++;
+  const retained = entry;
+  return { texture: entry.texture, release() {
+    if (--retained.references === 0) {
+      retained.texture.dispose();
+      cache.delete(id);
+    }
+  } };
+}
+function createClassicPlaneGeometry(model, geom) {
+  const size = model.geom_size.subarray(geom * 3, geom * 3 + 3);
+  if (size[0] <= 0 || size[1] <= 0) throw new Error("Classic appearance currently requires finite plane extents");
+  const axis = (half) => {
+    const step = Math.max(size[2], half / 98);
+    let count = Math.floor(half / step);
+    count -= count % 2;
+    const pad = half - count * step;
+    count += 2;
+    const grid = [];
+    for (let i = 0; i < count; i++) {
+      const left = i === 0 ? -half : -half + pad + (i - 1) * 2 * step;
+      const right = left + (i === 0 || i === count - 1 ? pad : 2 * step);
+      grid[i] = left;
+      grid[i + 1] = Math.max(left, right);
+    }
+    return grid;
+  };
+  const x = axis(size[0]), y = axis(size[1]), positions = [], normals = [], indices = [];
+  for (const py of y) for (const px of x) {
+    positions.push(px, py, 0);
+    normals.push(0, 0, 1);
+  }
+  for (let row = 0; row < y.length - 1; row++) for (let col = 0; col < x.length - 1; col++) {
+    const a = row * x.length + col, b = a + 1, c = a + x.length, d = c + 1;
+    indices.push(a, b, d, a, d, c);
+  }
+  const geometry = new THREE13.BufferGeometry();
+  geometry.setAttribute("position", new THREE13.Float32BufferAttribute(positions, 3));
+  geometry.setAttribute("normal", new THREE13.Float32BufferAttribute(normals, 3));
+  geometry.setIndex(indices);
+  return geometry;
+}
+function createMujocoClassicMaterial(model, data, geom) {
+  const m = model, d = data;
+  for (const name of ["tex_type", "tex_colorspace", "mat_emission", "mat_specular", "mat_shininess", "light_ambient"]) {
+    if (!m[name] || typeof m[name].length !== "number") throw new Error(`Classic appearance requires model.${name}`);
+  }
+  if (!m.vis?.headlight || !d.light_xpos || !d.light_xdir) throw new Error("Classic appearance requires MuJoCo visual/light state");
+  const mat = model.geom_matid[geom], rgba = Array.from(model.geom_rgba.slice(4 * geom, 4 * geom + 4));
+  if (mat >= 0 && rgba.every((v, i) => v === [0.5, 0.5, 0.5, 1][i])) rgba.splice(0, 4, ...model.mat_rgba.slice(4 * mat, 4 * mat + 4));
+  const roles = model.mat_texid.length / Math.max(1, model.mat_rgba.length / 4);
+  const textureId = mat >= 0 ? model.mat_texid[mat * roles + 1] : -1;
+  const retained = textureId >= 0 ? acquireTexture(model, textureId) : void 0;
+  const texture = retained?.texture ?? null;
+  const vectors = () => Array.from({ length: MAX_LIGHTS }, () => new THREE13.Vector3());
+  const uniforms = {
+    diffuse: { value: new THREE13.Vector4(...rgba) },
+    emission: { value: mat >= 0 ? m.mat_emission[mat] : 0 },
+    specular: { value: mat >= 0 ? m.mat_specular[mat] : 0.5 },
+    shininess: { value: 128 * (mat >= 0 ? m.mat_shininess[mat] : 0.5) },
+    lightCount: { value: 0 },
+    lightMode: { value: new Float32Array(MAX_LIGHTS) },
+    lightPos: { value: vectors() },
+    lightDir: { value: vectors() },
+    lightAmbient: { value: vectors() },
+    lightDiffuse: { value: vectors() },
+    lightSpecular: { value: vectors() },
+    lightAttenuation: { value: vectors() },
+    lightCutoff: { value: new Float32Array(MAX_LIGHTS) },
+    lightExponent: { value: new Float32Array(MAX_LIGHTS) },
+    explicitUV: { value: Number(model.geom_type[geom]) === 7 && (model.mesh_texcoordadr?.[model.geom_dataid[geom]] ?? -1) >= 0 },
+    repeatScale: { value: new THREE13.Vector2(mat >= 0 ? model.mat_texrepeat[mat * 2] : 1, mat >= 0 ? model.mat_texrepeat[mat * 2 + 1] : 1) },
+    useMap: { value: !!texture && m.tex_type[textureId] === 0 },
+    colorMap: { value: texture && m.tex_type[textureId] === 0 ? texture : null },
+    useCube: { value: !!texture && m.tex_type[textureId] === 1 },
+    cubeMap: { value: texture && m.tex_type[textureId] === 1 ? texture : null },
+    cubeScale: { value: new THREE13.Vector3(1, 1, 1) }
+  };
+  if (mat >= 0 && !model.mat_texuniform[mat]) {
+    const size = model.geom_size;
+    uniforms.repeatScale.value.x /= size[geom * 3] || 1;
+    uniforms.repeatScale.value.y /= size[geom * 3 + 1] || 1;
+  }
+  const isMeshOrPlane = Number(model.geom_type[geom]) === 7 || Number(model.geom_type[geom]) === 0;
+  const uniform = mat >= 0 && model.mat_texuniform[mat];
+  for (let i = 0; i < 3; i++) uniforms.cubeScale.value.setComponent(i, isMeshOrPlane ? uniform ? model.geom_size[geom * 3 + i] : 1 : uniform ? 1 : 1 / (model.geom_size[geom * 3 + i] || 1));
+  const material = new THREE13.ShaderMaterial({ uniforms, vertexShader, fragmentShader, toneMapped: false, side: THREE13.DoubleSide, transparent: rgba[3] < 1, depthWrite: rgba[3] >= 1 });
+  const head = m.vis.headlight;
+  material.onBeforeRender = () => {
+    let count = 0;
+    const add = (mode, pos, dir, ambient, diffuse, specular, attenuation, cutoff, exponent) => {
+      if (count >= MAX_LIGHTS) throw new Error("Classic appearance supports at most eight lights");
+      uniforms.lightMode.value[count] = mode;
+      for (const [uniform2, value] of [[uniforms.lightPos, pos], [uniforms.lightDir, dir], [uniforms.lightAmbient, ambient], [uniforms.lightDiffuse, diffuse], [uniforms.lightSpecular, specular], [uniforms.lightAttenuation, attenuation]]) uniform2.value[count].fromArray(value);
+      uniforms.lightCutoff.value[count] = cutoff >= 180 ? -2 : Math.cos(cutoff * Math.PI / 180);
+      uniforms.lightExponent.value[count] = exponent;
+      count++;
+    };
+    if (head.active) add(2, [0, 0, 0], [0, 0, -1], head.ambient, head.diffuse, head.specular, [1, 0, 0], 180, 0);
+    for (let i = 0; i < model.nlight; i++) if (m.light_active[i]) {
+      const type = m.light_type[i];
+      if (type !== 0 && type !== 1) throw new Error("Classic appearance requires spot or directional MJCF lights");
+      const slice = (a) => [a[i * 3], a[i * 3 + 1], a[i * 3 + 2]];
+      add(type, slice(d.light_xpos), slice(d.light_xdir), slice(m.light_ambient), slice(m.light_diffuse), slice(m.light_specular), slice(m.light_attenuation), m.light_cutoff[i], m.light_exponent[i]);
+    }
+    uniforms.lightCount.value = count;
+    material.uniformsNeedUpdate = true;
+  };
+  let released = false;
+  material.addEventListener("dispose", () => {
+    if (!released) {
+      retained?.release();
+      released = true;
+    }
+  });
+  return material;
+}
+var CapsuleGeometry = class extends THREE13.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 THREE13.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 THREE13.LatheGeometry(path.getPoints(capSegments), radialSegments);
     const self = this;
     self.setIndex(latheGeometry.getIndex());
     self.setAttribute("position", latheGeometry.getAttribute("position"));
@@ -1833,10 +2044,10 @@ var GeomBuilder = class {
       rgba[out + 2] = b;
       rgba[out + 3] = a;
     }
-    const texture = new THREE12.DataTexture(rgba, width, height, THREE12.RGBAFormat);
-    texture.colorSpace = THREE12.LinearSRGBColorSpace;
-    texture.wrapS = THREE12.RepeatWrapping;
-    texture.wrapT = THREE12.RepeatWrapping;
+    const texture = new THREE13.DataTexture(rgba, width, height, THREE13.RGBAFormat);
+    texture.colorSpace = THREE13.LinearSRGBColorSpace;
+    texture.wrapS = THREE13.RepeatWrapping;
+    texture.wrapT = THREE13.RepeatWrapping;
     texture.flipY = true;
     const repeatOffset = matId * 2;
     const repeatS = mjModel.mat_texrepeat?.[repeatOffset] ?? 1;
@@ -1850,15 +2061,22 @@ var GeomBuilder = class {
    * Creates a Three.js Object3D (usually a Mesh) for a specific geometry in the MuJoCo model.
    * Returns null if the geometry shouldn't be rendered (e.g., invisible collision triggers).
    */
-  create(mjModel, g) {
+  dispose() {
+    for (const texture of this.textureCache.values()) texture.dispose();
+    this.textureCache.clear();
+  }
+  create(mjModel, g, data) {
+    const classic = this.renderOptions?.appearance === "mujoco-classic";
+    if (classic && !data) throw new Error("Classic appearance requires live MuJoCo data");
+    if (classic && this.renderOptions?.meshNormalSmoothing) throw new Error("Classic appearance uses MuJoCo mesh normals; meshNormalSmoothing is not supported");
     if (mjModel.geom_group[g] === 3) return null;
     const type = mjModel.geom_type[g];
     const size = mjModel.geom_size.subarray(g * 3, g * 3 + 3);
     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 map = this.getMaterialTexture(mjModel, matId);
+    const color = new THREE13.Color(16777215);
+    const map = classic ? null : this.getMaterialTexture(mjModel, matId);
     let opacity = 1;
     if (matId >= 0) {
       const rgba = mjModel.mat_rgba.subarray(matId * 4, matId * 4 + 4);
@@ -1873,16 +2091,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 = classic ? createClassicPlaneGeometry(mjModel, g) : new THREE13.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 THREE13.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 THREE13.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 THREE13.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];
@@ -1891,26 +2109,37 @@ var GeomBuilder = class {
       const fAdr = mjModel.mesh_faceadr[mId];
       const fNum = mjModel.mesh_facenum[mId];
       const tAdr = mjModel.mesh_texcoordadr?.[mId] ?? -1;
-      if (map && tAdr >= 0 && mjModel.mesh_texcoord && mjModel.mesh_facetexcoord) {
+      if (classic || map && tAdr >= 0 && mjModel.mesh_texcoord && mjModel.mesh_facetexcoord) {
         const corners = fNum * 3;
         const positions = new Float32Array(corners * 3);
-        const uvs = new Float32Array(corners * 2);
+        const hasUV = tAdr >= 0 && mjModel.mesh_texcoord && mjModel.mesh_facetexcoord;
+        const uvs = hasUV ? new Float32Array(corners * 2) : void 0;
+        const normalModel = mjModel;
+        const normals = classic ? new Float32Array(corners * 3) : void 0;
+        if (classic && (!normalModel.mesh_normaladr || !normalModel.mesh_facenormal)) throw new Error("Classic appearance requires MuJoCo mesh face normals");
         for (let c = 0; c < corners; c++) {
           const v = vAdr + mjModel.mesh_face[fAdr * 3 + c];
           positions[c * 3] = mjModel.mesh_vert[v * 3];
           positions[c * 3 + 1] = mjModel.mesh_vert[v * 3 + 1];
           positions[c * 3 + 2] = mjModel.mesh_vert[v * 3 + 2];
-          const t = tAdr + mjModel.mesh_facetexcoord[fAdr * 3 + c];
-          uvs[c * 2] = mjModel.mesh_texcoord[t * 2];
-          uvs[c * 2 + 1] = 1 - mjModel.mesh_texcoord[t * 2 + 1];
+          if (uvs) {
+            const t = tAdr + mjModel.mesh_facetexcoord[fAdr * 3 + c];
+            uvs[c * 2] = mjModel.mesh_texcoord[t * 2];
+            uvs[c * 2 + 1] = 1 - mjModel.mesh_texcoord[t * 2 + 1];
+          }
+          if (normals) {
+            const n = normalModel.mesh_normaladr[mId] + normalModel.mesh_facenormal[fAdr * 3 + c];
+            normals.set(mjModel.mesh_normal.subarray(n * 3, n * 3 + 3), c * 3);
+          }
         }
-        geo = new THREE12.BufferGeometry();
-        geo.setAttribute("position", new THREE12.Float32BufferAttribute(positions, 3));
-        geo.setAttribute("uv", new THREE12.Float32BufferAttribute(uvs, 2));
-        geo.computeVertexNormals();
+        geo = new THREE13.BufferGeometry();
+        geo.setAttribute("position", new THREE13.Float32BufferAttribute(positions, 3));
+        if (uvs) geo.setAttribute("uv", new THREE13.Float32BufferAttribute(uvs, 2));
+        if (normals) geo.setAttribute("normal", new THREE13.Float32BufferAttribute(normals, 3));
+        else geo.computeVertexNormals();
       } else {
-        geo = new THREE12.BufferGeometry();
-        geo.setAttribute("position", new THREE12.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
+        geo = new THREE13.BufferGeometry();
+        geo.setAttribute("position", new THREE13.Float32BufferAttribute(mjModel.mesh_vert.subarray(vAdr * 3, (vAdr + vNum) * 3), 3));
         geo.setIndex(Array.from(mjModel.mesh_face.subarray(fAdr * 3, (fAdr + fNum) * 3)));
         const smoothingTolerance = this.getMeshNormalSmoothingTolerance();
         if (smoothingTolerance !== null) {
@@ -1921,12 +2150,12 @@ var GeomBuilder = class {
     }
     if (geo) {
       const isPlane = type === getVal(MG.mjGEOM_PLANE);
-      const materialMap = isPlane && map ? map.clone() : map;
+      const materialMap = !classic && isPlane && map ? map.clone() : map;
       if (isPlane && materialMap) {
         materialMap.repeat.multiplyScalar(2.5);
         materialMap.needsUpdate = true;
       }
-      const mesh = new THREE12.Mesh(geo, new THREE12.MeshStandardMaterial({
+      const mesh = new THREE13.Mesh(geo, classic ? createMujocoClassicMaterial(mjModel, data, g) : new THREE13.MeshStandardMaterial({
         color,
         map: materialMap,
         transparent: opacity < 1,
@@ -1934,6 +2163,7 @@ var GeomBuilder = class {
         roughness: 0.6,
         metalness: 0
       }));
+      if (materialMap && materialMap !== map) mesh.material.addEventListener("dispose", () => materialMap.dispose());
       mesh.castShadow = type !== getVal(MG.mjGEOM_PLANE);
       mesh.receiveShadow = true;
       mesh.position.set(pos[0], pos[1], pos[2]);
@@ -1949,9 +2179,9 @@ var GeomBuilder = class {
 };
 function getRenderOptionsKey(renderOptions) {
   const smoothing = renderOptions?.meshNormalSmoothing;
-  if (!smoothing) return "default";
-  if (smoothing === true) return "meshNormalSmoothing:true";
-  return `meshNormalSmoothing:${smoothing.tolerance ?? "default"}`;
+  if (!smoothing) return renderOptions?.appearance ?? "standard";
+  if (smoothing === true) return `${renderOptions?.appearance ?? "standard"}:meshNormalSmoothing:true`;
+  return `${renderOptions?.appearance ?? "standard"}:meshNormalSmoothing:${smoothing.tolerance ?? "default"}`;
 }
 function SceneRenderer({ renderOptions, ...props }) {
   const {
@@ -1990,22 +2220,44 @@ function SceneRenderer({ renderOptions, ...props }) {
       group.remove(group.children[0]);
     }
     const refs = [];
-    for (let i = 0; i < model.nbody; i++) {
-      const bodyGroup = new THREE12.Group();
-      bodyGroup.userData.bodyID = i;
-      const bodyName = getName(model, model.name_bodyadr[i]);
-      if (!hiddenBodiesRef.current.has(bodyName)) {
-        for (let g = 0; g < model.ngeom; g++) {
-          if (model.geom_bodyid[g] === i) {
-            const mesh = geomBuilder.create(model, g);
-            if (mesh) bodyGroup.add(mesh);
+    const dispose = () => {
+      for (const body of refs) {
+        body?.parent?.remove(body);
+        body?.traverse((object) => {
+          const mesh = object;
+          if (!mesh.isMesh) return;
+          mesh.geometry.dispose();
+          for (const material of Array.isArray(mesh.material) ? mesh.material : [mesh.material]) material.dispose();
+        });
+      }
+      geomBuilder.dispose();
+      prevModelRef.current = null;
+      prevRenderOptionsKeyRef.current = null;
+      prevHiddenVersionRef.current = null;
+      if (bodyRefs.current === refs) bodyRefs.current = [];
+    };
+    try {
+      for (let i = 0; i < model.nbody; i++) {
+        const bodyGroup = new THREE13.Group();
+        refs.push(bodyGroup);
+        bodyGroup.userData.bodyID = i;
+        const bodyName = getName(model, model.name_bodyadr[i]);
+        if (!hiddenBodiesRef.current.has(bodyName)) {
+          for (let g = 0; g < model.ngeom; g++) {
+            if (model.geom_bodyid[g] === i) {
+              const mesh = geomBuilder.create(model, g, mjDataRef.current ?? void 0);
+              if (mesh) bodyGroup.add(mesh);
+            }
           }
         }
+        group.add(bodyGroup);
       }
-      group.add(bodyGroup);
-      refs.push(bodyGroup);
+    } catch (error) {
+      dispose();
+      throw error;
     }
     bodyRefs.current = refs;
+    return dispose;
   }, [status, geomBuilder, mjModelRef, renderOptionsKey, hiddenBodiesRef, hiddenBodiesVersion]);
   const syncBodiesToData = useCallback(() => {
     const data = mjDataRef.current;
@@ -2020,9 +2272,9 @@ function SceneRenderer({ renderOptions, ...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)
+          THREE13.MathUtils.lerp(interpolation.previousXpos[i3], interpolation.currentXpos[i3], alpha),
+          THREE13.MathUtils.lerp(interpolation.previousXpos[i3 + 1], interpolation.currentXpos[i3 + 1], alpha),
+          THREE13.MathUtils.lerp(interpolation.previousXpos[i3 + 2], interpolation.currentXpos[i3 + 2], alpha)
         );
         const i4 = i * 4;
         _previousQuat.set(
@@ -2082,8 +2334,8 @@ function SceneRenderer({ renderOptions, ...props }) {
     }
   );
 }
-var _previousQuat = new THREE12.Quaternion();
-var _currentQuat = new THREE12.Quaternion();
+var _previousQuat = new THREE13.Quaternion();
+var _currentQuat = new THREE13.Quaternion();
 var CameraViewportRegistryContext = createContext(null);
 var nextViewportId = 0;
 var VIEWPORT_RENDER_PRIORITY = 1;
@@ -2304,17 +2556,17 @@ function useFrameCapture(defaultOptions = {}) {
     reset
   };
 }
-var _raycaster = new THREE12.Raycaster();
-var _ndc = new THREE12.Vector2();
+var _raycaster = new THREE13.Raycaster();
+var _ndc = new THREE13.Vector2();
 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]);
+  return value instanceof THREE13.Vector3 ? value.clone() : new THREE13.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) {
+    if (options.quaternion instanceof THREE13.Quaternion) {
       camera.quaternion.copy(options.quaternion);
     } else {
       camera.quaternion.set(
@@ -2325,15 +2577,15 @@ function applyCameraPose(camera, options, fallbackCamera) {
       );
     }
   } else if (options.lookAt) {
-    camera.lookAt(toVector3(options.lookAt, new THREE12.Vector3()));
+    camera.lookAt(toVector3(options.lookAt, new THREE13.Vector3()));
   } else {
     camera.quaternion.copy(fallbackCamera.quaternion);
   }
   camera.updateMatrixWorld();
 }
 function createProjectionCamera(fallbackCamera, options, 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) {
+  const camera = options.camera ? options.camera.clone() : fallbackCamera instanceof THREE13.PerspectiveCamera ? fallbackCamera.clone() : new THREE13.PerspectiveCamera(45, width / height, 0.01, 100);
+  if (camera instanceof THREE13.PerspectiveCamera) {
     camera.aspect = width / height;
     camera.fov = options.fov ?? camera.fov;
     camera.near = options.near ?? camera.near;
@@ -2498,8 +2750,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 THREE13.Raycaster();
+var _projNdc = new THREE13.Vector2();
 function waitForNextAnimationFrame2() {
   return new Promise((resolve) => {
     requestAnimationFrame(() => resolve());
@@ -2524,7 +2776,7 @@ function quaternionFromMujocoQuat(values, offset) {
   ];
 }
 function quaternionFromXmat(values, offset) {
-  const matrix = new THREE12.Matrix4();
+  const matrix = new THREE13.Matrix4();
   matrix.set(
     values[offset],
     values[offset + 1],
@@ -2543,7 +2795,7 @@ function quaternionFromXmat(values, offset) {
     0,
     1
   );
-  const quaternion = new THREE12.Quaternion().setFromRotationMatrix(matrix);
+  const quaternion = new THREE13.Quaternion().setFromRotationMatrix(matrix);
   return [quaternion.x, quaternion.y, quaternion.z, quaternion.w];
 }
 function omitResolvedCameraSelectors(options) {
@@ -2551,14 +2803,14 @@ function omitResolvedCameraSelectors(options) {
   return rest;
 }
 function vector3FromCaptureValue(value) {
-  return value instanceof THREE12.Vector3 ? value.clone() : new THREE12.Vector3(value[0], value[1], value[2]);
+  return value instanceof THREE13.Vector3 ? value.clone() : new THREE13.Vector3(value[0], value[1], value[2]);
 }
 function quaternionFromCaptureValue(value) {
-  return value instanceof THREE12.Quaternion ? value.clone() : new THREE12.Quaternion(value[0], value[1], value[2], value[3]);
+  return value instanceof THREE13.Quaternion ? value.clone() : new THREE13.Quaternion(value[0], value[1], value[2], value[3]);
 }
 function applyMountedCameraPoseOffsets(options, position, quaternion) {
-  const resolvedPosition = new THREE12.Vector3(position[0], position[1], position[2]);
-  const resolvedQuaternion = new THREE12.Quaternion(
+  const resolvedPosition = new THREE13.Vector3(position[0], position[1], position[2]);
+  const resolvedQuaternion = new THREE13.Quaternion(
     quaternion[0],
     quaternion[1],
     quaternion[2],
@@ -2643,7 +2895,7 @@ function mujocoCameraProjectionMatrix(model, cameraId, width, height, near, far)
   const cy = height * (0.5 + principalY / sensorHeight);
   const znear = near ?? 0.01;
   const zfar = far ?? 100;
-  return new THREE12.Matrix4().set(
+  return new THREE13.Matrix4().set(
     2 * fx / width,
     0,
     1 - 2 * cx / width,
@@ -3517,7 +3769,7 @@ function MujocoSimProvider({
       const geomId = _rayGeomId[0];
       const bodyId = geomId >= 0 ? model.geom_bodyid[geomId] : -1;
       return {
-        point: new THREE12.Vector3(
+        point: new THREE13.Vector3(
           origin.x + dir.x * dist,
           origin.y + dir.y * dist,
           origin.z + dir.z * dist
@@ -4442,7 +4694,7 @@ var GenericIK = class {
    */
   solveJoints(model, data, siteId, jointIds, targetPos, targetQuat, currentQpos = data.qpos, opts) {
     const o = resolveOptions(opts);
-    const targetRotation = new THREE12.Quaternion(targetQuat.x, targetQuat.y, targetQuat.z, targetQuat.w);
+    const targetRotation = new THREE13.Quaternion(targetQuat.x, targetQuat.y, targetQuat.z, targetQuat.w);
     if (!Number.isInteger(siteId) || siteId < 0 || siteId >= model.nsite)
       throw new Error("Invalid IK site ID");
     if (currentQpos.length !== model.nq || !Array.from(currentQpos).every(Number.isFinite))
@@ -4494,7 +4746,7 @@ var GenericIK = class {
               q[adr] = Math.max(Math.min(...limits), Math.min(Math.max(...limits), q[adr]));
           } else {
             const offset = adr + (type === 0 ? 3 : 0);
-            const quat = new THREE12.Quaternion(
+            const quat = new THREE13.Quaternion(
               q[offset + 1],
               q[offset + 2],
               q[offset + 3],
@@ -4511,7 +4763,7 @@ var GenericIK = class {
               const limit = model.jnt_range[2 * id + 1];
               if (angle > limit)
                 quat.identity().slerp(
-                  new THREE12.Quaternion(
+                  new THREE13.Quaternion(
                     q[offset + 1],
                     q[offset + 2],
                     q[offset + 3],
@@ -4611,7 +4863,7 @@ function orientationError(R_cur, R_tgt) {
     return [0, 0, 0];
   }
   if (angle > Math.PI - 1e-4) {
-    const matrix = new THREE12.Matrix4().set(
+    const matrix = new THREE13.Matrix4().set(
       Re[0],
       Re[1],
       Re[2],
@@ -4629,7 +4881,7 @@ function orientationError(R_cur, R_tgt) {
       0,
       1
     );
-    const q = new THREE12.Quaternion().setFromRotationMatrix(matrix).normalize();
+    const q = new THREE13.Quaternion().setFromRotationMatrix(matrix).normalize();
     const scale = angle / Math.hypot(q.x, q.y, q.z) * (q.w < 0 ? -1 : 1);
     return [q.x * scale, q.y * scale, q.z * scale];
   }
@@ -4683,12 +4935,12 @@ function solve6x6(A, b, x) {
 }
 
 // src/hooks/useIkController.ts
-var _syncMat4 = new THREE12.Matrix4();
+var _syncMat4 = new THREE13.Matrix4();
 function toIkVector3(value) {
-  return "x" in value ? new THREE12.Vector3(value.x, value.y, value.z) : new THREE12.Vector3(value[0], value[1], value[2]);
+  return "x" in value ? new THREE13.Vector3(value.x, value.y, value.z) : new THREE13.Vector3(value[0], value[1], value[2]);
 }
 function toIkQuaternion(value) {
-  return "x" in value ? new THREE12.Quaternion(value.x, value.y, value.z, value.w) : new THREE12.Quaternion(value[0], value[1], value[2], value[3]);
+  return "x" in value ? new THREE13.Quaternion(value.x, value.y, value.z, value.w) : new THREE13.Quaternion(value[0], value[1], value[2], value[3]);
 }
 function syncGizmoToSite(data, siteId, target) {
   if (siteId === -1) return;
@@ -4721,7 +4973,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 THREE13.Group());
     const siteIdRef = useRef(-1);
     const controlGroupRef = useRef(null);
     const genericIkRef = useRef(null);
@@ -4738,10 +4990,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 THREE13.Vector3(),
+      endPos: new THREE13.Vector3(),
+      startRot: new THREE13.Quaternion(),
+      endRot: new THREE13.Quaternion(),
       startTime: 0,
       duration: 1e3
     });
@@ -4902,8 +5154,8 @@ var useIkController = createControllerHook(
         const target = ikTargetRef.current;
         if (!target) return;
         const targetPos = toIkVector3(pos);
-        const targetRot = new THREE12.Quaternion().setFromEuler(
-          new THREE12.Euler(Math.PI, 0, 0)
+        const targetRot = new THREE13.Quaternion().setFromEuler(
+          new THREE13.Euler(Math.PI, 0, 0)
         );
         if (duration > 0) {
           const ga = gizmoAnimRef.current;
@@ -4928,7 +5180,7 @@ var useIkController = createControllerHook(
         if (!ikCalculatingRef.current || !target) return null;
         return {
           pos: target.position.clone(),
-          rot: new THREE12.Euler().setFromQuaternion(target.quaternion)
+          rot: new THREE13.Euler().setFromQuaternion(target.quaternion)
         };
       },
       []
@@ -5024,10 +5276,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 THREE13.Matrix4();
+var _pos = new THREE13.Vector3();
+var _quat = new THREE13.Quaternion();
+var _scale = new THREE13.Vector3(1, 1, 1);
 function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const { ikTargetRef, siteIdRef, ikEnabledRef, setIkEnabled } = controller;
@@ -5126,7 +5378,7 @@ function IkGizmo({ controller, siteName, scale = 0.18, onDrag }) {
     }
   );
 }
-var _dummy = new THREE12.Object3D();
+var _dummy = new THREE13.Object3D();
 function ContactMarkers({
   maxContacts = 100,
   radius = 8e-3,
@@ -5180,11 +5432,11 @@ function ContactMarkers({
 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 _raycaster2 = new THREE12.Raycaster();
-var _mouse = new THREE12.Vector2();
+var _bodyPos = new THREE13.Vector3();
+var _bodyQuat = new THREE13.Quaternion();
+var _worldHit = new THREE13.Vector3();
+var _raycaster2 = new THREE13.Raycaster();
+var _mouse = new THREE13.Vector2();
 function DragInteraction({
   stiffness = 250,
   showArrow = true,
@@ -5195,16 +5447,16 @@ 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 THREE13.Vector3());
+  const grabWorldRef = useRef(new THREE13.Vector3());
+  const mouseWorldRef = useRef(new THREE13.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 THREE13.ArrowHelper(
+      new THREE13.Vector3(0, 1, 0),
+      new THREE13.Vector3(),
       0.1,
       16729156
     );
@@ -5387,7 +5639,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 THREE13.Color(dr, dg, db);
       const px = lightPos[3 * i];
       const py = lightPos[3 * i + 1];
       const pz = lightPos[3 * i + 2];
@@ -5395,7 +5647,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 THREE13.DirectionalLight(color, finalIntensity);
         light.position.set(px, py, pz);
         light.target.position.set(px + dx, py + dy, pz + dz);
         light.castShadow = castShadow;
@@ -5418,7 +5670,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 THREE13.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;
@@ -5767,31 +6019,31 @@ var JOINT_COLORS = {
   3: 16776960
   // hinge - yellow
 };
-var _v3a = new THREE12.Vector3();
-new THREE12.Vector3();
-var _quat2 = new THREE12.Quaternion();
-var _cameraMatrix = new THREE12.Matrix4();
-var _contactPos = new THREE12.Vector3();
-var _contactNormal = new THREE12.Vector3();
+var _v3a = new THREE13.Vector3();
+new THREE13.Vector3();
+var _quat2 = new THREE13.Quaternion();
+var _cameraMatrix = new THREE13.Matrix4();
+var _contactPos = new THREE13.Vector3();
+var _contactNormal = new THREE13.Vector3();
 var MAX_CONTACT_ARROWS = 50;
 var CAMERA_DEBUG_LENGTH = 0.12;
 var CAMERA_DEBUG_FRUSTUM_DEPTH = 0.08;
 function toVector32(value, fallback) {
   if (!value) return fallback.clone();
-  return value instanceof THREE12.Vector3 ? value.clone() : new THREE12.Vector3(value[0], value[1], value[2]);
+  return value instanceof THREE13.Vector3 ? value.clone() : new THREE13.Vector3(value[0], value[1], value[2]);
 }
 function createCameraLabel(text, color) {
   const canvas = document.createElement("canvas");
   canvas.width = 256;
   canvas.height = 64;
   const ctx = canvas.getContext("2d");
-  ctx.fillStyle = new THREE12.Color(color).getStyle();
+  ctx.fillStyle = new THREE13.Color(color).getStyle();
   ctx.font = "bold 32px monospace";
   ctx.textAlign = "center";
   ctx.fillText(text, 128, 42);
-  const texture = new THREE12.CanvasTexture(canvas);
-  const sprite = new THREE12.Sprite(
-    new THREE12.SpriteMaterial({
+  const texture = new THREE13.CanvasTexture(canvas);
+  const sprite = new THREE13.Sprite(
+    new THREE13.SpriteMaterial({
       map: texture,
       depthTest: false,
       transparent: true
@@ -5806,12 +6058,12 @@ function createVirtualCameraDebugObject(camera, index) {
   const color = camera.color ?? "#ff3d71";
   const aimColor = camera.aimColor ?? "#38bdf8";
   const markerScale = camera.markerScale ?? 1;
-  const cameraPosition = toVector32(camera.position, new THREE12.Vector3());
-  const configuredUp = toVector32(camera.up, new THREE12.Vector3(0, 0, 1)).normalize();
-  const cameraQuaternion = new THREE12.Quaternion();
-  const forward = new THREE12.Vector3();
+  const cameraPosition = toVector32(camera.position, new THREE13.Vector3());
+  const configuredUp = toVector32(camera.up, new THREE13.Vector3(0, 0, 1)).normalize();
+  const cameraQuaternion = new THREE13.Quaternion();
+  const forward = new THREE13.Vector3();
   if (camera.quaternion) {
-    if (camera.quaternion instanceof THREE12.Quaternion) {
+    if (camera.quaternion instanceof THREE13.Quaternion) {
       cameraQuaternion.copy(camera.quaternion);
     } else {
       cameraQuaternion.set(
@@ -5825,13 +6077,13 @@ function createVirtualCameraDebugObject(camera, index) {
   } else {
     const target2 = toVector32(
       camera.lookAt,
-      cameraPosition.clone().add(new THREE12.Vector3(0, 0, -1))
+      cameraPosition.clone().add(new THREE13.Vector3(0, 0, -1))
     );
     forward.copy(target2).sub(cameraPosition);
     if (forward.lengthSq() < 1e-8) forward.set(0, 0, -1);
     forward.normalize();
     cameraQuaternion.setFromRotationMatrix(
-      new THREE12.Matrix4().lookAt(cameraPosition, target2, configuredUp)
+      new THREE13.Matrix4().lookAt(cameraPosition, target2, configuredUp)
     );
   }
   const target = camera.lookAt ? toVector32(camera.lookAt, cameraPosition.clone().add(forward)) : cameraPosition.clone().addScaledVector(forward, 0.4);
@@ -5843,7 +6095,7 @@ function createVirtualCameraDebugObject(camera, index) {
   if (right.lengthSq() < 1e-8) right.set(1, 0, 0);
   right.normalize();
   const orthogonalUp = right.clone().cross(forward).normalize();
-  const frustumHeight = 2 * Math.tan(THREE12.MathUtils.degToRad(fov) / 2) * depth;
+  const frustumHeight = 2 * Math.tan(THREE13.MathUtils.degToRad(fov) / 2) * depth;
   const frustumWidth = frustumHeight * aspect;
   const center = cameraPosition.clone().addScaledVector(forward, depth);
   const halfRight = right.clone().multiplyScalar(frustumWidth / 2);
@@ -5870,13 +6122,13 @@ function createVirtualCameraDebugObject(camera, index) {
     bottomLeft,
     topLeft
   ];
-  const group = new THREE12.Group();
+  const group = new THREE13.Group();
   group.name = camera.name ?? `virtual-camera-${index}`;
   group.renderOrder = 999;
   group.frustumCulled = false;
-  const frustum = new THREE12.LineSegments(
-    new THREE12.BufferGeometry().setFromPoints(frustumPoints),
-    new THREE12.LineBasicMaterial({
+  const frustum = new THREE13.LineSegments(
+    new THREE13.BufferGeometry().setFromPoints(frustumPoints),
+    new THREE13.LineBasicMaterial({
       color,
       transparent: true,
       opacity: 0.9,
@@ -5886,9 +6138,9 @@ function createVirtualCameraDebugObject(camera, index) {
   frustum.renderOrder = 999;
   frustum.frustumCulled = false;
   group.add(frustum);
-  const aim = new THREE12.LineSegments(
-    new THREE12.BufferGeometry().setFromPoints([cameraPosition, target]),
-    new THREE12.LineBasicMaterial({
+  const aim = new THREE13.LineSegments(
+    new THREE13.BufferGeometry().setFromPoints([cameraPosition, target]),
+    new THREE13.LineBasicMaterial({
       color: aimColor,
       transparent: true,
       opacity: 0.95,
@@ -5898,26 +6150,26 @@ function createVirtualCameraDebugObject(camera, index) {
   aim.renderOrder = 999;
   aim.frustumCulled = false;
   group.add(aim);
-  const markerGroup = new THREE12.Group();
+  const markerGroup = new THREE13.Group();
   markerGroup.position.copy(cameraPosition);
   markerGroup.quaternion.copy(cameraQuaternion);
   markerGroup.renderOrder = 999;
   markerGroup.frustumCulled = false;
-  markerGroup.add(new THREE12.Mesh(
-    new THREE12.BoxGeometry(0.045 * markerScale, 0.028 * markerScale, 0.022 * markerScale),
-    new THREE12.MeshBasicMaterial({ color, depthTest: false })
+  markerGroup.add(new THREE13.Mesh(
+    new THREE13.BoxGeometry(0.045 * markerScale, 0.028 * markerScale, 0.022 * markerScale),
+    new THREE13.MeshBasicMaterial({ color, depthTest: false })
   ));
-  const lens = new THREE12.Mesh(
-    new THREE12.BoxGeometry(0.025 * markerScale, 0.018 * markerScale, 0.014 * markerScale),
-    new THREE12.MeshBasicMaterial({ color: aimColor, depthTest: false })
+  const lens = new THREE13.Mesh(
+    new THREE13.BoxGeometry(0.025 * markerScale, 0.018 * markerScale, 0.014 * markerScale),
+    new THREE13.MeshBasicMaterial({ color: aimColor, depthTest: false })
   );
   lens.position.set(0, 0, -0.021 * markerScale);
   markerGroup.add(lens);
   if (camera.name) markerGroup.add(createCameraLabel(camera.name, color));
   group.add(markerGroup);
-  const targetMarker = new THREE12.Mesh(
-    new THREE12.SphereGeometry(0.018 * markerScale, 16, 10),
-    new THREE12.MeshBasicMaterial({ color: aimColor, depthTest: false })
+  const targetMarker = new THREE13.Mesh(
+    new THREE13.SphereGeometry(0.018 * markerScale, 16, 10),
+    new THREE13.MeshBasicMaterial({ color: aimColor, depthTest: false })
   );
   targetMarker.position.copy(target);
   targetMarker.renderOrder = 999;
@@ -5956,21 +6208,21 @@ function Debug({
         let geometry = null;
         switch (type) {
           case 2:
-            geometry = new THREE12.SphereGeometry(s[3 * i], 12, 8);
+            geometry = new THREE13.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 THREE13.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 THREE13.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 THREE13.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 THREE13.MeshBasicMaterial({ color: 65280, wireframe: true, transparent: true, opacity: 0.3 });
+          const mesh = new THREE13.Mesh(geometry, mat);
           mesh.userData.geomId = i;
           mesh.userData.bodyId = model.geom_bodyid[i];
           geoms.push(mesh);
@@ -5993,9 +6245,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 THREE13.OctahedronGeometry(radius);
+        const mat = new THREE13.MeshBasicMaterial({ color: 16711935, depthTest: false });
+        const mesh = new THREE13.Mesh(geometry, mat);
         mesh.renderOrder = 999;
         mesh.frustumCulled = false;
         mesh.userData.siteId = i;
@@ -6007,9 +6259,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 THREE13.CanvasTexture(canvas);
+        const spriteMat = new THREE13.SpriteMaterial({ map: tex, depthTest: false, transparent: true });
+        const sprite = new THREE13.Sprite(spriteMat);
         const labelScale = radius * 15;
         sprite.scale.set(labelScale, labelScale * 0.25, 1);
         sprite.position.y = radius * 2;
@@ -6032,9 +6284,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 THREE13.ArrowHelper(
+          new THREE13.Vector3(0, 0, 1),
+          new THREE13.Vector3(),
           arrowLen,
           color,
           arrowLen * 0.25,
@@ -6042,7 +6294,7 @@ function Debug({
         );
         arrow.renderOrder = 999;
         arrow.frustumCulled = false;
-        arrow.line.material = new THREE12.LineBasicMaterial({ color, depthTest: false });
+        arrow.line.material = new THREE13.LineBasicMaterial({ color, depthTest: false });
         arrow.cone.material.depthTest = false;
         arrow.line.renderOrder = 999;
         arrow.line.frustumCulled = false;
@@ -6057,20 +6309,20 @@ function Debug({
     }
     if (showCameras && model.ncam && model.name_camadr) {
       for (let i = 0; i < model.ncam; i++) {
-        const group = new THREE12.Group();
+        const group = new THREE13.Group();
         group.userData.cameraId = i;
         group.renderOrder = 999;
         group.frustumCulled = false;
-        const marker = new THREE12.Mesh(
-          new THREE12.BoxGeometry(0.014, 9e-3, 6e-3),
-          new THREE12.MeshBasicMaterial({ color: 3718648, depthTest: false })
+        const marker = new THREE13.Mesh(
+          new THREE13.BoxGeometry(0.014, 9e-3, 6e-3),
+          new THREE13.MeshBasicMaterial({ color: 3718648, depthTest: false })
         );
         marker.renderOrder = 999;
         marker.frustumCulled = false;
         group.add(marker);
-        const forward = new THREE12.ArrowHelper(
-          new THREE12.Vector3(0, 0, -1),
-          new THREE12.Vector3(),
+        const forward = new THREE13.ArrowHelper(
+          new THREE13.Vector3(0, 0, -1),
+          new THREE13.Vector3(),
           CAMERA_DEBUG_LENGTH,
           3718648,
           CAMERA_DEBUG_LENGTH * 0.24,
@@ -6078,20 +6330,20 @@ function Debug({
         );
         forward.renderOrder = 999;
         forward.frustumCulled = false;
-        forward.line.material = new THREE12.LineBasicMaterial({
+        forward.line.material = new THREE13.LineBasicMaterial({
           color: 3718648,
           depthTest: false
         });
         forward.cone.material.depthTest = false;
         group.add(forward);
-        const frustumGeometry = new THREE12.BufferGeometry();
+        const frustumGeometry = new THREE13.BufferGeometry();
         frustumGeometry.setAttribute(
           "position",
-          new THREE12.Float32BufferAttribute(new Float32Array(8 * 2 * 3), 3)
+          new THREE13.Float32BufferAttribute(new Float32Array(8 * 2 * 3), 3)
         );
-        const frustum = new THREE12.LineSegments(
+        const frustum = new THREE13.LineSegments(
           frustumGeometry,
-          new THREE12.LineBasicMaterial({
+          new THREE13.LineBasicMaterial({
             color: 3718648,
             transparent: true,
             opacity: 0.8,
@@ -6110,9 +6362,9 @@ function Debug({
         ctx.font = "bold 32px monospace";
         ctx.textAlign = "center";
         ctx.fillText(getName(model, model.name_camadr[i]), 128, 42);
-        const texture = new THREE12.CanvasTexture(canvas);
-        const sprite = new THREE12.Sprite(
-          new THREE12.SpriteMaterial({
+        const texture = new THREE13.CanvasTexture(canvas);
+        const sprite = new THREE13.Sprite(
+          new THREE13.SpriteMaterial({
             map: texture,
             depthTest: false,
             transparent: true
@@ -6131,9 +6383,9 @@ function Debug({
     }
     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 THREE13.SphereGeometry(5e-3, 6, 6);
+        const mat = new THREE13.MeshBasicMaterial({ color: 16711680 });
+        const mesh = new THREE13.Mesh(geometry, mat);
         mesh.userData.bodyId = i;
         comMarkers.push(mesh);
       }
@@ -6243,7 +6495,7 @@ function Debug({
         );
         group.quaternion.setFromRotationMatrix(_cameraMatrix);
         const fovy = model.cam_fovy?.[cameraId] ?? 45;
-        const halfHeight = Math.tan(THREE12.MathUtils.degToRad(fovy) / 2) * CAMERA_DEBUG_FRUSTUM_DEPTH;
+        const halfHeight = Math.tan(THREE13.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;
@@ -6288,9 +6540,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 THREE13.ArrowHelper(
+        new THREE13.Vector3(0, 1, 0),
+        new THREE13.Vector3(),
         0.1,
         16729156,
         0.03,
@@ -6355,9 +6607,9 @@ function Debug({
     }
   );
 }
-var DEFAULT_TENDON_COLOR = new THREE12.Color(0.3, 0.3, 0.8);
+var DEFAULT_TENDON_COLOR = new THREE13.Color(0.3, 0.3, 0.8);
 var DEFAULT_TENDON_WIDTH = 2e-3;
-new THREE12.Vector3();
+new THREE13.Vector3();
 function TendonRenderer(props) {
   const { mjModelRef, mjDataRef, status } = useMujocoContext();
   const groupRef = useRef(null);
@@ -6371,7 +6623,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 THREE13.MeshStandardMaterial({
       color: DEFAULT_TENDON_COLOR,
       roughness: 0.6,
       metalness: 0.1
@@ -6386,11 +6638,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 THREE13.Vector3());
+      const curve = new THREE13.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 THREE13.TubeGeometry(curve, segments, DEFAULT_TENDON_WIDTH, 6, false);
+      const mesh = new THREE13.Mesh(geometry, material);
       mesh.frustumCulled = false;
       group.add(mesh);
       meshes.push(mesh);
@@ -6445,11 +6697,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 THREE13.Vector3());
         }
       }
       mesh.geometry.dispose();
-      mesh.geometry = new THREE12.TubeGeometry(
+      mesh.geometry = new THREE13.TubeGeometry(
         curve,
         Math.max(validCount * 2, 4),
         DEFAULT_TENDON_WIDTH,
@@ -6496,14 +6748,14 @@ 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 THREE13.BufferGeometry();
       const positions = new Float32Array(vertNum * 3);
-      geometry.setAttribute("position", new THREE12.BufferAttribute(positions, 3));
+      geometry.setAttribute("position", new THREE13.BufferAttribute(positions, 3));
       const topology = getFlexTopology(model, f);
       if (topology.indices.length) geometry.setIndex(topology.indices);
-      let color = new THREE12.Color(0.5, 0.5, 0.5);
+      let color = new THREE13.Color(0.5, 0.5, 0.5);
       if (model.flex_rgba) {
-        color = new THREE12.Color(
+        color = new THREE13.Color(
           model.flex_rgba[4 * f],
           model.flex_rgba[4 * f + 1],
           model.flex_rgba[4 * f + 2]
@@ -6511,7 +6763,7 @@ function FlexRenderer(props) {
       }
       const opacity = model.flex_rgba[4 * f + 3];
       const materialOptions = { color, opacity, transparent: opacity < 1 };
-      const mesh = topology.kind === "mesh" ? new THREE12.Mesh(geometry, new THREE12.MeshStandardMaterial({ ...materialOptions, roughness: 0.7, side: THREE12.DoubleSide })) : topology.kind === "lines" ? new THREE12.LineSegments(geometry, new THREE12.LineBasicMaterial(materialOptions)) : new THREE12.Points(geometry, new THREE12.PointsMaterial({ ...materialOptions, size: 0.01 }));
+      const mesh = topology.kind === "mesh" ? new THREE13.Mesh(geometry, new THREE13.MeshStandardMaterial({ ...materialOptions, roughness: 0.7, side: THREE13.DoubleSide })) : topology.kind === "lines" ? new THREE13.LineSegments(geometry, new THREE13.LineBasicMaterial(materialOptions)) : new THREE13.Points(geometry, new THREE13.PointsMaterial({ ...materialOptions, size: 0.01 }));
       mesh.frustumCulled = false;
       mesh.userData.flexId = f;
       mesh.userData.vertAdr = vertAdr;
@@ -6541,14 +6793,14 @@ function FlexRenderer(props) {
         posAttr.setXYZ(v, data.flexvert_xpos[srcIdx], data.flexvert_xpos[srcIdx + 1], data.flexvert_xpos[srcIdx + 2]);
       }
       posAttr.needsUpdate = true;
-      if (mesh instanceof THREE12.Mesh) mesh.geometry.computeVertexNormals();
+      if (mesh instanceof THREE13.Mesh) mesh.geometry.computeVertexNormals();
     }
   });
   if (status !== "ready") return null;
   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 THREE13.Matrix4();
 function getGeomInfo(model, geomId) {
   const size = model.geom_size.subarray(geomId * 3, geomId * 3 + 3);
   const type = model.geom_type[geomId];
@@ -6570,10 +6822,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 THREE13.Mesh) return object;
   let mesh = null;
   object.traverse((child) => {
-    if (!mesh && child instanceof THREE12.Mesh) mesh = child;
+    if (!mesh && child instanceof THREE13.Mesh) mesh = child;
   });
   return mesh;
 }
@@ -6994,12 +7246,12 @@ function useActuators() {
     return actuators;
   }, [status, mjModelRef]);
 }
-var _mat42 = new THREE12.Matrix4();
+var _mat42 = new THREE13.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 THREE13.Vector3());
+  const quaternionRef = useRef(new THREE13.Quaternion());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") {
@@ -7192,10 +7444,10 @@ function useJointState(name, options = {}) {
 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 THREE13.Vector3());
+  const quaternion = useRef(new THREE13.Quaternion());
+  const linearVelocity = useRef(new THREE13.Vector3());
+  const angularVelocity = useRef(new THREE13.Vector3());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") return;
@@ -7221,7 +7473,7 @@ function useBodyState(name) {
   });
   return { position, quaternion, linearVelocity, angularVelocity };
 }
-var _matrix2 = new THREE12.Matrix4();
+var _matrix2 = new THREE13.Matrix4();
 function quaternionFromMatrixArray(target, values, offset) {
   _matrix2.set(
     values[offset],
@@ -7255,8 +7507,8 @@ function useNamedPose(kind, name) {
   const { mjModelRef, status } = useMujocoContext();
   const idRef = useRef(-1);
   const foundRef = useRef(false);
-  const positionRef = useRef(new THREE12.Vector3());
-  const quaternionRef = useRef(new THREE12.Quaternion());
+  const positionRef = useRef(new THREE13.Vector3());
+  const quaternionRef = useRef(new THREE13.Quaternion());
   useEffect(() => {
     const model = mjModelRef.current;
     if (!model || status !== "ready") {
@@ -7750,9 +8002,9 @@ function useKeyboardTeleop(config) {
 }
 var DEFAULT_TRANSLATE_SPEED = 0.25;
 var DEFAULT_ROTATE_SPEED = 1;
-var _translation = new THREE12.Vector3();
-var _axis = new THREE12.Vector3();
-var _quat3 = new THREE12.Quaternion();
+var _translation = new THREE13.Vector3();
+var _axis = new THREE13.Vector3();
+var _quat3 = new THREE13.Quaternion();
 function actionSign(action) {
   return action.endsWith("+") ? 1 : -1;
 }
@@ -9127,7 +9379,7 @@ function useSelectionHighlight(bodyId, options = {}) {
       }
     }
     prevRef.current = [];
-    const highlightColor = new THREE12.Color(color);
+    const highlightColor = new THREE13.Color(color);
     for (const mesh of meshes) {
       const mat = mesh.material;
       if (mat.emissive) {
@@ -9154,15 +9406,15 @@ function useSelectionHighlight(bodyId, options = {}) {
 }
 function useCameraAnimation() {
   const { camera } = useThree();
-  const orbitTargetRef = useRef(new THREE12.Vector3(0, 0, 0));
+  const orbitTargetRef = useRef(new THREE13.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 THREE13.Vector3(),
+    endPos: new THREE13.Vector3(),
+    startRot: new THREE13.Quaternion(),
+    endRot: new THREE13.Quaternion(),
+    startTarget: new THREE13.Vector3(),
+    endTarget: new THREE13.Vector3(),
     startTime: 0,
     duration: 0,
     resolve: null
@@ -9236,6 +9488,7 @@ function useCameraAnimation() {
  *
  * Helpers for turning Three/MuJoCo camera captures into policy image payloads.
  */
+/** @license SPDX-License-Identifier: Apache-2.0 */
 /**
  * @license
  * SPDX-License-Identifier: Apache-2.0