Update ThreeJS (#418)

* Bump `ThreeJs` to latest version

* Also bump `three-mesh-bvh` to latest

* Remove Redundant plane rendering

* Bring back clip plane

* Show `_clippingPlaneMesh` only if clipping is enabled

* Complement logic

* Plane thing fixed

* Remove some `@ts-ignore` statements

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Bump & Add back `types/three`

* Fix typing failures

* [pre-commit.ci] auto fixes from pre-commit.com hooks

for more information, see https://pre-commit.ci

* Update Playwright Snapshots

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

packages/base/package.json

@@ -60,18 +60,17 @@
     "@naisutech/react-tree": "^3.0.1",
     "@rjsf/core": "^4.2.0",
     "@types/d3-color": "^3.1.0",
-    "@types/three": "^0.134.0",
     "d3-color": "^3.1.0",
     "react": "^18.0.1",
     "styled-components": "^5.3.6",
-    "three": "^0.135.0",
-    "three-mesh-bvh": "^0.5.17",
+    "three": "^0.168.0",
+    "three-mesh-bvh": "^0.7.8",
     "uuid": "^8.3.2"
   },
   "devDependencies": {
     "@apidevtools/json-schema-ref-parser": "^9.0.9",
     "@types/node": "^18.15.11",
-    "@types/three": "^0.135.0",
+    "@types/three": "^0.168.0",
     "rimraf": "^3.0.2",
     "typescript": "^5"
   },

packages/base/src/3dview/helpers.ts

