abstract-3d 0.6.1 → 0.6.2

package/src/renderers/dxf/dxf-geometries/dxf-box.ts

@@ -2,7 +2,7 @@ import { Box, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3Scale,
 import { color } from "../color.js";
 import { dxf3DFACE } from "../dxf-encoding.js";
 
-export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   const pos = vec3TransRot(b.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, b.rot ?? vec3Zero);
   const half = vec3Scale(b.size, 0.5);
@@ -18,11 +18,11 @@ export function dxfBox(b: Box, m: Material, parentPos: Vec3, parentRot: Vec3): s
   const v8 = vec3tr3(-half.x, half.y, -half.z);
   const mat = color(m.normal);
   return (
-    dxf3DFACE(v1, v2, v3, v4, mat) + // front
-    dxf3DFACE(v5, v6, v7, v8, mat) + // Back
-    dxf3DFACE(v5, v1, v4, v8, mat) + // Left
-    dxf3DFACE(v6, v2, v3, v7, mat) + // Right
-    dxf3DFACE(v8, v7, v3, v4, mat) + // Top
-    dxf3DFACE(v5, v6, v2, v1, mat) // Bottom
+    dxf3DFACE(v1, v2, v3, v4, mat, handleRef) + // front
+    dxf3DFACE(v5, v6, v7, v8, mat, handleRef) + // Back
+    dxf3DFACE(v5, v1, v4, v8, mat, handleRef) + // Left
+    dxf3DFACE(v6, v2, v3, v7, mat, handleRef) + // Right
+    dxf3DFACE(v8, v7, v3, v4, mat, handleRef) + // Top
+    dxf3DFACE(v5, v6, v2, v1, mat, handleRef) // Bottom
   );
 }

package/src/renderers/dxf/dxf-geometries/dxf-cone.ts

@@ -2,7 +2,7 @@ import { Cone, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3 } fr
 import { color } from "../color.js";
 import { dxf3DFACE } from "../dxf-encoding.js";
 
-export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   let dxfString = "";
   const pos = vec3TransRot(c.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
@@ -22,7 +22,7 @@ export function dxfCone(c: Cone, m: Material, sides: number, parentPos: Vec3, pa
 
     if (i !== 0) {
       const prevBot = botVec3Array[i - 1]!;
-      dxfString += dxf3DFACE(botPos, prevBot, currBot, currBot, mat) + dxf3DFACE(currBot, prevBot, topPos, topPos, mat);
+      dxfString += dxf3DFACE(botPos, prevBot, currBot, currBot, mat, handleRef) + dxf3DFACE(currBot, prevBot, topPos, topPos, mat, handleRef);
     }
     currentAngle += angleStep;
   }

package/src/renderers/dxf/dxf-geometries/dxf-cylinder.ts

@@ -2,7 +2,7 @@ import { Cylinder, Material, Vec3, vec3TransRot, vec3RotCombine, vec3Zero, vec3
 import { color } from "../color.js";
 import { dxf3DFACE } from "../dxf-encoding.js";
 
-export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   let dxfString = "";
   const pos = vec3TransRot(c.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, c.rot ?? vec3Zero);
@@ -30,9 +30,9 @@ export function dxfCylinder(c: Cylinder, m: Material, sides: number, parentPos:
       const prevTop = topVec3Array[i - 1]!;
       if (!c.open) {
         dxfString +=
-          dxf3DFACE(botPos, prevBot, currBot, currBot, mat) + dxf3DFACE(topPos, prevTop, currTop, currTop, mat);
+          dxf3DFACE(botPos, prevBot, currBot, currBot, mat, handleRef) + dxf3DFACE(topPos, prevTop, currTop, currTop, mat, handleRef);
       }
-      dxfString += dxf3DFACE(currBot, prevBot, prevTop, currTop, mat);
+      dxfString += dxf3DFACE(currBot, prevBot, prevTop, currTop, mat, handleRef);
     }
     currentAngle += angleStep;
   }

package/src/renderers/dxf/dxf-geometries/dxf-plane.ts

@@ -11,7 +11,7 @@ import {
 import { color } from "../color.js";
 import { dxf3DFACE } from "../dxf-encoding.js";
 
-export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   const half = vec2Scale(p.size, 0.5);
   const pos = vec3TransRot(p.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
@@ -21,6 +21,7 @@ export function dxfPlane(p: Plane, m: Material, parentPos: Vec3, parentRot: Vec3
     vec3tr(half.x, -half.y),
     vec3tr(half.x, half.y),
     vec3tr(-half.x, half.y),
-    color(m.normal)
+    color(m.normal), 
+    handleRef
   );
 }

package/src/renderers/dxf/dxf-geometries/dxf-polygon.ts

@@ -4,7 +4,7 @@ import { dxf3DFACE } from "../dxf-encoding.js";
 
 const chunkSize = 4;
 
-export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   let polygonString = "";
   const pos = vec3TransRot(p.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, p.rot ?? vec3Zero);
@@ -12,7 +12,7 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
   let i = 0;
   if (points.length >= chunkSize) {
     for (i; i < points.length; i += chunkSize) {
-      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, color(m.normal));
+      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, color(m.normal), handleRef);
     }
   }
 
