# How to render a diamond properly with three js

**URL:** <https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900>\
**Category:** Questions\
**Tags:** refraction\
**Created:** [June 3, 2019, 1:11pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900 "2019-06-03T13:11:01Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![twlick](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@twlick](https://discourse.threejs.org/u/twlick)\
**Post date:** [June 3, 2019, 1:11pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/1 "2019-06-03T13:11:01Z")

</div>

I am trying a render a diamond with three js. I tried using refraction envMap but the result is not so good. I tried using the texture of the diamond itself. But it looks more like a glass in diamond shape. i also tried the fresnel shader but the result is not even near what i expect

Can anyone suggest me way do it correctly?

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [June 3, 2019, 1:13pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/2 "2019-06-03T13:13:52Z")

</div>

Hi!  
Reminded me about this showcase: [Real Time Diamond Rendering](https://discourse.threejs.org/t/real-time-diamond-rendering/4284)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 3, 2019, 1:43pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/3 "2019-06-03T13:43:05Z")

</div>

Unfortunately, the code is not open source.

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 3, 2019, 1:44pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/4 "2019-06-03T13:44:11Z")

</div>

Maybe this official example is a good starting point:

[https://threejs.org/examples/webgl\_materials\_reflectivity.html](https://threejs.org/examples/webgl_materials_reflectivity.html)

---

<div class="post-metadata">

**Author:** ![twlick](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@twlick](https://discourse.threejs.org/u/twlick)\
**Post date:** [June 3, 2019, 2:16pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/5 "2019-06-03T14:16:21Z")

</div>

I tried it but it’s more like the glass efect and i’m trying with refraction : [https://threejs.org/examples/webgl\_materials\_cubemap\_refraction.html](https://threejs.org/examples/webgl_materials_cubemap_refraction.html)

---

<div class="post-metadata">

**Author:** ![twlick](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@twlick](https://discourse.threejs.org/u/twlick)\
**Post date:** [June 7, 2019, 10:41am UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/6 "2019-06-07T10:41:46Z")

</div>

Sorry for the absense,  
I got the perfect effect of diamond on a three js example with TorusKnotBufferGeometry.  
when i put the refraction envMap and a map with same texture of diamond…  
**i uploaded it to a github repo -**

> **[twlick/diamond\_three](https://github.com/twlick/diamond_three)**
>
> Contribute to twlick/diamond\_three development by creating an account on GitHub.

  
Can anyone check it please?  
if i set the color to white, envMap to refraction, map and alpha map to the texture, it shows a excellent result  
but when i tried to load the diamond.obj with OBJLoader.js from models folder, it does show the refraction but not the map. map texture is actually necessary to give it the look of a diamond. i’m not a advanced user of three js.

Can anyone help please?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 7, 2019, 12:35pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/7 "2019-06-07T12:35:22Z")

</div>

`diamond.obj` does not have any texture coordinates so using it with textures does not work. `diamond2.obj` defines texture coordinates but all uv pairs have the same value `0.000000 1.000000`. Texture mapping won’t work with these vertex data, too.

---

<div class="post-metadata">

**Author:** ![twlick](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@twlick](https://discourse.threejs.org/u/twlick)\
**Post date:** [June 7, 2019, 12:40pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/8 "2019-06-07T12:40:20Z")

</div>

Then how can i construct a model with the properties it needed to put texture map corrcetyly?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [June 7, 2019, 1:20pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/9 "2019-06-07T13:20:23Z")

</div>

You should author the 3D model in a tool like Blender and ensure that the texture is correctly projected onto the geometry. There are many existing tutorials that explain the process of uv-editing. Just give Google a try 😉

---

<div class="post-metadata">

**Author:** ![twlick](https://avatars.discourse-cdn.com/v4/letter/t/6bbea6/32.png) [@twlick](https://discourse.threejs.org/u/twlick)\
**Post date:** [June 7, 2019, 1:27pm UTC](https://discourse.threejs.org/t/how-to-render-a-diamond-properly-with-three-js/7900/10 "2019-06-07T13:27:27Z")

</div>

I will try it now, diamond2.obj i took from another site but diamond.obj i made in blender. i just took a cylinder then sub part it. The problem might occur when i added glass bswf material on it. then i exported it. i don’t have idea on uv editing, but i’ll search that.  
Thank you