@@ -36,7 +36,7 @@ export const SELECTED_MESH_COLOR = new THREE.Color(
 
 export type BasicMesh = THREE.Mesh<
   THREE.BufferGeometry,
-  THREE.MeshBasicMaterial
+  THREE.MeshBasicMaterial | THREE.MeshPhongMaterial
 >;
 
 /**
@@ -230,8 +230,7 @@ export function buildShape(options: {
   for (const edge of edgeList) {
     const edgeMaterial = new LineMaterial({
       linewidth: DEFAULT_LINEWIDTH,
-      // @ts-ignore Missing typing in ThreeJS
-      color: DEFAULT_EDGE_COLOR,
+      color: new THREE.Color(DEFAULT_EDGE_COLOR).getHex(),
       clippingPlanes,
       // Depth offset so that lines are most always on top of faces
       polygonOffset: true,

packages/base/src/3dview/mainview.tsx

@@ -65,6 +65,10 @@ interface IStates {
   wireframe: boolean;
 }
 
+interface ILineIntersection extends THREE.Intersection {
+  pointOnLine?: THREE.Vector3;
+}
+
 export class MainView extends React.Component<IProps, IStates> {
   constructor(props: IProps) {
     super(props);
@@ -94,11 +98,7 @@ export class MainView extends React.Component<IProps, IStates> {
     this._mainViewModel.renderSignal.connect(this._requestRender, this);
     this._mainViewModel.workerBusy.connect(this._workerBusyHandler, this);
 
-    // @ts-ignore Missing ThreeJS typing
-    this._raycaster.params.Line2 = {};
-    // Is this threshold in pixels? It looks like it
-    // @ts-ignore Missing ThreeJS typing
-    this._raycaster.params.Line2.threshold = 50;
+    this._raycaster.params.Line = { threshold: 50 };
 
     this.state = {
       id: this._mainViewModel.id,
@@ -218,7 +218,8 @@ export class MainView extends React.Component<IProps, IStates> {
 
       this._renderer = new THREE.WebGLRenderer({
         alpha: true,
-        antialias: true
+        antialias: true,
+        stencil: true
       });
       // this._renderer.setPixelRatio(window.devicePixelRatio);
       this._renderer.setClearColor(0x000000, 0);
@@ -286,7 +287,11 @@ export class MainView extends React.Component<IProps, IStates> {
           this._model.syncCamera(
             {
               position: this._camera.position.toArray([]),
-              rotation: this._camera.rotation.toArray([]),
+              rotation: [
+                this._camera.rotation.x,
+                this._camera.rotation.y,
+                this._camera.rotation.z
+              ],
               up: this._camera.up.toArray([])
             },
             this._mainViewModel.id
@@ -381,10 +386,10 @@ export class MainView extends React.Component<IProps, IStates> {
         this.divRef.current.clientHeight,
         false
       );
-      if (this._camera.type === 'PerspectiveCamera') {
+      if (this._camera instanceof THREE.PerspectiveCamera) {
         this._camera.aspect =
           this.divRef.current.clientWidth / this.divRef.current.clientHeight;
-      } else {
+      } else if (this._camera instanceof THREE.OrthographicCamera) {
         this._camera.left = this.divRef.current.clientWidth / -2;
         this._camera.right = this.divRef.current.clientWidth / 2;
         this._camera.top = this.divRef.current.clientHeight / 2;
@@ -478,7 +483,7 @@ export class MainView extends React.Component<IProps, IStates> {
 
     if (intersects.length > 0) {
       // Find the first intersection with a visible object
-      for (const intersect of intersects) {
+      for (const intersect of intersects as ILineIntersection[]) {
         // Object is hidden
         if (!intersect.object.visible || !intersect.object.parent?.visible) {
           continue;
@@ -502,11 +507,7 @@ export class MainView extends React.Component<IProps, IStates> {
           : intersect.object;
         return {
           mesh: intersectMesh as BasicMesh,
-          // @ts-ignore Missing threejs typing
-          position: intersect.pointOnLine
-            ? // @ts-ignore Missing threejs typing
-              intersect.pointOnLine
-            : intersect.point
+          position: intersect.pointOnLine ?? intersect.point
         };
       }
     }
@@ -685,6 +686,7 @@ export class MainView extends React.Component<IProps, IStates> {
       wireframe: this.state.wireframe
     });
     this._clippingPlaneMesh = new THREE.Mesh(planeGeom, planeMat);
+    this._clippingPlaneMesh.visible = this._clipSettings.enabled;
     this._clippingPlaneMesh.onAfterRender = renderer => {
       renderer.clearStencil();
     };
@@ -823,6 +825,9 @@ export class MainView extends React.Component<IProps, IStates> {
                 pos.postShape = exported as any;
                 resolve();
               },
+              () => {
+                // Intentionally empty: no error handling needed for this case
+              }, // Empty function to handle errors
               options
             );
           });
@@ -886,10 +891,12 @@ export class MainView extends React.Component<IProps, IStates> {
       if (selectedMesh.material?.color) {
         selectedMesh.material.color = originalColor;
       }
-      // @ts-ignore
-      if (selectedMesh.material?.linewidth) {
-        // @ts-ignore
-        selectedMesh.material.linewidth = DEFAULT_LINEWIDTH;
+
+      const material = selectedMesh.material as THREE.Material & {
+        linewidth?: number;
+      };
+      if (material?.linewidth) {
+        material.linewidth = DEFAULT_LINEWIDTH;
       }
     }
 
@@ -914,10 +921,12 @@ export class MainView extends React.Component<IProps, IStates> {
       if (selectedMesh?.material?.color) {
         selectedMesh.material.color = SELECTED_MESH_COLOR;
       }
-      // @ts-ignore
-      if (selectedMesh?.material?.linewidth) {
-        // @ts-ignore
-        selectedMesh.material.linewidth = SELECTED_LINEWIDTH;
+
+      const material = selectedMesh.material as THREE.Material & {
+        linewidth?: number;
+      };
+      if (material?.linewidth) {
+        material.linewidth = SELECTED_LINEWIDTH;
       }
     }
   }
@@ -1255,11 +1264,17 @@ export class MainView extends React.Component<IProps, IStates> {
       this._transformControls.enabled = true;
       this._transformControls.visible = true;
       this._clippingPlaneMeshControl.visible = this._clipSettings.showClipPlane;
+      if (this._clippingPlaneMesh) {
+        this._clippingPlaneMesh.visible = true;
+      }
     } else {
       this._renderer.localClippingEnabled = false;
       this._transformControls.enabled = false;
       this._transformControls.visible = false;
       this._clippingPlaneMeshControl.visible = false;
+      if (this._clippingPlaneMesh) {
+        this._clippingPlaneMesh.visible = false;
+      }
     }
   }
 

yarn.lock

@@ -918,13 +918,13 @@ __metadata:
     "@rjsf/core": ^4.2.0
     "@types/d3-color": ^3.1.0
     "@types/node": ^18.15.11
-    "@types/three": ^0.135.0
+    "@types/three": ^0.168.0
     d3-color: ^3.1.0
     react: ^18.0.1
     rimraf: ^3.0.2
     styled-components: ^5.3.6
-    three: ^0.135.0
-    three-mesh-bvh: ^0.5.17
+    three: ^0.168.0
+    three-mesh-bvh: ^0.7.8
     typescript: ^5
     uuid: ^8.3.2
   languageName: unknown
@@ -3563,6 +3563,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@tweenjs/tween.js@npm:~23.1.3":
+  version: 23.1.3
+  resolution: "@tweenjs/tween.js@npm:23.1.3"
+  checksum: 2f8a908b275bb6729bde4b863c277bf7411d2e0302ceb0455369479077b89eaf8380cd9206b91ff574416418a95c6f06db4e1ddea732a286d0db0ba8e7c093d3
+  languageName: node
+  linkType: hard
+
 "@types/create-react-class@npm:*":
   version: 15.6.8
   resolution: "@types/create-react-class@npm:15.6.8"
@@ -3712,10 +3719,24 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/three@npm:^0.135.0":
-  version: 0.135.0
-  resolution: "@types/three@npm:0.135.0"
-  checksum: 85977e55cc3d7a14be88816a50bcec4eb0f141876d3cdc6dd7870f72122605af87462d7583e950cd0ee6ab21949b8c1b8304a88174d536648deb8ef97968fa1b
+"@types/stats.js@npm:*":
+  version: 0.17.3
+  resolution: "@types/stats.js@npm:0.17.3"
+  checksum: 4f84a012f630532877f62959b6335d3fa081ccaac15ce3f1f916741db265bda22b9c927d7efc9cc3389ffd60919a370673cb0b4e7221d580c571031e94b689fd
+  languageName: node
+  linkType: hard
+
+"@types/three@npm:^0.168.0":
+  version: 0.168.0
+  resolution: "@types/three@npm:0.168.0"
+  dependencies:
+    "@tweenjs/tween.js": ~23.1.3
+    "@types/stats.js": "*"
+    "@types/webxr": "*"
+    "@webgpu/types": "*"
+    fflate: ~0.8.2
+    meshoptimizer: ~0.18.1
+  checksum: 2f4e36689170617ec8b8b085d20257adc5c69278265c040836e5cf4d336fa055fcec3a91d5e0de760abfb38953aee74e874fd1682bb61e31787514425eaa5182
   languageName: node
   linkType: hard
 
@@ -3730,6 +3751,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/webxr@npm:*":
+  version: 0.5.20
+  resolution: "@types/webxr@npm:0.5.20"
+  checksum: 8085c291ca8a8adfe03245725384234e62d61cc0f5f7b9985c2a0ba2b2a794cac538861c4904d8fcd28e3e381f0a4ecc5d4514d143dbf3fc0cf3193dc1cc7a54
+  languageName: node
+  linkType: hard
+
 "@typescript-eslint/eslint-plugin@npm:5.55.0":
   version: 5.55.0
   resolution: "@typescript-eslint/eslint-plugin@npm:5.55.0"
@@ -4002,6 +4030,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@webgpu/types@npm:*":
+  version: 0.1.46
+  resolution: "@webgpu/types@npm:0.1.46"
+  checksum: 8dd5fb8a5993e83cb910c6d7bd7d47b941f631b47a77f1280740b245556be615cc84a87de65dceea07aa6629e4bd392b4b6c53e238514958f985f3f5e999db1a
+  languageName: node
+  linkType: hard
+
 "@webpack-cli/configtest@npm:^2.1.1":
   version: 2.1.1
   resolution: "@webpack-cli/configtest@npm:2.1.1"
@@ -6400,6 +6435,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fflate@npm:~0.8.2":
+  version: 0.8.2
+  resolution: "fflate@npm:0.8.2"
+  checksum: 29470337b85d3831826758e78f370e15cda3169c5cd4477c9b5eea2402261a74b2975bae816afabe1c15d21d98591e0d30a574f7103aa117bff60756fa3035d4
+  languageName: node
+  linkType: hard
+
 "figures@npm:3.2.0, figures@npm:^3.0.0":
   version: 3.2.0
   resolution: "figures@npm:3.2.0"
@@ -8815,6 +8857,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"meshoptimizer@npm:~0.18.1":
+  version: 0.18.1
+  resolution: "meshoptimizer@npm:0.18.1"
+  checksum: 101dbed8abd4cf167cdb7a0bc13db90dd0743332c689e43b18cc5254d238f0766750752432401fa63dc7e9e32399ef68daacf48f0d89db1484042c1761c7362d
+  languageName: node
+  linkType: hard
+
 "micromatch@npm:^4.0.0, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
@@ -11945,19 +11994,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"three-mesh-bvh@npm:^0.5.17":
-  version: 0.5.24
-  resolution: "three-mesh-bvh@npm:0.5.24"
+"three-mesh-bvh@npm:^0.7.8":
+  version: 0.7.8
+  resolution: "three-mesh-bvh@npm:0.7.8"
   peerDependencies:
-    three: ">= 0.123.0"
-  checksum: 5a5e356111756869cfd00870bca2d881d3019b55e71142b5eee544a2e6bcc3546a340b0defa29c3ebe7ed4cfe99e7ee6addd5671bb89852841107189c0f98157
+    three: ">= 0.151.0"
+  checksum: 3023a7d1ccdf033e08eba5c6437b4c3dd31a6ec83cb54cfadfca2d6aa22c74c7895c5b0d6e943897ac411a64b86d9bf78b3f6c3a902efd8b8bfd3cf0afd9a18e
   languageName: node
   linkType: hard
 
-"three@npm:^0.135.0":
-  version: 0.135.0
-  resolution: "three@npm:0.135.0"
-  checksum: bd7e195932587a5be0c887947adf2b3898c6fa71722800432562aed10beddb2f448d0f237d937824805eebf90e625fc22ed57054618121f47811a8e82b528507
+"three@npm:^0.168.0":
+  version: 0.168.0
+  resolution: "three@npm:0.168.0"
+  checksum: 1f186006ad5c8df348d4a2bcdccc078f0454f196b8ccc450d405cdf8c88436ff773e545725ef1122891b5552b5cf03add8394288b58985a0c3ebe66b588cab2f
   languageName: node
   linkType: hard