\r\n\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CHelloWorld msg=\"You did it!\" />\r\n\r\n \u003Cnav>\r\n \u003CRouterLink to=\"/\">Home\u003C/RouterLink>\r\n \u003CRouterLink to=\"/about\">About\u003C/RouterLink>\r\n \u003C/nav>\r\n \u003C/div>\r\n \u003C/header>\r\n\r\n \u003CRouterView />\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n```\r\n\r\nAboutView\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"about\">\r\n \u003Ch1>This is an about page\u003C/h1>\r\n \u003Cdiv class=\"canvas\">\r\n \u003CTresCanvas>\r\n \u003C!-- Your scene here -->\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\n\u003C/script>\r\n\u003Cstyle>\r\n@media (min-width: 1024px) {\r\n .about {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n}\r\n.canvas {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U\r\n Memory: 1.70 GB / 7.76 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node\r\n npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.3 \r\n @tresjs/core: ^4.3.2 => 4.3.2 \r\n vite: ~6.0.6 => 6.0.6\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Code of Conduct\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://tresjs.org/guide).\r\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2896],{"name":2879,"color":2880},905,"tres","I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... )","2025-02-08T10:41:31Z","https://github.com/Tresjs/tres/issues/905",0.73928297,{"description":2904,"labels":2905,"number":2915,"owner":2868,"repository":2916,"state":2870,"title":2917,"updated_at":2918,"url":2919,"score":2920},"Inevitable 😂 \r\n\r\n- Unocss Dark mode https://unocss.dev/presets/mini#dark-mode \r\n- Vueuse dark https://vueuse.org/core/useDark/\r\n",[2906,2909,2912],{"name":2907,"color":2908},"enhancement","a2eeef",{"name":2910,"color":2911},"good first issue","7057ff",{"name":2913,"color":2914},"help wanted","008672",75,"leches","Dark mode","2023-11-30T12:40:21Z","https://github.com/Tresjs/leches/issues/75",0.75147545,{"description":2922,"labels":2923,"number":2924,"owner":2868,"repository":2888,"state":2870,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\n\nI've been using the `GLTFModel` component to load my models.\nUnfortunately, I can't programmatically modify or even access them.\nThe documentation provides this example:\n``` \n\u003Cscript setup lang=\"ts\">\nimport { GLTFModel, OrbitControls } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTHREE.Object3D>()\n\nwatch(modelRef, (model) => {\n // Do something with the model\n model.position.set(0, 0, 0)\n})\n\u003C/script>\n``` \nUnfortunately, the object I receive in return is not a 3D Model. I don't even know what it is.\nIt looks like a `ref` without a `.value`, and I can't access any value.\n\nIt's something like this:\n```\n{\n \"dep\": {\n \"version\": 1,\n \"sc\": 0\n },\n \"__v_isRef\": true,\n \"__v_isShallow\": false,\n \"_rawValue\": {\n \"instance\": {\n \"metadata\": {\n \"version\": 4.6,\n \"type\": \"Object\",\n \"generator\": \"Object3D.toJSON\"\n },\n \"geometries\": [\n```\nI found a better approach, but unfortunately, it produces the same results. Instead of using `watch`, I’m now using the `@resolve` event from `Suspense`, which wraps the `GLTFModel`.\n\nHow can we programmatically modify the object when using the `GLTFModel` component?\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-tktzn1zk?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n1. Wait to load up\n2. Check the console logs\n\n### System Info\n\n```shell\nSystem:\n OS: Windows 11 10.0.26100\n CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H\n Memory: 2.57 GB / 15.68 GB\n Binaries:\n Node: 18.20.4 - C:\\Program Files\\nodejs\\node.EXE\n npm: 10.7.0 - C:\\Program Files\\nodejs\\npm.CMD\n Browsers:\n Edge: Chromium (132.0.2957.127)\n Internet Explorer: 11.0.26100.1882\n npmPackages:\n @tresjs/cientos: ^4.1.0 => 4.1.0\n @tresjs/core: ^4.3.2 => 4.3.2\n vite: ^6.0.11 => 6.0.11\n```\n\n### Used Package Manager\n\nnpm\n\n### Code of Conduct\n\n- [x] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [x] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [x] Read the [docs](https://cientos.tresjs.org/guide).\n- [x] Check that there isn't [already an issue](https://github.com/Tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.\n- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],594,"Cant reach the model with `GLTFModel`","2025-03-05T12:22:33Z","https://github.com/Tresjs/cientos/issues/594",0.76434237,{"description":2930,"labels":2931,"number":2938,"owner":2868,"repository":2888,"state":2870,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Description\n\nAs a developer using TresJS, I would like an equivalent of Three.js's `instancedMesh` to improve performance.\r\n\r\n\n\n### Suggested solution\n\n[Drei's `\u003CInstances />`](https://github.com/pmndrs/drei/blob/514be0d1ff88b43c07cf246da9dca3517ea14d9a/src/core/Instances.tsx#L22)\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.",[2932,2935],{"name":2933,"color":2934},"feature","c2e0c6",{"name":2936,"color":2937},"p2-nice-to-have","D4C5F9",342,"Equivalent of Three.js's `InstancedMesh`","2024-04-02T09:44:50Z","https://github.com/Tresjs/cientos/issues/342",0.77055484,{"description":2944,"labels":2945,"number":2949,"owner":2868,"repository":2888,"state":2950,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Describe the bug\n\n\r\n\r\nAt some point, the helper throws error, seems related to this line in the component.\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://github.com/Tresjs/cientos/blob/main/src/core/staging/ContactShadows.vue\n\n### Steps to reproduce\n\nRun the cientos playground.\r\n\r\nGo to the contactShadow component\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\nnpm\n\n### Code of Conduct\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/Tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2946],{"name":2947,"color":2948},"p3-minor-bug","F28C37",401,"closed","Contact Shadow helper throws errors","2024-05-03T13:35:42Z","https://github.com/Tresjs/cientos/issues/401",0.68435735,{"description":2956,"labels":2957,"number":2959,"owner":2868,"repository":2898,"state":2950,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\n\nWhenever we unmount the TresCanvas on route change, for example, we are recursively disposing and deleting scene references. This seems to interfere with Helper's own disposal cycle.\n\n```\nchunk-TMRGR37B.js?v=d91265db:20290 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispose')\n at DirectionalLightHelper.dispose (chunk-TMRGR37B.js?v=d91265db:20290:30)\n at disposeObject3D (index.ts:302:14)\n at index.ts:294:29\n at Array.forEach (\u003Canonymous>)\n at disposeObject3D (index.ts:294:12)\n at dispose (TresCanvas.vue:162:3)\n at unmountCanvas (TresCanvas.vue:183:3)\n```\n\n### Reproduction\n\nInternal\n\n### Steps to reproduce\n\n1. Add a helper to the scene\n2. Change route.\n\n### System Info\n\n```shell\nSystem:\n OS: macOS 15.2\n CPU: (8) arm64 Apple M1 Pro\n Memory: 192.69 MB / 16.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 20.11.0 - /usr/local/bin/node\n Yarn: 1.22.19 - /usr/local/bin/yarn\n npm: 10.2.4 - /usr/local/bin/npm\n pnpm: 9.15.4 - ~/Library/pnpm/pnpm\n bun: 1.0.2 - ~/.bun/bin/bun\n Browsers:\n Brave Browser: 120.1.61.116\n Chrome: 132.0.6834.160\n Safari: 18.2\n npmPackages:\n @tresjs/cientos: 4.0.3 => 4.0.3 \n @tresjs/core: workspace:^ => 4.3.2 \n @tresjs/leches: https://pkg.pr.new/@tresjs/leches@9ad0cd3 => 0.14.1\n```\n\n### Used Package Manager\n\npnpm\n\n### Code of Conduct\n\n- [x] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/tres/blob/main/CODE_OF_CONDUCT.md)\n- [x] Read the [Contributing Guidelines](https://github.com/Tresjs/tres/blob/main/CONTRIBUTING.md).\n- [x] Read the [docs](https://tresjs.org/guide).\n- [x] Check that there isn't [already an issue](https://github.com/tresjs/tres/issues) that reports the same bug to avoid creating a duplicate.\n- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2958],{"name":2885,"color":2886},912,"Helpers disposal issue","2025-02-06T13:52:50Z","https://github.com/Tresjs/tres/issues/912",0.6951147,{"description":2965,"labels":2966,"number":2867,"owner":2868,"repository":2916,"state":2950,"title":2968,"updated_at":2969,"url":2970,"score":2874},"**Is your feature request related to a problem? Please describe.**\r\nWould be pretty nice if just by using `useControls` the vue component gets teleported on added to the VDom three instead of having to import it\r\n\r\nSame for CSS https://www.npmjs.com/package/vite-plugin-css-injected-by-js\r\n\r\n",[2967],{"name":2907,"color":2908},"Avoid having to import component and styles","2023-12-13T10:00:34Z","https://github.com/Tresjs/leches/issues/73",{"description":2972,"labels":2973,"number":2975,"owner":2868,"repository":2888,"state":2950,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### Description\n\nAs a developer using Tresjs I would like to add water effect easily, threejs has some addons for this.\r\n\r\n\n\n### Suggested solution\n\nIt could be based on: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html use the \r\nimport { Water } from 'three/addons/objects/Water2.js';\r\nDemo: https://threejs.org/examples/?q=water#webgl_water\r\nor \r\nin https://github.com/mrdoob/three.js/blob/master/examples/webgl_shaders_ocean.html\r\nimport { Water } from 'three/addons/objects/Water.js';\r\nDemo: https://threejs.org/examples/?q=water#webgl_shaders_ocean\r\n\r\nI personally prefer more the second one\n\n### Alternative\n\nOthers alternatives are considered, feel free to bring to discussion\n\n### Additional context\n\n_No response_\n\n### Validations\n\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/cientos/issues) that reports the same bug to avoid creating a duplicate.",[2974],{"name":2910,"color":2911},252,"Water component","2024-03-13T15:40:19Z","https://github.com/Tresjs/cientos/issues/252",0.74012303,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNynlT4HODOLv8iPJ9nmYII2La46pOS99r_M0FBiFfUg":-1},"/Tresjs/cientos/158"]