From Blender to the Web - the Journey of a 3D Model

Thank you. Does anyone want to go first. OK, so I don't even have 20 minutes. I have 16. OK. So today we will be talking about Blender and 3D in the web. Is everyone excited about that? Your nerds, just saying. OK, cool. So that's about it. This little cupcake, I made it in Blender, and we're going to put it on the web. OK. So who is this person telling you to put that cupcake on the web?

OK, so let's get started. Again, my name is Tara, I'm originally from Portugal. I live in Berlin, because I like complaining, and bad airports. I work as a front-end developer at remote. Yes, the company is called remote, and yes, the company is remote. I love to do stuff in 3D. I picked it up during the pandemic like all of us picked up something random. I picked up 3D. I picked up 3D. It's great. I also did this in blender, so yes, that's about it. This is going to be divided into two parts. First of all, we're going to go into blender, and then we're going to pick up that and go into the web. I will not be teaching you how to use blender, because it's painful, but you get a visual idea of the UI. So who in here knows what blender is? It's a 3D software. It's free and open source. They also do other things, like 2D, video editing, and stuff like that. It's mostly known for 3D. Some 2D, I would not use it for video editing. Let's do it. Who in here used blender before? Wow, okay. So you'll actually know if I'm saying something wrong. No? Let's do it. Why not? Here's my scene. Before I start, let me start here. This is the cupcake that I made in blender. It's very cute. All my talents are there. That's it. That's my talk. Goodbye.

So this is blender, right? If you've used it before, 2.8, it looked way worse. So much worse. Like Photoshop CS1 worse. It looks better now. It looks way better, but if you want it to look better, just please Google blender 2.79. Because this is so much better. One thing I want to say about blender fast. It has two different rendering engines.

One is called eevee. Unir has heard or used Unity or Unreal engine. whatever. Those are real-time rendering engines. They don't actually calculate every light. They just pretend to know what the light is. It was introduced in 2.8. It's good for low-end computers. Macbooks don't have real graphics cards. They're just embedded into the thing. They're not real. They're fake. This is eevee. If I click the thing, it takes a bit. This is eevee. If I move around, you can see that it's, like, it looks real, but not really. So, for eevee, these are things that are checked during, like, as soon as it makes it, it tries to figure out what the hell is happening. There's also one called cycles. This is where my computer does weird sounds. So, cycles is completely different. The way cycles works is it's a ray-tracing engine. You don't have to remember any of these words. But the way it works, every beam of light is calculated and where it hits and where it goes, and it hits the other thing and does the thing, and that's very time-consuming on a Mac, and the Mac doesn't. You can't find anything that is actually causing crashes, crash cries, any of the sounds that you didn't know existed. Even though you have npm installed things before. Yeah. I'm not going to say that my computer has crashed during Blender. And before I go on, I want to say that I do have a Linux computer at home. I do not use this computer for Blender. You can, but it's very painful. Like, you just, I don't know why. Okay. Yeah. Cool.

So, final thing that I want to show you here in Blender is, We want to change the material. Material is a color. And let's come here. And let's come here. And you have a base color here. And you can just choose it. Let's make it purple or something. Beautiful. Isn't that beautiful? And I want to show you two other things that are kind of important if you download something from the Internet, or you decide to do it yourself if you want to cry. Sure. So, roughness is how rough a material is. I know. It's fucking mind-blowing. I know. It's incredible stuff right there. So, you can think of a mirror.

A mirror is not rough at all. But this floor here on the speakers, on the... I don't know what to call this. It's very rough, because you almost can't see any reflections. Like, the light can shine on it, and you can't really see a lot of reflections.

So, if I come here and I slide this down, you can see that it's basically a mirror. I mean, a really weird pink mirror, but a mirror. Metallic, I'm pretty sure you know what metallic does. So, if I go all the way up, it's now a metallic pink mirror. Blender. Art, y'all.

