Hi, I’m referring this example in threejs 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?
This example uses a Water 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 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
If you’d like to render the entire original scene, with a different background environment, set the new background before this line. Then revert to the original background before this line.
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/, as you can see ‘skyBg’ and ‘skyBg2’ for 2 different background scene what im trying to achieve. Appreciate it.
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, paste in your project as a new file, edit, import as ./my-project/Water.js.
1 Like
Thanks man, i see what you doing, it help ! thanks