repository·main·Indexed 25 days ago
https://github.com/tresjs/tresOfficial monorepo for TresJS, a declarative library for creating ThreeJS scenes using Vue components via a Vue Custom Renderer. The repository includes the core library, Cientos docs, a documentation boilerplate, the TresJS Lab for demo experiments, and CubeBot, a GitHub App for issue triage and RAG-based documentation assistance.
Cientos is a collection of ready-to-go helpers and components for TresJS that are not included in the @tresjs/core package. It provides high-level abstractions to extend your 3D capabilities.
Key Technical Detail:
Cientos uses the three-stdlib module instead of the standard three/examples/jsm module. Because of this, you do not need to manually use the extend method to add these components to your TresJS catalogue; Cientos handles the registration for you automatically.
TresJS is a framework designed to bring Three.js into the Vue ecosystem. It allows you to build 3D scenes using a declarative approach with familiar Vue components and composables.
Key features include:
@tresjs/cientos and @tresjs/post-processing.pmndrs/postprocessing for high performance and provides a fully typed TypeScript development experience.@tresjs/rapier is a Vue-first wrapper for the Rapier physics engine. It provides a declarative API for integrating realistic physics into TresJS scenes using rigid bodies, colliders, and joints. It is built on top of the official @dimforge/rapier3d JavaScript bindings (WASM).TresJS transforms the imperative Three.js approach (step-by-step instructions) into a declarative, component-based system using Vue. Instead of manually managing scene creation, object instantiation, and resource disposal, you describe the desired state of your 3D scene using Vue templates and components.
Key Benefits:
For deeper insights into advanced usage, you can refer to these community-contributed resources:
The docs-boilerplate uses a standard Nuxt directory structure for application logic and a separate content/ directory for Markdown-based documentation.
app/components/: Vue componentsapp/composables/: Composable functionsapp/layouts/: Page layoutsapp/pages/: Route pagesapp/assets/: Static assetscontent/: Markdown content filespublic/: Public static filesThe TresJS community provides several plugins to extend functionality, including:
SMAA (Subpixel Morphological Antialiasing) can be used to smooth out jagged edges in your 3D scenes. To use it, wrap the <SMAA /> component inside an <EffectComposer /> component within your <TresCanvas />.
<script setup lang="ts">
import { EffectComposer, SMAA } from '@tresjs/post-processing'
</script>
<template>
<TresCanvas>
<!-- Your scene -->
<Suspense>
<EffectComposer>
<SMAA :width="1024" :height="768" />
</EffectComposer>
</Suspense>
</TresCanvas>
</template>