Build a Virtual AI Art Gallery: Interactive 3D Design with Three.js for Beginners
4.7 هزار بار بازدید -
8 ماه پیش
-
Dive into this engaging Three.js
Dive into this engaging Three.js tutorial for beginners and learn to build an interactive 3D art gallery from scratch. Ideal for artists, designers, or anyone interested in showcasing their portfolio in a unique and immersive format. In this series, we'll cover essential concepts including scene creation, camera setup, renderer development, geometry, material and texture creation, meshing, animation, controls, and real-time UI configuration using a GUI debugger. Stay tuned for subsequent parts, and don't forget to subscribe!
✉️ Contact Me:
🤝 ✅ Open to freelance work and gigs:
Email: [email protected]
LinkedIn: LinkedIn: emilian-kasemi
GitHub: https://github.com/theringsofsaturn
Live Web App: https://emilian-kasemi-3d-art-gallery...
Source Code: https://github.com/theringsofsaturn/3...
Materials & Resources:
The Office Ceiling material in 4K: https://ambientcg.com/view?id=OfficeC...
The Wood Floor in 4K: https://ambientcg.com/view?id=WoodFlo...
The Walls in 4K: https://polyhaven.com/a/leather_white
3D Model Statue: https://sketchfab.com/3d-models/100kz...
Installation:
*To run the project on your computer:
- First, install Node on your computer if you don't have it. Link to download Node.
- Then "download zip" or clone the project on my GitHub.
- Open the terminal at the root level and run `npm install`.
- Then run `npx vite` to run the project live.
- Click and open the URL address you see in the terminal.
HELP!
If you want to follow exactly my tutorial and what I am using (like for example the exact Three.js module), on this repository, click "commits", and you will see all the commits list. Then scroll down to the first commit (later to other commits for other versions to review and compare your code with mine). On the right side of each commit name, you will see three small icons:
- a code number - which if you hover on it says "view commit details".
- a two square icon - which if you hover says "view full SHA"
- 'angle brackets' icon - which if you hover on says "browse repository at this point".
Click this last icon I mentioned, 'angle brackets'. You will be redirected to the exact point in time of this project. You can then download the repository as you normally do with the green button "Code".
⭐ Contents ⭐
⌨ (0:00:00) Intro
⌨ (0:00:46) What we are going to build
⌨ (0:01:45) Setup on Windows
⌨ (0:11:36) Let’s go live
⌨ (0:22:05) Always add the 3JS script before everything else
⌨ (0:30:35) 3JS must be inside the folder
⌨ (0:39:50) The camera is not visible, it’s more like a point of view
⌨ (0:51:19) Anti-alias means smooth edges
⌨ (0:56:16) Lights
⌨ (1:11:56) 3D object
⌨ (1:28:00) Animate our cube
⌨ (1:39:28) Controls
⌨ (1:47:37) Change the position of the cube or camera
⌨ (1:58:53) Floor plane, the ground
⌨ (2:06:24) New material
⌨ (2:11:48) Textures
⌨ (2:43:24) Gallery Walls
⌨ (3:08:56) Left Wall
⌨ (3:16:11) Right Wall
⌨ (3:24:58) Ceiling
⌨ (3:37:55) Collision
⌨ (3:44:56) Change the build tool to Vite
⌨ (3:56:58) Paintings
⌨ (4:16:47) Movement
⌨ (4:42:50) Code Refactor
⌨ (4:51:31) Advanced features
⌨ (5:03:00) Frame rates
⌨ (5:08:52) Collision
⌨ (5:19:07) Textures
⌨ (5:22:38) Rotate paintings
⌨ (5:31:37) Go live GitHub Issue
⌨ (5:35:36) Running the project issues
⌨ (5:39:20) Code refactor
⌨ (5:41:41) Painting info card
⌨ (5:56:02) Refactored code explained
⌨ (6:01:52) Functional programming
⌨ (6:13:41) Collision box
⌨ (6:45:54) Feature requests
⌨ (6:49:06) Enter VR
⌨ (6:51:03) Audio guide
⌨ (7:26:26) Enter key
⌨ (7:33:43) Click event on paintings
⌨ (7:54:12) Thanks for following
#threejs
#javascript
#3dart
✉️ Contact Me:
🤝 ✅ Open to freelance work and gigs:
Email: [email protected]
LinkedIn: LinkedIn: emilian-kasemi
GitHub: https://github.com/theringsofsaturn
Live Web App: https://emilian-kasemi-3d-art-gallery...
Source Code: https://github.com/theringsofsaturn/3...
Materials & Resources:
The Office Ceiling material in 4K: https://ambientcg.com/view?id=OfficeC...
The Wood Floor in 4K: https://ambientcg.com/view?id=WoodFlo...
The Walls in 4K: https://polyhaven.com/a/leather_white
3D Model Statue: https://sketchfab.com/3d-models/100kz...
Installation:
*To run the project on your computer:
- First, install Node on your computer if you don't have it. Link to download Node.
- Then "download zip" or clone the project on my GitHub.
- Open the terminal at the root level and run `npm install`.
- Then run `npx vite` to run the project live.
- Click and open the URL address you see in the terminal.
HELP!
If you want to follow exactly my tutorial and what I am using (like for example the exact Three.js module), on this repository, click "commits", and you will see all the commits list. Then scroll down to the first commit (later to other commits for other versions to review and compare your code with mine). On the right side of each commit name, you will see three small icons:
- a code number - which if you hover on it says "view commit details".
- a two square icon - which if you hover says "view full SHA"
- 'angle brackets' icon - which if you hover on says "browse repository at this point".
Click this last icon I mentioned, 'angle brackets'. You will be redirected to the exact point in time of this project. You can then download the repository as you normally do with the green button "Code".
⭐ Contents ⭐
⌨ (0:00:00) Intro
⌨ (0:00:46) What we are going to build
⌨ (0:01:45) Setup on Windows
⌨ (0:11:36) Let’s go live
⌨ (0:22:05) Always add the 3JS script before everything else
⌨ (0:30:35) 3JS must be inside the folder
⌨ (0:39:50) The camera is not visible, it’s more like a point of view
⌨ (0:51:19) Anti-alias means smooth edges
⌨ (0:56:16) Lights
⌨ (1:11:56) 3D object
⌨ (1:28:00) Animate our cube
⌨ (1:39:28) Controls
⌨ (1:47:37) Change the position of the cube or camera
⌨ (1:58:53) Floor plane, the ground
⌨ (2:06:24) New material
⌨ (2:11:48) Textures
⌨ (2:43:24) Gallery Walls
⌨ (3:08:56) Left Wall
⌨ (3:16:11) Right Wall
⌨ (3:24:58) Ceiling
⌨ (3:37:55) Collision
⌨ (3:44:56) Change the build tool to Vite
⌨ (3:56:58) Paintings
⌨ (4:16:47) Movement
⌨ (4:42:50) Code Refactor
⌨ (4:51:31) Advanced features
⌨ (5:03:00) Frame rates
⌨ (5:08:52) Collision
⌨ (5:19:07) Textures
⌨ (5:22:38) Rotate paintings
⌨ (5:31:37) Go live GitHub Issue
⌨ (5:35:36) Running the project issues
⌨ (5:39:20) Code refactor
⌨ (5:41:41) Painting info card
⌨ (5:56:02) Refactored code explained
⌨ (6:01:52) Functional programming
⌨ (6:13:41) Collision box
⌨ (6:45:54) Feature requests
⌨ (6:49:06) Enter VR
⌨ (6:51:03) Audio guide
⌨ (7:26:26) Enter key
⌨ (7:33:43) Click event on paintings
⌨ (7:54:12) Thanks for following
#threejs
#javascript
#3dart
8 ماه پیش
در تاریخ 1402/09/01 منتشر شده
است.
4,779
بـار بازدید شده