Make a background for scene

Questions
, , ,
1

I’m currently try to make a web like this site: David | Creative Developer (david-hckh.com)

But I wonder how to make a background for scene like that. I’m trying to using a mesh as backdrop but the problem is it invade to second scene. Really need help

2

You can just use HTML to do the background, and place a transparent three.js canvas as an overlay.

Also, drei ScrollControls and react-three-fiber overall may be of great help when mixing three.js and websites together.

3

Currently. I have made all of the things like the site except the background for the scene. and I’m using custom scroll with gsap instead of using ScrollControl of drei. I already tried to use HTML to do the background but seems like that is not what I want. At that site, I don’t know what he using for making the background. if you pay attention, you can see it map shadow for that background too

As I said, I tried using a mesh as a backdrop but the problem is it invaded to second scene. and that really not good.

4

Just use ContactShadow + Fog of React-Three-Fiber Drei