# Looking a solution for THREE.Water reflection image is different from scene.background

**URL:** <https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697>\
**Category:** Questions\
**Tags:** water, shaders\
**Created:** [October 13, 2020, 8:27am UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697 "2020-10-13T08:27:59Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Hiro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hiro/32/13929_2.png) [@Hiro](https://discourse.threejs.org/u/Hiro)\
**Post date:** [October 13, 2020, 8:27am UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697/1 "2020-10-13T08:27:59Z")

</div>

Hi, I’m referring this example in threejs [https://threejs.org/examples/webgl\_shaders\_ocean.html](https://threejs.org/examples/webgl_shaders_ocean.html), so basically i have “scene.background = B” , but water need to reflecting “A”, how do i achieve it ? is that possible?

---

<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:** [October 13, 2020, 8:43am UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697/2 "2020-10-13T08:43:49Z")

</div>

This example uses a [Water](https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js) helper object. You can duplicate it (it’s just an example object, you won’t be touching core three.js code) - then you can modify its [onBeforeRender](https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js#L228) method to reflect a different scene / environment.

If all you need is to render a different background, without objects in the scene, it should be enough to create a new Scene object and add a mirror-duplicate of the original scene camera to it. Then inject it here: [https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js#L338](https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js#L338)

If you’d like to render the entire original scene, with a different background environment, set the new background before [this line](https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js#L338). Then revert to the original background before [this line](https://github.com/mrdoob/three.js/blob/9ef27d1af7809fa4d9943f8d4c4644e365ab6d2d/examples/jsm/objects/Water.js#L345).

---

<div class="post-metadata">

**Author:** ![Hiro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hiro/32/13929_2.png) [@Hiro](https://discourse.threejs.org/u/Hiro)\
**Post date:** [October 13, 2020, 10:13am UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697/3 "2020-10-13T10:13:21Z")

</div>

Hey, thanks for helping and reply! Yes, what I need is to render a different scene background after the water or any object is render, so the water may keep reflecting the first scene background instead of 2nd scene background. I tried the advise you mentioned above unfortunately is not working for me to figure it. Not sure if you’re able to help, I created a jsfiddle [https://jsfiddle.net/qa4L2uog/3/](https://jsfiddle.net/qa4L2uog/3/), as you can see ‘skyBg’ and ‘skyBg2’ for 2 different background scene what im trying to achieve. Appreciate it.

---

<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:** [October 13, 2020, 10:52am UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697/4 "2020-10-13T10:52:49Z")

</div>

I can’t see what you changed. What I meant is to take the Water object and adjust the code to fit your needs. Quite virtually - copy [this](https://threejs.org/examples/jsm/objects/Water.js), paste in your project as a new file, edit, import as `./my-project/Water.js`.

[Here’s an example. Sorry for a messy code, idk how to do separate files on JS fiddle, its just Water object duplicated and 2 lines I mentioned above added.](https://jsfiddle.net/mq59p3fw/)

---

<div class="post-metadata">

**Author:** ![Hiro](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/hiro/32/13929_2.png) [@Hiro](https://discourse.threejs.org/u/Hiro)\
**Post date:** [October 13, 2020, 3:11pm UTC](https://discourse.threejs.org/t/looking-a-solution-for-three-water-reflection-image-is-different-from-scene-background/19697/5 "2020-10-13T15:11:23Z")

</div>

Thanks man, i see what you doing, it help ! thanks