Hello,
I don’t have any idea how this work so I am here if someone can help. Can someone tell me:
- How to render multiple scenes on one canvas
- How to blend those scenes
Image Reference (For Blend)
Thank you.
im not sure what the red circle is supposed to point at? that site is lusions, it has a single canvas. are you asking how to use scroll-areas in combination with webgl content and html?
Hello,
Actually the red circle is showing the 2 scenes blending together and if you see it on the actual website, you’ll see a line there which clearly shows the scene above and the below one are blending together. I want to know:
- How to render multiple scenes on one canvas sections wise.
- Scroll those scenes with HTML content…
My questions might not be accurate but you know the website lusion.co for the reference. That is what I’m trying to achieve.
Thank you so much.
i don’t think these aren’t two scenes. to me it seems it’s just a bunch of meshes and effects and the camera rolls down. there are some overlay effects that slightly bleed. for instance when they make the particle sections background a little brighter. meshes overlap as well, see
the website lusion.co for the reference. That is what I’m trying to achieve.
If you are new to threejs, this is perhaps the hardest thing you could have picked. Lusion is an agency whose output is pretty much at the top. Study math and shaders, learn Blender?
In the off-chance you can consider React + Threejs, most if not all the primitives design agencies commonly use are available as components, which you can then compose. Sharing code is not really that easy in vanilla because there is no common ground, you won’t find ready-made building blocks. React on the other hand gives Threejs a real eco system, similar to Unity.
Made a quick demo throwing some of these primitives together, this contains:
- scroll paging
- html overlays
- model content
- soft particle spotlights
- instanced particles
https://codesandbox.io/s/volumetric-spotlight-forked-dugqv?file=/src/App.js
@whackter
Just in case, have a look at this example of crossfade: three.js examples