# TresJS Docs

> A documentation for building 3D scenes with TresJS.

## Documentation Sets

- [TresJS - Full Documentation](https://docs.tresjs.org//llms-full.txt): This is the full documentation for the TresJS written in markdown (MDC Syntax)

## Getting Started

- [Introduction](https://docs.tresjs.org/raw/getting-started.md): TresJS's goal is to make 3D development approachable for Vue developers by using familiar concepts, such as components and composables, thereby reducing the Three.js learning curve.
- [Installation](https://docs.tresjs.org/raw/getting-started/installation.md): Get started with TresJS.
- [Your First Scene](https://docs.tresjs.org/raw/getting-started/your-first-scene.md): Learn how to create your first 3D scene with TresJS with this step-by-step guide.
- [Upgrade Guide](https://docs.tresjs.org/raw/getting-started/upgrade-guide.md): Upgrade TresJS to the latest version.

## Essentials

- [Custom Vue Renderer](https://docs.tresjs.org/raw/essentials/core-architecture/custom-vue-renderer.md): Discover how TresJS leverages Vue 3's custom renderer API to bridge Vue's reactive component system with Three.js 3D scene management.
- [Declarative vs Imperative](https://docs.tresjs.org/raw/essentials/concepts/declarative-vs-imperative.md): Discover how TresJS transforms imperative Three.js code into declarative Vue components, making 3D development more intuitive and maintainable.
- [Reactivity](https://docs.tresjs.org/raw/essentials/concepts/reactivity.md): Learn how to effectively use Vue's reactivity system with TresJS while maintaining optimal performance in high-frequency render loops.
- [Constructor Arguments](https://docs.tresjs.org/raw/essentials/concepts/constructor-arguments.md): Learn how to pass constructor arguments to Three.js objects using the args prop in TresJS.
- [Declarative Properties](https://docs.tresjs.org/raw/essentials/concepts/declarative-properties.md): Learn how TresJS maps Vue props to Three.js object properties for a declarative 3D development experience.
- [Extending the Catalogue](https://docs.tresjs.org/raw/essentials/concepts/extending-catalogue.md): Learn how to add custom Three.js classes and third-party libraries to TresJS using the extend function.
- [Child Attachments](https://docs.tresjs.org/raw/essentials/concepts/child-attachments.md): Learn how TresJS uses a custom renderer to attach child components as Three.js object properties, replacing Vue's slot system with a scene-graph-aware approach.
- [Essentials](https://docs.tresjs.org/raw/essentials.md): Discover the core concepts of TresJS.

## API Reference

- [<TresCanvas />](https://docs.tresjs.org/raw/api/components/tres-canvas.md): The TresCanvas component is the main component for rendering 3D scenes.
- [<TresCanvasContext />](https://docs.tresjs.org/raw/api/components/tres-context.md): Internal context component used by TresCanvas for advanced setups.
- [Tres Components](https://docs.tresjs.org/raw/api/components/tres-objects.md): Learn how TresJS automatically maps Vue components to Three.js objects using a custom renderer and autogenerated catalogue.
- [TresPortal](https://docs.tresjs.org/raw/api/components/tres-portal.md): Reparent declarative children into any Object3D or Scene target.
- [TresJS API Reference](https://docs.tresjs.org/raw/api.md): Explore the TresJS components, composables, utilities and more.
- [useTres](https://docs.tresjs.org/raw/api/composables/use-tres.md): useTres provides a convenient access to a simplified TresJS context.
- [useTresContext](https://docs.tresjs.org/raw/api/composables/use-tres-context.md): useTresContext provides a complete access to the TresJS context.
- [useLoop](https://docs.tresjs.org/raw/api/composables/use-loop.md): useLoop provides a convenient access to the render loop of the TresJS scene.
- [useGraph](https://docs.tresjs.org/raw/api/composables/use-graph.md): useGraph generates a reactive map of named nodes, materials, and meshes from a Three.js object hierarchy.
- [useLoader](https://docs.tresjs.org/raw/api/composables/use-loader.md): useLoader is a composable for loading 3D assets and textures with Three.js loaders, supporting progress tracking and reactivity.
- [Pointer Events](https://docs.tresjs.org/raw/api/events/pointer-events.md): Explore the TresJS pointer events system powered by @pmndrs/pointer-events.
- [Type Guards](https://docs.tresjs.org/raw/api/utils/type-guards.md): TresJS provides type guard methods to help you determine the type of a Three.js object.
- [Directives](https://docs.tresjs.org/raw/api/utils/directives.md): TresJS provides custom made vue directives to help you creating your scenes.
- [Scaling Performance 🚀](https://docs.tresjs.org/raw/api/advanced/performance.md): Quick guide with tips to improve the performance of your TresJS application.
- [Primitives](https://docs.tresjs.org/raw/api/advanced/primitives.md): Use the primitive component to directly integrate any Three.js object within your Vue application.
- [WebGPU](https://docs.tresjs.org/raw/api/advanced/web-gpu.md): Explore experimental WebGPU rendering capabilities in TresJS.

## CLI

- [TresJS CLI](https://docs.tresjs.org/raw/cli.md): The tres command line tool for TresJS projects.
- [tres gltf](https://docs.tresjs.org/raw/cli/gltf.md): Generate a typed Vue component from a .glb/.gltf model, with a slot for every node.

## Cookbook

- [OrbitControls](https://docs.tresjs.org/raw/cookbook/orbit-controls.md): Learn how to use OrbitControls in TresJS, including both manual and plug-and-play approaches.
- [Basic Animations](https://docs.tresjs.org/raw/cookbook/basic-animations.md): Learn how to create basic animations in TresJS
- [Model Animation](https://docs.tresjs.org/raw/cookbook/model-animation.md): Learn how to animate 3D models in TresJS
- [Advanced GSAP Animations](https://docs.tresjs.org/raw/cookbook/advanced-gsap-animations.md): Learn how to create complex animations using GSAP with TresJS
- [Tweakpane](https://docs.tresjs.org/raw/cookbook/tweakpane.md): Learn how to integrate Tweakpane with TresJS for interactive 3D controls
- [Dynamic components](https://docs.tresjs.org/raw/cookbook/transition-dynamic.md): Learn how to use Vue's Transition and dynamic components in TresJS
- [Cookbook 🍳🧑‍🍳](https://docs.tresjs.org/raw/cookbook.md): Discover guided recipes to help you get started with the basics of using Tres. Each recipe is designed to help you understand the core concepts of Tres and how to use them in your projects.