This project is a React + Three.js (via @react-three/fiber) playground focused on experimenting with modern real-time 3D rendering techniques to create high-quality, attractive and interactive visual experiences.
The goal is to document and showcase a collection of techniques that can be used to elevate the visual fidelity and interactivity of web-based 3D scenes.
Live Preview: https://cristianm-developer.github.io/ThreeJsTempleExample/
-
HDRIs & Environment Cubemaps
Lighting and reflections using high-dynamic-range environments for realistic visuals. -
Real-Time Reflections
Reflective surfaces enhanced with cubemaps and mixed techniques. -
Custom GLSL Shaders
Extending and editing Three.js materials using custom fragment/vertex shader chunks. -
Scene Importing
Loading complex environments (e.g., GLTF / GLB) and integrating them into interactive compositions. -
Interactive Lighting
Lights that react in real time to user input and scene events. -
Event-Driven Effects
Interaction hooks (mouse, pointer, keyboard, time) to trigger dynamic visual responses.
- React 18
- @react-three/fiber — declarative Three.js renderer
- Three.js
- Drei — helpers/components
- GLSL — for shader customisation
npm install
npm run dev