3D on the Web & WebXR

# Animated Clouds Solution

## Ayşegül Yönet

Microsoft

### Check out a free preview of the full 3D on the Web & WebXR course

The "Animated Clouds Solution" Lesson is part of the full, 3D on the Web & WebXR course featured in this preview video. Here's what you'd learn in this lesson:

Ayşegül live codes the solution to the Animated Clouds exercise.

Preview
Close

### Transcript from the "Animated Clouds Solution" Lesson

[00:00:00]
>> So one thing that we are going to do is add a bigger sphere here, okay, one more mesh with the same geometry but a little bit bigger so we can actually duplicate this and say Cloud Geometry And translated a little bit bigger. To be a little bit bigger, let's do zero.

[00:00:38]
Well, no 1.1, maybe 1.12 and then we can just create using the same mesh. Clouds equal new mesh material Cloud Geometry. I don't want to mistype anything. Copying and pasting is going to work, okay. Now we have the clouds. We also have to add them to our scene.

[00:01:21]
Maybe I'll edit it right after the art. In class, let's see what we are seeing now. We are not seeing the clouds. Let's see if there is any errors that I'm seeing So what we forgot is to move our clouds to the same location position. That z is equal to minus two squared to be exactly the same, all right?

[00:02:07]
Clouds. Spelling mistake. Clouds. All right. So be added all of the materials and It is getting exactly the same one. So let's not do that. This is all to teach you what could go wrong [LAUGH] Over and over. And thank you so much for your help. What did I do?

[00:02:42]
The Material that we created is refresh. All right, I'm going to copy and paste this one and call it material clouds with clouds. We don't want a bump map here. We don't want this here and the texture is going to be also different. So this time I'm going to load the clouds.

[00:03:28]
So cloud map. And this is, I think, Okay, let me double check the naming convention. Assets, images, globe and urge clouds for KPMG. This is the one that we need to urge clouds 4k. What we wanted to have is also transparency for our clouds trends. Pairen See, I believe and I'm true.

[00:04:20]
Alright, let's see. We have the material clouds that we are going to give to our clouds mesh, well make sure you all right. And also texture in our map for the clouds, we have to change that to clouds map here we go. Let's see what is happening. Earth has already been declared.

[00:04:58]
I knew I copied and pasted earth Yes, we do have transparency but we are missing one thing which was opacity points. 08 and transparency is transparent true, which I wrote transparency. Let's fix that. All right, yes. Now we have some transparent clouds but they're way too big. So let's fix that one.

[00:05:55]
All right, where did we define the name, the width and height, the radius, I put one. What I meant to put was 0.6, maybe, now we refresh it, it's closer to earth but I think it needs to be a little bit more close, maybe five, five. No all right I'm gonna go with that one, so it's still could be but, and now our earth is turning right our clouds are not turning.

[00:06:36]
So I'm going to add clouds That rotation. It's going to be a tiny bit faster than the earth. So 0.202 maybe. Yay. Now our clouds are turning around a little bit faster than our earth. We have a little bit more realistic representation. And at this point, if you want, you can add any location data and map it to the sphere and simple sphere can turn into a data visualization.

[00:07:22]
And if you would like to do that we're not going to do that in this course but there's an example. Called tweet migration on my GitHub repo, where I'm getting tweets with Web Sockets and displaying them on the map. So you can add that if you like. Is there any questions or anyone who weren't not able to see something similar to what we have.

[00:07:52]
There's no bump map for the cloud texture, right? Yes on the only thing that we want from the cloud texture is have some transparency as well as some white cloud looking things. So there's no need for. If you want, you could add that of course and give some.

[00:08:11]
Debts but I'm not sure how much you would add.

### Learn Straight from the Experts Who Shape the Modern Web

• In-depth Courses