Build and Deploy an AI-Powered 3D Website Using React | 2024 Three JS Course Tutorial for Beginners

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...
KZbin 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: [e-mail]
👇 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

[@javascriptmastery]

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

[@Mindlyt]

Bug: Color of the shirt doesn't change using colorpicker

[@devontaycross5788]

I've been having issues activating the ai image generator on the site

[@AyushPathak-lq1so]

Why my configuration is not working it says it doesn't have name Configuration as export name.

[@noumbissistael1470]

Thanks very mcuh for the tutorial but i got some problems with the openai configuration

[@km6qb]

@@Mindlyt Hi, Have you fixed it yet?

[@mdadnanshiragee184]

You nailed it! I can't explain how amazing this tutorial is! Please enlighten us with more & more contents like this ❤

[@bunsbof]

You saved hours of my life researching for three.js, I can't thank you enough for sharing this fantastic content, love you

[@javascriptmastery]

Appreciate it

[@see-it-for-yourself]

holy moly! This is amazing. Web development nowadays is just on another level

[@javascriptmastery]

It truly is!

[@eliecersmora5931]

Holy crap. This is amazing. I love you JM, please do more kind of tutorials like these but with MERN 🙏🙏

[@javascriptmastery]

Thank you, more to come!

[@hasanradi93]

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.

[@javascriptmastery]

Wow, thank you!

[@sokainakanwal2425]

Do I need to purchase anything from any website to build this application?

[@thequickcode5144]

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

[@jonnjon1]

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!

[@javascriptmastery]

Amazing, congrats!

[@sulemanrehman6384]

OMG! I can't thank you enough for sharing such great content with us for ASBOLUTELY FREE!!!

[@javascriptmastery]

That's the goal!

[@sokainakanwal2425]

Do I need to purchase anything from any website to build this application?

[@programmerslife01]

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. 🙏😍

[@javascriptmastery]

Thank you so much!

[@confidenceclinton8366]

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.

[@asaduzzamansunam9845]

can you give your portfolio link ??? i would love to visit

[@giftmoyo9957]

Link your portfolio please

[@shahariarhossainremon6500]

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.

[@abenjamin13]

FANTASTIC :) I"m carving out 2-3 hours tomorrow first thing to build this. Thank you. LOVE IT!

[@javascriptmastery]

Hope you enjoy it!

[@damithrathnayaka9324]

Great work! Your dedication and hard work are truly admirable. Keep up the excellent job!👍

[@redqueengaming6]

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 KZbin

[@javascriptmastery]

Thank you for watching, enjoy!

[@islamicpoint__]

I have never seen such projects on KZbin. First of all, your voice is so amazing. Your way of explaining is next level. I thank you from the bottom of my heart.❤❤

[@javascriptmastery]

Thank you so much 😀

[@mosux6908]

Finally, ThreeJS! This is my favorite channel in the entire world.

[@Joseph-do9ue]

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!

[@javascriptmastery]

Thank you!

[@ishitakhare7310]

Did your code run??

[@islandblaze007]

This is amazing stuff bro, can’t wait to dive in and code alongside you

[@javascriptmastery]

Hope you enjoy it!

[@trojancodes]

the first few seconds is damn inspiring, pls keep us updated

[@jorgearley9321]

You rock, Adrian. What a React Three tutorial !

[@sweatypotato248]

Yes please please, record next threejs video, love your way of explaining and love the threejs

[@miketellez1066]

Thank you for your Content, it is such a pleasure learning from you! Great work and instructions!

[@dan0_0nad76]

This is already so awesome, I just can't wait for the next part

[@javascriptmastery]

Me neither

[@AndersonMancini]

❤❤❤ loved to be referenced here. My jewelry project is getting famous heheh. Thank you very much.

[@ooogabooga5111]

Let me be the first guy to acknowledge your presence. Thank you.

[@javascriptmastery]

You did that one too? I had no idea - great work! ⭐

[@gameboyv1790]

Hey

[@namcoanyc7777]

your jewlery models are incredible... Are you a 3d designer or do you also make 3D apps?

[@AndersonMancini]

@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 ✨️ ☺️

[@nnn5779]

