Merge pull request #280 from allen-cell-animated/fix/three-types-r171

Bump @types/three to r171

package.json

@@ -48,7 +48,7 @@
     "@babel/preset-typescript": "^7.24.7",
     "@babel/register": "^7.24.6",
     "@tweakpane/core": "^1.1.9",
-    "@types/three": "^0.144.0",
+    "@types/three": "^0.171.0",
     "@typescript-eslint/eslint-plugin": "^5.30.5",
     "@typescript-eslint/parser": "^5.30.5",
     "acorn": "^8.7.0",

src/Atlas2DSlice.ts

@@ -12,7 +12,6 @@ import {
   PerspectiveCamera,
   PlaneGeometry,
   ShaderMaterial,
-  ShapeGeometry,
   Vector2,
   Vector3,
   WebGLRenderer,
@@ -32,7 +31,7 @@ const BOUNDING_BOX_DEFAULT_COLOR = new Color(0xffff00);
 export default class Atlas2DSlice implements VolumeRenderImpl {
   private settings: VolumeRenderSettings;
   public volume: Volume;
-  private geometry: ShapeGeometry;
+  private geometry: PlaneGeometry;
   protected geometryMesh: Mesh<BufferGeometry, Material>;
   private geometryTransformNode: Group;
   private boxHelper: Box3Helper;
@@ -211,7 +210,7 @@ export default class Atlas2DSlice implements VolumeRenderImpl {
 
   private createGeometry(
     uniforms: ReturnType<typeof sliceShaderUniforms>
-  ): [ShapeGeometry, Mesh<BufferGeometry, Material>] {
+  ): [PlaneGeometry, Mesh<BufferGeometry, Material>] {
     const geom = new PlaneGeometry(1.0, 1.0);
     const mesh: Mesh<BufferGeometry, Material> = new Mesh(geom);
     mesh.name = "Plane";

src/Channel.ts

@@ -17,6 +17,8 @@ import {
   ClampToEdgeWrapping,
   Vector3,
   PixelFormatGPU,
+  PixelFormat,
+  TextureDataType,
 } from "three";
 import Histogram from "./Histogram.js";
 import { Lut, LUT_ARRAY_LENGTH } from "./Lut.js";
@@ -153,8 +155,8 @@ export default class Channel {
     if (this.dataTexture) {
       this.dataTexture.dispose();
     }
-    let format = LuminanceFormat;
-    let dataType = UnsignedByteType;
+    let format: PixelFormat = LuminanceFormat;
+    let dataType: TextureDataType = UnsignedByteType;
     let internalFormat: PixelFormatGPU = "LUMINANCE";
     switch (this.dtype) {
       case "uint8":

src/RayMarchedAtlasVolume.ts

@@ -16,7 +16,6 @@ import {
   OrthographicCamera,
   PerspectiveCamera,
   ShaderMaterial,
-  ShapeGeometry,
   Texture,
   Vector2,
   Vector3,
@@ -42,7 +41,7 @@ export default class RayMarchedAtlasVolume implements VolumeRenderImpl {
   private settings: VolumeRenderSettings;
   public volume: Volume;
 
-  private geometry: ShapeGeometry;
+  private geometry: BoxGeometry;
   private geometryMesh: Mesh<BufferGeometry, Material>;
   private boxHelper: Box3Helper;
   private tickMarksMesh: LineSegments;
@@ -216,7 +215,7 @@ export default class RayMarchedAtlasVolume implements VolumeRenderImpl {
    */
   private createGeometry(
     uniforms: ReturnType<typeof rayMarchingShaderUniforms>
-  ): [ShapeGeometry, Mesh<BufferGeometry, Material>] {
+  ): [BoxGeometry, Mesh<BufferGeometry, Material>] {
     const geom = new BoxGeometry(1.0, 1.0, 1.0);
     const mesh: Mesh<BufferGeometry, Material> = new Mesh(geom);
     mesh.name = "Volume";
@@ -317,7 +316,7 @@ export default class RayMarchedAtlasVolume implements VolumeRenderImpl {
   public doRender(
     renderer: WebGLRenderer,
     camera: PerspectiveCamera | OrthographicCamera,
-    depthTexture?: DepthTexture | Texture
+    depthTexture?: DepthTexture | Texture | null
   ): void {
     if (!this.geometryMesh.visible) {
       return;

src/ThreeJsPanel.ts

@@ -60,7 +60,7 @@ export class ThreeJsPanel {
   public animateFuncs: ((
     renderer: WebGLRenderer,
     camera: PerspectiveCamera | OrthographicCamera,
-    depthTexture?: DepthTexture
+    depthTexture?: DepthTexture | null
   ) => void)[];
   private inRenderLoop: boolean;
   private requestedRender: number;
@@ -589,7 +589,7 @@ export class ThreeJsPanel {
     this.updateScaleBarVisibility();
   }
 
-  getMeshDepthTexture(): DepthTexture {
+  getMeshDepthTexture(): DepthTexture | null {
     return this.meshRenderTarget.depthTexture;
   }
 

src/VolumeDrawable.ts

@@ -388,7 +388,7 @@ export default class VolumeDrawable {
   onAnimate(
     renderer: WebGLRenderer,
     camera: PerspectiveCamera | OrthographicCamera,
-    depthTexture?: DepthTexture | Texture
+    depthTexture?: DepthTexture | Texture | null
   ): void {
     // TODO: this is inefficient, as this work is duplicated by threejs.
     // we need camera matrix up to date before giving the 3d objects a chance to use it.

src/VolumeRenderImpl.ts

@@ -19,7 +19,7 @@ export interface VolumeRenderImpl {
   doRender: (
     renderer: WebGLRenderer,
     camera: PerspectiveCamera | OrthographicCamera,
-    depthTexture?: DepthTexture | Texture
+    depthTexture?: DepthTexture | Texture | null
   ) => void;
   updateVolumeDimensions: () => void;
   cleanup: () => void;