To load assets without using the AssetManager in a JavaScript environment, you can manually fetch and process each asset as shown in your example. You are already on the right track by using fetch to load the JSON and atlas files, and THREE.TextureLoader to load the PNG file. After loading the texture, you create a Spine.ThreeJsTexture and assign it to each region in the TextureAtlas. This approach is valid, but you can improve the code by ensuring that the texture assignment is done correctly and efficiently. Instead of using forEach, you can directly set the texture for each page in the atlas if all regions share the same texture.
const skeletonResponse = await fetch(skeletonFile);
const skeletonJsonRaw = await skeletonResponse.json();
const atlasResponse = await fetch(atlasFile);
const atlasText = await atlasResponse.text();
const textureLoader = new THREE.TextureLoader();
const texture = await new Promise((resolve, reject) => {
textureLoader.load(pngFile, resolve, undefined, reject);
});
const spineTexture = new Spine.ThreeJsTexture(texture);
const atlas = new Spine.TextureAtlas(atlasText);
atlas.pages.forEach((page) => {
page.setTexture(spineTexture);
});
const atlasLoader = new Spine.AtlasAttachmentLoader(atlas);
const skeletonJson = new Spine.SkeletonJson(atlasLoader);
const skeletonData = skeletonJson.readSkeletonData(skeletonJsonRaw);
This code snippet should help you load and assign textures more cleanly without using the AssetManager.
