Lots of big corporations already utilize 3D graphics to display their items. Find out how to develop your own ThreeJS 3D product website and instill it with the power of artificial intelligence!
BUG: A “stopped working to fill resource” error avoids the project from running as a result of a damaged CDN link utilized by an earlier version of drei. Updating to new variation of drei and fiber repairs this problem. https://github.com/adrianhajdin/project_threejs_ai/pull/45
JS Proficiency Pro – https://jsmastery.pro/youtube
An unique YOUTUBE discount code is instantly applied!
FREE Ultimate ThreeJS Cheatsheet: https://resource.jsmastery.pro/threejs-cheatsheet
⭐ Hostinger – https://hostinger.com/mastery10
Use the code JAVASCRIPTMASTERY to save approximately 91% on all yearly hosting plans.
Materials/References:
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
@AndersonMancini’s material:
Course: https://www.udemy.com/course/react-three-fiber-configurator/
YouTube Announcement: https://youtu.be/vn8saiyxZV8
In this course, you’ll discover the following:
– ThreeJS – an effective 3D graphics library for rendering and animating the 3D design
– React 3 Fiber – a popular library for producing 3D graphics with ThreeJS in React
– TailwindCSS – a popular utility-first CSS styling structure
– Motion – the most popular library used to bring your React site to life with animations
You’ll also learn how to:
– Load, create and customize sensational 3D designs and geometries with various lights, in addition to understand the 3D world with a video camera and positioning of an item in area.
– Make your code reusable and scalable using Higher Order Components (HOCs) and other industry-standard best practices
– Include custom-made color and file support.
– Create and utilize images through DALLE AI
– Download the resulting t-shirt model image
– Ensure responsiveness throughout all gadgets and enhance your site’s performance
Sign Up With JSM on Discord – https://discord.gg/n6EdbFJ
Follow JSM on Twitter – https://twitter.com/jsmasterypro
Follow JSM on Instagram – https://instagram.com/javascriptmastery
Company Inquiries: [email protected]
Time Stamps:
00:00:00 Introduction
00:08:51 Setup
00:20:37 Homepage
00:36:49 Customizer
00:48:01 3D Canvas
00:56:02 ThreeJS Electronic 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
Source