https://github.com/yashsuthar00/threejs-journey
Learning THREEjs to build unique 3d websites
https://github.com/yashsuthar00/threejs-journey
3d-web beginner-project javascript learning-threejs three-js webgl
Last synced: about 2 months ago
JSON representation
Learning THREEjs to build unique 3d websites
- Host: GitHub
- URL: https://github.com/yashsuthar00/threejs-journey
- Owner: yashsuthar00
- Created: 2024-11-27T18:03:20.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-02-13T18:24:00.000Z (over 1 year ago)
- Last Synced: 2025-06-12T11:55:25.981Z (about 1 year ago)
- Topics: 3d-web, beginner-project, javascript, learning-threejs, three-js, webgl
- Language: JavaScript
- Homepage:
- Size: 34.7 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🚀 My Learning Progress
## 🎨 Three.js Progress
This section tracks my journey with Three.js, where I’ve built various projects and learned important concepts:
---
### 🟦 **Basic Cube Setup**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/01-basic-cube) [](https://yashsuthar00.github.io/threejs-journey/01-basic-cube)
*Learned about setting up the scene, camera, and renderer. Created a basic rotating cube.*
---
### 🔄 **Transformations and Animations**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/02-transformations-animations) [](https://yashsuthar00.github.io/threejs-journey/02-transformations-animations)
*Applied transformations (position, rotation, scaling) and explored keyframe animations along different axes.*
---
### 💡 **Lighting and Shadows**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/04-lighting-shadows) [](https://yashsuthar00.github.io/threejs-journey/04-lighting-shadows)
*Explored different types of lights (ambient, directional, point) and implemented realistic shadows in the scene.*
---
### 📏 **Deep Understanding**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/05-deepUnderstanding) [](https://yashsuthar00.github.io/threejs-journey/05-deepUnderstanding)
*Gained deeper knowledge about mesh scaling, rotation, and positioning to control object behavior precisely.*
---
### 🌍 **Orbit Controls**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/06-orbit-controls) [](https://06-orbit-controls.netlify.app/)
*Learned to implement and customize orbit controls, enabling interactive camera movements with mouse input.*
---
### 🛞 **Cylinder MeshGeometry**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/07-cylinder-meshGeometry) [](https://07-cylender-meshgeometry.netlify.app/)
*Explored `CylinderGeometry` to create cylindrical meshes and experimented with different material properties.*
---
### 🎨 **Textures and Materials**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/08-materials-textures) [](https://08-texture-geometry.netlify.app/)
*Learned how to apply textures to meshes and integrate the `lil-gui` library for real-time property adjustments.*
---
### 💡 **Advanced Lighting and Helpers**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/09-lightings) [](https://09-lightings.netlify.app/)
*Explored advanced lighting setups with ambient, point, and directional lights. Implemented light helpers for better debugging.*
---
### 📦 **Adding 3D Models**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/10-3d-models) [](https://10-add3dmodel.netlify.app/)
*Learned how to import 3D models using GLB files and integrate HDRI for realistic environment reflections.*
---
### ⚛️ **React Three Fiber (R3F)**
[](https://github.com/yashsuthar00/threejs-journey/tree/main/12-R3F) [](https://12-r3f-learning.netlify.app/)
*Applied all the above concepts using React Three Fiber, a powerful Three.js library for React, to create declarative 3D scenes.*