How to recreate texture envMap functionallty in scene

For weeks now I’m trying to load a ring model inside three js and finally had some decent results using an obj export of the model and the three.js online editor

Tried publishing the scene from the editor and loading the scene as json however the loading time is really bad due to duplicate materials. So I’m now trying to load the model and the textures without using the editor and got to some results but I cannot seem to find a way to recreate the envMap texture functionality. (diamond texture)

I’ve already tried .background = as well as .envMap = , but I believe I need to do something else.

Does anyone have more knowledge on the subject?

We have a large number of examples on the site that use environment maps, something like this would be a good reference:

https://threejs.org/examples/?q=gltf#webgl_loader_gltf

Beyond that I would recommend sharing enough detail that someone can reproduce the problem very quickly. Can’t suggest what might be wrong from screenshots of the finished material alone, and lots of material properties may be lost depending on your export/import format choices.

i don’t think you can get realistic or even just good looking diamond refraction with just an env map - and i’ve tried. diamonds need a shader material that emulates light traveling through the faces and bouncing off on them, as well as shifting light into separate rgb beams.

like this:

the material is open source: drei/MeshRefractionMaterial.tsx at f47a8fdf6ef959bf0dea2a4356a07d27168dc6fc · pmndrs/drei · GitHub

and GitHub - N8python/diamonds which is the original but i think it’s slightly behind in features now