A comprehensive Three.js project showcasing advanced lighting setups, including ambient, directional, hemisphere, point, rect area, and spotlights. This project demonstrates my skills in 3D graphics and interactive lighting controls.
https://three-js-lighting-showcase.vercel.app
- Ambient Light: General lighting for the scene with adjustable intensity and color.
- Directional Light: Parallel light rays suitable for simulating sunlight, with position and helper controls.
- Hemisphere Light: Gradient sky and ground lighting with customizable colors.
- Point Light: Omni-directional light source with distance and decay settings.
- Rect Area Light: Rectangular light with width, height, and position controls.
- Spot Light: Focused light beam with adjustable angle, distance, and penumbra.
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/yourusername/threejs-lighting-showcase.git
- Navigate to the project directory:
cd threejs-lighting-showcase - Install the dependencies:
npm install
- Start the development server:
npm run dev
Open the project in your web browser at http://localhost:5173 (or the port specified in your setup). You can interact with the lighting controls through the GUI to see the effects in real-time.
- Three.js - JavaScript 3D Library
- lil-gui - Lightweight GUI for adjusting parameters
- Stats.js - Performance monitor for JavaScript
- OrbitControls - Control the camera with mouse interactions
Contributions are welcome! If you have suggestions or improvements, please create an issue or submit a pull request.
This project is licensed under the MIT License. See the LICENSE file for details.
This project is a part of my portfolio showcasing my skills and learning journey in 3D graphics and interactive web development.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent