Blender to 3D website in minutes for free: Free tutorial 1, getting started
ฝัง
- เผยแพร่เมื่อ 3 ธ.ค. 2022
- 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... - แนวปฏิบัติและการใช้ชีวิต
you are a zen master good sir. calm and to the point - much appreciated 🙏
“ I am your floating head developer at the corner” 😂😂😂 liked and subscribed!😅
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!
come in the Discord and we can talk about it as you progress!
Just discovered your channel AMAZING Subbed!
kickass! Come to Discord for any questions or to share
Good sir, please link the discord
Thanks !
Thank You!
Great tutorial. No fuzz.
Congratulation！I have been your 1000 fun
this was a goal and milestone, a lot harder to get there than expected. thanks
Thank you.
great video, thanks a lot for this video and please make more and more videos on Three JS. GOD Bless.
there's quite a few after this one, working on the next one for lighting now :)
@@AnthonyAragues surely checking them out now.
Super!
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
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
Can we see?
@@AnthonyAraguescan We request more video about this, for example virtual House viewing where it is interactive to the user, can click the model etc..
grat idea!@@carlsaqui165
Yes!!!
ty! what about animations? playing animations?
I covered that recently! th-cam.com/video/StwHPsqerMI/w-d-xo.html let me know if I missed anything you'd like to see
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?
this new one integrates vercel deployment: th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
how can i make the image into 3d like you? when i import the image as reference i can't make into wireframe
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
Can you like intersct with an object and have widget pop up?
yes, come bye to the discord and we can discuss
I am trying your tutorial and when I use the prompt npm run dev, it gives me a link to your project page.
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
Any plan to restore the repo somewhere? Thanks.
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
Couldn't find the repo
try this new ones please: th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
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
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: th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
Followed this tutorial step by step but when I clicked on the localhost link it still poitns to the web3d experiemnet website
can you give this new one a try? th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
link to github repo? old isnt working
try this new one, it's simplified: th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
why export it in glb and auto generate a gltf, when you can export in gltf? Honest question
glb is compressed, you can leave it as glb in gltfjsx conversion as well.
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
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
github repository is delete ?
can you give this new one. a try? th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
do you have an example of the final website?
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.
@@AnthonyAragues I’m still a little confused to what you’re making
@@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
there's a nother video as well that it more of an intro th-cam.com/video/1BvLpt7egss/w-d-xo.html
@@AnthonyAragues thanks
thanks but the music is annoying please remove it or decrease the volume
I started a newer easier one and it doesnt have any music: th-cam.com/video/1Qd9VVbEoZ8/w-d-xo.html
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.
：）
at 5:30, "npx gltfjsx ../public/model.glb" is put into the terminal, i have done the same (i have already done "cd src") and i get an error code "npm error code ENOENT This is realted to npm not being able to find a file" what can i do to fix this? Thanks in advance!
if your glb is there, then you might just be missing gltfjsx, npm install it globally... feel free to drop by Discord for help
@@AnthonyAragues thank you, i don't have a discord but i will make one now just to join, what is the npm global install code? great tutorial btw you're helping me loads
@@jakeburnett6763 "npm install gtlfjsx --global"
@@jakeburnett6763 some of these videos got outdated, but I can usually help people get going pretty quick through Discord
Thank You!