@@ -20,13 +20,13 @@ export function dxfPolygon(p: Polygon, m: Material, parentPos: Vec3, parentRot:
     const lastArrayLength = points.length - i;
     switch (lastArrayLength) {
       case 1:
-        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, color(m.normal));
+        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, color(m.normal), handleRef);
         break;
       case 2:
-        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, color(m.normal));
+        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, color(m.normal), handleRef);
         break;
       case 3:
-        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, color(m.normal));
+        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, color(m.normal), handleRef);
         break;
       default:
         break;

package/src/renderers/dxf/dxf-geometries/dxf-shape.ts

@@ -4,7 +4,7 @@ import { dxf3DFACE } from "../dxf-encoding.js";
 
 const chunkSize = 4;
 
-export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Vec3): string {
+export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   let polygonString = "";
   const pos = vec3TransRot(s.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, s.rot ?? vec3Zero);
@@ -13,7 +13,7 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
   let i = 0;
   if (points.length >= chunkSize) {
     for (i; i < points.length; i += chunkSize) {
-      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, mat);
+      polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 3]!, mat, handleRef);
     }
   }
 
@@ -21,13 +21,13 @@ export function dxfPolygon(s: Shape, m: Material, parentPos: Vec3, parentRot: Ve
     const lastArrayLength = points.length - i;
     switch (lastArrayLength) {
       case 1:
-        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, mat);
+        polygonString += dxf3DFACE(points[i - 2]!, points[i - 1]!, points[i]!, points[i]!, mat, handleRef);
         break;
       case 2:
-        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, mat);
+        polygonString += dxf3DFACE(points[i - 1]!, points[i]!, points[i + 1]!, points[i + 1]!, mat, handleRef);
         break;
       case 3:
-        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, mat);
+        polygonString += dxf3DFACE(points[i]!, points[i + 1]!, points[i + 2]!, points[i + 2]!, mat, handleRef);
         break;
       default:
         break;

package/src/renderers/dxf/dxf.ts

@@ -11,28 +11,36 @@ export const toDxf = (scene: Scene, view: View): string => {
   const unitRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation_deprecated ?? vec3Zero);
   const rotatedCenter = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, scene.rotation_deprecated ?? vec3Zero);
   const [size, center] = sizeCenterForCameraPos(scene.size_deprecated, rotatedCenter, vec3Zero, 1);
-  return dxfHeader(size, center) + scene.groups.reduce((a, c) => a + dxfGroup(c, center, unitRot), "") + dxfFooter;
+  const id = "D171D";
+  const handleRef = {handle: 0x1000}; //make sure we start with a value higher than any other handle id's used in the header
+  return dxfHeader(size, center, id) + scene.groups.reduce((a, c) => a + dxfGroup(c, center, unitRot, handleRef), "") + dxfFooter(id);
 };
 
