Broken 3D model

I have bought a model from Scetchfab Strawberry Poison Dart Frog - Buy Royalty Free 3D model by NestaEric [5396adb] - Sketchfab Store

It is broken the textures are not loading and it has transparency on it…

Is is possible to fix it?

What should I do in this case I payed 35$ for it :frowning:

Try this:

model.traverse(child => {
    if(child.isMesh) {
        child.material.transparent = false;
    }
});

I tired this fixes the opacity issue but the texture is not loading.

What format do you use? What file extension?

I am using gltf, I tried the threejs viewer online version as well and the same thing happens, the texture is not loaded

does the dev tools console give any warnings or errors?

No, no errors.

Here is the model, please wait to load there is not preloader Start

And here is the model https://webdesign-flash.ro/p/emv/frog.zip

the model is a bit messed up but that’s fairly common for sketchfab. the way the shader nodes are arranged isn’t going to display anything. if i turn the materials into principled bsdf i see textures. but the bones are all warped.

Ok so I paid for nothing…

Where is is safe to buy models that work in threejs ?

Thank you so much.

well no, i think it’s fixable. i could def fix the materials. but i have little understanding of bones in blender. i did learn it once but it was so complex i forgot. it’s probably just me making a mistake. i think the glbs that you get from sketchfab are auto generated (with mistakes in them).

I have zero experience in fixing this :slight_smile:

Here’s a possible option, if you have access to the fbx version, download that, import it into blender and have a look if everything looks correct, if so proceed to export as gltf / glb maybe…

2 Likes

I have no idea how to do that :slight_smile:

OK otherwise one quick fix would be to load the textures seperately and apply them at runtime…

it’s a shame the model is buggy like that, it’s pretty nice.

2 Likes

The glTF version is fine but there are two minor issues in the Sketchfab export:

  1. It uses the KHR_materials_pbrSpecularGlossiness, which is archived/deprecated and not supported in three.js anymore.
  2. It uses alpha blending for every material, which is simply an exporter bug.

You can fix both issues quickly by dropping the model into https://gltf.report/, accepting the prompt to convert the materials from spec/gloss to metal/rough, and then running the script below in the script tab to remove alpha blending:

for (const mat of document.getRoot().listMaterials()) {
	mat.setAlphaMode('OPAQUE');
}

Then export (right-side panel) and the model will work fine in three.js.

5 Likes

scene-transformed-v1-transformed.glb (3.3 MB)

(i just did what don suggested and worked perfectly, then compressed it down some more with gltf-transform, 3.3mb is the smallest i could reach)

3 Likes

Thank you guys it works, and the model appears.

https://webdesign-flash.ro/p/emv/

The performance is bad but wired it happens only with this model, other models that I tried work perfectly,

I am using a raycaster to hide and show the markers and also use Three-mesh-bvh, but for this model with or without it I get the same frame rate which is very low, is there something wrong with the model, or what is happening?

Can you explain please what is going on please I am still learning and it is the first time I have seen this kind of graph.

Thank you.

you are intersecting the model, with a raycaster. i can’t say why it creates that much overhead, this isn’t normal and i doubt that this little model can cause it, but it’s where you need to look. you find the tool in chrome devtools > performance, it’s vital for debugging.