Build a Virtual AI Art Gallery: Interactive 3D Design with Three.js for Beginners

✉️ Contact Me:
🤝 ✅ Open to freelance work and gigs:

Materials & Resources:

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

[the_rings_of_saturn]

Dear followers and enthusiasts,

First of all, use GitHub commits to mark our progress, so you can easily follow along and see the project evolve. So, to use the initial exact Three.js module I am using, go to "Commits" section of the GitHub repository and scroll down to the first commits, and download that version of the code, then step by step review and compare the other versions of the code.
If you don't know how to do that, follow these instructions:

Go to my repository, click "commits", you will see all the commits list. Then scroll down to the first commit. 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"
- '< >' this icon --> which if you hover on says "browse repository at this point".

Click this last icon I mentioned, '< >'. 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".

ISSUES WITH THE CURRENT REPOSITORY:
I've been made aware of an issue regarding the floor and ceiling textures appearing black. I've identified the root of the problem. The high-resolution 4K textures are relatively large files. To manage such large files, GitHub uses a system called Large File Storage (LFS). However, there's a storage quota associated with LFS, and it seems we've reached that limit. This led to the textures not being stored correctly, resulting in broken image links in the downloaded projects.

The solution at the moment:
Download the 4K textures (links in the description) and the 3D models yourself and add them in your project with the correct path.

Some are having another issue. They have a blank page with the error showing in the DevTools' console:
"THREE.WebGLRenderer: Error creating WebGL context."

The issue is with the Chrome based browsers settings. Just enable "Use hardware acceleration when available" on Chrome or on Edge. You can search for this setting in the search field of Chrome's "Settings". After toggling it ON, click "Relaunch" (or "Restart" on Edge). And that's it. For everyone having this issue, please do this.


As for the installation of the project:

You need Node.js installed on your computer. And VS Code as an Editor. Download link:


then go to the GitHub repository of the project at:

After cloning, or downloading the zip file, on GitHub (green button <> Code) open your terminal, and run:

npm install
to install all the dependencies. "node_modules" folder will appear at the left in the Explorer files in VsCode.

Then run:

npx vite
to run the local server. You'll see the URL address and the info help. Like for example:

VITE v4.3.1 ready in 1759 ms

➜ Network: use --host to expose ➜ press h to show help

Click the URL and see your project live :)

[chessknock]

Thanks so much for such effort. Please keep these viseos coming 🎉

[izar]

Thanks to you, I learned more during the film than during the entire semester of my studies in computer graphics classes. You are a great person! Greetings from Poland!

[briangeng]

Thank you for creating so good videos, it helps me a lot as a 3D beginner

[techietoons]

Hi, Is this the combined version of all previous videos ? I have seen them earlier.
Thanks for amazing content

[pratyunchoubey]

Thank you for such an amazing tutorials, I am a React developer and would love to create similar projects in react js. Can you please provide me with resources from where I can learn and implement in React JS. Thanks for your contribution in my learning.

[anandcherian.]

Nice video, can the user view this in 3D through ar or vr devices like apple vision pro?

[linhtet]

Can I know where can I get three.js file that you mentioned.When I search for it in github, there are only three files(three.cjs, three.module.js and three.module.min.js).

[emmanuelsamuel]

pls having issue with image showing. did not get the image when i clone the repo and i had to download it from github but having issue with gltf file

[PetrandoRichard]

So the gentleman in black suit will simply stands there? I assume he will walk around and view the pictures, but appearently no, this is mainly first person experience..?
Anyway, I'll put a door and maybe a window in the room. Just a suggestion

[peoplebehindindustry]

First of all I want to thank you for the huge job that you've done!

Second of all main.js code is too big, and at some point it's becoming very hard to understand everything. What I would suggest for the next video is to use modular javascript or so called Javascript Modules to break the code into separate files.