TresJS Ecosystem

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.

Installation

pnpm install @tresjs/core three

Docs

Checkout the docs

Demos

Stackblitz Collection

Ecosystem

Package	Version	Downloads
Tres
Cientos
Post-processing
Nuxt
TresLeches 🍰

🛠️ Development

Prerequisites

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

Setup

Clone the repository:

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

Install dependencies:
```
pnpm install
```

Package Management with PNPM

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>

Development with NX

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

Common NX Commands

# 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

Development Workflows

# 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:

Repository Administration

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.

Contribution

Warning

WIP

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

License

MIT

Sponsors