Using r3f to import and display a GTLF file exported from blender but can't seem to get my "glass" material to work

[maxfelker]

Looks like I'm the first here in r3f discussion land - HELLO WORLD!

I have a simple .blend file that has glass-like refraction material using transmission based on this youtube video . Looks great in Blender but when I export it to GLTF and bring that in via the loader per the docs, it doesn't seem to bring the materials. After doing some reading, the conclusion I came to is that the GLTF exporter doesn't support this type of material export.

It's not a bug or an issue with this code but I'm not really sure how to proceed. What alternatives or suggestions do people recommend?

[drcmda]

transmission isn't possible in the web, i believe it needs a raytracer. it's not exported in the gltf. if it's just about transparency you need to switch the materials alpha blend property from opaque to something else.

[maxfelker]

@drcmda thanks for the quick response - that's what I was learning in my research. I did find this refraction example in the r3f repo which is exactly what I want:

https://github.com/react-spring/react-three-fiber/blob/master/examples/src/demos/Refraction.js

I'm working from this and will post back once I've either achieved it or hit a way 😂 thanks again!

[drcmda]

yep, thats a shader. but it would certainly work. here's the sandbox: https://codesandbox.io/s/r3f-floating-diamonds-prb9t

[maxfelker]

Followed the demo and had trouble with my custom model. After importing diamond.glb into Blender, I saw that it did not have a material assigned to it. Once I removed the textures in Blender from my custom model and exported to .glb, I was able to get everything working as expected.

Thanks again @drcmda !