Nuxt 3 + TresJS starter

What's included

1. Demo GLTF model

The <Suzanne /> component in /components/Suzanne loads a custom GLTF model and uses a custom ShaderMaterial.

2. Box with click handler

The <SampleBox /> component rotates and floats on every tick and has click/hover handlers.

3. GSAP as a Nuxt plugin

GSAP is included as a Nuxt plugin and can be included in any component in the following way:

const { $gsap } = useNuxtApp()

The plugin file is located in /plugins/gsap.js. Additional GSAP plugin can be imported and registered directly into this file and they will be available in the whole application.

Warning

Some GSAP plugins like the SplitText plugin cause errors in the application if registered globally, so you have to check if you're on the client first.

import { SplitText } from 'gsap/SplitText'

// ...

if (process.client) {
	// Some plugins need to be registered only on the client
	gsap.registerPlugin(SplitText)
}

4. Pinia

Pinia is already included and configured.

The states are stored in the /stores folder and auto included.

Setup

Make sure to install the dependencies:

# yarn
yarn install

# npm
npm install

# pnpm
pnpm install

Development Server

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

npm run dev

Production

Build the application for production:

npm run build

Locally preview production build:

npm run preview