Flying through clouds 2.0

Questions
1

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

2

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

2 Likes
3

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

4

here it is in it’s most basic form…

7 Likes
5

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

6

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
7

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

1 Like
8

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