refactor(reactive): enhance GLTF serialization

.changeset/dull-dryers-relax.md

@@ -0,0 +1,13 @@
+---
+"with-reactive": patch
+---
+
+# Logs
+
+## refactor(reactive): enhance `GLTF` serialization
+
+- Add GLTF transferable data to the worker
+  - animations (`AnimationClipJSON[]`)
+  - cameras (`Camera[]`)
+  - parser (`{ json: GLTFParser["json"] }`)
+  - scenes (`Group[]`)

package.json

@@ -28,7 +28,7 @@
 		"@eslint/eslintrc": "^3.1.0",
 		"@eslint/js": "^9.17.0",
 		"@quick-threejs/config": "workspace:*",
-		"@swc/core": "^1.9.3",
+		"@swc/core": "^1.10.4",
 		"@types/eslint__js": "^8.42.3",
 		"eslint": "^9.17.0",
 		"globals": "^15.14.0",

packages/reactive/package.json

@@ -57,7 +57,7 @@
 		"@quick-threejs/config": "workspace:*",
 		"@types/events": "^3.0.3",
 		"@types/jest": "^29.5.14",
-		"@types/node": "^22.9.0",
+		"@types/node": "^22.10.2",
 		"@types/stats.js": "^0.17.3",
 		"@types/three": "^0.171.0",
 		"babel-jest": "^29.7.0",
@@ -66,6 +66,7 @@
 		"reflect-metadata": "^0.2.2",
 		"ts-jest": "^29.2.5",
 		"ts-node": "^10.9.2",
-		"tsyringe": "^4.8.0"
+		"tsyringe": "^4.8.0",
+		"vite": "^6.0.3"
 	}
 }

packages/reactive/src/core/app/loader/loader.controller.ts

@@ -7,6 +7,8 @@ import {
 	LoadedResourcePayload,
 	LOADER_SERIALIZED_LOAD_TOKEN
 } from "../../../common";
+import { AnimationClip, AnimationClipJSON, Camera, Group } from "three";
+import { GLTF, GLTFParser } from "three/examples/jsm/loaders/GLTFLoader";
 
 @scoped(Lifecycle.ResolutionScoped)
 export class LoaderController {
@@ -28,12 +30,28 @@ export class LoaderController {
 			const { payload } = event.data || {};
 
 			if (!!payload?.resource && payload.source.type === "gltfModel") {
-				const resource = payload.resource as any;
-				const scene = deserializeObject3D(resource?.scene as string);
+				const resource = payload.resource as unknown as {
+					animations?: AnimationClipJSON[];
+					cameras?: string[];
+					parser?: Partial<GLTFParser> & { json: GLTFParser["json"] };
+					scene?: string;
+					scenes?: string[];
+					userData?: GLTF["userData"];
+				};
+				const animations = resource.animations?.map((animation) =>
+					AnimationClip.parse(animation)
+				);
+				const cameras = resource.cameras?.map(
+					(camera) => deserializeObject3D(camera) as Camera
+				);
+				const scene = deserializeObject3D(resource?.scene || "") as Group;
+				const scenes = resource.scenes?.map(
+					(scene) => deserializeObject3D(scene) as Group
+				);
 
 				return {
 					...payload,
-					resource: { ...resource, scene }
+					resource: { ...resource, animations, cameras, scene, scenes }
 				} as LoadedResourcePayload;
 			}
 

packages/reactive/src/core/register/loader/loader.controller.ts

@@ -1,14 +1,15 @@
 import { serializeObject3D } from "@quick-threejs/utils";
 import { filter, map, Observable, share, Subject } from "rxjs";
 import { GLTF } from "three/examples/jsm/loaders/GLTFLoader";
-import { VideoTexture } from "three";
+import { AnimationClipJSON, VideoTexture } from "three";
 import { inject, singleton } from "tsyringe";
 
 import {
 	LoadedResourcePayload,
 	SerializedLoadedResourcePayload
 } from "../../../common/interfaces/loader.interface";
 import { LoaderService } from "./loader.service";
+import { JsonSerializable } from "threads";
 
 @singleton()
 export class LoaderController {
@@ -37,8 +38,17 @@ export class LoaderController {
 					const _resource = payload.resource as GLTF;
 
 					resource = {
-						userData: _resource.userData,
-						scene: serializeObject3D(_resource.scene)
+						animations: (payload?.resource as GLTF).animations.map(
+							// @ts-ignore <<toJSON methods doesn't require a parameter>>
+							(animation) => animation.toJSON() as AnimationClipJSON
+						) as unknown as JsonSerializable,
+						cameras: _resource.cameras.map((camera) =>
+							serializeObject3D(camera)
+						),
+						parser: { json: _resource.parser.json },
+						scene: serializeObject3D(_resource.scene),
+						scenes: _resource.scenes.map((scene) => serializeObject3D(scene)),
+						userData: _resource.userData
 					};
 				}