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

Channel:

freeCodeCamp.org

Subscribers:

10,700,000

Published on March 7, 2024 3:08:17 PM ● Video Link: https://www.youtube.com/watch?v=imqiYWidUIA

Category:

Tutorial

Duration: 7:55:17

36,569 views

1,252

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: https://github.com/theringsofsaturn/3D-art-gallery

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

✏️ 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.
🎉 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: https://www.freecodecamp.org

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