71 lines
1.6 KiB
Markdown
71 lines
1.6 KiB
Markdown
# 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
|
|
|
|
```bash
|
|
npm install
|
|
```
|
|
|
|
## Development
|
|
|
|
Start the development server with hot module replacement:
|
|
|
|
```bash
|
|
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:
|
|
|
|
```bash
|
|
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
|