MeshRefractionMaterial threejs vanilla

Questions
1

Hello i am trying to use MeshRefractionMaterial from drei in fiber its working,
but i need to use it in threejs vanilla does anyone has an example or how i can do that ?

3

the author is @N8Three and this was the vanilla playground GitHub - N8python/diamonds

though it’s really that, a playground, it took some time to make it re-usable. the shader was also developed further since then and the most up to date version is probably this: https://github.com/pmndrs/drei/blob/59d679c5f204b85a959cf06f3e2e16b467158152/src/materials/MeshRefractionMaterial.tsx

this material needs very specific defines and also camera data frame-by-frame, you find that here: https://github.com/pmndrs/drei/blob/59d679c5f204b85a959cf06f3e2e16b467158152/src/core/MeshRefractionMaterial.tsx

  1. make sure you set the defines up, you find them in the useMemo
  2. set up the bvh stuff, this is in the useLayoutEffect
  3. update camera matrix in your render loop, this is inside useFrame
3 Likes