Problem with gltf when importing to three.js

0
votes

Im working on a project for my schoolwork and im having a problem with importing gltf file in three.js. I make my gltf files with blender 2.9. So if i export gltf separate (+bin+textures) i can import a model with gltf loader but the problem is that textures that are meant to be transparent are not, even if i test the file on the online gltf loader they arent transparent. But if i export as embedded gltf everything works correctly on the online gltf viewer but in my project i get this error:

Uncaught (in promise) error { target: img, isTrusted: true, srcElement: img, eventPhase: 0, bubbles: false, cancelable: false, returnValue: true, defaultPrevented: false, composed: false, timeStamp: 768, … }

Does anyone have any idea whats wrong? I spent hours now trying different stuff and im almost sure that my node setup in blender is correct as i read some forums and also official documntation on Blender. Or maybe is there anything i can fix with separate exported gltf to make transparency working?

Thanks

2
three.jstransparencygltf
If you can share a .blend that follows the Blender exporter documentation but doesn't appear correctly in glTF viewers when exported, it would be worth filing a bug on github.com/KhronosGroup/glTF-Blender-IO. For a glTF model that looks OK in a viewer but not in your code, you may need to share that code, or try asking on the forums of whatever WebGL engine you're using (discourse.threejs.org for three.js). – Don McCurdy
Also, what version of Three.js are you using? The online editor uses the latest, which is r122. You might have an older version in your project that may not have all the features that the editor does. – Marquizzo

2 Answers

0
votes

try adding in renderer({alpha:true}) to add the posibility of transparentnes im not sure but it should work

please add your code to see if something else is wrong with code

0
votes

Thanks everyone for your answers. I managed to fix the problem now with the separate gltf version by adding these two line to the renderer:

    gl.enable(gl.BLEND);
    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);

Then I was able to see through the texture but only things that were part of the same object in Blender everything else was white but then i figured out it was beacause this object was one of the first to be drawn thats why i guess it took canvas white color instead of the objects in the background. Thanks again