https://github.com/devkanix/3d-renderer
a custom-built 3D rendering engine that brings your geometric visuals to life!
https://github.com/devkanix/3d-renderer
3d-graphics javascript reactjs three-js
Last synced: 24 days ago
JSON representation
a custom-built 3D rendering engine that brings your geometric visuals to life!
- Host: GitHub
- URL: https://github.com/devkanix/3d-renderer
- Owner: devKanix
- Created: 2024-10-20T19:42:44.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-10-21T07:12:15.000Z (over 1 year ago)
- Last Synced: 2025-04-02T02:18:24.465Z (about 1 year ago)
- Topics: 3d-graphics, javascript, reactjs, three-js
- Language: JavaScript
- Homepage: https://3drenderer.netlify.app
- Size: 27.7 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 3D-Renderer 🚀
Welcome to **3D-Renderer**, a custom-built 3D rendering engine that brings your geometric visuals to life! Dive into the world of ray tracing, shading, and rendering techniques with this project.
## 🌟 Features
- **Customizable Camera** 🎥: Easily adjust camera position and orientation.
- **Ray Tracing** 🌈: Simulate realistic light interactions with objects, producing shadows, reflections, and more.
- **Phong Shading** 💡: Approximate light reflection with the Phong model for a smooth, realistic appearance.
- **Anti-Aliasing** 🖌️: Supersampling to reduce jagged edges and create smoother visuals.
- **Real-time Preview** ⏱️: Visualize changes instantly as you tweak rendering settings.
## 🔧 Technologies Used
- **React** & **Three.js**: UI and 3D rendering framework.
- **JavaScript**: Core logic and algorithms.
- **CSS/Tailwind**: Styled components for a sleek interface.
- **Framer Motion**: Animated transitions for a smooth user experience.
## 🚀 Getting Started
### Prerequisites
- **Node.js** (v14+)
- **npm** or **yarn**
### Installation
1. **Clone the repo**:
```bash
git clone https://github.com/devKanix/3D-Renderer.git
cd 3D-Renderer
2. **Install dependencies**:
```bash
npm install
3. **Start the development server**:
```bash
npm run dev
### Usage
- **Adjust Camera Settings**: Modify the camera props in StarsCanvas for different perspectives.
- **Customize Lights**: Change the light intensity and position for different effects.
- **Modify 3D Models**: Add or modify objects in the scene using Three.js.
## Concepts Covered
- **Ray-Sphere Intersection**: Calculate if and where rays intersect with spheres.
- **Phong Illumination Model**: Simulate ambient, diffuse, and specular reflections.
- **Recursive Ray Tracing**: Trace rays for reflections and refractions.
## Prerequisites for 3D Rendering
**To get started with 3D rendering concepts, it’s helpful to have a basic understanding of**:
- Vector mathematics (dot product, cross product).
- Light reflection and refraction.
- Ray tracing and shading models.
### Thank You!