Merge two scenes in Three.js and React Three Fiber

77 views Asked by At

I’ve been dedicating my free time for the past 2 months to learn Three.JS and R3F, at least the basics to add details on my projects. Unfortunately, I can’t say I’ve progressed a lot, I am stuck with the following:

I have two scenes, the first have a background that simulates lava lamps and the other scene has a JPG image (a screenshot of the lava lamp background) as a texture to which I apply a displacement (the classic wave/ripple that follows the mouse). I would like to know how to use the first scene as a texture for the second one to apply the displacement effect instead of apply to a simple JPG image texture.

Asking for help wasn’t the first thing I did :P. I was trying to do it with render targets and composing an effect, but I couldn’t. There’s something I’m doing wrong and I don’t know what it is, it’s very frustrating.

I create the scenes in StackBlitz for demostration with random colors:

Code of scene with the lava lamp background Code of scene with the image and displacement And this is what I been trying with render targets

I don’t want to bother too much, if you can guide me a bit or if you know of any example, I would be super grateful.

Thanks guys!

0

There are 0 answers