how to migrate a project from three js to react?

[deantek]

Hi, for 4 days I've been trying to transfer this project https://codepen.io/deantek/pen/WNJYdmM from threejs to react, but it just doesn't work, I tried different methods, but the result is the same, the animation is twitchy and not so smooth, and in general it turns out not quite what you need, who can anyone suggest me what I'm doing wrong?

my try - https://codesandbox.io/s/magical-ben-z6j619?file=/src/App.js
For some unknown reason, colors are inverted on codesandbox, on my local version everything looks like this: gif https://gifyu.com/image/S98Qo
image -

Please tell me or give me some example because I don't know what to do

[conor-v]

When I run your code it gives a warning dat the Output of vertex shader ... not read by fragment shader. the rest of the code looks a clean copy from three.js to r3f. But if you want the same effect via this link it is explained step by step how you can do this. Making the blob is one of the last exercises in the link.

link --> https://blog.maximeheckel.com/posts/the-study-of-shaders-with-react-three-fiber/

[deantek]

yes, i have already seen this and reviewed these examples, but i would like to overlay perlin noise like in my example

[CodyJasonBennett]

Here's a cleaned up vanilla version:

• https://codesandbox.io/s/vanilla-blob-shader-l6dz4c

I'd recommend looking into Drei#shaderMaterial for custom materials, but the tricky part here is maintaining a stable reference to uniforms; I opted to store them in a useRef, but you could use any form of state.

Here's the R3F version:

• https://codesandbox.io/s/r3f-blob-shader-x7fqqv

As an aside, I'd check out https://github.com/stegu/webgl-noise with updated Perlin noise code. It should have less artefacts along diagonals than previous versions. I use this on my personal site to a similar effect.

[deantek]

this is the problem, on vanilla three js the animation looks smooth, although the perlin noise function is the same, even in your example the animation is different

[CodyJasonBennett]

That would likely come from the uniforms, their GUI must have overwritten them. Maybe try to match options from the original codepen with uniforms in your demo.

[deantek]

I played with your example, changed the position, added the second Blob and also changed the speed, it seems almost what I need, it looks almost the same, although there are small flaws, but thank you very much

https://codesandbox.io/s/r3f-blob-shader-forked-rxltv1?file=/src/index.js