ObjectLoader does not work when used after preloading model files about enable3d

[yandeu]

Thanks for reporting. I will have a closer look once in my office.

[yandeu]

I could not reproduce this error. The code below works fine.

class MainScene extends Scene3D {
  async preload() {
    await this.load.preload('man', '/assets/box_man.glb')
  }

  async create() {
    this.warpSpeed()

    this.load.gltf('man').then(gltf => {
      const child = gltf.scene.children[0]
      child.position.setX(-1)
      this.scene.add(child)
    })

    this.load.gltf('man').then(gltf => {
      const child = gltf.scene.children[0]
      child.position.setX(1)
      this.scene.add(child)
    })
  }
}

[PtrBld]

Hi, sorry this is not what I meant. See example code below:

Working:

this.third.load.preload('ground', 'assets/ground.json');
this.third.load.preload('robot', 'assets/robot.glb');

this.third.load.object('ground').then((object) => {
  //anything
});

Not working:

this.third.load.preload('robot', 'assets/robot.glb');
this.third.load.preload('ground', 'assets/ground.json');

this.third.load.object('ground').then((object) => {
  //anything
});

Error message:
THREE:ObjectLoader: Can't parse assets/OBJ/ground.json. Unexpected token 'o', "[object ArrayBuffer]" is not valid JSON

As I said this is because line 66 in loaders.ts the responsetype is set to 'arraybuffer' for all files that are preloaded afterwards (in this case after robot.glb).

[yandeu]

I see. I guess this would fix it?

public async preload(key: string, url: string) {
  this.cache.add(key, url)

  return new Promise(resolve => {
    const isModel = /\.fbx$|\.glb$|\.gltf$/.test(url)
    const isTexture = /\.jpe?g$|\.png$/.test(url)

    if (isTexture) {
      this.textureLoader.load(url, texture => {
        return resolve(texture)
      })
    } else {
      if (isModel) this.fileLoader.setResponseType('arraybuffer')
+     else this.fileLoader.setResponseType('undefined')
      this.fileLoader.load(url, file => {
        return resolve(file)
      })
    }
  })
}

[PtrBld]

Yes, that should do it. However, I think undefined without quotations would be better.

[yandeu]

The responseType can be undefined or string, but setResponseType only takes a string.
See https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/loaders/FileLoader.d.ts

[PtrBld]

True. Thanks for your help!

[psociety]

This also seems to happen if you use load twice for the same fbx:

let object;
const key = 'assets/fbx/Male.fbx'

object = await this.third.load.fbx(key);
object = await this.third.load.fbx(key);

It cries with a:

three.module.js:43861 Uncaught (in promise) TypeError: url.lastIndexOf is not a function
    at LoaderUtils.extractUrlBase (three.module.js:43861:1)
    at FBXLoader.load (FBXLoader.js:79:51)
    at loaders.js:157:1
    at new Promise (<anonymous>)
    at Loaders.fbx (loaders.js:156:1)

enable3d v0.25.4
Phaser v3.55.2 (WebGL | Web Audio)

[yandeu]

Try to preload your fbx file first.

[psociety]

I cannot preload it, because the file to be loaded is dynamic (the name i set was an example).
Ex: multiplayer with 50 different avatars, not going to preload all of them.

This is my workaround:

// enable3d has a bug where FBXs can't be loaded more than once
  // as they are saved as ArrayBuffers on cache
async loadFBX (key: string) {
    if (this.currentScene.third.cache.get(key)) {
        return await this.currentScene.third.load._fbxLoader.parse(this.currentScene.third.cache.get(key));    
    }
    return await this.currentScene.third.load.fbx(key);
  }