tresjs

tresjs

Create 3D experiences in your Nuxt application using TresJS.

Repo banner

@tresjs/nuxt

npm versionnpm downloadsLicenseNuxt

Official Nuxt module for TresJS. Build 3D scenes as they were Vue components.

Features

  • 🤓 Auto-import components and composables from the TresJS ecosystem
  • TresCanvas client only, you don't need to add .client to the component name or <ClientOnly />
  • Automatically configures vue compiler to support TresJS components, see why?
  • All the DX Magic that comes with Nuxt ✨

Quick Setup

  1. Add @tresjs/nuxt dependency to your project
# Using pnpmpnpm add @tresjs/nuxt# Using yarnyarn add @tresjs/nuxt# Using npmnpm install @tresjs/nuxt
  1. Add @tresjs/nuxt to the modules section of nuxt.config.ts
export default defineNuxtConfig({  modules: ['@tresjs/nuxt'],})

That's it! You can now use @tresjs/nuxt in your Nuxt app ✨

If you want to use the any package from the TresJS ecosystem, you can install the packages you want to use and they will be auto-imported by the module 🧙🏼‍♂️.

# Using pnpmpnpm add @tresjs/cientos @tresjs/post-processing

Development

# Install dependenciesnpm install# Generate type stubsnpm run dev:prepare# Develop with the playgroundnpm run dev# Build the playgroundnpm run dev:build# Run ESLintnpm run lint# Run Vitestnpm run testnpm run test:watch# Release new versionnpm run release