Okay. Cool. So, last thing I want to show you before we go into the codes is how to export something. So, you can think of, like, I have a cupcake group up here, and then I have a couple of stuff inside. Great. So, you come here and you do, like, select hierarchy, and what this does is basically select, just think of it as divs, and it selects all the divs that are inside of it. Everything is a div. Cool. So, now you come here, File, Export. File. There you go. Export. There you go. And for the web, I will use GLTF GLB. Cool. Cool, cool. And you click then. And then ten minutes. Okay. Cool. And we're here.

And I want to do a couple of things. So, there's a couple of formats. I will always just go with GLTF. I think it's, like, very slightly bigger, but it's JSON, and we love JSON. And I'm going to go with JSON. Always click on Include Selected Objects, and, like, put everything. And that's not what we want. It's also important to click on Apply Modifiers, and it's also important to click on Compression, because otherwise you're going to get a huge thing. And we don't want that. That's slow. We don't like that. Okay. So, now you export it, and I don't know if you saw that little white thing, but Blender doesn't actually have a loading state. The loading state is that little white thing, like, there's no loading. So, it's like, when the white thing is gone, it's fake. It's done. But, like, we have a model. So, if I come here on Visual Studio Code, I don't usually use white themes, by the way.

I just want to make that very clear. It's a really, it's a JSON. It's a very terrifying JSON. But it's a JSON. Great. So, how do we turn this into React components? Okay. Let's do that. So, I can go on glTF. I don't know how to say their name. Just that. We can go there. So, we're going to open this. Reveal in Finder. And you can drag it. And this will give you a React component version of it. There you go.

Thank you. Thank you. I made this website. Thank you. It says on the bottom. Okay. Cool. So, that's it. We're done. I'm just kidding. Just very nervous. Okay. So, let's copy this. Right? If I can. And let's come over here. Come here to the pie cakes. And create a model. So, I can just put this in here. And this is exporting default. So, let's just remove this. And absolutely nothing happens. Beautiful. That's exactly what we want. Let's close this. And let's try to just mount this. You idiot. Okay. So, model. And you get absolutely nothing. So, this is because React 3... This was supposed to happen, by the way. I just want to make sure that everyone knows that. And I'll just cry and lie on the floor. So, the thing is, React 3 fiber doesn't actually render diffs.

It renders meshes and materials and stuff like that. Which React is, like, I have no idea what the hell you're talking about. So, it just gives you the black screen of death. And it's like, I don't know. If I open the console, there's going to be an error saying I have no idea what you're talking about.

So, everything that's in a React 3 fiber thing. I just say thing a lot. So, every component you mount that's in React 3 fiber has to be inside a canvas. Okay. I think I still said thing. Which I find quite incredible. So, let's import a canvas. Which comes from React 3 fiber. And let's close this canvas. And now... With a bit of luck... I think... I have to make it smaller. It's super huge. And then... Words. Beautiful. Can you see it? I can zoom in. How do you zoom in on a Mac? There you go. Look at that. Is everyone proud of me? My mom is proud of me.

So how 3D works, it's completely different from 2D. I know. Again, mind blowing. But the way 3D works, if you have no lights, you basically have nothing. So if I turn off all the lights here, in the real world, I will have no idea where I am. Right? And this works the exact same way. So let's put on some lights. Let's put on a show. Why did I make a weird accent? So we have an ambient light. That's it. And now we have something really sad. Right? So there are a couple of different types of light. Let me open my cheats here. There we go. Beautiful. So this is an ambient light and a spot light. So to explain the difference, oh, my. There we go. Okay. Cool. Just imagine it looks good now. The difference between ambient light is it's a ball of light that just spreads light evenly. Without casting shadow. So it's not something that can exist.

But a spot light is literally the thing that's blinding me right now. So we know what a spot light is. Cool. So as you can see, we now have, like, some shadows. Like it's not in the correct position which I can fix. So if you want to change the position, you can come here and do XYZ. So, wait. X? No. Yes. So it's one second. XY and Z is the one that hits you in the face. Okay. So X zero, Y zero. No, no, no, no. Y minus 1 and the other one zero. And it goes slightly down. That makes sense, right? I figured this thing out. Cool. Cool, cool, cool.

But we want to make it actually look nice and have some realistic looking. But we can do this, right? We can use something from react fiber that's actually called a stage. So a stage, it's basically a little stage. And you put a little model there and the model is all happy and it has lighting and all that stuff.

