giers10/webeditor3d
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Configure GLTFLoader with DRACOLoader

Browse Source
This commit is contained in:
Victor Giers
2026-04-02 20:28:07 +02:00
parent c16048bb18
commit 351d5a32f3
1 changed files with 23 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/assets/gltf-model-import.ts
View File

@@ -1,4 +1,5 @@
import { Box3, Group, Mesh, type AnimationClip, type Material, type Object3D, type Texture } from "three"; import { Box3, Group, Mesh, type AnimationClip, type Material, type Object3D, type Texture } from "three";
import { DRACOLoader } from "three/examples/jsm/loaders/DRACOLoader.js";
import { GLTFLoader, type GLTF } from "three/examples/jsm/loaders/GLTFLoader.js"; import { GLTFLoader, type GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
import { clone as cloneSkeleton } from "three/examples/jsm/utils/SkeletonUtils.js"; import { clone as cloneSkeleton } from "three/examples/jsm/utils/SkeletonUtils.js";
@@ -28,6 +29,10 @@ interface ImportedModelFileSet {
totalByteLength: number; totalByteLength: number;
} }
const DRACO_DECODER_PATH = "/draco/gltf/";
let sharedDracoLoader: DRACOLoader | null = null;
export interface LoadedModelAsset { export interface LoadedModelAsset {
assetId: string; assetId: string;
storageKey: string; storageKey: string;
@@ -328,10 +333,25 @@ function createModelAssetRecord(
} }
async function loadGltfFromArrayBuffer(arrayBuffer: ArrayBuffer): Promise<GLTF> { async function loadGltfFromArrayBuffer(arrayBuffer: ArrayBuffer): Promise<GLTF> {
const loader = new GLTFLoader(); const loader = createConfiguredGltfLoader();
return loader.parseAsync(arrayBuffer, ""); return loader.parseAsync(arrayBuffer, "");
} }
function createConfiguredGltfLoader(): GLTFLoader {
const loader = new GLTFLoader();
loader.setDRACOLoader(getSharedDracoLoader());
return loader;
}
function getSharedDracoLoader(): DRACOLoader {
if (sharedDracoLoader === null) {
sharedDracoLoader = new DRACOLoader();
sharedDracoLoader.setDecoderPath(DRACO_DECODER_PATH);
}
return sharedDracoLoader;
}
function createDataUrlForStoredFile(file: ProjectAssetStorageFileRecord): string { function createDataUrlForStoredFile(file: ProjectAssetStorageFileRecord): string {
const byteArray = new Uint8Array(file.bytes); const byteArray = new Uint8Array(file.bytes);
let binary = ""; let binary = "";
@@ -623,7 +643,7 @@ async function loadGltfFromImportedModelFileSet(fileSet: ImportedModelFileSet):
throw new Error(`Missing external model resource(s): ${missingUris.join(", ")}.`); throw new Error(`Missing external model resource(s): ${missingUris.join(", ")}.`);
} }
const loader = new GLTFLoader(); const loader = createConfiguredGltfLoader();
try { try {
return await loader.parseAsync(JSON.stringify(gltfJson), ""); return await loader.parseAsync(JSON.stringify(gltfJson), "");
@@ -758,7 +778,7 @@ export async function loadModelAssetFromStorage(
throw new Error(`Missing stored external model resource(s): ${missingUris.join(", ")}.`); throw new Error(`Missing stored external model resource(s): ${missingUris.join(", ")}.`);
} }
const loader = new GLTFLoader(); const loader = createConfiguredGltfLoader();
try { try {
const gltf = await loader.parseAsync(JSON.stringify(gltfJson), ""); const gltf = await loader.parseAsync(JSON.stringify(gltfJson), "");