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. https://github.com/adrianhajdin/project_threejs_ai/pull/45
💻 JS Mastery Pro – https://jsmastery.pro/youtube
✅ A special YOUTUBE discount code is automatically applied!
📚 FREE Ultimate ThreeJS Cheatsheet: https://resource.jsmastery.pro/threejs-cheatsheet
⭐Hostinger – https://hostinger.com/mastery10
GitHub Code (give it a star ⭐): https://github.com/adrianhajdin/project_threejs_ai
GitHub Gist Code Snippets: https://gist.github.com/adrianhajdin/597252d9d77fa65e30f596d99b03cc11
Assets, Components, Public folders: https://drive.google.com/drive/folders/166wA5NsMV_5D8NN7ujDDbPXC1X65vf2I?usp=share_link
YouTube Announcement: https://youtu.be/vn8saiyxZV8
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 – https://discord.gg/n6EdbFJ
🐦 Follow JSM on Twitter – https://twitter.com/jsmasterypro
💼 Business Inquiries: firstname.lastname@example.org
👇 Time Stamps:
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