3D Cube Viewer

A Three.js-based 3D cube viewer with webpack build system.

Features

• Interactive 3D model viewer
• OBJ/MTL file support
• Texture loading
• Glass material with transparency and reflections
• Responsive design
• Modern ES6+ JavaScript with webpack bundling

Installation

npm install

Development

Start the development server with hot module replacement:

npm run dev

The development server will start at http://localhost:8080 and automatically open in your browser.

Production Build

Build the project for production:

npm run build

This will create optimized, minified files in the dist/ directory.

Project Structure

threedee/
├── src/
│   ├── index.html          # HTML template
│   ├── index.js           # Main JavaScript entry point
│   └── styles.css         # CSS styles
├── cube.obj               # 3D model file
├── cube.mtl               # Material definitions
├── cube/                  # Texture files
│   ├── Carpet_01_1K.png
│   ├── Denim_03_1K.png
│   ├── Marble_01_1K.png
│   └── Wood_Veneer_15_1K.png
├── dist/                  # Production build output (generated)
├── webpack.config.js      # Webpack configuration
└── package.json           # Project dependencies and scripts

Controls

• Left click + drag: Rotate around model
• Right click + drag: Pan
• Mouse wheel: Zoom in/out

Technologies Used

• Three.js for 3D rendering
• Webpack for bundling and development server
• Modern ES6+ JavaScript modules