Okay. So let's come here and let's import stage. And let's do this. And do this. I didn't do it. Did I do something? So, yes, there we go. I can delete this because the stage will automatically put everything in the center. Or maybe not. Will it? Let's reload the page and find out. It does. See, I was not wrong.

Okay. So that's cool but it looks kind of sad, right? It's cool and sad at the same time. I don't have an example of something that's cool and sad at the same time. But you get my drift. So let's do contact shadows and for that, I can do contact shadow and I can pass a position to it. Position. And whoa, what the hell did that happen? So many things that were not supposed to be there. Zero minus one and zero again. Now there's a little, can you see that? Thank you. There was literally one person that said yeah. It was Ellie. Thank you, Ellie. She said yeah. Can you see that. Thank you, Jesus Christ. I know it's late, but I need you to wake me up as well. Thank you. Thank you, weird man. I appreciate you. But that doesn't look very realistic, right? So let's also add in opacity. I don't know, random number, .6. That was not .6. Well, I had literally one job and it was to write the same thing I said and I still did not. .5. There we go. So you can also pass blur, a bunch of stuff, but I need to get going and we need to animate stuff so let's do it.

Okay. So we have this model and we want to make it wobble. We wanted it to do, like, a little, that didn't make any goddamn sense, but you know what I mean. And one thing that we can use for that is something called use frame. Who in here is good at math? Seriously, no one? I genuinely feel less alone right now. So I failed math in high school because I'm not the brightest tool in the shed. I think that's the sentence. But if I can explain this. This is like when I got my driver's license.

I was like, if I can get my driver's license and I can't tell right from left, you got this. I still have a driver's license, by the way. Just don't go to Berlin. Just safer to not go to Berlin in general.

Okay. So we can use something called use frame and what use frame is is something that runs every frame. Incredible. And there are, thank you, there are about 60 frames per second depending on your computer. So I would say like 40 or something in here. So let me import use frame. That comes from React 3.5-ver. And then this gets a state in lowercase. Gets the state yelling at it. Okay. There we go. And I could console log this but I would probably ruin my computer and that would be very depressing. That would be an example of cool and sad. Right? If I really screwed up this talk.

Okay. No one found that funny? That's cool. Everyone is very focused on what I'm saying right now. They're like I want to learn this. That's not true. Clock. So there's something in the state called the clock and the clock takes — it takes — it doesn't take anything. It sees how much time has passed. So you can use clock that elapsed time to be like, okay, this much time has passed since this person has reloaded this page.

Okay. So and we need a function that does this. And that is math.sin. Sin? The one that's not a Catholic thing. Sinus. The sin of JavaScript. So math.sign or sin, whatever you want to call it, I don't care. Someone actually came one time after my talk and was like that was a really fun joke about math.sin. And I was like that's not how you say it? Oh, then more you know. English. Great language. Math.sin, it literally does this. Right? And that's what we want. We wanted to. Was that like a sermon or something? Okay. Cool.

We wanted to like do this and wobble a little bit. So let's do that. Let's get the position and the rotation of this element that we can get by the group here that is attached to the group over there. And you can think of a group like a div. Everything is a div. That's about it. That's my talk. Everything is a div. I can get position and rotation is equal to group that current. There you go. Very, very standard reacting. There we go. Nothing broke. I'm a genius. Let's continue. Okay. And now let's make it wobble. So position.Y equals math. That's in. And I need to pass something, a number that will keep incrementing until the end of time which in this case it's state.Clock.Elapse... State.Clock.Elapse time. It's just easier to write it. Now if I reload this page, you can see that it does that, right? It does a little bit of... Thank you. Thank you.

Thank you. Thank you. Nothing has failed so far. Let's keep going, right? Let's ride this wave of accomplishments.

Okay. Cool. Let's do the same thing for the rotation. I think that would be cool. I'm going to multiply this by 1.5. There we go. Look at that big boy. It's a boy now. And a cupcake is a man, so little frosty boy is now a man. That explains why. Got to love Latin languages.

