I have these three images -
One is a render of a room (contains bed, lamps etc), Second is a mask of items in the scene, third is shadows.
Now i have a different mesh (a carpet), that is movable. What i want is when the carpet is moved over the white part (according to the mask.jpg), that part of the carpet should be hidden + the corresponding shadows to be visible over the carpet.
I am new to this, and it would be helpful if you can point me to resources or help with some solution.
Thanks.
Before jumping into searching for solutions, you should clarify your workflow in terms of how those images are generated in the first place, and what has threejs to do with that.
One way of doing that would be to perform some sort of camera solving for being able to find intrinsic/extrinsic camera parameters and actually align a threejs camera-scene combo with those images/masks, or simply apply this parameters if you happen to know them in advance.
If that is your plan, and only once images and a threejs camera-scene combo is in place, you could try something like:
Thanks for your reply.
I’m basically trying to make a clone of this website - explorug
Initially i thought they have a gltf model of a room, the camera position is locked and the carpet is draggable. This is what i was able to make on my own - https://carpet-render.vercel.app/room
I was not able to achieve the realism that explorug has. While looking through the website assets i found those three files (render, mask and shadows). Probably they are using these 2d images and custom shader to render the transparency effect for the carpet. Again I am new to threejs so any help or nidge towards the correct approach is appreciated. Thank you
