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 ?
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.
1 Like
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
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
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.
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.