Marma VR

A minimalist Three.js scene showcasing an animated humanoid .glb character in a dynamic lighting environment.

This demo project demonstrates the use of real-time 3D rendering, animation blending, raycasting interactions, and HDR-based scene lighting — all built using Three.js and Vite.

---

🌐 Features

1. Camera Orbit Control — smoothly rotate the camera around the 3D model using mouse drag.
2. Animation Playback — plays the run animation embedded in the .glb model automatically on load.
3. Zoom In/Out — use the mouse scroll wheel to zoom the camera closer or further from the model.
4. Directional Light with Shadows — directional light is enabled with castShadow and receiveShadow for more realism.
5. HDR Environment Mapping — the scene uses an .hdr file as both environment lighting and skybox background.
6. Raycaster Interaction — clicking on the model scales it up to x2; clicking again resets it back to x1.

---

🛠️ System Requirements

• Node.js >= 18.0.0
• A modern browser with WebGL support

---

🚀 Getting Started

Clone the repository and install dependencies:

git clone https://github.com/yourname/marma-vr.git
cd marma-vr

npm install -D vite       # Install Vite (if not already installed globally)
npm install               # Install project dependencies
npm run dev               # Start local dev server

The app will be available at http://localhost:5173/ in your browser.

🔧 Tech Stack:

three.js · GLTFLoader · RGBELoader · OrbitControls · Vite

🧩 Assets

model.glb – humanoid character model with a built-in run animation.

skyes.hdr – HDRI environment map used for lighting and background.

📸 Interaction Demo

Click the model to scale it up. Click again to reset. Hover and scroll to orbit and zoom. Animations and lighting are fully real-time.

Preview