Blender to 3D website in minutes for free: Free tutorial 1, getting started

This is a completely free series built on free software. We will walk through every step. Beyond that feel free to come join us in Discord to hare progress or ask questions.
This is accessible for Blender 3d artists and web developers. If you have to learn everything it's still doable but will take longer.
3Dialogue Discord Community / discord
three.js (for inspiration): threejs.org/
react 3 fiber: docs.pmnd.rs/react-three-fibe...
What you will need to get started:
Node.js: nodejs.org/en/download/
VSCode (Or similar): code.visualstudio.com/download
Latest Blender Release: www.blender.org/download/
repo: github.com/benjaminmiles/reac...

[@jollylama4773]

you are a zen master good sir. calm and to the point - much appreciated 🙏

[@Gabirell]

“ I am your floating head developer at the corner” 😂😂😂 liked and subscribed!😅

[@tweedledumart4154]

Great tutorial. No fuzz.

[@KiZzymesl]

Thanks !

[@bram_gunst]

Thank You!

[@bram_gunst]

Just discovered your channel AMAZING Subbed!

[@AnthonyAragues]

kickass! Come to Discord for any questions or to share

[@schimenykrikets9692]

Good sir, please link the discord

[@markobegic7791]

I've been searching for solution to make 3D configurator with Blender for my furniture web-store, I think You just gave me solution! Thank you sir!

[@AnthonyAragues]

come in the Discord and we can talk about it as you progress!

[@fitzladams]

Thank you.

[@aiortairaan5458]

great video, thanks a lot for this video and please make more and more videos on Three JS. GOD Bless.

[@AnthonyAragues]

there's quite a few after this one, working on the next one for lighting now :)

[@aiortairaan5458]

@@AnthonyAragues surely checking them out now.

[@andrew3d]

Super!

[@wormholeinteractive]

Yes!!!

[@yuhangli3095]

Congratulation！I have been your 1000 fun

[@AnthonyAragues]

this was a goal and milestone, a lot harder to get there than expected. thanks

[@voldemortvi4264]

i dont know what to say , im in the middle of creating a Porfolio & i was thinking should i go with Spline or blender , but now i know what should i do THANK YOU SIR ! i hope you keep uploading more of this type of videos +sub

[@AnthonyAragues]

thanks for the comment! There are several videos in the series after this one and I don't plan to stop anytime soon. Would love to see your progress in our Discord

[@thebusinesscentre]

Can we see?

[@carlsaqui165]

​@@AnthonyAraguescan We request more video about this, for example virtual House viewing where it is interactive to the user, can click the model etc..

[@AnthonyAragues]

grat idea!@@carlsaqui165

[@woritsez]

hi, i found this video while looking for a way to get 3D interactive content onto my self hosted wp site. a gallery, or arch viz walk thru, been looking at unreal & unity and even thought maybe there's a way with blender game engine, blender being the environment i'm most familiar with i'd be happy if there was a way to keep it blender. is there a way of getting it beyond localhost, to a site?

[@AnthonyAragues]

this new one integrates vercel deployment: kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@imark_b]

I am trying your tutorial and when I use the prompt npm run dev, it gives me a link to your project page.

[@AnthonyAragues]

if you want to drop by the Discord I'm happy to help you. I added too much to the repo and forgot to leave it alone for older videos. It's basically this one: github.com/benjaminmiles/react-three-vite I'll change this videos link to match

[@kianasimp9694]

Hey, love your tutorials, they are super helpful for someone who has just started doing 3D. I have encountered a problem though, for some reason, after I run "npx gltfjsx ../public/model.glb" instead of creating model.js and model.jsx, it just creates model.jsx. I tried everything I could think of and it won't create model.jx still. Would be super grateful if you could help me out. Thanks.

[@stephen285]

ty! what about animations? playing animations?

[@AnthonyAragues]

I covered that recently! kzbin.info/www/bejne/iaXaeYOppsqlg6s let me know if I missed anything you'd like to see

[@user-si3nl6kx5e]

how can i make the image into 3d like you? when i import the image as reference i can't make into wireframe

[@AnthonyAragues]

come discuss on Discord, this is a longer discussion. I don't understand what you are working with and the result you expect. Most of this stuff we are doing in these videos is taking a 3d thing from Blender and deploying it as a webpage

[@CryptoWagyus]

Followed this tutorial step by step but when I clicked on the localhost link it still poitns to the web3d experiemnet website

[@AnthonyAragues]

can you give this new one a try? kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@captainofthewhitetower]

Can you like intersct with an object and have widget pop up?

[@AnthonyAragues]

yes, come bye to the discord and we can discuss

[@zinedine1837]

i have a problem when importing 3D models , some meshes come entirely white even if i apply the correct material to them. if anyone know why is that please help me

[@AnthonyAragues]

it's a lighting issue most likely. reduce the light intensity. I documented it in later ones. it's also automated in the new project: kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@jeanerich]

Any plan to restore the repo somewhere? Thanks.

[@AnthonyAragues]

I'm working on a new one that updates everything and makes it all easier, can;t wait to release it, will all be free. In the meantime this is the repo I started with, it's very similar: github.com/benjaminmiles/react-three-vite

[@CatapgTV]

why export it in glb and auto generate a gltf, when you can export in gltf? Honest question

[@AnthonyAragues]

glb is compressed, you can leave it as glb in gltfjsx conversion as well.

[@CatapgTV]

is there any specific reason to export as glb instead of gltf from Blender? Sorry I am more of a 3D artist and not a developer, have been having issues with the model showing the materials with bugs such as glass having different types of glass properties depending of the mesh triangulation. So I want to understand if that’s because I am exporting and using gltf instead. I have an issue with big meshes basically, even if I triangulate the mesh to fix these material issues if starts showing the triangles of the mesh itself having these material artifacts

[@AnthonyAragues]

no problem, feel free to drop by the discord for chat anytime.@@CatapgTV glb is just smaller in size so it can save in bandwodth when deployed, that's the only reason I can think of. your glass and material issues have nothing to do with glb vs gltf. you can watch the video on "Materials" in this series it might helps, but also willing to help you on Discord as you run into things

[@azents6907]

github repository is delete ?

[@AnthonyAragues]

can you give this new one. a try? kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@AchHadda]

Couldn't find the repo

[@AnthonyAragues]

try this new ones please: kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@artemis3688]

link to github repo? old isnt working

[@AnthonyAragues]

try this new one, it's simplified: kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@adyanknx]

do you have an example of the final website?

[@AnthonyAragues]

I've been through the process a few times now and felt like it was a waste because I wasnt sharing it a I went. My hope is that everyone can follow along the process this time and come up with something different. I'll do a review video to showcase after a few.

[@adyanknx]

@@AnthonyAragues I’m still a little confused to what you’re making

[@AnthonyAragues]

@@adyanknx a website that is 3D and interactive. Feels video game / immersion like. Hopefully I can make it more clear as I go. I need to do some videos on more examples and ways it's applied

[@AnthonyAragues]

there's a nother video as well that it more of an intro kzbin.info/www/bejne/Z3PZfaOqbMqaqdU

[@adyanknx]

@@AnthonyAragues thanks

[@ayoubelouardi8941]

thanks but the music is annoying please remove it or decrease the volume

[@AnthonyAragues]

I started a newer easier one and it doesnt have any music: kzbin.info/www/bejne/Z4LHaomMl6qikJo

[@HolahkuTaigiTWFormosanDiplomat]

：）

[@user-sb5ln2fn3l]

Thank You!