# How to recreate texture envMap functionallty in scene

**URL:** <https://discourse.threejs.org/t/how-to-recreate-texture-envmap-functionallty-in-scene/44746>\
**Category:** Questions\
**Tags:** textures, editor\
**Created:** [November 15, 2022, 6:51pm UTC](https://discourse.threejs.org/t/how-to-recreate-texture-envmap-functionallty-in-scene/44746 "2022-11-15T18:51:18Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![nprekas2000](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/nprekas2000/32/31068_2.png) [@nprekas2000](https://discourse.threejs.org/u/nprekas2000)\
**Post date:** [November 15, 2022, 6:51pm UTC](https://discourse.threejs.org/t/how-to-recreate-texture-envmap-functionallty-in-scene/44746/1 "2022-11-15T18:51:19Z")

</div>

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

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/2/324b89eecaa1f431ca0e52b01b2c5d07f8697f22.png)

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)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/c/5c881b8c3c11a61325829e37f900750202672a19.jpeg)

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?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [December 4, 2022, 5:31pm UTC](https://discourse.threejs.org/t/how-to-recreate-texture-envmap-functionallty-in-scene/44746/2 "2022-12-04T17:31:11Z")

</div>

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](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.

---

<div class="post-metadata">

**Author:** ![drcmda](https://avatars.discourse-cdn.com/v4/letter/d/91b2a8/32.png) [@drcmda](https://discourse.threejs.org/u/drcmda)\
**Post date:** [December 4, 2022, 10:44pm UTC](https://discourse.threejs.org/t/how-to-recreate-texture-envmap-functionallty-in-scene/44746/3 "2022-12-04T22:44:58Z")

</div>

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:

> **[Diamond ring - CodeSandbox](https://codesandbox.io/s/diamond-ring-4gy946)**
>
> Diamond ring by drcmda using @react-three/drei, @react-three/fiber, @react-three/postprocessing, @types/three, lamina, react, react-colorful, react-dom, react-scripts

> **[Diamond refraction - CodeSandbox](https://codesandbox.io/s/diamond-refraction-zqrreo)**
>
> Diamon refraction material

the material is open source: [drei/MeshRefractionMaterial.tsx at f47a8fdf6ef959bf0dea2a4356a07d27168dc6fc · pmndrs/drei · GitHub](https://github.com/pmndrs/drei/blob/f47a8fdf6ef959bf0dea2a4356a07d27168dc6fc/src/materials/MeshRefractionMaterial.tsx)

and [GitHub - N8python/diamonds](https://github.com/N8python/diamonds) which is the original but i think it’s slightly behind in features now