Can't believe KZbin'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!!!😊

[@kiko_game495]

This man never fails to blow my mind!!!! Thank you so much Adrian!!!

[@javascriptmastery]

My pleasure!

[@danielsalgado4031]

This is really amazing, i cant explain how exciting is for me build this project, thank you so much for the knowledge!!!

[@javascriptmastery]

Our pleasure!

[@FSRezende]

Amasing! Great video and explanetion! tks for sharing!

[@andcaru]

Thanks a lot, superb material as always!!

[@sang4005]

Thank you for sharing such a great content here on KZbin for free.

[@ishitsingh2159]

masterpiece I swear 1 course with god knows how many benefits absofkinlutely amazing!!

[@shamalchathuranga]

Amazing 😍❤ Really thank you for making this kind of great videos 🔥

[@kashandro7368]

Another bomb dropped😀 as usual. I cant wait to get started on this. Adrian I owe you a lot. Massive Respect brother!!

[@javascriptmastery]

Thank you, respect!

[@georgeyxu]

Amazing, i am doing a thesis project about web and metaverse. Your video saves my life :)

[@javascriptmastery]

Enjoy!

[@fruxpert]

I have two words to describe you. BIG BEAUTY!

[@realkidding1213]

Just Awesome, You are really a master of JS! 😊

[@learncode5110]

Wowo! amazing please bring such more creative tuts using threeJS, webGL and Gsap

[@dj_supa]

Thank you again Adrian this is amazing.. appreciate all that you do for us.

[@javascriptmastery]

Thank you!

[@htmlfivedev]

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!!

[@javascriptmastery]

Wow, thank you!

[@moai545]

Thank you very much for GREAT WORK!!! You are my savior && my Great Professor!!! with LOVE!!!👏😃🌏💖🙏

[@njoshi00]

I am very grateful to you for bringing such high quality tutorials !!

[@javascriptmastery]

Thank you!

[@ishitakhare7310]

Did the code run??

[@jopadjr]

5.8k+...Thanks Adrian. Another great video !!!

[@jaylee5252]

Another great video and easy to follow. Thank you 🙂

[@javascriptmastery]

Thank you!

[@shwethalok186]

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.

[@javascriptmastery]

Thank you so much!

[@user-ce7sp2op7n]

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! :)

[@jose-kb1dg]

as usual. you've done it again :) great tutorial

[@sansom77]

This makes learning alot more fun for me! Thankyou so much!

[@javascriptmastery]

Yess, I'm happy to hear that!

[@TravelVaultx]

The undisputed king is back again with another amazing project. Thank you so much.

[@javascriptmastery]

Thank you so much!

[@spectrumcodes]

Amazing project !!!

[@igorstashok6294]

Bro, you are the best at this !!!

[@oliviajenny9557]

Great work bro 👍😁 I love your content and your way of teaching

[@javascriptmastery]

Thank you!

[@Bennysanders777]

Hey, amazing video, can wait to start on this project!

[@javascriptmastery]

Hope you enjoy it!

[@ChimezieChuta]

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!

[@javascriptmastery]

Glad you enjoy it!

[@adarshchhetri2864]

I am waiting for your videos and here comes another masterpiece ✨️ thank you brother

[@javascriptmastery]

More to come!

[@ntormight3964]

Literally goosebumps.🙀 weekend sorted

[@javascriptmastery]

Yess! Enjoy! 😊

[@OtakRajCodes]

I love your tutorials :)

[@DouglasMoreira-fw6bu]

Never disappoints!!! Thanks ❤

[@javascriptmastery]

Appreciate it! ❤️

[@angusmac1576]

If this doesn't get me a job, I'm sure nothing will. This is top-notch!

[@javascriptmastery]

Thank you, enjoy!

[@mistersir3185]

lmao exactly what I was thinking lol

[@ojochogwudickson2762]

🤣🤣 Hope it does

[@noumbissistael1470]

😂😂😂 actually 🤣

[@noumbissistael1470]

​@@javascriptmasterythanks very much instructor

[@amineaityahya9009]

thanks . your videos are amazing ❤❤❤❤

[@thexelsiorquest]

Amazing content!!!

[@felixogero2354]

