Flying through clouds 2.0

Years ago there was this example by mrdoob
https://mrdoob.com/lab/javascript/webgl/clouds/

Of course it no longer works. Can any of you experts help me getting this working in latest version?

Thanks guys,
Jeff

That link appears to work for me in Chrome and Firefox in MacOS 13.5.2.

1 Like

Yes the link works, but with a much older version of threejs

here it is in it’s most basic form…

7 Likes

Hey thanks for the quick response. This hopefully will lead me in right direction. I should have been clearer, I am using v147 so not latest, forgot how far threejs has progressed since i had to stop of 147 because of es5. It seems to be having an issue on the BufferGeometryUtils.mergeGeometries command, I tried to use the 147 version in js but when I add new THREE. to beginning it says not a constructor. If I leave it as is, it fails with not defined. Oh well much closer than I was… Thanks so much, you guys are the greatest…

Jeff

In r147 the mergeGeometries method was named mergeBufferGeometries so you’d just need to change the line that merges geometries to…

const planeGeos = BufferGeometryUtils.mergeBufferGeometries(geometries)

One thing that would need to be accounted for is the fog on the shader material, you could change the material to a mesh basic material to achieve a very similar aesthetic but when the clouds pass the camera there’s a sudden culling of the mesh rather than the subtle fade in the original shader doob skilfully crafted

1 Like

Perfection Lawrence, that did the trick… Thanks so much,
Jeff

1 Like

Hi exactly need this thing but with one more feature it would be nice if you can help me out.

I want it on my whole website background can you please make change in the code for me. I tried alot but not got any success.

Thanks