tresjs-core-skilld
starsforks
How to install tresjs-core-skilld?
skilld-dev/vue-ecosystem-skills/tresjs-core-skilld
$npx -y skills add skilld-dev/vue-ecosystem-skills --skill tresjs-core-skilldDeclarative ThreeJS using Vue Components. ALWAYS use when writing code importing \"@tresjs/core\". Consult for debugging, best practices, or modifying @tresjs/core, tresjs/core, tresjs core, tres.
SKILL.md
| 1 | # Tresjs/tres `@tresjs/core@5.8.0` |
| 2 | **Tags:** beta: 2.0.0-beta.13, next: 5.0.0-next.6, alpha: 5.0.0-alpha.2 |
| 3 | |
| 4 | **References:** [Docs](./references/docs/_INDEX.md) |
| 5 | ## API Changes |
| 6 | |
| 7 | This section documents version-specific API changes — prioritize recent major/minor releases. |
| 8 | |
| 9 | - BREAKING: `useLoader` — returns reactive state `{ state, isLoading, error, progress }` since v5, no longer returns a Promise [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 10 | |
| 11 | - BREAKING: Pointer Events — renamed to native DOM names (e.g., `@pointerdown` instead of `@pointer-down`) in v5 [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 12 | |
| 13 | - BREAKING: `useTexture` — removed from core in v5, moved to `@tresjs/cientos` package [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 14 | |
| 15 | - BREAKING: ESM-only — TresJS v5 is ESM-only; UMD build and CommonJS `require()` are no longer supported [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 16 | |
| 17 | - BREAKING: `TresCanvas` Props — WebGL context props like `alpha`, `antialias`, `stencil`, and `depth` are now readonly and non-reactive in v5 [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 18 | |
| 19 | - BREAKING: `useTresContext().camera` — returns a state object in v5; use `useTres().camera` for the active camera instance [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 20 | |
| 21 | - BREAKING: Renderer Context — `renderer` is now readonly in `useTresContext()`; `performance` state was removed from context in v5 [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 22 | |
| 23 | - BREAKING: Event Bubbling — only the first intersected element triggers pointer events since v5 to align with standard behavior [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 24 | |
| 25 | - NEW: `Context` Component — exported in v5.5.0 (as `TresCanvasContext`) for advanced scene and state management [source](./references/releases/@tresjs/core@5.5.0.md) |
| 26 | |
| 27 | - NEW: Kebab-case Support — support for components written in kebab-case (e.g., `<tres-mesh>`) added in v5.1.0 [source](./references/releases/@tresjs/core@5.1.0.md) |
| 28 | |
| 29 | - NEW: `primitive` Prefix — added `prefix` option for primitives in v5.3.0 to avoid name collisions [source](./references/releases/@tresjs/core@5.3.0.md) |
| 30 | |
| 31 | - NEW: `TresCanvasProps` / `TresCanvasEmits` — explicitly exported types added in v5.2.0 for better TypeScript integration [source](./references/releases/@tresjs/core@5.2.0.md) |
| 32 | |
| 33 | - REMOVED: Legacy Composables — `useRenderLoop`, `useCamera`, `useTresReady`, `useSeek`, `useRaycaster`, and `useLogger` removed in v5 [source](./references/docs/content/1.getting-started/4.upgrade-guide.md) |
| 34 | |
| 35 | - NEW: `useForwardPropsEmits` — integrated into `TresCanvas` in v5.3.0 for streamlined event and prop handling [source](./references/releases/@tresjs/core@5.3.0.md) |
| 36 | |
| 37 | **Also changed:** `useLoop` replaces `useRenderLoop` · `useGraph` replaces `useSeek` · `@ready` event replaces `useTresReady` · `useTres()` replaces common `useTresContext()` usage · `TresCanvas` supports `useLegacyLights` prop (deprecated) · `useLoader` supports `extensions` and reactive paths. |
| 38 | |
| 39 | ## Best Practices |
| 40 | |
| 41 | - Use `shallowRef` with template refs to access Three.js instances directly in high-frequency render loops. This avoids Vue's deep proxy overhead, which can be significantly slower than direct property access [source](./references/docs/content/2.essentials/2.concepts/2.reactivity.md) |
| 42 | |
| 43 | ```vue |
| 44 | <script setup lang="ts"> |
| 45 | const meshRef = shallowRef<TresInstance | null>(null) |
| 46 | const { onBeforeRender } = useLoop() |
| 47 | |
| 48 | onBeforeRender(({ elapsed }) => { |
| 49 | if (meshRef.value) meshRef.value.rotation.y = elapsed |
| 50 | }) |
| 51 | </script> |
| 52 | |
| 53 | <template> |
| 54 | <TresMesh ref="meshRef" /> |
| 55 | </template> |
| 56 | ``` |
| 57 | |
| 58 | - Prefer `shallowRef` and `shallowReactive` over `ref` or `reactive` for Three.js objects. This maintains reactivity for the reference itself while preventing expensive deep tracking of complex internal Three.js properties [source](./references/docs/content/3.api/5.advanced/performance.md) |
| 59 | |
| 60 | - Set `renderMode="on-demand"` on `<TresCanvas>` for non-game applications to reduce CPU/GPU usage. The scene will only re-render when props change or when manual invalidation is explicitly triggered [source](./references/docs/content/3.api/5.advanced/performance.md) |
| 61 | |
| 62 | - Manually trigger a render using `invalidate()` from `useLoop` or `useTres` when modifying instances via template refs or direct mutations in `on-demand` mode, as these changes are invisible to Vue's reactivity system [source](./references/docs/content/3.api/5.advanced/performance.md) |
| 63 | |
| 64 | - Ensure animations are frame-rate independent by using the `de |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
