# ThreeJs-Journey

**Repository Path**: EricZhang85/ThreeJs-Journey

## Basic Information

- **Project Name**: ThreeJs-Journey
- **Description**: fork from https://github.com/Singh233/ThreeJs-Journey
ThreeJs-Journey 是开发者 Sanambir Singh 基于著名的 Bruno Simon 的 Three.js 课程 所构建的实践项目合集。 它的目标非常明确：用一系列循序渐进的 Demo 帮助你从基础到进阶，全面掌握 Three.js 的开发能力。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2025-09-30
- **Last Updated**: 2026-04-17

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 🍩 ThreeJs Journey

Three.js is a popular open-source JavaScript library used for creating 3D graphics on the web. It provides a range of features for creating 3D scenes, including 3D object creation, lighting, camera control, and more. Three.js is compatible with most modern browsers and can be used with other web technologies such as HTML, CSS, and JavaScript. It has a large and active community of developers who contribute to its development and share their work and knowledge. Three.js is commonly used for creating games, visualizations, and interactive experiences on the web. It requires a solid understanding of both JavaScript and 3D graphics concepts and offers a range of resources for learning and getting started.

To get started with Three.js, you will need to have a good understanding of JavaScript and some basic 3D graphics concepts. You can start by exploring the Three.js documentation and examples, which provide a range of resources for getting started and learning the basics. From there, you can gradually build your knowledge and skills, experimenting with different features and techniques to create engaging and interactive 3D experiences on the web.

Overall, learning Three.js is a valuable and exciting journey, as it allows you to create immersive and engaging experiences on the web, from games to visualizations and more.
# Demo

## My first three js project 🚀

- https://webgl-3d-text-silk-phi.vercel.app/ 
  
![hellothreejs](https://github.com/Singh233/Three.Js-Journey/assets/37498067/415b8691-c23b-409e-ac03-d06a708addc9)

## Playing with lights 💡

- https://playing-with-lights.vercel.app/ 
  
![playing_with_lights](https://github.com/Singh233/Three.Js-Journey/assets/37498067/b83b6265-4605-4ee8-90b4-79084f1e7ee8)

## Galaxy Generator 🌌

- https://19-galaxy-generator-sage.vercel.app/
  
![galaxy](https://github.com/Singh233/Three.Js-Journey/assets/37498067/f54429c5-eca3-47c1-aac0-abea37b653de)

## My Portfolio 💪

- https://scroll-based-animation-mu.vercel.app/ 
  
![portfolio](https://github.com/Singh233/Three.Js-Journey/assets/37498067/a4ae93b4-6f72-4c02-871a-b04d6d51b753)

## Realistic Render 😳

- https://realistic-render-ten.vercel.app/

![flight_helmet](https://github.com/Singh233/Three.Js-Journey/assets/37498067/bdd67b43-52ef-4049-bf3a-55007901b794)


## Foxy (Add #debug in URL and reload) 🦊

- https://26-code-structuring-for-bigger-projects-livid.vercel.app/
  
![fox](https://github.com/Singh233/Three.Js-Journey/assets/37498067/fb198d99-c804-4266-940e-8194df596adc)

## Portal Scene 🌌

- https://portal-scene-sanambir123-gmailcom.vercel.app/
  
![portal_scene](https://github.com/Singh233/ThreeJs-Journey/assets/37498067/e28e3ede-42da-4e71-91be-b495f1ed6b40)

## Post Processing ⚙️

- https://33-post-processing-zeta.vercel.app/
  
![post_processing](https://github.com/Singh233/ThreeJs-Journey/assets/37498067/fa1c0135-0286-4dd9-a162-36ca66e12f07)

## React Three Fiber Intro ⚛️

- https://44-r3f-drei.vercel.app/

![drei](https://github.com/Singh233/ThreeJs-Journey/assets/37498067/bd67200c-4df6-4a35-a458-446f4c43cc4f)

## React Three Fiber 3D Text ⚛️

- https://48-3d-text-with-r3f.vercel.app/

![3dtext](https://github.com/Singh233/ThreeJs-Journey/assets/37498067/04cdf4a1-7152-41c9-89c3-1d7cd570040b)

## React Three Fiber Portal Scene 🌌

- https://49-portal-scene-with-r3f-bay.vercel.app/
  
![r3fportal](https://github.com/Singh233/ThreeJs-Journey/assets/37498067/df3b44fa-d85f-46ad-b57c-1fe62644aa07)


## Run Project Locally

Clone the project

```bash
  git clone https://github.com/Singh233/Three.Js-Journey.git
```

Go to the project directory

```bash
  cd Three.Js-Journey
```

Open any lesson (Starting from 4)

```bash
  cd 04-local-server
```

Install the packages

```bash
  npm install
```

Start the server

```bash
  npm run dev
```








## 🎨 Beautiful Course by - Bruno Simon

 - [ThreeJs Journey](https://threejs-journey.com/)



## 🚀 About Me
I'm an Aspiring full stack developer...
Love to create, design and build cool projects 😎 and have passion for creating innovative solutions to complex problems using cutting-edge technologies. I have a strong understanding of both front-end and back-end development, and constantly seeking to improve my skills in these areas.


## Feedback

If you have any feedback, please reach out to me at sanambir123@gmail.com


## Author

- [@SanambirSingh](https://github.com/Singh233) 🤗