# Learn Rainbows with Threejs

**URL:** <https://discourse.threejs.org/t/learn-rainbows-with-threejs/92622>\
**Category:** Showcase\
**Created:** [July 4, 2026, 1:26pm UTC](https://discourse.threejs.org/t/learn-rainbows-with-threejs/92622 "2026-07-04T13:26:33Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![kritb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kritb/32/37234_2.png) [@kritb](https://discourse.threejs.org/u/kritb)\
**Post date:** [July 4, 2026, 1:26pm UTC](https://discourse.threejs.org/t/learn-rainbows-with-threejs/92622/1 "2026-07-04T13:26:33Z")

</div>

**[demo](https://codepen.io/Christopher-Bolig/full/dPNZBxN)**

I recently refreshed my memory on how rainbows work, and that led to this…

Each drop sends light in many directions (like a mini laser pointer) but you only see the rays that happen to reach your eyes. That means you’re always standing at the tip of the cone that forms your own unique rainbow.

The code is a mess but mathematically (i think) mostly right.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/d/7/d763583df108796b44271fd355caf290fc5ae5d5.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/b/5/b5f89fcdc2ae8c5b8aabda369d9729427729f06a.jpeg)

---

<div class="post-metadata">

**Author:** ![PavelBoytchev](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pavelboytchev/32/38639_2.png) [@PavelBoytchev](https://discourse.threejs.org/u/PavelBoytchev)\
**Post date:** [July 4, 2026, 2:20pm UTC](https://discourse.threejs.org/t/learn-rainbows-with-threejs/92622/2 "2026-07-04T14:20:38Z")

</div>

Rainbows are fun, they beautifully mix reflection and refraction.

The rainbow ring in the simulation has quite narrow red and violet parts of the spectrum. Is this expected? Do you plan to add the secondary rainbow? Or supernumerary rainbows with some interference?

---

<div class="post-metadata">

**Author:** ![kritb](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/kritb/32/37234_2.png) [@kritb](https://discourse.threejs.org/u/kritb)\
**Post date:** [July 5, 2026, 1:07am UTC](https://discourse.threejs.org/t/learn-rainbows-with-threejs/92622/3 "2026-07-05T01:07:48Z")

</div>

They are great. I too think the red and violet bands look narrow (in the ring)… I think it’s because the shader blends neighboring colors, and red/violet are missing a neighbor. just my guess tho.

A secondary rainbow would be nice. Each drop location is a function of the observer\_location, color\_refraction\_angle. With pen and paper, I could get the xyz of the secondary rainbow drops, but not sure I want to do that yet, lol.

Supernumerary interference would be awesome, but this model only uses refraction angles, no wave math.