-function dxfGroup(g: Group, parentPos: Vec3, parentRot: Vec3): string {
+function dxfGroup(g: Group, parentPos: Vec3, parentRot: Vec3, handleRef: {handle: number}): string {
   const pos = vec3TransRot(g.pos, parentPos, parentRot);
   const rot = vec3RotCombine(parentRot, g.rot ?? vec3Zero);
   return (
     (g.meshes?.reduce((a, c) => {
       switch (c.geometry.type) {
-        case "Plane":
-          return a + dxfPlane(c.geometry, c.material, pos, rot);
-        case "Box":
-          return a + dxfBox(c.geometry, c.material, pos, rot);
-        case "Cylinder":
-          return a + dxfCylinder(c.geometry, c.material, 18, pos, rot);
-        case "Cone":
-          return a + dxfCone(c.geometry, c.material, 18, pos, rot);
-        case "Polygon":
-          return a + dxfPolygon(c.geometry, c.material, pos, rot);
-        default:
+        case "Plane": {
+          return a + dxfPlane(c.geometry, c.material, pos, rot, handleRef);
+        }
+        case "Box": {
+          return a + dxfBox(c.geometry, c.material, pos, rot, handleRef);
+        }
+        case "Cylinder": {
+          return a + dxfCylinder(c.geometry, c.material, 18, pos, rot, handleRef);
+        }
+        case "Cone": {
+          return a + dxfCone(c.geometry, c.material, 18, pos, rot, handleRef);
+        }
+        case "Polygon": {
+          return a + dxfPolygon(c.geometry, c.material, pos, rot, handleRef);
+        }
+        default: {
           return a;
+        }
       }
-    }, "") ?? "") + g.groups?.reduce((a, c) => a + dxfGroup(c, pos, rot), "")
+    }, "") ?? "") + g.groups?.reduce((a, c) => a + dxfGroup(c, pos, rot, handleRef), "")
   );
-}
+}

