FBXLoader.loadAsync is not waiting for the object's texture to load

Questions
, ,
1

The 3D model renders black at first and later their texture/png image loads on the model. I need to render the 3d with full texture without black image shown first. If I use loadasync, it waits just for the object to render and not the texture.
Here’s the code snippet:

const loader = new FBXLoader()
const [obj1, obj2]= await Promise.all([
loader.loadAsync(‘/beanbag.fbx’),
loader.loadAsync(‘/model.fbx’)
]).catch(error => {console.error(error)});

obj1.position.y = 6
obj2.position.y = 6
obj1.scale.set(0.01, 0.01, 0.01)
obj2.scale.set(0.01, 0.01, 0.01)

scene.add(obj1, obj2);

const canvas = document.querySelector(‘.webgl’)

const renderer = new THREE.WebGLRenderer({
canvas,
antialias: true
})
renderer.setSize(sizes.width, sizes.height)
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))
renderer.setClearColor(0xf8a5c2)
renderer.outputEncoding = THREE.sRGBEncoding
renderer.shadowMap.enabled = true

2

Please help me with this.

3

try good old way with the LoadingManager - if they pass it to TextureLoader, it will wait.

4

But how to combine it with fbx, I mean there’s no way to extract the fbx model’s texture separately right?

5

no I mean if you do new FBXLoader(manager) then FBXLoader will probably do new TextureLoader(manager) inside itself, and then you can be notified by manager when both are done

1 Like
6

Not really sure how to implement this, do you have any example?

7

here

1 Like