# Flying through clouds 2.0

**URL:** <https://discourse.threejs.org/t/flying-through-clouds-2-0/57859>\
**Category:** Questions\
**Tags:** clouds\
**Created:** [November 6, 2023, 10:41pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859 "2023-11-06T22:41:11Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![MrBodean](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrbodean/32/18971_2.png) [@MrBodean](https://discourse.threejs.org/u/MrBodean)\
**Post date:** [November 6, 2023, 10:41pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/1 "2023-11-06T22:41:12Z")

</div>

Years ago there was this example by mrdoob  
[https://mrdoob.com/lab/javascript/webgl/clouds/](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

---

<div class="post-metadata">

**Author:** ![godber](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/godber/32/22247_2.png) [@godber](https://discourse.threejs.org/u/godber)\
**Post date:** [November 7, 2023, 1:50am UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/2 "2023-11-07T01:50:21Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![MrBodean](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrbodean/32/18971_2.png) [@MrBodean](https://discourse.threejs.org/u/MrBodean)\
**Post date:** [November 7, 2023, 2:03pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/3 "2023-11-07T14:03:43Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 7, 2023, 3:05pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/4 "2023-11-07T15:05:03Z")

</div>

here it is in it’s most basic form…

https://codepen.io/forerunrun/embed/preview/vYbgwxR?default-tabs=js%2Cresult&height=300&host=https%3A%2F%2Fcodepen.io&slug-hash=vYbgwxR

---

<div class="post-metadata">

**Author:** ![MrBodean](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrbodean/32/18971_2.png) [@MrBodean](https://discourse.threejs.org/u/MrBodean)\
**Post date:** [November 7, 2023, 9:56pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/5 "2023-11-07T21:56:42Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![Lawrence3DPK](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/lawrence3dpk/32/29184_2.png) [@Lawrence3DPK](https://discourse.threejs.org/u/Lawrence3DPK)\
**Post date:** [November 8, 2023, 12:52am UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/6 "2023-11-08T00:52:42Z")

</div>

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

```javascript
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

---

<div class="post-metadata">

**Author:** ![MrBodean](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mrbodean/32/18971_2.png) [@MrBodean](https://discourse.threejs.org/u/MrBodean)\
**Post date:** [November 8, 2023, 4:46pm UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/7 "2023-11-08T16:46:47Z")

</div>

> [@Lawrence3DPK](#):
>
> `const planeGeos = BufferGeometryUtils.mergeBufferGeometries(geometries)`

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

---

<div class="post-metadata">

**Author:** ![Abo\_Baker\_Saddique](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/abo_baker_saddique/32/46436_2.png) [@Abo\_Baker\_Saddique](https://discourse.threejs.org/u/Abo_Baker_Saddique)\
**Post date:** [April 3, 2024, 9:27am UTC](https://discourse.threejs.org/t/flying-through-clouds-2-0/57859/8 "2024-04-03T09:27:17Z")

</div>

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