A3D: upgrade three, clean up texture, layoutEffect for camera

Author: Kinatzo

package.json

@@ -31,7 +31,7 @@
     "prettier": "^2.2.1",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
-    "typescript": "^5.4.5",
+    "typescript": "^5.8.2",
     "vite": "^6.0.3",
     "vite-plugin-node-polyfills": "^0.22.0",
     "xmldom": "^0.6.0",

packages/abstract-3d/package.json

@@ -18,19 +18,19 @@
     "package.json"
   ],
   "dependencies": {
-    "@react-three/drei": "^10.0.0",
+    "@react-three/drei": "^10.0.3",
     "@react-three/fiber": "^9.0.4",
     "suspend-react": "^0.1.3",
-    "three": "^0.173.0",
+    "three": "^0.174.0",
     "ts-exhaustive-check": "^1.0.0"
   },
   "peerDependencies": {
     "react": "^19.0.0"
   },
   "devDependencies": {
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
     "@types/react-reconciler": "^0.28.9",
-    "@types/three": "^0.173.0",
+    "@types/three": "^0.174.0",
     "react": "^19.0.0"
   },
   "gitHead": "0c3b26e59c7ef854cb8aae96a9f56dd7d82cbc9c"

packages/abstract-3d/src/abstract-3d.ts

@@ -395,6 +395,7 @@ const quaternion2 = new Quaternion();
 const euler1 = new Euler();
 const euler2 = new Euler();
 const vector = new Vector3();
+const matrix = new Matrix4();
 
 export function vec3RotCombine(outer: Vec3, inner: Vec3): Vec3 {
   euler1.set(outer.x, outer.y, outer.z);
@@ -407,15 +408,11 @@ export function vec3RotCombine(outer: Vec3, inner: Vec3): Vec3 {
 }
 
 export function vec3RotNormal(referenceNormal: Vec3, eulerRot: Vec3): Vec3 {
-  const rotationMatrix = new Matrix4();
-  const euler = new Euler();
-  euler.set(eulerRot.x, eulerRot.y, eulerRot.z);
-  rotationMatrix.makeRotationFromEuler(euler);
-
-  const normal = new Vector3();
-  normal.set(referenceNormal.x, referenceNormal.y, referenceNormal.z);
-  normal.applyMatrix4(rotationMatrix);
-  const normalized = normal.normalize();
+  euler1.set(eulerRot.x, eulerRot.y, eulerRot.z);
+  matrix.makeRotationFromEuler(euler1);
+  vector.set(referenceNormal.x, referenceNormal.y, referenceNormal.z);
+  vector.applyMatrix4(matrix);
+  const normalized = vector.normalize();
   return vec3(normalized.x, normalized.y, normalized.z);
 }
 

packages/abstract-3d/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";
@@ -65,7 +65,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 +136,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

packages/abstract-3d/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";
@@ -101,6 +101,14 @@ function TextureMaterial({
     [url]
   ) as Texture | null;
 
+  useEffect(() => {
+    return () => {
+      if (texture) {
+        texture.dispose();
+      }
+    };
+  }, [texture]);
+
   return (
     <meshBasicMaterial
       color={color}

packages/abstract-document/package.json

@@ -39,7 +39,7 @@
     "@types/isomorphic-fetch": "^0.0.34",
     "@types/mustache": "^4.2.5",
     "@types/pdfkit": "^0.13.4",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
     "diff-js-xml": "^1.0.8",
     "jszip": "^3.10.1",
     "pdf2json": "2.0.1",

packages/abstract-image/package.json

@@ -26,7 +26,7 @@
   },
   "devDependencies": {
     "@types/base64-js": "^1.3.2",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
     "react": "^19.0.0",
     "vite": "^6.0.1",
     "vitest": "^2.1.6"

packages/abstract-sheet/package.json

@@ -30,7 +30,7 @@
   "devDependencies": {
     "@types/mustache": "^4.2.5",
     "@types/node": "^22.10.1",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
     "@types/xml": "^1.0.11"
   },
   "gitHead": "0c3b26e59c7ef854cb8aae96a9f56dd7d82cbc9c"

packages/abstract-visuals-example/package.json

@@ -22,7 +22,7 @@
   "devDependencies": {
     "@types/base64-js": "^1.3.2",
     "@types/file-saver": "^2.0.7",
-    "@types/react": "^19.0.8",
+    "@types/react": "^19.0.10",
     "@types/react-dom": "^19.0.1",
     "@vitejs/plugin-react": "^4.3.4",
     "vite": "^6.0.1",