An example of a Vue.js / Three.js integration

Vue-Three-Demo

# vue-threejs-demo

This is a Proof-Of-Concept integration of Vue.js and Three.js. I have converted the Three.js [Trackball Control Example](https://threejs.org/examples/?q=cont#misc_controls_trackball) to a Vue/Vuex application and added some additional UI sugar on top.

[See the demo here](https://vue-threejs-demo.pages.dev/)

## Stack

- **Vue 3** - Progressive JavaScript framework
- **Vite** - Fast build tool and dev server
- **Pinia** - State management for Vue 3
- **Three.js** - 3D graphics library
- **Vue Router 4** - Official router for Vue 3

## Project Setup

Install dependencies:
```bash
npm install
```

### Development Server

Run the development server with hot module replacement:
```bash
npm run dev
```

### Production Build

Build the application for production:
```bash
npm run build
```

### Preview Production Build

Preview the production build locally:
```bash
npm run preview
```

### Linting

Run ESLint to check code quality:
```bash
npm run lint
```

## Helpful Links

- [Three.js Documentation](https://threejs.org/docs/)
- [Vue 3 Documentation](https://vuejs.org/)
- [Pinia Documentation](https://pinia.vuejs.org/)
- [Vite Documentation](https://vitejs.dev/)


Vue-Three-Demo

README

vue-threejs-demo

Stack

Project Setup

Development Server

Production Build

Preview Production Build

Linting

Helpful Links