Build and Deploy an AI-Powered 3D Website Using React | 2024 Three JS Course Tutorial for Beginners
Вставка
- Опубліковано 15 тра 2024
- Many large corporations already use 3D graphics to showcase their products. Learn how to build your own ThreeJS 3D product website and infuse it with the power of artificial intelligence!
BUG: A "failed to load resource" error prevents the project from running as a result of a broken CDN link used by an earlier version of drei. Updating to new version of drei and fiber fixes this problem. github.com/adrianhajdin/proje...
💻 Ultimate Next 14 Course - jsmastery.pro
📚 FREE Ultimate ThreeJS Cheatsheet: resource.jsmastery.pro/threej...
⭐Hostinger - hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save up to 91% on all yearly hosting plans.
📚 Materials/References:
GitHub Code (give it a star ⭐): github.com/adrianhajdin/proje...
GitHub Gist Code Snippets: gist.github.com/adrianhajdin/...
Assets, Components, Public folders: drive.google.com/drive/folder...
@AndersonMancini's content:
Course: www.udemy.com/course/react-th...
UA-cam Announcement: • [ TRAILER ] My first R...
In this course, you'll learn the following:
- ThreeJS - a powerful 3D graphics library for rendering and animating the 3D model
- React Three Fiber - a popular library for creating 3D graphics with ThreeJS in React
- TailwindCSS - a popular utility-first CSS styling framework
- Framer Motion - the most popular library used to bring your React website to life with animations
You'll also learn how to:
- Load, create and customize stunning 3D models and geometries with various lights, as well as understand the 3D world with a camera and positioning of an object in space.
- Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
- Add custom color and file support.
- Generate and use images through DALLE AI
- Download the resulting t-shirt model image
- Ensure responsiveness across all devices and improve your site's performance
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM on Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
👇 Time Stamps:
00:00:00 Intro
00:08:51 Setup
00:20:37 Homepage
00:36:49 Customizer
00:48:01 3D Canvas
00:56:02 ThreeJS Camera
01:07:05 ThreeJS Lighting
01:23:49 Color Picker
01:27:01 File Picker
01:46:23 AI Backend
01:59:12 AI Dalle Picker
02:12:24 Deployment
Bug fix: A "failed to load resource" error prevents the project from running as a result of a broken CDN link used by an earlier version of drei. Updating to new version of drei and fiber fixes this problem. github.com/adrianhajdin/project_threejs_ai/pull/45
Bug: Color of the shirt doesn't change using colorpicker
I've been having issues activating the ai image generator on the site
Why my configuration is not working it says it doesn't have name Configuration as export name.
Thanks very mcuh for the tutorial but i got some problems with the openai configuration
@@DaUnknownMen Hi, Have you fixed it yet?
You nailed it! I can't explain how amazing this tutorial is! Please enlighten us with more & more contents like this ❤
Thank You man for creating these very helping tutorials the one thing that i really like in your code is that you code in an organized manner
Holy crap. This is amazing. I love you JM, please do more kind of tutorials like these but with MERN 🙏🙏
Thank you, more to come!
holy moly! This is amazing. Web development nowadays is just on another level
It truly is!
You saved hours of my life researching for three.js, I can't thank you enough for sharing this fantastic content, love you
Appreciate it
I can't believe how captivated I am by this masterpiece. I've only watched the first 5 minutes and I'm already feeling an overwhelming sense of excitement to see the rest. You are truly amazing! Your presentation of this work is nothing short of extraordinary, and I have been eagerly anticipating it for months.
Wow, thank you!
Do I need to purchase anything from any website to build this application?
Great work! Your dedication and hard work are truly admirable. Keep up the excellent job!👍
the first few seconds is damn inspiring, pls keep us updated
Thank you so much, I always wanted to get started with threejs and this tutorial definitely helped me to finally do it. I've just completed this project and added the missing button and it look STUNNING! thank you so much for this!
Amazing, congrats!
If this doesn't get me a job, I'm sure nothing will. This is top-notch!
Thank you, enjoy!
lmao exactly what I was thinking lol
🤣🤣 Hope it does
😂😂😂 actually 🤣
@@javascriptmasterythanks very much instructor
As always, so amazing!! Thank YOU so much Adrian🙏🙏 I greatly appreciate the effort you have put into bringing such an amazing development experience to us. 🙏😍
Thank you so much!
Amazing, I was waiting for your next 3D project, in days, and here you go, you did it again, thanks man, you are the best!
Thank you!
Did your code run??
OMG! I can't thank you enough for sharing such great content with us for ASBOLUTELY FREE!!!
That's the goal!
Do I need to purchase anything from any website to build this application?
Yes please please, record next threejs video, love your way of explaining and love the threejs
Thank you for your Content, it is such a pleasure learning from you! Great work and instructions!
FANTASTIC :) I"m carving out 2-3 hours tomorrow first thing to build this. Thank you. LOVE IT!
Hope you enjoy it!
You rock, Adrian. What a React Three tutorial !
I'll be trying this video shortly and I hope it works, it was exactly what I was looking for, for the AI. The show room at the start and car website looked awesome to. Thank you for providing this via UA-cam
Thank you for watching, enjoy!
Hi! I just want to Thank you for every single tutorial.❤
One more thing that will make your projects 100% complete is showing us how to use the login/signup system in these AI apps so that we can also gather user data and can fully land it with real-time users.
Thanks Again.
in less than 3 months you've become my favorite developer on youtube. You literally transformed my development life and my portfolio is filled with most of your projects. I'm so excited to start this and I hope I'll be able to pay you for all you've done in my life. I love you a lot and God bless you.
can you give your portfolio link ??? i would love to visit
Link your portfolio please
Amazing 😍❤ Really thank you for making this kind of great videos 🔥
❤❤❤ loved to be referenced here. My jewelry project is getting famous heheh. Thank you very much.
Let me be the first guy to acknowledge your presence. Thank you.
You did that one too? I had no idea - great work! ⭐
Hey
your jewlery models are incredible... Are you a 3d designer or do you also make 3D apps?
@namcoanyc7777 thanks hehehe. I'm just a 3d developers. The 3d models are imported from blender. Some are free and some are from a friend of mine who is actually a jewelry designer ✨️ ☺️
Thanks a lot, superb material as always!!
Great tutorial! I love how you explain things and you always come out with awesome projects. When do you think you will have the time to maybe update the GitHub repo with a version that also contains the Download feature for the T-Shirt? I noticed that it is missing in the video and also in your repo and I would love to know how to do that. Thank you! :)
Finally, ThreeJS! This is my favorite channel in the entire world.
Amasing! Great video and explanetion! tks for sharing!
This is amazing stuff bro, can’t wait to dive in and code alongside you
Hope you enjoy it!
This is really amazing, i cant explain how exciting is for me build this project, thank you so much for the knowledge!!!
Our pleasure!
Thank you for sharing such a great content here on UA-cam for free.
I have never seen such projects on UA-cam. First of all, your voice is so amazing. Your way of explaining is next level. I thank you from the bottom of my heart.❤❤
Thank you so much 😀
This is already so awesome, I just can't wait for the next part
Me neither
Just Awesome, You are really a master of JS! 😊
Can't believe UA-cam's been suggesting me random lock picking videos, and it took them forever to finally recommend this awesome and useful video! What is wrong with the algorithm?!😂😂😂😂 Glad I found this!!!😊
as usual. you've done it again :) great tutorial
Amazing, i am doing a thesis project about web and metaverse. Your video saves my life :)
Enjoy!
Another bomb dropped😀 as usual. I cant wait to get started on this. Adrian I owe you a lot. Massive Respect brother!!
Thank you, respect!
This man never fails to blow my mind!!!! Thank you so much Adrian!!!
My pleasure!
I am very grateful to you for bringing such high quality tutorials !!
Thank you!
Did the code run??
Thank you again Adrian this is amazing.. appreciate all that you do for us.
Thank you!
Wowo! amazing please bring such more creative tuts using threeJS, webGL and Gsap
masterpiece I swear 1 course with god knows how many benefits absofkinlutely amazing!!
Bro, you are the best at this !!!
This makes learning alot more fun for me! Thankyou so much!
Yess, I'm happy to hear that!
Amazing project !!!
Another great video and easy to follow. Thank you 🙂
Thank you!
Better than my university courses. There goes my weekend. My friends are going out to the movies and the beach but ill be right here learning, growing, and expanding my skill set. Thank you so much for sharing you wisdom with us
Thank you, enjoy!
U shouldnt have any friends that enjoy life. Stay motivated and only learn for the rest of your life🔥🔥🔥🔥
I'm doing the exact same thing
@@lokilokilokilokilokilokiloki with out friends how can we enjoy
each one enjoys their weekend the way they feel better, don't devalue the happiness of others.
5.8k+...Thanks Adrian. Another great video !!!
Great work bro 👍😁
I love your content and your way of teaching
Thank you!
Hey, amazing video, can wait to start on this project!
Hope you enjoy it!
You are amazing, thank you for this wonderful sharing !
Thank you very much for GREAT WORK!!! You are my savior && my Great Professor!!! with LOVE!!!👏😃🌏💖🙏
Man ur just amazing bro thank you
Thank you, this work is amazing
Never disappoints!!! Thanks ❤
Appreciate it! ❤️
I don't know how to express my words but thank you so much, your videos are very very cool you are patient and explain everything so well thank you.
Thank you so much!
Excellent content bro ❤
Literally goosebumps.🙀
weekend sorted
Yess! Enjoy! 😊
OMG!!!!!!! That's crazy! Thank you so much .
Appreciate. It!
absolutely youre the best on youtube! you 🔥adrian
Appreciate it!
That is poweful.. great job as always..!
Thank you! Cheers!
Amazing content!!!
As usual, this an awesome content. Thanks ever so much for being ever so nice in sharing premium content. I bought the NFT marketplace course and it totally transformed me. Perhaps you should consider adding a download button and a checkout box/ wallet connect for users to pay with crypto so the designed t-shirt can be printed and shopped to them. Thanks!
Glad you enjoy it!
I have two words to describe you. BIG BEAUTY!
I love your tutorials :)
Just when I thought it can't get any better ... here you are again with another surprise! You deserve the Nighthood for this Sir Adrian!!
Wow, thank you!
Great Great Work
You are awesome bro 💪 Thank you!
Thank you!
I am waiting for your videos and here comes another masterpiece ✨️ thank you brother
More to come!
In my opinion, Your way of teaching is far more advanced and unique than any other yt creators and some bootcamps out there. I wonder how much impact you made to all the people around you. keep up the good and the finest work.🤟👑
hii, did u finish the tutorial with no version error? i might try it out
@@rodrigoaraujoei Hey there, yes, I already finished the code along with this project and YES I encountered lots of error most of those are typo errors LOL. cool project though
@@letMeSeeTheCode-xq5hv eheh Nice, the typos errors are always there eheh thanks for the feedback;)
Do I need to purchase anything from any website to build this application?
@@sokainakanwal2425 no, it's free.
thanks . your videos are amazing ❤❤❤❤
Excited to make this🎉😊
Enjoy!
One of the most underrated youtube ❤🎉
Wow this is amazing JSM I absolutely love it ❤
Thank you so much!!
OMG! This is awesome ❤❤
Thank you! 😄
The undisputed king is back again with another amazing project. Thank you so much.
Thank you so much!
that's awesome 😍
This was wonderfull. Thank you
Your videos are awesome. Many thanks for it
Thank you!
Absolute legend. Thanks man.
I believe dispose={null} makes it so the browser doesn't dispose of WebGL context unless the component is fully unmounted. WebGL is expensive and it's best to reuse when possible, so this makes the browser reuse context.
can you give me any solution for this error -> THREE.WebGLRenderer: Context Lost ...the site shows for few seconds but then the content disappears automatically
This channel is goldmine!!
I'm glad you like it!
Hi Adrain, I'm the huge fun of your YT channel, thanks for your great cources with amazing content, I had learnt a lot from you. May I ask you how should we use ChatGPT to generate the config files like you did for this course inside video?
I am currently on a cash crunch but especially enable ads on your tutorial channel and I also don't skip ads, that's my way of saying a "Thank You".
You're helping so many people from developing countries, including mine (India)
Always impressive projects🔥🔥🔥🔥 I hope one day I'll be able to join the JSM class.
Thank you!
Great idea and video congrats
Great work !!!
Thank you!
Wow so amazing adrian..! Keep going..
Thank you!
good work bro 🤩
If you are having difficulty on applying the styling, you can try changing the content in tailwind.config.js to "./index.html", "./src/**/*.{js,ts,jsx,tsx}". It got me worried when I was following the video exactly but the styling are not being implemented.
we need more like this!
More to come!
LOved it!
Wow. Great work.
Thank you! Cheers!
damn! you are something else man! love you man!!!
Much love
This is amaing, as a freelancer I can add more value to client after this. you are amaing.
Exactly, enjoy it!
wow super! ❤
Can you create a tutorial for making the first ring website that you showed in this video? That would be the coolest website ever.
Great suggestion!
Wow, that's just amazing! Could you share a service where you create a beautiful presentation at the beginning of the video?
Thks a lot for this video i am trying to create a website to decorate a house with funitures and paint now i learn how i can change color thank you
Magnificent 🎉🎉
Thank you!
beautiful video
👍