package/src/renderers/react/react-camera.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React, { useEffect, useRef, useState } from "react";
+import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
 import {
   GizmoHelperProps,
   PerspectiveCamera,
@@ -11,7 +11,7 @@ import {
   GizmoViewcube,
   GizmoViewport,
 } from "@react-three/drei";
-import { ThreeEvent, useFrame, useThree } from "@react-three/fiber";
+import { ThreeEvent, useThree } from "@react-three/fiber";
 import { exhaustiveCheck } from "ts-exhaustive-check";
 import { Vector3 } from "three/src/math/Vector3.js";
 import { View, Scene, Vec3, vec3 } from "../../abstract-3d.js";
@@ -31,20 +31,6 @@ export type ControlsHelper = (Viewcube | Viewport) & { readonly props: Pick<Gizm
 type Viewcube = { readonly type: "Viewcube"; readonly viewcubeProps: GenericProps };
 type Viewport = { readonly type: "Viewport"; readonly viewportProps: GizmoViewportProps };
 
-const ControlsWrapper = (
-  props: OrbitControlsProps & { readonly setControls: (r: React.MutableRefObject<any>) => void }
-): React.JSX.Element => {
-  const ref = useRef<any>(undefined!);
-
-  useEffect(() => {
-    if (!ref.current) {
-      return;
-    }
-    props.setControls(ref.current);
-  }, [ref.current]);
-  return <OrbitControls {...props} makeDefault ref={ref} />;
-};
-
 export function ReactCamera({
   useAnimations,
   camera,
@@ -65,7 +51,7 @@ export function ReactCamera({
   const orthographicRef = useRef<any | undefined>(undefined);
   const viewPortAspect = useThree(({ viewport: { aspect } }) => aspect);
 
-  useEffect(() => {
+  useLayoutEffect(() => {
     const [posX, posY, posZ, size, sceneAspect] = (() => {
       switch (view) {
         case "front":
@@ -136,17 +122,17 @@ export function ReactCamera({
   //   prevScene.current = scene;
   // }, [scene]);
 
-  useFrame(() => {
-    // if (useAnimations && camera && prevScene.current !== scene) {
-    //   const [, , z] = cameraDist(scene);
-    //   vector3.set(camera.position.x, camera.position.y, z);
-    //   camera.position.lerp(vector3, 0.12);
-    //   ref.current.enabled = false;
-    //   invalidate();
-    // } else {
-    //   ref.current.enabled = true;
-    // }
-  });
+  // useFrame(() => {
+  // if (useAnimations && camera && prevScene.current !== scene) {
+  //   const [, , z] = cameraDist(scene);
+  //   vector3.set(camera.position.x, camera.position.y, z);
+  //   camera.position.lerp(vector3, 0.12);
+  //   ref.current.enabled = false;
+  //   invalidate();
+  // } else {
+  //   ref.current.enabled = true;
+  // }
+  // });
   return (
     <>
       <PerspectiveCamera
@@ -198,6 +184,20 @@ export function ReactCamera({
   );
 }
 
+const ControlsWrapper = (
+  props: OrbitControlsProps & { readonly setControls: (r: React.MutableRefObject<any>) => void }
+): React.JSX.Element => {
+  const ref = useRef<any>(undefined!);
+
+  useLayoutEffect(() => {
+    if (!ref.current) {
+      return;
+    }
+    props.setControls(ref.current);
+  }, [ref.current]);
+  return <OrbitControls {...props} makeDefault ref={ref} />;
+};
+
 type GizmoViewportProps = React.JSX.IntrinsicElements["group"] & {
   readonly axisColors?: readonly [string, string, string];
   readonly axisScale?: readonly [number, number, number];

package/src/renderers/react/react-hotspot.tsx

@@ -100,7 +100,7 @@ export function ReactHotSpot({
         })}
       >
         <ReactMesh mesh={h.mesh}>
-          <ReactMaterial id={h.id} isText={false} material={h.mesh.material} hoveredId={hoveredId} />
+          <ReactMaterial id={h.id} isText={false} isHotSpot={true} material={h.mesh.material} hoveredId={hoveredId} />
         </ReactMesh>
       </group>
       {hotSpotTexts && text && (

package/src/renderers/react/react-material.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { suspend } from "suspend-react";
 import { Color, DoubleSide, MaterialParameters, SRGBColorSpace, Texture, TextureLoader } from "three";
 import { Material } from "../../abstract-3d.js";
@@ -18,6 +18,7 @@ export function ReactMaterial({
   materialStateImages,
   state,
   isText,
+  isHotSpot,
 }: {
   readonly material: Material;
   readonly id?: string;
@@ -27,6 +28,7 @@ export function ReactMaterial({
   readonly materialStateImages?: Record<string, string>;
   readonly state?: MaterialState | undefined;
   readonly isText: boolean;
+  readonly isHotSpot?: boolean;
 }): React.JSX.Element {
   const mat =
     !state || material.image?.type === "UrlImage"
@@ -70,7 +72,7 @@ export function ReactMaterial({
       roughness={mat.roughness}
       metalness={mat.metalness}
       side={DoubleSide}
-      {...(opacity < 1 || disabled
+      {...((opacity < 1 || disabled) && !isHotSpot
         ? { transparent: true, opacity: disabled ? opacity * decreasedOpacity : opacity }
         : materialDefaults)}
     />
@@ -101,6 +103,14 @@ function TextureMaterial({
     [url]
   ) as Texture | null;
 
+  useEffect(() => {
+    return () => {
+      if (texture) {
+        texture.dispose();
+      }
+    };
+  }, [texture]);
+
   return (
     <meshBasicMaterial
       color={color}

package/src/renderers/react/react-scene.tsx

@@ -5,8 +5,6 @@ import { ReactDimensions } from "./react-dimension.js";
 import { ReactGroup } from "./react-group.js";
 import { MaterialState } from "./react-material.js";
 
-// dummy 2
-
 export function ReactScene({
   scene,
   selectedId,
@@ -66,7 +64,7 @@ export function ReactScene({
         const id = createGroupId ? createGroupId(g) : "";
         return (
           <ReactGroup
-            key={createGroupKey ? createGroupKey(g, i, g.data, id) : i}
+            key={createGroupKey ? createGroupKey(g, 0, g.data, id) : i}
             g={g}
             selectedId={selectedId}
             hotSpotsActive={activeHotSpots !== undefined}

package/src/renderers/svg/svg-encoding.ts

@@ -1,9 +1,10 @@
-import { Vec2, vec2Add, vec2Scale } from "../../abstract-3d.js";
+import { vec2, Vec2, vec2Add, vec2Scale } from "../../abstract-3d.js";
 
-export const svg = (width: number, height: number, children: string): string =>
-  `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width.toFixed(0)} ${height.toFixed(
+export const svg = (width: number, height: number, children: string): string => {
+  return `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width.toFixed(0)} ${height.toFixed(
     0
   )}" width="${width.toFixed(0)}px" height="${height.toFixed(0)}px">${children} </svg>`;
+};
 
 export const svgLine = (p1: Vec2, p2: Vec2, stroke: string, strokeWidth: number): string =>
   `<line x1="${p1.x.toFixed(0)}" y1="${p1.y.toFixed(0)}" x2="${p2.x.toFixed(0)}" y2="${p2.y.toFixed(
@@ -30,16 +31,17 @@ export type EmbededImage =
   | { readonly type: "svg"; readonly svg: string };
 
 export const svgImage = (p: Vec2, size: Vec2, rot: number, data: EmbededImage): string => {
+  const rad = rot * (Math.PI / 180);
+  const cos = Math.abs(Math.cos(rad));
+  const sin = Math.abs(Math.sin(rad));
+  const newSize = vec2(size.x * cos + size.y * sin, size.x * sin + size.y * cos);
   const half = vec2Scale(size, 0.5);
+  const originalCenter = vec2(size.x / 2, size.y / 2);
+  const rotatedCenter = vec2(newSize.x / 2, newSize.y / 2);
+  const rotatatedTranslationDelta = vec2(originalCenter.x - rotatedCenter.x, originalCenter.y - rotatedCenter.y);
   return data.type === "url"
-    ? `<image x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(rot)}" ${transformOrigin(
-        p,
-        half
-      )} width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}" />`
-    : `<svg width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" transform="${translate(
-        vec2Add(p, half)
-      )} ${rotate(rot)} ${translate(vec2Scale(half, -1))}">${data.svg}</svg>
-
+        ? `<image x="${p.x.toFixed(0)}" y="${p.y.toFixed(0)}" transform="${rotate(rot)}" ${transformOrigin(p, half)} width="${size.x.toFixed(0)}" height="${size.y.toFixed(0)}" href="${data.url}" />`
+        : `<svg width="${newSize.x.toFixed(0)}" height="${newSize.y.toFixed(0)}" transform="${translate(p)} ${rotateAtPos(rot, half)} ${translate(rotatatedTranslationDelta)}">${data.svg}</svg>
   `;
 };
 
@@ -47,5 +49,5 @@ const transformOrigin = (p: Vec2, half: Vec2): string =>
   `transform-origin="${(p.x + half.x).toFixed(0)}px ${(p.y + half.y).toFixed(0)}px"`;
 
 const rotate = (rot: number): string => `rotate(${rot.toFixed(0)})`;
-
+const rotateAtPos = (rot: number, p: Vec2): string => `rotate(${rot.toFixed(0)}, ${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;
 const translate = (p: Vec2): string => `translate(${p.x.toFixed(0)}, ${p.y.toFixed(0)})`;

package/src/renderers/svg/svg.ts

@@ -26,6 +26,8 @@ import { cone } from "./svg-geometries/svg-cone.js";
 import { rotationForCameraPos, sizeCenterForCameraPos } from "../shared.js";
 import { EmbededImage, svg } from "./svg-encoding.js";
 
+// dummy
+
 export function toSvg(
   scene: Scene,
   view: View,
@@ -35,7 +37,8 @@ export function toSvg(
   grayScale?: boolean,
   onlyStrokeFill: string = "rgba(255,255,255,0)",
   font: string = "",
-  buffers?: Record<string, string>
+  buffers?: Record<string, string>,
+  rotation?: number
 ): { readonly image: string; readonly width: number; readonly height: number } {
   const factor = scale
     ? scale.size /
@@ -47,7 +50,9 @@ export function toSvg(
         ? scene.size_deprecated.z
         : scene.size_deprecated.y)
     : 1;
-  const unitRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation_deprecated ?? vec3Zero);
+  const baseRot = vec3RotCombine(rotationForCameraPos(view), scene.rotation_deprecated ?? vec3Zero);
+  const unitRot = rotation ? vec3RotCombine(vec3(0, 0, (rotation * Math.PI) / 180), baseRot) : baseRot;
+
   const unitPos = vec3Rot(scene.center_deprecated ?? vec3Zero, vec3Zero, scene.rotation_deprecated ?? vec3Zero);
   const [size, center] = sizeCenterForCameraPos(scene.size_deprecated, unitPos, unitRot, factor);
   const unitHalfSize = vec3Scale(size, 0.5);