Wow this is amazing JSM I absolutely love it ❤

[@javascriptmastery]

Thank you so much!!

[@ernst367]

OMG!!!!!!! That's crazy! Thank you so much .

[@javascriptmastery]

Appreciate. It!

[@tegasteve8195]

This was wonderfull. Thank you

[@houssemeddineadouani3639]

You are amazing, thank you for this wonderful sharing !

[@juanchoprogramacion]

Thank you, this work is amazing

[@louisfire7]

Thank you so much I'm always grateful to God always for the very day I found your KZbin page.

[@danielfachini5479]

That is poweful.. great job as always..!

[@javascriptmastery]

Thank you! Cheers!

[@dejazmach2883]

Man ur just amazing bro thank you

[@ehsanzarei4670]

absolutely youre the best on youtube! you 🔥adrian

[@javascriptmastery]

Appreciate it!

[@julianvelez6563]

Excellent content bro ❤

[@richardmasters2045]

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

[@javascriptmastery]

Thank you, enjoy!

[@lokilokilokilokilokilokiloki]

U shouldnt have any friends that enjoy life. Stay motivated and only learn for the rest of your life🔥🔥🔥🔥

[@kamichikora6035]

I'm doing the exact same thing

[@viswa9848]

@@lokilokilokilokilokilokiloki with out friends how can we enjoy

[@MariaFernanda-zx2lq]

each one enjoys their weekend the way they feel better, don't devalue the happiness of others.

[@pungushe]

Your videos are awesome. Many thanks for it

[@javascriptmastery]

Thank you!

[@anthonycs8]

Great idea and video congrats

[@akshaysolanki5887]

This channel is goldmine!!

[@javascriptmastery]

I'm glad you like it!

[@arjunmk519]

good work bro 🤩

[@mindbodyps]

This is amaing, as a freelancer I can add more value to client after this. you are amaing.

[@javascriptmastery]

Exactly, enjoy it!

[@benbrahimjamil1976]

Great Great Work

[@omarbato9070]

Always impressive projects🔥🔥🔥🔥 I hope one day I'll be able to join the JSM class.

[@javascriptmastery]

Thank you!

[@thirumurugana.k.s5841]

One of the most underrated youtube ❤🎉

[@Neoevenger]

Thanks for creating these Wonderful Videos....❣

[@javascriptmastery]

Glad you like them!

[@hamza77v]

Great work !!!

[@javascriptmastery]

Thank you!

[@nouchance]

You are awesome bro 💪 Thank you!

[@javascriptmastery]

Thank you!

[@TreezTV]

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.

[@yashsaroha379]

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

[@hosseinhaghshenas7440]

that's awesome 😍

[@sandamalgamage1242]

OMG! This is awesome ❤❤

[@javascriptmastery]

Thank you! 😄

[@gundo_g3424]

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

[@abc_cba]

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)

[@tarunaaggarwal4296]

Excited to make this🎉😊

[@javascriptmastery]

Enjoy!

[@razzaqmohammedali4653]

Wow so amazing adrian..! Keep going..

[@javascriptmastery]

Thank you!

[@radiationcreation8394]

your project is very cool and i very impress that's the better way to clear core concepts of the Developer like me and i would also like to promote your Video on different platforms☺☺❤❤

[@solihahmadsohan9877]

You deserve more subscribers ❤❤❤❤

[@MultiSammy1010]

Wow. Great work.

[@javascriptmastery]

Thank you! Cheers!

[@mohammadesmaily6857]

beautiful video 👍

[@arielelias2413]

we need more like this!

[@javascriptmastery]

More to come!

[@mohamedabdulla8097]

Always exceed our expectations. ❤

[@javascriptmastery]

That's the goal!

[@gabrielrincon6744]

wooow friend you are great and innovative. thank you greetings from venezuela

[@javascriptmastery]

Thank you! Cheers!

[@grigodoes]

OMG ITS BEST VIDEO for learning Three js

[@javascriptmastery]

Glad it was helpful!

[@salmaahmed7789]

Awesooooooome 💖😍😍

[@ashishkr.229]

Bro its nxt lvl 🔥

[@javascriptmastery]

Thank you!