[ts][threejs] fail to require assets

[GMCY2020]

I want to use pnpm vue three spine-threejs to show spine’s demo in web.

First, I use three to show a cube is ok, and, I import spine

import * as spine from '@esotericsoftware/spine-threejs'

when I use spine.AssetManager to load spine's datas

assetManager = new spine.AssetManager(baseUrl) // this is ok, I can see this down here

but

const atlas = assetManager.require(atlasFile)

But in fact, atlas exists.

demo is here, only one page spine-threejs-test-copy.zip

[davidetan]

Hello and thanks for reaching us :)

I've just looked at your code. This is not a bug. You are requiring an asset that has not been loaded yet. You have to wait for the assets to be loaded. Unfortunately, loadText and loadTextureAtlas have not a promisied version, you have to pass them a callback.

Here an example on what you can do based on your code:

const initSpine = async () => {
  assetManager = new spine.AssetManager(baseUrl)
  const wait = [
    new Promise(resolve => assetManager.loadText(skeletonFile, resolve)),
    new Promise(resolve => assetManager.loadTextureAtlas(atlasFile, resolve))
  ]

 .....

  console.log(assetManager.isLoadingComplete()) // here the assets are not loaded yet
  await Promise.all(wait)                       // we wait the assets to be loaded
  console.log(assetManager.isLoadingComplete()) // here assets are loaded

  const atlas = assetManager.require(atlasFile) // now you can safely require the asset.

 .....
}

[GMCY2020]

You're amazing. Thank you so much. I've been trying all afternoon.

[davidetan]

You're welcome :) If you need any additional help on using our runtimes you can ask questions on our forum.

Issues on github are generally for bug, interesting feature requests, ...

[GMCY2020]

I want to ask question in your forum.

But

So. I'm Sorry. I ask questions here.

Last time, with your help, the spine files you provided could be displayed on the website normally. But when I want to use another spine files, the animations in this json file are empty, but there are extra fields.

const atlas = assetManager.require(atlasFile)
const atlasLoader = new spine.AtlasAttachmentLoader(atlas)
let skeletonJson = new spine.SkeletonJson(atlasLoader)
skeletonJson.scale = 0.37
let skeletonData = skeletonJson.readSkeletonData(assetManager.require(skeletonFile))
let skeletonMesh = new spine.SkeletonMesh(skeletonData, (parameters) => {
  parameters.depthTest = true
  parameters.depthWrite = true
  parameters.alphaTest = 0.001
})
// Normally, this would allow to invoke the animation
// But the file I want to use is empty 
skeletonMesh.state.setAnimation(0, 'animation', true)

and I

console.log(skeletonData)

I find transformConstraints and extra correspond one to one, but I've tried a lot of methods that still don't work

[davidetan]

@GMCY2020 I'll investigate why you cannot start a discussion on the forum.

Regarding the file you just shown, I don't recognize the extra field. You have that error on setAnimation because the file does not have any animation.

Where did you get that file from?

[NathanSweet]

@GMCY2020 You need to confirm your email address to enable posting on the forum.

[GMCY2020]

Yes, I clicked on my email taht is ok. I fast thought you had temporarily turned off the Posting function.

/_ \

Next Time I will ask question on the forum.

And that file is from mihoyo's web. Their work is so amazing that I want to try and study it.

loading_processing.zip

[davidetan]

Yes, I clicked on my email taht is ok. I fast thought you had temporarily turned off the Posting function.

/_ \

Next Time I will ask question on the forum.

And that file is from mihoyo's web. Their work is so amazing that I want to try and study it.

loading_processing.zip

When I click on the attachment, I get a "Not Found".

[GMCY2020]

I uploaded a new one. This is strange. It's accessible as I write it. (ノへ￣、)

loading_processing.zip

[davidetan]

I uploaded a new one. This is strange. It's accessible as I write it. (ノへ￣、)

loading_processing.zip

Now I can download it. However, I can only confirm that the asset you just uploaded did not have Spine animations information into it. Moreover, they have this extra fields that they maybe use for other things.

One additional thing: the asset you uploaded, as the name suggest, seems like a horizontal bar for a loading process. Is that the file you wanted to share? I found some assets on their website that can be easily opened into Spine.

[GMCY2020]

Yes, this file is what I want to try.

This file is a progress bar, it has no animation, but it has extra, and the extra is used to control the progress, but I will not use it. At first I thought this extra field was something like animation that you team defined in json file.

However, I searched this afternoon and found that it was mihoyo's own definition. Most of their assets are easy to use in spine, but the one I want to try has an extra field. <(＿　＿)>

So, sorry for the delay, this is not the content of spine-threejs. So, I might try something else.

Finally, thank you very much for your answer.