Fix zooming by forcing the use of the scale in the Canvas' Camera

apps/storybook/package.json

@@ -24,7 +24,7 @@
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-icons": "5.4.0",
-    "three": "0.182.0"
+    "three": "0.185.1"
   },
   "devDependencies": {
     "@esrf/eslint-config": "2.3.1",
@@ -37,7 +37,7 @@
     "@types/node": "^24.13.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@types/three": "0.183.1",
+    "@types/three": "0.185.3",
     "eslint": "9.39.4",
     "remark-gfm": "4.0.1",
     "storybook": "10.4.6",

apps/storybook/src/GettingStarted.mdx

@@ -22,7 +22,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 1. Install the library and its peer dependencies:
 
    ```bash
-   npm install @h5web/lib "three<=0.182" @react-three/fiber@8
+   npm install @h5web/lib three @react-three/fiber@8
    ```
 
 1. Install `ndarray` and, if you use TypeScript, its types package:

packages/app/package.json

@@ -64,7 +64,7 @@
     "react-error-boundary": "6.1.2",
     "react-icons": "5.4.0",
     "react-resizable-panels": "4.12.0",
-    "three": "0.182.0",
+    "three": "0.185.1",
     "zustand": "5.0.14"
   },
   "devDependencies": {

packages/app/src/setupTests.ts

@@ -7,7 +7,12 @@ vi.mock(import('./providers/mock/utils'), { spy: true });
 
 enableBigIntSerialization();
 
-failOnConsole();
+failOnConsole({
+  silenceMessage: (message) =>
+    message.includes(
+      'THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.',
+    ),
+});
 
 beforeEach(() => {
   localStorage.clear();

packages/lib/README.md

@@ -36,10 +36,9 @@ separate `@types/` package.
 >
 > - React v18.*
 > - React-three-fiber v8.*
-> - three <= v0.182
 
 ```bash
-npm install @h5web/lib "three<=0.182" @react-three/fiber@8 ndarray
+npm install @h5web/lib three @react-three/fiber@8 ndarray
 ```
 
 ```tsx

packages/lib/package.json

@@ -34,10 +34,10 @@
     "@react-three/fiber": "8.x",
     "@types/react": "18.x",
     "@types/react-dom": "18.x",
-    "@types/three": ">=0.138 <=0.182",
+    "@types/three": ">=0.138",
     "react": "18.x",
     "react-dom": "18.x",
-    "three": ">=0.138 <=0.182",
+    "three": ">=0.138",
     "typescript": ">=4.5"
   },
   "peerDependenciesMeta": {
@@ -93,15 +93,15 @@
     "@types/node": "^24.13.2",
     "@types/react": "^18.3.31",
     "@types/react-dom": "^18.3.7",
-    "@types/three": "0.183.1",
+    "@types/three": "0.185.3",
     "@vitejs/plugin-react": "6.0.3",
     "dot-json": "1.3.0",
     "eslint": "9.39.4",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "rollup": "4.62.2",
     "rollup-plugin-dts": "6.4.1",
-    "three": "0.182.0",
+    "three": "0.185.1",
     "typescript": "5.9.3",
     "vite": "8.1.2",
     "vite-css-modules": "1.16.0",

packages/lib/src/vis/shared/R3FCanvas.tsx

@@ -1,7 +1,7 @@
 import { Canvas } from '@react-three/fiber';
-import { type PropsWithChildren } from 'react';
+import { type PropsWithChildren, useMemo } from 'react';
 
-import { CAMERA_FAR, CAMERA_NEAR, CAMERA_Z } from '../utils';
+import { ScaledOrthographicCamera } from './ScaledOrthographicCamera';
 
 interface Props {
   className?: string;
@@ -11,6 +11,8 @@ interface Props {
 function R3FCanvas(props: PropsWithChildren<Props>) {
   const { className, orthographic, children } = props;
 
+  const camera = useMemo(() => new ScaledOrthographicCamera(), []);
+
   return (
     <Canvas
       className={className}
@@ -20,16 +22,7 @@ function R3FCanvas(props: PropsWithChildren<Props>) {
       dpr={[1, 3]} // https://discoverthreejs.com/tips-and-tricks/#performance
       resize={{ debounce: { scroll: 20, resize: 200 }, scroll: false }} // https://github.com/pmndrs/react-three-fiber/discussions/1906
       gl={{ preserveDrawingBuffer: true }} // for "Save Image As..." and snapshot feature to work
-      camera={
-        orthographic
-          ? {
-              // Customize visible `z` range: https://github.com/silx-kit/h5web/issues/1626
-              near: CAMERA_NEAR,
-              far: CAMERA_FAR,
-              position: [0, 0, CAMERA_Z],
-            }
-          : undefined
-      }
+      camera={orthographic ? camera : undefined}
     >
       <ambientLight />
       {children}

packages/lib/src/vis/shared/ScaledOrthographicCamera.ts

@@ -0,0 +1,29 @@
+import { OrthographicCamera } from 'three';
+
+import { CAMERA_FAR, CAMERA_NEAR, CAMERA_Z } from '../utils';
+
+export class ScaledOrthographicCamera extends OrthographicCamera {
+  /* An OrthographicCamera that keeps the scale in matrixWorldInverse (removed in three@0.183) */
+  public constructor() {
+    super();
+    // Customize visible `z` range: https://github.com/silx-kit/h5web/issues/1626
+    this.near = CAMERA_NEAR;
+    this.far = CAMERA_FAR;
+    this.translateZ(CAMERA_Z);
+  }
+
+  // https://github.com/mrdoob/three.js/pull/32805/changes
+  public override updateMatrixWorld(force?: boolean): void {
+    super.updateMatrixWorld(force);
+    this.matrixWorldInverse.copy(this.matrixWorld).invert();
+  }
+
+  // https://github.com/mrdoob/three.js/pull/32805/changes
+  public override updateWorldMatrix(
+    updateParents: boolean,
+    updateChildren: boolean,
+  ): void {
+    super.updateWorldMatrix(updateParents, updateChildren);
+    this.matrixWorldInverse.copy(this.matrixWorld).invert();
+  }
+}