How do I use Threejs combined with Blender to achieve effects in images

Discussion
1

How do I use Threejs combined with Blender to achieve effects in images.

4d49b17257530cc2e15c64984b99b782
4d49b17257530cc2e15c64984b99b7821232Ă—928 114 KB

Mainly, the reflection effect of the wall should achieve a similar effect.

2

Since you’re looking for light reflections, one solution I may think of, is to use a custom environment map, check the following thread:

The floor may also need a custom Shader, to create the wavy effect.

Edit: Found it! Check out how they managed the dynamic env map for the following scene, it’s made with r3f, but once you get the idea, you can replicate it with vanilla js.

3

Blender effects exist only in Blender, and cannot be exported unfortunately.

Maybe the SSGI effect from GitHub - 0beqz/realism-effects: SSGI, Motion Blur, TRAA - Effects to enhance your three.js scene's realism would be helpful here.

1 Like
4

ssgi will get you close to that, here’s an example using an older 0beqz ssgi version

the new/upcoming version that @donmccurdy linked is a lot cleaner, but he (yannic) is still struggling with cross platform webgl stuff that’s probably not easily sorted out. every time he’s close to release people find new platform/device outages.

otherwise, you find a lot of common tricks and effects here GitHub - pmndrs/drei: 🥉 useful helpers for react-three-fiber

it has faked floor reflections for instance, drei/meshreflectormaterial. it films the scene from below but adds distance blur, it’s imo fairly good looking.

we also maintain a vanilla version of that shader GitHub - pmndrs/drei-vanilla: 🍦 drei-inspired helpers for threejs

2 Likes