Add rudimentary Typescript typings

.eslintrc.cjs

@@ -31,7 +31,8 @@ module.exports = {
       "padded-blocks": ["off"],
       "indent": ["off"],
       "arrow-parens": ["off"],
-      "no-unused-vars": ["error"]
+      "no-unused-vars": ["error"],
+      "valid-jsdoc": ["off"],
     },
   };
 

package.json

@@ -8,22 +8,24 @@
     "description": "Three.js-based 3D Gaussian splat viewer",
     "module": "build/gaussian-splats-3d.module.js",
     "main": "build/gaussian-splats-3d.umd.cjs",
+    "types": "build/index.d.ts",
     "author": "Mark Kellogg",
     "license": "MIT",
     "type": "module",
     "scripts": {
+        "build-types": "tsc",
         "build-demo": "mkdir -p ./build/demo && cp -r ./demo ./build/ && cp ./node_modules/three/build/three.module.js ./build/demo/lib/three.module.js",
         "build-library": "npx rollup -c && mkdir -p ./build/demo/lib && cp ./build/gaussian-splats-3d.module.* ./build/demo/lib/",
-        "build": "npm run build-library && npm run build-demo",
+        "build": "npm run build-library && npm run build-types && npm run build-demo",
         "build-demo-windows": "(if not exist \".\\build\\demo\" mkdir .\\build\\demo) && xcopy /E .\\demo .\\build\\demo && xcopy .\\node_modules\\three\\build\\three.module.js .\\build\\demo\\lib\\",
         "build-library-windows": "npx rollup -c && (if not exist \".\\build\\demo\\lib\" mkdir .\\build\\demo\\lib) && copy .\\build\\gaussian-splats-3d* .\\build\\demo\\lib\\",
-        "build-windows": "npm run build-library-windows && npm run build-demo-windows",
+        "build-windows": "npm run build-library-windows && npm run build-types && npm run build-demo-windows",
         "watch": "npx npm-watch ",
         "demo": "node util/server.js -d ./build/demo",
         "fix-styling": "npx stylelint **/*.scss --fix",
         "fix-js": "npx eslint src --fix",
         "lint": "npx eslint 'src/**/*.js' || true",
-        "prettify": "npx prettier --write 'src/**/*.js'"
+        "prettify": "npx prettier --write \"src/**/*.js\""
     },
     "watch": {
         "build-library": {
@@ -52,6 +54,7 @@
         "@babel/eslint-parser": "7.22.11",
         "@babel/plugin-proposal-class-properties": "7.18.6",
         "@babel/preset-env": "7.22.10",
+        "@types/three": "^0.161.2",
         "babel-loader": "9.1.3",
         "eslint": "8.47.0",
         "eslint-config-google": "0.14.0",

src/DropInViewer.js

@@ -1,13 +1,26 @@
 import * as THREE from 'three';
 import { Viewer } from './Viewer.js';
 
+/**
+ * @typedef {Omit<
+ *  import('./Viewer.js').ViewerOptions,
+ *  | 'selfDrivenMode'
+ *  | 'useBuiltInControls'
+ *  | 'rootElement'
+ *  | 'ignoreDevicePixelRatio'
+ *  | 'dropInMode'
+ *  | 'camera'
+ *  | 'renderer'
+ * >} DropInViewerOptions
+ */
+
 /**
  * DropInViewer: Wrapper for a Viewer instance that enables it to be added to a Three.js scene like
  * any other Three.js scene object (Mesh, Object3D, etc.)
  */
 export class DropInViewer extends THREE.Group {
 
-    constructor(options = {}) {
+    constructor(/** @type {DropInViewerOptions} */ options = {}) {
         super();
 
         options.selfDrivenMode = false;
@@ -18,8 +31,10 @@ export class DropInViewer extends THREE.Group {
         options.camera = undefined;
         options.renderer = undefined;
 
+        /** @type {import('./Viewer.js').Viewer} */
         this.viewer = new Viewer(options);
 
+        /** @type {THREE.Mesh<THREE.SphereGeometry, THREE.MeshBasicMaterial, THREE.Object3DEventMap>} */
         this.callbackMesh = DropInViewer.createCallbackMesh();
         this.add(this.callbackMesh);
         this.callbackMesh.onBeforeRender = DropInViewer.onBeforeRender.bind(this, this.viewer);
@@ -29,22 +44,7 @@ export class DropInViewer extends THREE.Group {
     /**
      * Add a single splat scene to the viewer.
      * @param {string} path Path to splat scene to be loaded
-     * @param {object} options {
-     *
-     *         splatAlphaRemovalThreshold: Ignore any splats with an alpha less than the specified
-     *                                     value (valid range: 0 - 255), defaults to 1
-     *
-     *         showLoadingSpinner:         Display a loading spinner while the scene is loading, defaults to true
-     *
-     *         position (Array<number>):   Position of the scene, acts as an offset from its default position, defaults to [0, 0, 0]
-     *
-     *         rotation (Array<number>):   Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1]
-     *
-     *         scale (Array<number>):      Scene's scale, defaults to [1, 1, 1]
-     *
-     *         onProgress:                 Function to be called as file data are received
-     *
-     * }
+     * @param {import('./Viewer.js').AddSplatOptions} options
      * @return {AbortablePromise}
      */
     addSplatScene(path, options = {}) {
@@ -58,19 +58,7 @@ export class DropInViewer extends THREE.Group {
 
     /**
      * Add multiple splat scenes to the viewer.
-     * @param {Array<object>} sceneOptions Array of per-scene options: {
-     *
-     *         path: Path to splat scene to be loaded
-     *
-     *         splatAlphaRemovalThreshold: Ignore any splats with an alpha less than the specified
-     *                                     value (valid range: 0 - 255), defaults to 1
-     *
-     *         position (Array<number>):   Position of the scene, acts as an offset from its default position, defaults to [0, 0, 0]
-     *
-     *         rotation (Array<number>):   Rotation of the scene represented as a quaternion, defaults to [0, 0, 0, 1]
-     *
-     *         scale (Array<number>):      Scene's scale, defaults to [1, 1, 1]
-     * }
+     * @param {import('./Viewer.js').AddSplatsOptions} sceneOptions Array of per-scene options
      * @param {boolean} showLoadingSpinner Display a loading spinner while the scene is loading, defaults to true
      * @return {AbortablePromise}
      */

src/OrbitControls.js

@@ -124,13 +124,15 @@ class OrbitControls extends EventDispatcher {
 
         };
 
+        /** @type {(domElement: HTMLElement) => void} */
         this.listenToKeyEvents = function( domElement ) {
 
             domElement.addEventListener( 'keydown', onKeyDown );
             this._domElementKeyEvents = domElement;
 
         };
 
+        /** @type {() => void} */
         this.stopListenToKeyEvents = function() {
 
             this._domElementKeyEvents.removeEventListener( 'keydown', onKeyDown );

src/SceneFormat.js

@@ -1,5 +1,5 @@
-export const SceneFormat = {
+export const SceneFormat = /** @type {const} */ ({
     'Splat': 0,
     'KSplat': 1,
     'Ply': 2
-};
+});

src/SplatScene.js

@@ -5,16 +5,26 @@ import * as THREE from 'three';
  */
 export class SplatScene {
 
-    constructor(splatBuffer, position = new THREE.Vector3(), quaternion = new THREE.Quaternion(), scale = new THREE.Vector3(1, 1, 1)) {
+    constructor(
+        /** @type {ArrayBuffer} */ splatBuffer,
+        position = new THREE.Vector3(),
+        quaternion = new THREE.Quaternion(),
+        scale = new THREE.Vector3(1, 1, 1)
+    ) {
+        /** @type {ArrayBuffer} */
         this.splatBuffer = splatBuffer;
+        /** @type {THREE.Vector3} */
         this.position = position.clone();
+        /** @type {THREE.Quaternion} */
         this.quaternion = quaternion.clone();
+        /** @type {THREE.Vector3} */
         this.scale = scale.clone();
+        /** @type {THREE.Matrix4} */
         this.transform = new THREE.Matrix4();
         this.updateTransform();
     }
 
-    copyTransformData(otherScene) {
+    copyTransformData(/** @type {THREE.Scene} */ otherScene) {
         this.position.copy(otherScene.position);
         this.quaternion.copy(otherScene.quaternion);
         this.scale.copy(otherScene.scale);