In this insightful Q&A session, we had the pleasure of chatting with Sara Vieira, a talented frontend engineer originally from Portugal (or tiny Spain as she likes to call it!). Sara shared her perspectives on building immersive 3D experiences for the web, leveraging tools like React and Blender, as well as her thoughts on the future of web development.

Watch the full interview here

Here are the highlights of our talk.

Q&A with Sara Vieira

Ana Marija Majkić (AMM): Tell us a bit about your background.

Sara Vieira (SV): I didn't really go to college. I started being a full stack frontend engineer when I started with WordPress back in, like, 10 years ago or something. From then, I just started growing into the frontend, learning more and more JavaScript, more, I started learning React. And now here we are. And now I do some Node as well. And in my last company, I also learned some Rust.

AMM: What are some best practices for managing complex 3D scenes with multiple objects and animations within React?

SV: First of all, create components. I feel like that's just a good React idea in general. Create components, create instances of your objects instead of making the same object over and over again, because like that will increase a lot the number of vertices on your page. A vertex is like a corner of a square or triangle - the more vertices, the harder it is to render and compute. You can instance these things in Blender too if you're just doing 3D modeling. Minifying 3D assets like GLTF or GLB files can also make them way smaller so they don't take up as much space on the user's machine. Try to keep how much data you're sending down the wire to a minimum and create components. That's very important.

AMM: Could we introduce and manipulate 3D assets created in external 3D tools like Blender into our projects?

SV: Okay, let's say you made a model in Blender, like a little Pikachu. You can export it as a GLB or GLTF file to use on the web. With React Three Fiber, you can transform that GLTF into a React component so you can actually change what's inside it. It's like having a cylinder component instead of a div, and you can change the radius or put other shapes inside.

Changing materials and textures has also gotten way simpler recently. You can literally edit materials on the frontend and make an editor for that. Assuming you're using GLB/GLTF and React Three Fiber, there's a website that will basically turn your 3D model from GLTF into a React component. Then you can do whatever you want with it.

AMM: What are some useful resources to get started on building 3D experiences?

SV: To learn 3D with Blender, just go on YouTube and search for "the Blender donut guy" - there's this Australian guy who has an 8-hour tutorial on making a donut that covers most Blender basics. If you have some extra income, I'd really recommend "The Three.js Journey" course by Bruno Simon. It's very detailed on using Three.js for web 3D.

If you don't want to learn modeling, just look through the React Three Fiber documentation and examples - you can find lots of code samples there. For free 3D models, check out sites like Sketchfab, BlendSwap, or just Google "Kenny" plus "NL" to find this guy who makes open-source game assets you can use.

AMM: What is your largest passion as a developer?

SV: I like fixing things - it boggles my brain in a good way. I have ADHD, so the idea of just fixing problems and making sense of data really brings me joy. Working at a search company made me love data because it's like putting the world into a JSON file that finally makes sense to my brain. All my life I had to adjust to how the neurotypical world thinks, but data lets me see it in a way that clicks for me. Right now I'm just randomly scraping the Steam API because I need that game data in my life as a gigantic JSON file. I'm basically trying to fix my brain with code.

AMM: How do you envision the future of web development?

SV: Well, I envision the future with tools like GitHub Co-pilot helping us out, but I don't think AI is going to fully take over engineering jobs in the next 10 years at least. I may just be an old fart who doesn't want the robot replacements yet!

I see development becoming way more inclusive, which is great. There's been such positive change already in having more diverse voices building products and websites instead of just dudes. The more people from different backgrounds can become engineers, the better our apps and sites will get - kind of like what happened with indie game devs making wildly creative games once game dev became more accessible.

For the code side, serverless is probably the future. And sometime we'll replace React, but not the JSX part because JSX is just 10/10 - no one's really complaining about that. When we do get a new framework, I think JavaScript and TypeScript will converge into one language where you choose to use types or not, instead of them being separate.

Overall, I hope it gets a bit easier to get started as a developer, too. I've seen the difficulty gradually increase, so I'd love to see that slide back down so it's more approachable. But AI world domination? Maybe once I'm retired!

Don't Miss Sara's Insightful Talk at Frontend Nation!

Sara's candid and passionate insights provide a fascinating glimpse into the cutting-edge world of 3D web development and the boundless potential of the ever-evolving frontend ecosystem. Don't miss your chance to catch Sara's talk "Creating 3D Experiences with React" at the upcoming Frontend Nation online conference! She'll be removing the daunting perception around 3D web development and demonstrating how to bring a 3D model from Blender into the web, complete with animations, accessibility controls, and performance optimizations.

Secure your free spot today and join a global community of passionate frontend devs.

Follow Frontend Nation on social media to stay up-to-date and spread the frontend love! Frontend Nation also offers sponsorship opportunities for brands and the chance to feature your developer community.