Okay. Let's do rotation. Rotation that. Let's do X. And let's do the exact same thing. So map that in and state. You need to correct me. Y'all. That elapsed time. And that doesn't look very good. Don't clap for that. It's like punching you in the face. And let's divide it by four. Or something like that. And I need to reload the page because state that elapsed time. Basically like resets. You need to reset it. That's still way too much. Let's divide it by ten. Otherwise I'm going to stay here all the time. And we're going to end with 7.87 is the perfect number to divide this cupcake. There we go. And do the same thing for Z. Just for the fun of it. So this is why. And there we go. So now it moves a little bit. So you can kind of see that it's an actual 3-D element and not just a picture. Which I get so sad when I see something in 3-D. I'm like, yeah, fine. Fine. Okay. So that's done. But you know what else would be cool? If we could change this. If I could click vanilla and the frosting of it would change.

You know what else would be cool? If you could see all of them. There we go. So I have some state management here which is you're going to think that it is very over complicated and it is. But the fact is if I pass it as props, the whole components will re-render and all the animations will restart. So we don't want that. So we want to do state like outside of it. So I have this thing called use frosting. So let's do const. I don't remember. I'm just going to call it lol and call it use frosting. I'm an adult. And console dialogue. Lol. Okay, cool. So now let's inspect that. And if I come here to the console, someone's phone thinks I'm talking to them. Wait. Okay, google. Shut up. You got an object. And this is the selected frosting that you have. So if I pull this down, my phone, I'm sorry. I was talking to him. And I click here and you can see that now we have a different number of frosting. Oh, my gosh. That was my phone. Okay. So now you have this, you have frosting and you have set frosting. Cool. So that's about it, right?

I can open this. And this is a small little thing. And we have the color of the frosting and we have the id4 which is none. So let's first of all do id4. So from here I want to get frosting. Thank you, sir. And in here we have this thing which is the frosting and the sprinkles. So we only want to show this if the id of frosting is different than four, right? Because four is none. Are you still following me? I need to ask more Angena-style questions. Is everyone still here? Still following this? Thank you. Thank you. Thank you. God bless Angena. Okay. So let's do frosting. Oh, my God. Frosting. That id is different than four. And we show these two things. And if you click on none, it will disappear.

And if you click on none, it will disappear. Okay. Last thing, last but not least, let's change the color of the thing. So we can do this using the color attributes that we have inside of the frosting for each of them. And we can also do that using a mesh tender material. We can do that using mesh tender material that comes from 3JS. Oh, my god. That comes from 3JS. So thank you. Sweet, sweet man.

Okay. So let's do const frosting real fast equals new mesh tender material, which is something that comes from 3JS again. And I just never know how to type standard. So we got that. And we can see that in the frosting right here we have this material. So this we can just come here, right, and spread it. So we can do this. And this frosting, okay, frosting matte. We have frosting matte. There we go. And then I can come here and literally paste it in here and everything should work exactly the same. So if I come to chocolate, it still works exactly the same. I didn't do anything. Please don't clap. That's going to be weird. So what we can do now is actually toggle the color. So if I say color and I say red, it is now red. So which means that I can use the selected frosting, that color, to actually change the color. So now if I reload this page and I change the color here, it is now vanilla.

Final thing I want to show you is how to add orbit controls. Okay. I don't have time. So I'm just going to do it without saying anything. Is this awkward enough? And now you can move it. That's cool. Yeah, I'm done. I'm done. I'm done. Don't yell at me. One or two questions. Yeah, thank you. Okay, one or two questions were allowed. Okay. Step into my office. Oh, my god. Right here, my darling. Oh, my god. Here. Okay, sorry. Oh, my God.

Yeah, there's a thing on the floor. Yeah. There's a thing on the floor. Sure. That was awesome. Thank you. And now I want a cupcake, so thank you for that. You're very welcome. There are some Vodafone cupcakes if you want to. Ooh, maybe I will. Yeah. Can I change the color? No. I don't think so. No, it's red. Not as cool. When you said you couldn't think of anything that was cool and sad, I was like, me. I mean, that was my thing, but I didn't want to go all mental health in this talk. I know. Well, I've gone there. So we're here now. All right.