React three drei in three js vanilla

Questions
1

Hello i am new to threejs, i am trying to build something like this Diamond refraction (forked) - CodeSandbox
I am trying to build it using vanilla threejs but i cant use components of function from drei like MeshRefractionMaterial
so is there a way to use drei in vanilla threejs ? or maybe combine between vanilla and fiber ?

2

Check out drei vanilla for some vanilla js implementations of some of the drei components.
It’s probably possible to use drei stuff with vanilla JS, but it’s going to be very complicated and time consuming getting it to work in a satisfactory way.
If you need a drei component in your vanilla js app, the simplest solution is to check the source code of the drei component and rewrite it for vanilla js.

2 Likes
3

i’ve checked it before they dont have MeshRefractionMaterial they have only those

and i tried to create the shader of MeshRefractionMaterial but it gave me some errors

4

drei is fully open source, mrm for instance is here: https://github.com/pmndrs/drei/blob/6ddc5ec042f69e52106a66a8ebeeb78de38f60de/src/materials/MeshRefractionMaterial.tsx you could use it 1:1 because “shaderMaterial” is just a little helper function that creates a THREE.ShaderMaterial with all uniforms available as getter/setters. so no changes needed for it.

the trouble is that, as is often the case in vanilla, a class doesn’t really lend to packing away all the code and behaviour and in this case there’s some glue code needed: https://github.com/pmndrs/drei/blob/6ddc5ec042f69e52106a66a8ebeeb78de38f60de/src/core/MeshRefractionMaterial.tsx for instance Sampler2D and SamplerCube need different defines, the BVH stuff, etc. the component paradigm can abstract that all into a single thing <MeshRefractionMaterial />, but a class can’t. this code you’ll have to run over your shadermaterial after it exists.

in essence, get the material, copy the component code, it won’t be a problem. though this is one of hundred things that drei and fibers eco system offers. use react with three, this is the only way that you can participate in an eco system. the only reason MRM can be shared like that is because of the component paradigm.

1 Like
5

thank you for your explanation, I just have 1 question about three I used to do my work in Babylonjs vanilla so I am used to working in functions and variables like scene meshes extras…, now I am trying to explore threejs, well I miss something or will I hit a block when I use three fiber drei instead of three vanilla or all features are being available in both sides.

6

no, there are limitations, or even disadvantages in my opinion. you are not even bound to some libraries maintenance cycle. the only maintenance fiber goes through is for on top features, like pointer events et al. but if threejs has a new feature tomorrow “THREE.Foo” then it will be available to you in fiber without updating the library, it’s a renderer, not a wrapper.

7

Hello !

I faced the same problem - using ‘MeshRefractionMaterial’ from pure vanilla three.js.
Before I start fetching it from Fiber I would like to ask - did you have success with it ?
Maybe you can share the code if you have already done this potentially painful job ?

Thanks in advance.