# Refracting glass sphere, how to add some reflection

**URL:** <https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326>\
**Category:** Questions\
**Tags:** refraction\
**Created:** [October 31, 2020, 11:32am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326 "2020-10-31T11:32:59Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [October 31, 2020, 11:32am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/1 "2020-10-31T11:32:59Z")

</div>

Hi there,  
recently I created a panoramic viewer with a reflecting glass sphere in the centre:

> **[Image On Sphere](https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-2.html)**

  
As a next step I tried to make the sphere transparent and refracting instead of reflecting. Struggled for hours and finally found out that there was a simple solution:  
Simply use THREE.EquirectangularRefractionMapping instead of THREE.EquirectangularReflectionMapping:  

> **[Image On Sphere](https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-3.html)**

  
However there is one issue left: When looking at real glass spheres, e. g. here:  

> **[hintergrund in 2020 | Nature photography, Art photography, Amazing photography](https://www.pinterest.de/pin/764204630513190763/)**
>
> Jul 21, 2020 - This Pin was discovered by Stella. Discover (and save!) your own Pins on Pinterest

  
it’s obvious that my virtual version is not really realistic. On the real sphere there is some reflection on top.  
Is there a way to simulate this effect too?  
Best regards - Ulrich

---

<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:** [October 31, 2020, 12:26pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/2 "2020-10-31T12:26:03Z")

</div>

Some comments regarding your code:

- Setting `toneMappingExposure` without defining no tone mapping type has no effect.
- For an unlit scene like yours, use `MeshBasicMaterial` and not an expensive PBR material like `MeshPhysicalMaterial`.
- I’m not sure why but the refractions of your sphere are flipped. It should actually look like in this [example](https://threejs.org/examples/webgl_materials_cubemap_balls_refraction).
- There is no need to make the material double sided and transparent.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [October 31, 2020, 1:46pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/3 "2020-10-31T13:46:18Z")

</div>

Hi Mugen87, thanks for these hints, I modified my code accordingly.  
Regarding the flipping: This is just the effect I intended to achieve. A real glass sphere does it the same way. Have a look at the photos on Pinterest.

My latest version:

> **[Image On Sphere](https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-4-switch.html)**

Any ideas how to make the refracting version more realistic? I mean the faint bright light on top. I suspect I would have to add another sphere with a solid surface and some light. However I don’t know how to combine both.

---

<div class="post-metadata">

**Author:** ![gonnavis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gonnavis/32/11428_2.png) [@gonnavis](https://discourse.threejs.org/u/gonnavis)\
**Post date:** [October 31, 2020, 5:12pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/4 "2020-10-31T17:12:17Z")

</div>

One solution may be screen-space-reflection + screen-space-refraction.

There are already many implementations listed below, but I’m making my own implementation suit with latest three.js and can use with WebGL1, now just [**screen-space-reflection**](https://github.com/mrdoob/three.js/pull/20156), intend to make screen-space-refraction next.

> **[gkjohnson/threejs-sandbox](https://github.com/gkjohnson/threejs-sandbox/tree/master/screenSpaceReflectionsPass)**
>
> Set of experiments and extensions to THREE.js. Contribute to gkjohnson/threejs-sandbox development by creating an account on GitHub.

  

> **[Screen Space Refraction | 3D Game Shaders For Beginners](https://lettier.github.io/3d-game-shaders-for-beginners/screen-space-refraction.html)**
>
> Interested in adding textures, lighting, shadows, normal maps, glowing objects, ambient occlusion, reflections, refractions, and more to your 3D game? Great! 3D Game Shaders For Beginners is a collection of shading techniques that will take your game...

  

> **[Document](https://domenicobrz.github.io/webgl/projects/SSRefractionDepthPeeling/)**

  

> **[WebGL Water](http://madebyevan.com/webgl-water/)**

  
https://sketchfab.com/models/03f5946bbf884d70a4dd88f1df6a380e/embed?

---

<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:** [October 31, 2020, 6:35pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/5 "2020-10-31T18:35:34Z")

</div>

I don’t think SSR is appropriate for this use case.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [October 31, 2020, 6:53pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/6 "2020-10-31T18:53:39Z")

</div>

Hi gonnavis and thanks for this info. Seems to be a complex subject and I’m not shure if my skills are sufficient to dive into.

When I look at real photos of a glass sphere closely it seems to me that there is a combination of refraction and reflection: In the center the sphere is transparent while near to the border the background is reflected. Just like the surface of the virtual water: When the viewing angle is large, it’s transparent and when the angle is small the water is reflecting. Not shure if it’s possible to simulate this by use of three.js.

Best regards - Ulrich

---

<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:** [October 31, 2020, 7:48pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/7 "2020-10-31T19:48:02Z")

</div>

This kind of physically correct rendering will be hard to achieve. I have not seen it before with any type of realtime 3D engine. You probably need raytracing for this.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [October 31, 2020, 8:23pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/8 "2020-10-31T20:23:50Z")

</div>

Yes, shurely this is true. The water demos are looking fine, however a sphere is apparently more difficult to make as it’s not flat.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [October 31, 2020, 8:27pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/9 "2020-10-31T20:27:12Z")

</div>

In contrast, shining light was fairly easy. The illuminated surface could be merged with the refraction or reflection but this was not what was in my mind and was visible on the photos of real spheres.

---

<div class="post-metadata">

**Author:** ![gonnavis](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gonnavis/32/11428_2.png) [@gonnavis](https://discourse.threejs.org/u/gonnavis)\
**Post date:** [November 1, 2020, 2:51am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/10 "2020-11-01T02:51:44Z")

</div>

> [@Sempervivum](#):
>
> In the center the sphere is transparent while near to the border the background is reflected. Just like the surface of the virtual water: When the viewing angle is large, it’s transparent and when the angle is small the water is reflecting. Not shure if it’s possible to simulate this by use of three.js.

This is called **Fresnel Effect** , I implemented it using a very simple dot calculation ( [commit](https://github.com/mrdoob/three.js/pull/20156/commits/da39b1765b6b678dd32a5c66a4d608ffef13078b) ). Should not be physically correct, but I think the feeling is ok.

```javascript
float fresnel=(dot(viewIncidenceDir,viewReflectDir)+1.)/2.;
op*=fresnel;

```

[Demo,](http://gonnavis.com/lib/three.js_github_gonnavis/examples/webgl_postprocessing_ssr.html) [Demo2,](http://gonnavis.com/lib/three.js_github_gonnavis/examples/physics_ammo_volume_ssr.html) [Demo3](http://gonnavis.com/lib/three.js_github_gonnavis/examples/webgl_animation_keyframes_ssr.html)

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/30f13732ba45df211a3e2cb039bc56520454ba8d.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/a/a7b06ecd27d24081231c2c2c82c1a6223069d3ae.jpeg)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/7255401ccadba2a78180fcc342b69f28bb95e592.jpeg)

---

<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:** [November 1, 2020, 6:17am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/11 "2020-11-01T06:17:11Z")

</div>

Hm, did I miss the point why you couldn’t use [refraction envmap](https://threejs.org/examples/?q=env#webgl_materials_envmaps) ?

Even more, if you combine what @Mugen87 and @gonnavis said (maybe except SSR) you should be able to create a realistic glass ball like in the pinterest you linked.

1. You don’t need opacity / transparency at all, the ball you linked is 100% opaque refraction (the reflections you see on it are not transparency, it’s a reflection environment mapping, transparency will result in a flat reflection.)
2. It should be quite simple to create a fragment shader that mixes [refraction envmap](https://threejs.org/examples/?q=env#webgl_materials_envmaps) with reflection envmap (same example, just toggle the switch on the right, it’s just 2 textures with different mapping).
3. If you’d like edges to fade to some color opaque (ie. fresnel) you can also mix in [fresnel shader](https://threejs.org/examples/?q=fresne#webgl_materials_shaders_fresnel).

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 1, 2020, 8:35am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/12 "2020-11-01T08:35:43Z")

</div>

In this example, [https://sbcode.net/threejs/refract-reflect/](https://sbcode.net/threejs/refract-reflect/)  
I create an inner and outer shine effect by creating 2 objects with different materials.  
You can experiment with the gui sliders on the link above.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f3e22991d18fbffcbd4d2b798d467f7ef1371c6a.jpeg)

**Three r122**

```
    const material1 = new THREE.MeshPhysicalMaterial({
        metalness: 1.0,
        roughness: 0.05,
        refractionRatio: 0.1,
        envMap: cubeRenderTarget.texture,
        transparent: true,
        transmission: 1.0,
        side: THREE.BackSide
    });
    const material2 = new THREE.MeshPhysicalMaterial({
        metalness: 0,
        roughness: 0.2,
        envMap: envTexture,
        transparent: true,
        transmission: 1.0,
        side: THREE.FrontSide
    });
```

---

<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:** [November 1, 2020, 9:14am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/13 "2020-11-01T09:14:01Z")

</div>

Are you sure about `ball2` tho @seanwasere ?

This is how real refraction looks (notice the fish-eye effect):

 ![HTB1yLOIawmH3KVjSZKzxh62OXXad.jpeg_q50](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bc554fe9154b1f2dbed53ad42609bca562475589.jpeg)

This is how your refraction ball looks (with ball1 hidden, since it’s only reflection if I see correctly):

![Screenshot 2020-11-01 at 10.11.15](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/c/c693144e9c6937e35a1f3b79ff272e0263dde974.jpeg)

Refraction gives a little different effect on the edges compared to just turning down the opacity.

---

<div class="post-metadata">

**Author:** ![seanwasere](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/seanwasere/32/20864_2.png) [@seanwasere](https://discourse.threejs.org/u/seanwasere)\
**Post date:** [November 1, 2020, 9:41am UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/14 "2020-11-01T09:41:53Z")

</div>

Lol, I knew there was something fundamentally wrong with it,  
What about now? This is the best I can do.

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/f70597488e0cefb2d9996c4ee479a30c622ebe36.jpeg)

With lower opacity it looks like a bubble

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/b834392912d475ddd8e8c3d87def96eb75e0acc3.jpeg)

With lower metalness it looks more glassy

 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/d/d1b32cd5b2cb27766f1165b495b840b2226b69e1.jpeg)

---

<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:** [November 1, 2020, 12:19pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/15 "2020-11-01T12:19:23Z")

</div>

Yeah, you’re right, I probably messed up the sliders… 😅 (But mind - the only realistic value for opacity is 1.0. Even a bubble should refract edges afair, since it’s a curved surface. Transparency kinda breaks the effect of realistic surface.)

So yeah, it all got me intrigued, and I tried to recreate [this image](https://www.pinterest.de/pin/764204630513190763/) with every - @seanwasere, @gonnavis, and Fresnel - approach, and in the end [this glass ball](https://codepen.io/mjurczyk/pen/OJXZNqz) is as far as I managed to get without a custom shader:

 ![Screenshot 2020-11-01 at 12.32.26](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/885802ca4ca616c185e887be7888646bcb099742.jpeg)

(1) @seanwasere approach, ie. 2 spheres + 2 env is the easiest and looks quite realistic enough. In a super-simplified version it technically needs just 3-4 params for materials (just don’t use opacity, that’s what envMaps and [cubemap cameras](https://threejs.org/docs/index.html#api/en/extras/PMREMGenerator.fromScene) are for. 🙃 )  
(2) As little as it makes sense I tried the experimental SSR branch, since I have it locally - but because it’s post-processing, reflections affect the rendered lights and it just looked a bit awkward. 🤨 (the white light-dots on glass surface disappeared etc.)  
(3) Fresnel shader looks by far the best - but first, it works only with cube map textures, second, it doesn’t seem to be affected by scene lights which kills the purpose. 🤔

But it’d still be best to do a custom shader, since none of these could do the focused light effect on the other side of the ball (at least dynamically, and it could be easily calculated from sun position and IOR) :

 ![HTB1yLOIawmH3KVjSZKzxh62OXXad.jpeg_q50](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bc554fe9154b1f2dbed53ad42609bca562475589.jpeg)

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [November 1, 2020, 1:48pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/16 "2020-11-01T13:48:43Z")

</div>

Many thanks for the numerous answers and information. Unfortunately, as I’m a novice to threejs, I was not able to understand all of this completely.  
@seanwasere Your latest demo is looking very fine. I intented to download it and fiddle but when using the downloading function of my browser it didn’t download the modules being imported. I tried Opera, Chrome, Firefox, Edge.  
Is there an easy way of downloading a complete page including javascript modules?  
Best regards - Ulrich

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [November 1, 2020, 2:48pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/17 "2020-11-01T14:48:26Z")

</div>

@mjurczyk I tested your demo as well and after some fiddling it seems to me that I understand how it works. Many thanks for this contribution! There are two issues:

- The reflection at the edge is a bit too faint
- The reflection in the center is too strong when looking at a dark ground: The sphere reflects the blue sky then.

You mentioned a custom shader. Can this be implemented by javascript? If so I would do some research and try. If not, it would be too complex for me.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [November 1, 2020, 3:01pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/18 "2020-11-01T15:01:33Z")

</div>

PS:

> [@Sempervivum](#):
>
> You mentioned a custom shader. Can this be implemented by javascript?

I found the answer: It has to be implemented in GLSL. Thus too complex for me.

---

<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:** [November 1, 2020, 3:42pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/19 "2020-11-01T15:42:17Z")

</div>

> [@Sempervivum](#):
>
> The sphere reflects the blue sky then.

That’s caused by your requirement for the reflection to be flipped - not much can be done about that, unless you’ll involve real raytracing Mugen mentioned earlier.

> [@Sempervivum](#):
>
> The reflection at the edge is a bit too faint

Gotchu, so first of all - there’s a bit of magic happening with these materials that make them look ok - that includes never touching `transmission: .99`. Otherwise you’ll render body colour and reflections of the external sphere.

To make the edge show more / less, you can add `envMapIntensity` and set it to anything from `0.0` to infinity (technically you’re only allowed to set it between `0.0 - 1.0`, but rules are there to be broken. Setting intensity above `1.0` basically counters the fact that we set transmission to nearly `1.0`):

```js
// Add refraction (inner sphere)
mesh.add(new THREE.Mesh(
  new THREE.SphereBufferGeometry(2, 32, 32),
  new THREE.MeshStandardMaterial({
    envMap: createEnvMap('refraction'),
    metalness: 1.0,
    roughness: 0.1
  })
));
// Add reflection (half-transparent outer sphere)
mesh.add(new THREE.Mesh(
  new THREE.SphereBufferGeometry(2 + Number.MIN_VALUE, 32, 32),
  new THREE.MeshPhysicalMaterial({
    envMap: createEnvMap('reflection'),
    envMapIntensity: 2.0, // <- Changing this changes the fake fresnel effect
    roughness: 0.1,
    transmission: .99, // <- Changing this will reveal that it's just fake fresnel, so lets never do that
    transparent: true
  })
));

```

![Screenshot 2020-11-01 at 16.36.58](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/3/37c0b39cba8429b306e8f7b58fd21c5e310c9517.jpeg)  
 ![Screenshot 2020-11-01 at 16.37.08](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/9/98ff7b00a3d1139cb3b02106f2e20253df2c7d15.jpeg)  
 ![Screenshot 2020-11-01 at 16.37.25](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/2/28318346bc9231ced947d917f2683812c73e852a.jpeg)

If you’d change transmission or opacity (or going too high with envMapIntensity) on either sphere you’ll start seeing this reflections also in the middle of the sphere, and it’s not good:

![Screenshot 2020-11-01 at 16.18.10](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/7/78d57ac515d42f7addabab64a5462e29b1a5197b.jpeg)

> [@Sempervivum](#):
>
> Thus too complex for me.

I wouldn’t judge it that fast. GLSL is very simple - it’s the math that can make shaders complex. Here’s an example of a shader that creates [a real Fresnel effect](https://threejs.org/examples/?q=fresn#webgl_materials_shaders_fresnel):

[FresnelShader.js](https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/shaders/FresnelShader.js)

Ignoring the horrible code readability, the entire shader is like ~20 lines of code, out of which 75% is addition and multiplication of some texture values and vectors.

---

<div class="post-metadata">

**Author:** ![Sempervivum](https://avatars.discourse-cdn.com/v4/letter/s/a8b319/32.png) [@Sempervivum](https://discourse.threejs.org/u/Sempervivum)\
**Post date:** [November 3, 2020, 7:48pm UTC](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326/20 "2020-11-03T19:48:44Z")

</div>

Hi there,  
sorry for replying late. In the meantime I fiddled a lot and at last ran into an issue I cannot fix myself. Gonna post this later …

@ mjurczyk

> To make the edge show more / less, you can add `envMapIntensity` and set it to anything from `0.0` to infinity

This reads promising. I’m gonna take your code and give it a try.

An intermediate result I achieved is this:  
[https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-5-light-22-ortho-camera.html](https://webentwicklung.ulrichbangert.de/panorama-reflection-sphere-5-light-22-ortho-camera.html)  
Bare with me when viewing the code, shurely it might have be done more simple and better. However I learned a lot about threejs when coding it.

Best regards - Ulrich

[Next page](https://discourse.threejs.org/t/refracting-glass-sphere-how-to-add-some-reflection/20326.md?page=2)