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.

This talk has been presented at React Summit 2022, check out the latest edition of this React Conference.

FAQ

The speaker's name is Tara. She is originally from Portugal and lives in Berlin. Tara works as a front-end developer at a company called Remote.

Blender is a free and open-source 3D software. It is mainly known for 3D modeling but also supports 2D, video editing, and other functionalities.

Blender has two major rendering engines: Eevee and Cycles. Eevee is a real-time rendering engine suitable for low-end computers, while Cycles is a ray-tracing engine that calculates each beam of light, making it more resource-intensive.

Eevee is a real-time rendering engine that does not calculate every light, making it suitable for low-end computers. Cycles is a ray-tracing engine that calculates every beam of light and its interactions, making it more resource-intensive and time-consuming.

In Blender, you can change material properties like color, roughness, and metallic nature. For example, the roughness property determines how reflective a material is, while the metallic property makes the material look more like metal.

The recommended file format for exporting 3D models from Blender for web use is GLTF (GLB). It is slightly larger but is in JSON format, which is widely supported.

You can convert a Blender model into a React component by exporting it in GLTF format and using tools or libraries like React Three Fiber to render it in a React application.

React Three Fiber is a React renderer for Three.js, allowing you to build 3D graphics using declarative components in React.

In React Three Fiber, you can use various types of lights, such as ambient light, which spreads light evenly without casting shadows, and spotlight, which focuses light in a specific direction and can cast shadows.

You can animate 3D models in React Three Fiber using the 'useFrame' hook, which allows you to run animations on every frame, typically at 60 frames per second.

Sara Vieira
Sara Vieira
26 min
17 Jun, 2022

Comments

Sign in or register to post your comment.
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.

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

TresJS, a declarative way of creating 3D scenes from Vue components
Vue.js London 2023Vue.js London 2023
27 min
TresJS, a declarative way of creating 3D scenes from Vue components
The speaker discovered 3D with 3GS and was inspired to create a 3D ecosystem for the Vue community using Troy.js. The process of setting up a 3D scene and objects in Tress was explained, along with creating and configuring 3D objects. The talk also covered animating objects with Tress and the 'Cientos' package, as well as the future of Tress.js and its compatibility with older versions of Three. The speaker expressed gratitude to sponsors and contributors and highlighted the potential for product customization with Tress.js.
From Blender to the Web - the Journey of a 3D Model
React Advanced 2021React Advanced 2021
27 min
From Blender to the Web - the Journey of a 3D Model
Top Content
This Talk is about Blender, a free and open-source 3D software, and integrating 3D models into websites. The speaker discusses exporting 3D models to the web using the gltf format and compressing them using gltf transform and draco compression. They also cover integrating the 3D model into a website using React and React 3 fiber, troubleshooting installation and error issues, and working with refs and frames. The Talk explores rendering, lighting, mathematics, and experimentation in 3D, as well as interaction and rendering effects. The speaker also mentions their favorite creation in Blender.
Build a 3D Solar System with Hand Recognition and Three.js
JSNation 2022JSNation 2022
36 min
Build a 3D Solar System with Hand Recognition and Three.js
Top Content
This Talk explores the use of TypeScript, 3JS, hand recognition, and TensorFlow.js to create 3D experiences on the web. It covers topics such as rendering 3D objects, adding lights and objects, hand tracking, and creating interactive gestures. The speaker demonstrates how to build a cube and a bouncy box, move objects with flick gestures, and create a solar system with stars and planets. The Talk also discusses the possibilities of using hand gestures for web navigation and controlling websites, as well as the performance limits of these technologies.
Scaling React-Three-Fiber Applications beyond the Hello World
React Summit 2023React Summit 2023
20 min
Scaling React-Three-Fiber Applications beyond the Hello World
Watch video: Scaling React-Three-Fiber Applications beyond the Hello World
WebGL has evolved from showcasing technology to being used in everyday applications like Google Maps and Figma. React and 3.js can be used together to build WebGL applications, allowing for reusable components and declarative development. Building complex 3D graphics applications requires efficient data structures, algorithms, and rendering techniques. The Flux CAD editor uses React, 3.js, and React ReFiber to handle complex engineering documents and optimize GPU utilization. Optimizing the render loop and GPU performance is crucial for improving WebGL application performance. Instance rendering can be used to optimize text rendering in WebGL applications, achieving efficient rendering of thousands of 3D characters.
Bring the Magic of 3D to Your Vue Applications With TresJS
JSNation US 2024JSNation US 2024
9 min
Bring the Magic of 3D to Your Vue Applications With TresJS
What if I told you that this scene or game is entirely done with Vue components? I'm presenting Trace.js, a library to bring 3D to Vue applications. In the setup syntax of Vue, we import the TraceCampos component and add it with a prop called window size. By adding a light to the scene, we can create our first 3D renderer. The post processing library for TresCS was launched, allowing developers to easily add effects like glow to their 3D scenes. TresCS allows you to build impressive scenes with minimal code. Let's quickly demo some galaxies using view components.

Workshops on related topic

How to make amazing generative art with simple JavaScript code
JS GameDev Summit 2022JS GameDev Summit 2022
165 min
How to make amazing generative art with simple JavaScript code
Top Content
WorkshopFree
Frank Force
Frank Force
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.
Introduction to WebXR with Babylon.js
JS GameDev Summit 2022JS GameDev Summit 2022
86 min
Introduction to WebXR with Babylon.js
Workshop
Gustavo Cordido
Gustavo Cordido
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.