🌐 Three.js Environment Mapping with GUI Controls

This project demonstrates a Three.js 3D scene with real-time environment mapping using a CubeTextureLoader. It features interactive lighting, orbit controls, and live GUI tweaking for material properties like metalness and roughness.

---

🚀 Features

• 🔁 Cube Texture Environment Mapping
• 🎛️ Live GUI controls (dat.GUI) for:
  • metalness
  • roughness
• 🧊 Sphere, Plane, and Torus geometries using shared reflective material
• 💡 Ambient and Point Lighting
• 🕹️ Interactive OrbitControls
• 🧭 Axis Helper
• 🔄 Responsive canvas resize

---

📁 Project Structure

your-project/
├── src/
│ ├── index.js # Main Three.js logic
│ ├── style.css # CSS styles
│ ├── index.html # html
│ └── textures
│       └── environmentMaps
│         └── 0
│             ├── px.jpg
│             ├── nx.jpg
│             ├── py.jpg
│             ├── ny.jpg
│             ├── pz.jpg
│             └── nz.jpg
│
├── dist/ # Built files (after bundling)
├── bundler/ # Webpack configuration files
├── package.json
└── README.md

🛠️ Getting Started

1. 📦 Install Dependencies

Make sure you have Node.js installed. Then run:

npm install

---

2. 🧪 Run Development Server

npm run dev

This will start the Webpack development server and open the scene in your browser.

---

🧱 Tech Stack

• Three.js — 3D rendering
• dat.GUI — UI for tweaking parameters
• Webpack — Bundler

---

🖥️How It Works

• A 3D Sphere, Plane, and Torus arranged in a group

• Cube-mapped environment for reflections

• GUI controls for:

  • metalness
  • roughness
  • env Map Intensity

• Axis helper and point light helper

• Real-time updates and camera orbit interaction

• Fully responsive canvas on window resize

---

📝 Notes

• The environment map is a cube texture, composed of six images.
• Ensure your paths to texture files (inside textures/environmentMaps/0/) are correct.
• Adjust lighting intensities or material properties in the GUI to explore different effects.

---

🧼 Build for Production

npm run build

This will output the optimized files into the dist/ directory.

---

📸 Output Preview

---