@tomorrowevening/hermes 0.0.120 → 0.0.121

package/package.json

@@ -7,7 +7,7 @@
   "module": "./dist/hermes.esm.js",
   "types": "./types/index.d.ts",
   "type": "module",
-  "version": "0.0.120",
+  "version": "0.0.121",
   "homepage": "https://github.com/tomorrowevening/hermes#readme",
   "bugs": {
     "url": "https://github.com/tomorrowevening/hermes/issues"
@@ -22,7 +22,8 @@
     "dist/hermes.es.js",
     "dist/hermes.cjs.js",
     "dist/style.css",
-    "types/**/*.d.ts"
+    "types/**/*.d.ts",
+    "src/webworkers/LoadWorker.ts"
   ],
   "exports": {
     ".": {
@@ -30,8 +31,7 @@
       "require": "./dist/hermes.cjs.js",
       "types": "./types/index.d.ts"
     },
-    "./dist/style.css": "./dist/style.css",
-    "./server/index.mjs": "./server/index.mjs"
+    "./dist/style.css": "./dist/style.css"
   },
   "repository": {
     "type": "git",

package/src/webworkers/LoadWorker.ts

@@ -0,0 +1,161 @@
+import { Group, Object3DEventMap } from 'three';
+import { FBXLoader } from 'three/examples/jsm/Addons.js';
+import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader.js';
+import { GLTF, GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
+import { Assets, File, ModelLite } from './types';
+
+let loadedAssets = 0;
+let assetList: File[] = [];
+
+const assets: Assets = {
+  audio: {},
+  blob: {},
+  buffer: {},
+  images: {},
+  json: {},
+  models: {},
+  video: {},
+};
+
+// Loaders
+
+const draco = new DRACOLoader();
+draco.setDecoderPath('/libs/draco/');
+draco.preload();
+
+const fbxLoader = new FBXLoader();
+
+const gltfLoader = new GLTFLoader();
+gltfLoader.setDRACOLoader(draco);
+
+// Load functions
+
+async function loadArrayBuffer(url: string): Promise<ArrayBuffer> {
+  const response = await fetch(url);
+  return await response.arrayBuffer();
+}
+
+async function loadBlob(url: string): Promise<Blob> {
+  const response = await fetch(url);
+  return await response.blob();
+}
+
+async function loadFBX(url: string): Promise<ModelLite> {
+  return new Promise((resolve) => {
+    fbxLoader.loadAsync(url)
+      .then((value: Group<Object3DEventMap>) => {
+        resolve({
+          animations: value.animations.map(animation => animation.toJSON(animation)),
+          scene: value.toJSON(),
+        });
+      })
+      .catch((reason: any) => {
+        console.log('FBX Error:');
+        console.log(reason);
+      });
+  });
+}
+
+async function loadGLTF(url: string): Promise<ModelLite> {
+  return new Promise((resolve) => {
+    gltfLoader.loadAsync(url)
+      .then((value: GLTF) => {
+        resolve({
+          animations: value.animations.map(animation => animation.toJSON(animation)),
+          cameras: value.cameras.map(camera => camera.toJSON()),
+          scene: value.scene.toJSON(),
+        });
+      })
+      .catch((reason: any) => {
+        console.log('GLTF Error:');
+        console.log(reason);
+      });
+  });
+}
+
+async function loadImage(url: string): Promise<ImageBitmap> {
+  const blob = await loadBlob(url);
+  return await createImageBitmap(blob);
+}
+
+async function loadJSON(url: string): Promise<any> {
+  const response = await fetch(url);
+  return response.json();
+}
+
+// Load calls
+
+function loadStart() {
+  assetList.forEach((item: File) => {
+    switch (item.type) {
+      case 'audio':
+        loadArrayBuffer(item.file).then((value: ArrayBuffer) => {
+          assets.audio[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'blob':
+        loadBlob(item.file).then((value: Blob) => {
+          assets.blob[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'buffer':
+        loadArrayBuffer(item.file).then((value: ArrayBuffer) => {
+          assets.buffer[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'fbx':
+        loadFBX(item.file).then((value: ModelLite) => {
+          assets.models[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'gltf':
+        loadGLTF(item.file).then((value: ModelLite) => {
+          assets.models[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'image':
+        loadImage(item.file).then((value: ImageBitmap) => {
+          assets.images[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'json':
+        loadJSON(item.file).then((value: any) => {
+          assets.json[item.name] = value;
+          onLoad();
+        });
+        break;
+      case 'video':
+        loadBlob(item.file).then((value: Blob) => {
+          assets.video[item.name] = value;
+          onLoad();
+        });
+        break;
+    }
+  });
+}
+
+function onLoad() {
+  loadedAssets++;
+  if (loadedAssets >= assetList.length) loadComplete();
+}
+
+function loadComplete() {
+  self.postMessage({ type: 'loadComplete', data: assets });
+}
+
+// Worker
+
+self.onmessage = (event: MessageEvent) => {
+  switch (event.data.type) {
+    case 'loadStart':
+      assetList = event.data.data;
+      loadStart();
+      break;
+  }
+};

package/types/index.d.ts

@@ -3,6 +3,8 @@ export * from './editor/utils';
 export * from './utils/detectSettings';
 export * from './utils/math';
 export * from './utils/three';
+export * from './webworkers/types';
+export * from './webworkers/ProxyManager';
 export { default as Application } from './core/Application';
 export { debugDispatcher, ToolEvents } from './editor/global';
 export { default as BaseRemote } from './core/remote/BaseRemote';

package/types/utils/three.d.ts

@@ -1,4 +1,5 @@
-import { Material, Object3D, Texture, WebGLRenderer } from 'three';
+import { AnimationMixer, Material, Object3D, Texture, WebGLRenderer } from 'three';
+import { ModelLite } from '../webworkers/types';
 export declare const disposeTexture: (texture?: Texture) => void;
 export declare const disposeMaterial: (material?: Material | Material[]) => void;
 export declare const dispose: (object: Object3D) => void;
@@ -19,3 +20,8 @@ export declare class ExportTexture {
     static renderToBlob(texture: Texture): string;
     private static renderToCanvas;
 }
+export declare function parseModelLite(model: ModelLite): {
+    model: Object3D<import("three").Object3DEventMap>;
+    mixer: AnimationMixer;
+    cameras: Object3D<import("three").Object3DEventMap>[];
+};

package/types/webworkers/LoadWorker.d.ts

@@ -0,0 +1 @@
+export {};

package/types/webworkers/ProxyManager.d.ts

@@ -0,0 +1,45 @@
+import { EventDispatcher } from 'three';
+interface SizeData {
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+}
+interface EventData extends SizeData {
+    type: string;
+    id?: number;
+    data?: any;
+    preventDefault?: () => void;
+    stopPropagation?: () => void;
+}
+export declare class ElementProxyReceiver extends EventDispatcher {
+    style: Record<string, any>;
+    left: number;
+    top: number;
+    width: number;
+    height: number;
+    ownerDocument: any;
+    get clientWidth(): number;
+    set clientWidth(value: number);
+    get clientHeight(): number;
+    set clientHeight(value: number);
+    setPointerCapture(): void;
+    releasePointerCapture(): void;
+    getBoundingClientRect(): DOMRect;
+    handleEvent(data: EventData): void;
+    focus(): void;
+    getRootNode(): any;
+}
+export declare class ProxyManager {
+    targets: Record<number, ElementProxyReceiver>;
+    constructor();
+    makeProxy(data: {
+        id: number;
+    }): void;
+    getProxy(id: number): ElementProxyReceiver;
+    handleEvent(data: {
+        id: number;
+        data: EventData;
+    }): void;
+}
+export {};

package/types/webworkers/types.d.ts

@@ -0,0 +1,21 @@
+import { AnimationClip, Object3DJSON } from 'three';
+export type FileType = 'audio' | 'blob' | 'buffer' | 'fbx' | 'gltf' | 'image' | 'json' | 'video';
+export type File = {
+    name: string;
+    file: string;
+    type: FileType;
+};
+export type Assets = {
+    audio: any;
+    blob: any;
+    buffer: any;
+    images: any;
+    json: any;
+    models: any;
+    video: any;
+};
+export type ModelLite = {
+    animations: AnimationClip[];
+    cameras?: Object3DJSON[];
+    scene: Object3DJSON;
+};