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

Learn how to use Three.js to build an interactive 3D art gallery from scratch. The course covers 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.

💻 Source Code: github.com/theringsofsaturn/3D-art-gallery

Materials & Resources:
The Office Ceiling material in 4K: ambientcg.com/view?id=OfficeCeiling005
The Wood Floor in 4K: ambientcg.com/view?id=WoodFloor040
The Walls in 4K: polyhaven.com/a/leather_white
3D Model Statue: sketchfab.com/3d-models/100kz11-aphrodite-kallipyg…

✏️ 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.

❤️ Try interactive JavaScript courses we love, right in your browser: scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)

⭐ 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

--

Learn to code for free and get a developer job: www.freecodecamp.org/

Read hundreds of articles on programming: freecodecamp.org/news