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

Rate this content
Bookmark

Creating 3D experiences in the web can be something that sounds very daunting. I’m here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.

26 min
17 Jun, 2022

Video Summary and Transcription

Today's Talk is about Blender and 3D in the web, covering topics such as rendering engines, material properties, exporting models, using React Fiber, lighting and shadows, state management, and adding wobbling effects. The speaker demonstrates how to create a 3D cupcake model and customize its appearance and behavior using React and Blender. The Talk also touches on topics like frosting selection, color changes, and adding orbit controls for interactive movement.

1. Introduction to Blender and 3D in the Web

Short description:

Today we will be talking about Blender and 3D in the web. I made a cupcake in Blender and we're going to put it on the web. I will not be teaching you how to use Blender, but you'll get a visual idea of the UI. Blender is a 3D software that is free and open source. It also does other things like 2D and video editing. Blender 2.8 looked worse, but now it looks better. It has two different rendering engines.

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.

2. Blender Rendering Engines and Material

Short description:

One is called eevee. 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. Cycles is a ray-tracing engine. It's time-consuming on a Mac. I do not use this computer for Blender. Let's change the material. Material is a color. You can choose the base color. Let's make it purple. Roughness is how rough a material is. It's incredible stuff right there. You can think of a mirror.

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.

3. Blender Mirror, Export, and Visual Studio Code

Short description:

A mirror is not rough at all. The floor is very rough, with minimal reflections. By adjusting the settings, it can be transformed into a metallic pink mirror. Before we move on to the codes, let me show you how to export something. Select the desired objects, choose the GLTF format, and apply modifiers and compression for optimal results. Blender doesn't have a loading state, but the model will be ready when the white thing disappears. Now, let's switch to Visual Studio Code.

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.

4. Turning JSON into React Components

Short description:

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. So, how do we turn this into React components? Let's do that. Thank you. Thank you. I made this website. Thank you. That's it. We're done. I'm just kidding. Just very nervous. Let's copy this. And let's come over here. And create a model. And absolutely nothing happens. That's exactly what we want. Let's try to just mount this. You get absolutely nothing. React 3 fiber doesn't actually render diffs.

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.

5. React 3 Fiber and 3D Lighting

Short description:

It renders meshes and materials in React 3 fiber. Every component in React 3 fiber must be inside a canvas. 3D works differently from 2D. Without lights, you have nothing. Let's put on some lights. Ambient light spreads light evenly without casting shadows.

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.

6. Spot Light and Shadow Positioning

Short description:

A spot light is used to create shadows and can be adjusted by changing its position using the XYZ coordinates. By setting the Y coordinate to -1, the spot light can be positioned slightly downward. It's cool and it works well.

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.

7. Using React Fiber and Stage

Short description:

We can use something from react fiber called a stage to make it look nice and realistic. The stage automatically puts everything in the center. Let's add contact shadows and adjust the position and opacity. To make the model wobble, we can use something called use frame.

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.

8. Using React 3.5-ver and use frame

Short description:

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. So we can use something called use frame and what use frame is is something that runs every frame. Incredible.

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.

9. Using Clock and Math.sin for Wobbling Effect

Short description:

Clock in the state measures the elapsed time since page reload. Math.sin function is used to create a wobbling effect. Get the position and rotation of the element using the group. Position and rotation can be accessed through the group's current property. Set the position's Y coordinate to math.sin(state.Clock.ElapsedTime) to achieve the wobbling effect.

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.

10. Changing Rotation and Frosting

Short description:

Thank you. Thank you. Let's keep going. Let's do the same thing for the rotation. Multiply by 1.5. Look at that big boy. Let's do rotation for X and Y. Divide by four. Reload the page. Divide by ten. End with 7.87. Do the same thing for Z. Now it moves a little bit. It's an actual 3-D element. Let's change the frosting when clicking vanilla.

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.

11. State Management and Use Frosting

Short description:

If I pass it as props, the whole components will re-render and all the animations will restart. So we want to do state like outside of it. So I have this thing called use frosting. And if I come here to the console, you got an object. And this is the selected frosting that you have. And I click here and you can see that now we have a different number of frosting. So now you have this, you have frosting and you have set frosting.

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?

12. Showing Frosting and Sprinkles

Short description:

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.

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.

13. Changing Color and Adding Orbit Controls

Short description:

And if you click on none, it will disappear. Let's change the color of the thing using the color attributes and mesh tender material from 3JS. We can toggle the color by using the selected frosting. Finally, I want to show you how to add orbit controls. You can move it around. One or two questions were allowed.

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.

14. Floor Thing and Cupcake Cravings

Short description:

There's a thing on the floor. That was awesome. Thank you. And now I want a cupcake. Can I change the color? 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. Well, I've gone there. So we're here now.

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.

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

React Advanced Conference 2021React Advanced Conference 2021
27 min
From Blender to the Web - the Journey of a 3D Model
Top Content
Creating 3D experiences in the web can be something that sounds very daunting. I'm here to remove this idea from your mind and show you that the 3D world is for everyone. For that we will get a model from the 3D software Blender into the web packed with animations, accessibility controls and optimised for web use so join me in this journey as we make the web more awesome.
JSNation 2022JSNation 2022
36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
We live in exciting times. Frameworks like TensorFlowJS allow us to harness the power of AI models in the browser, while others like Three.js allow us to easily create 3D worlds. In this talk we will see how we can combine both, to build a full solar system, in our browser, using nothing but hand gestures!
React Summit 2023React Summit 2023
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
A lot of recent talks at other conferences have talked about how to start using React and THREE.js to create 3D experiences on the web. In my career I've built several complex applications using those technologies, including a big Figma-like 3D editor, and I've learnt a lot of patterns and tricks on how to make it actually fast and scalable. Unfortunately, though, nobody is also talking about those tricks an what it really takes to build an rendering engine similar to the one that Figma uses.
My goal with this talk is to give people an overview of the challenges that may arise when you try scaling your application, and what are some lesser known tricks to overcome them: instancing, memory usage reduction techniques, SDF-based text rendering, GPGPU and tree data structures. Everything of course done with Javascript, React and THREE.js.

Workshops on related topic

JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Instead of manually drawing each image like traditional art, generative artists write programs that are capable of producing a variety of results. In this workshop you will learn how to create incredible generative art using only a web browser and text editor. Starting with basic concepts and building towards advanced theory, we will cover everything you need to know.
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
In this workshop, we'll introduce you to the core concepts of building Mixed Reality experiences with WebXR and Balon.js.
You'll learn the following:- How to add 3D mesh objects and buttons to a scene- How to use procedural textures- How to add actions to objects- How to take advantage of the default Cross Reality (XR) experience- How to add physics to a scene
For the first project in this workshop, you'll create an interactive Mixed Reality experience that'll display basketball player stats to fans and coaches. For the second project in this workshop, you'll create a voice activated WebXR app using Balon.js and Azure Speech-to-Text. You'll then deploy the web app using Static Website Hosting provided Azure Blob Storage.