Code a Virtual 3D Art Gallery – Three.js JavaScript Tutorial / Code-a-Long

Materials & Resources:

✏️ Course developed by @the_rings_of_saturn

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.

⭐ 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

🎉 Thanks to our Champion and Sponsor supporters:
👾 davthecoder
👾 jedi-or-sith
👾 南宮千影
👾 Agustín Kussrow
👾 Nattira Maneerat
👾 Heather Wcislo
👾 Serhiy Kalinets
👾 Justin Hual
👾 Otis Morgan
👾 Oscar Rahnama

--

[the_rings_of_saturn]

If you enjoyed this tutorial, consider subscribing to my channel for more in-depth guides on 3D web development using Three.js and much more!
A huge thanks to freeCodeCamp for the spotlight and to all of you for your support If you've got questions or need help with the project, drop your questions here, and I'll be glad to assist! Let's dive into the world of 3D programming together! 🌐💡

[xstone]

OMG, I started learning three.js literally 4 hours ago, and then this masterpiece just dropped ❤

[lekwapemamyala]

Went straight to my three.js playlist❤

[peterhoranyi]

Thank you for sharing, this is so awesome and helpful. Hope you will have more tutorials in the future.

[zeljkostevanovic]

Thank you!❤
I hope that you will give us more Three.js tutorials.

[HEWfunkingKNEWit]

Would love to see a more in depth threejs course.

[douglasvdmerwe]

Hi all you lovely people at FreeCodeCamp and @the_rings_of_saturn

I have added timestamps to your video.

To convert the timestamps to chapters in your video:
1. Copy the timestamps I shared.
2. Sign in to YouTube Studio.
3. From the left menu, select Content.
4. Click the video that you'd like to edit.
5. In the Description, paste the list of timestamps and titles.
6.Viola! Chapters added to your video

⭐ Contents ⭐
⌨ (0:00:08) 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) 3JS build tool 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) Start from the beginning
⌨ (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 me

[pixel-painter]

Amazing! Great for an artist's portfolio. 🎨

[Takatou__Yogiri]

awesome. i just finished watching this video in 4 minutes. i hope now I can get a job at google. :)

[tunjigeorge]

I saw Blender on your desktop. Is the knowledge of a 3d software necessary to leverage the power of three.js???

[vincetaliaferro]

The three.js file is missing in the github repo now.

[Ali-]

A request to freecodecamp, please try to create a course on A-Frame and webVR asap

[juancamiloriostaborda]

Please can You make a video of Autodesk inventor? please or geogebra please

[MrSstar]

Holly sh**t! There is an error on 51:23, line 4, fixed on 1:20:40

[florentd.]

Could you add a timeline chapters, thanks.

[Spartan-vi]

sir can u make game development full course

[igormarcos]

7 hours to build this?! Is this an anti-three.js ad?! Totally unappealing

[valenciawalker]

Thank you so very much. this is incredible🤍🤍🤍🕊