Declarative ThreeJS using Vue Components

• 💡 Build 3D scene as they were Vue components
• 🥰 It brings all the updated features of ThreeJS right away regardless the version
• 🦾 Fully Typed

Tres (Spanish word for "three", pronounced /tres/ ) is a way of creating ThreeJS scenes with Vue components in a declarative fashion.

It's build on-top of a Vue Custom Renderer and it's powered by Vite.

The goal is to provide the Vue's community an easy way of building 3D scenes with Vue, always up to date with the latest ThreeJS features and with 0-to-none maintenance.

pnpm install @tresjs/core three

Checkout the docs

• Stackblitz Collection

Package	Version	Downloads
Tres
Cientos
Post-processing
Nuxt
TresLeches 🍰

• Node.js (v18 or later)
• pnpm (v8 or later)
• Git

1. Clone the repository:

   git clone https://github.com/tresjs/tres.git
   cd tres

2. Install dependencies:

   pnpm install

This repository uses PNPM as its primary package manager, providing efficient dependency management and disk space usage. The workspace is configured in pnpm-workspace.yaml and includes all packages in the packages/ directory.

Common PNPM commands:

# Install dependencies
pnpm install

# Add a dependency to a specific package
pnpm add <package> --filter @tresjs/cientos

# Run a script in a specific package
pnpm --filter @tresjs/cientos <script>

While PNPM manages our packages, we use NX to optimize our development workflow. NX provides powerful features for:

• Intelligent caching
• Affected package detection
• Dependency graph visualization
• Parallel task execution
• Project-specific configurations

# Build all packages
pnpm build

# Build a specific package
pnpm build @tresjs/cientos

# Run tests for affected packages
pnpm nx affected:test

# Show dependency graph
pnpm nx graph

# Run commands only on affected packages
pnpm nx affected --target=build

# Start development mode for a package
pnpm dev @tresjs/cientos

# Run tests in watch mode
pnpm test:watch @tresjs/cientos

# Lint all packages
pnpm lint

# Format all packages
pnpm format

# Check types
pnpm typecheck

For more advanced NX usage, we recommend exploring:

• NX Documentation
• NX Cache
• NX Affected
• NX Project Configuration

For repository administrators, we provide the monocubo tool to help manage the monorepo. This tool assists with:

• Package migration
• Dependency management
• Repository maintenance
• Release coordination

See the monocubo package for detailed documentation and usage instructions.

We are open to contributions, please read the contributing guide to get started.

MIT