# Refraction example

**URL:** <https://discourse.threejs.org/t/refraction-example/17087>\
**Category:** Questions\
**Tags:** refraction\
**Created:** [July 14, 2020, 1:45pm UTC](https://discourse.threejs.org/t/refraction-example/17087 "2020-07-14T13:45:14Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![juanchomogi](https://avatars.discourse-cdn.com/v4/letter/j/7ba0ec/32.png) [@juanchomogi](https://discourse.threejs.org/u/juanchomogi)\
**Post date:** [July 14, 2020, 1:45pm UTC](https://discourse.threejs.org/t/refraction-example/17087/1 "2020-07-14T13:45:14Z")

</div>

Is there a good and up to date example about refraction? So far I found only this one but is using version 60. [https://stemkoski.github.io/Three.js/Refraction.html](https://stemkoski.github.io/Three.js/Refraction.html)

Thanks in advance

---

<div class="post-metadata">

**Author:** ![mjurczyk](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mjurczyk/32/10995_2.png) [@mjurczyk](https://discourse.threejs.org/u/mjurczyk)\
**Post date:** [July 14, 2020, 2:08pm UTC](https://discourse.threejs.org/t/refraction-example/17087/2 "2020-07-14T14:08:38Z")

</div>

There are quite a few in official examples -\> [https://threejs.org/examples/?q=refraction](https://threejs.org/examples/?q=refraction)

(Keep in mind - afair someone mentioned `Refractor` works only on flat surfaces. So if you’d like to do refraction as on the example you sent, you probably need to use cube maps with mapping.)

---

<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:** [July 14, 2020, 2:50pm UTC](https://discourse.threejs.org/t/refraction-example/17087/3 "2020-07-14T14:50:41Z")

</div>

The pendant to the Stemkoski example is:

[https://threejs.org/examples/webgl\_materials\_cubemap\_balls\_refraction](https://threejs.org/examples/webgl_materials_cubemap_balls_refraction)

`THREE.Refractor` provides real-time refractions for flat surfaces and is more expensive than just using an environment map with `CubeRefractionMapping`.