Vue Tres Starter

Overview

The Vue 3 + TresJS starter is a template that provides a starting point for developers looking to build Vue 3 projects using TresJS. It comes preconfigured with several features that can be easily incorporated into a new project.

Features

• Demo GLTF model: The starter includes a <Suzanne /> component that loads a custom GLTF model and utilizes a custom ShaderMaterial.
• Box with click handler: The <SampleBox /> component is included, which rotates and floats on every tick and has click and hover handlers.
• GSAP as a Vue Composable: GSAP is included as a composable, making it easy to incorporate GSAP animations into any component. The composable file can be found in the /src/composables/useGSAP.js directory.
• Pinia: Pinia, a state management library for Vue 3, is already included and configured in the starter. The states are stored in the /src/stores directory.

Installation

To use the Vue 3 + TresJS starter, follow these steps:

1. Install the dependencies:

   npm install
   

2. Start the development server on http://localhost:3000:

   npm run dev
   

3. Build the application for production:

   npm run build
   

4. Preview the production build locally:

   npm run preview
   

Summary

The Vue 3 + TresJS starter provides a convenient starting point for Vue 3 projects using TresJS. It includes features such as a demo GLTF model, a box with click handlers, GSAP integration as a Vue composable, and Pinia for state management. The installation process is straightforward, making it easy for developers to get started with their projects.