\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.",[2875],{"name":2876,"color":2877},"bug","d73a4a",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.72452354,{"description":2885,"labels":2886,"number":2890,"owner":2865,"repository":2891,"state":2867,"title":2892,"updated_at":2893,"url":2894,"score":2895},"Following https://www.youtube.com/watch?v=lcMCVWYpnrI&list=PLWP0narTpO8n9YwsTLVO7-vbIzLELrwwS",[2887],{"name":2888,"color":2889},"demo","CAC7AC",85,"lab","Fancy car showcase","2023-12-15T13:50:22Z","https://github.com/Tresjs/lab/issues/85",0.73386246,{"description":2897,"labels":2898,"number":2901,"owner":2865,"repository":2879,"state":2867,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Description\n\nAs a developer using Tres I would like to have an easy and fast way to add or remove layers to my instances.\r\n\r\n\n\n### Suggested solution\n\nMy suggestion is something like:\r\n\r\n\u003CTresMesh v-layer:enable=\"1\" />\r\n\r\nWe should accept an array too\r\n\u003CTresMesh v-layer:enable=\"[1, 2, 3]\" />\r\n\r\nAnd of course other methods like: disable, test (maybe with a console.log), toggle\r\n\r\nFor more info, check:\r\nhttps://threejs.org/docs/index.html?q=layers#api/en/core/Layers\r\n\n\n### Alternative\n\nAny other alternative is considered\n\n### Additional context\n\nAs we discuss, you can achieve this by using template ref, but sometimes is just too much code, this Issue will could improve the UX\r\n\r\nFollowing the directives pattern (to make our user easier)\n\n### Validations\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.",[2899,2900],{"name":2857,"color":2858},{"name":2863,"color":2864},543,"v-layer directive","2024-03-30T15:32:13Z","https://github.com/Tresjs/tres/issues/543",0.73457205,{"description":2907,"labels":2908,"number":2911,"owner":2865,"repository":2912,"state":2867,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### 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.",[2909,2910],{"name":2857,"color":2858},{"name":2863,"color":2864},342,"cientos","Equivalent of Three.js's `InstancedMesh`","2024-04-02T09:44:50Z","https://github.com/Tresjs/cientos/issues/342",0.73509693,{"description":2918,"labels":2919,"number":2924,"owner":2865,"repository":2879,"state":2867,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\r\n\r\nDue to the debounced ref introduced in #512, the canvas only renders once the resize animation has finished.\r\n\r\nHow it's supposed to work\r\n\r\n\r\nIt can be fixed by moving renderer size update and the camera projection matrix update to before rendering or using useFps composable from vueuse to dynamically calculate debounceTime\r\n\r\n### Reproduction\r\n\r\nMonitor with refresh rate above 100 hz needed\r\n\r\nhttps://stackblitz.com/edit/stackblitz-starters-jtmew9?file=src%2FApp.vue\r\n### Steps to reproduce\r\n\r\nHave container of TresCanvas resize continuously. \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: (12) x64 AMD Ryzen 5 5600X 6-Core Processor\r\n Memory: 12.28 GB / 15.58 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 22.8.0 - ~/.asdf/installs/nodejs/22.8.0/bin/node\r\n npm: 10.8.2 - ~/.asdf/plugins/nodejs/shims/npm\r\n pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.2 => 4.0.2 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\npnpm\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.",[2920,2921],{"name":2876,"color":2877},{"name":2922,"color":2923},"p3-minor-bug","F28C37",848,"Render issue with continuous resize animation","2024-10-18T20:46:48Z","https://github.com/Tresjs/tres/issues/848",0.7372765,{"description":2930,"labels":2931,"number":2935,"owner":2865,"repository":2879,"state":2867,"title":2936,"updated_at":2937,"url":2938,"score":2939},"Atm the docs don't have search functionality, as we grow on features, it's important to have it\n\nhttps://vitepress.dev/reference/default-theme-search",[2932],{"name":2933,"color":2934},"docs","0075ca",152,"Add Algolia Search to docs","2024-03-28T11:19:27Z","https://github.com/Tresjs/tres/issues/152",0.7454214,{"description":2941,"labels":2942,"number":2943,"owner":2865,"repository":2944,"state":2867,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Description\r\n\r\nAs a developer using Tres Nuxt devtools I would like to be able to modify object values from the devtools directly and visualize the changes on the scene in real time.\r\n\r\n### Suggested solution\r\n\r\nAn `action` hook is gonna be potentially implemented in https://github.com/Tresjs/tres/issues/478\r\n\r\nIntroduce an editable functionality on the devtools so values become inputs and attach the event to the change of the value\r\n\r\n```ts\r\nwindow.__TRES__DEVTOOLS__.action(\r\n {\r\n type: 'tres:edit'\r\n payload: {\r\n object: //obj uuid\r\n property: 'position.x'\r\n value: 2\r\n }\r\n }\r\n)\r\n```\r\n\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\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.",[],73,"nuxt","Devtools edit scene object values","2024-04-11T14:13:36Z","https://github.com/Tresjs/nuxt/issues/73",0.7554623,{"description":2950,"labels":2951,"number":2952,"owner":2865,"repository":2912,"state":2867,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Describe the bug\r\n\r\nconst text = ref('this is text!')\r\n\r\nconst onClick = ( )=>{\r\n text.value='text change!'\r\n}\r\n\r\n\r\n\r\n \u003CTresMesh @click=\"onClick\" :position=\"[1, 1, 1]\">\r\n \u003CTresBoxGeometry />\r\n \u003CTresMeshNormalMaterial />\r\n \u003CHtml\r\n center\r\n transform\r\n :distance-factor=\"4\"\r\n :position=\"[0, 0, 0.65]\"\r\n :scale=\"[0.75, 0.75, 0.75]\"\r\n >\r\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">\r\n {{ text }}\r\n \u003C/h1>\r\n \u003C/Html>\r\n \u003C/TresMesh>\r\n\r\n\r\n### Reproduction\r\n\r\nN\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n_No response_\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/cientos/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\r\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.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],407,"Html content reactive support","2024-05-08T01:52:13Z","https://github.com/Tresjs/cientos/issues/407",0.76065356,{"description":2958,"labels":2959,"number":2960,"owner":2865,"repository":2879,"state":2867,"title":2961,"updated_at":2962,"url":2963,"score":2964},"### Describe the bug\n\ni have made a clean nuxt 3.15.4 installation, with three.js 0.174.0, @tresjs/core 4.3.3 and @tresjs/nuxt 3.0.8, in firefox.\nin the console, i have these warnings:\n```\nMouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. [tres.js:695:6](http://localhost:3000/_nuxt/node_modules/@tresjs/core/dist/tres.js)\nMouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead. [tres.js:695:6](http://localhost:3000/_nuxt/node_modules/@tresjs/core/dist/tres.js)\n```\nthis probably suggests that tresjs uses older browser mouse events. i have opened the same nuxt instance in chrome and it didnt give any warnings, so this is definitely an firefox-only issue.\n\nuser agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\n\n### Steps to reproduce\n\nstackblitz should run in firefox browser, on chrome this warning doesnt exist\n\n### System Info\n\n```shell\nSystem:\n OS: Windows 11 10.0.26100\n CPU: (12) x64 AMD Ryzen 5 7535HS with Radeon Graphics\n Memory: 4.49 GB / 23.32 GB\n Binaries:\n Node: 23.6.1 - C:\\nvm4w\\nodejs\\node.EXE\n npm: 10.9.2 - C:\\nvm4w\\nodejs\\npm.CMD\n pnpm: 10.2.0 - C:\\nvm4w\\nodejs\\pnpm.CMD\n Browsers:\n Edge: Chromium (132.0.2957.140)\n Internet Explorer: 11.0.26100.1882\n npmPackages:\n @tresjs/core: ^4.3.3 => 4.3.3\n @tresjs/nuxt: ^3.0.8 => 3.0.8\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/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.",[],952,"Firefox warning: \"MouseEvent.mozPressure\" and \"MouseEvent.mozInputSource\" are deprecated","2025-03-02T20:32:14Z","https://github.com/Tresjs/tres/issues/952",0.7681152,["Reactive",2966],{},["Set"],["ShallowReactive",2969],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwxqfmCBqA46fc3qEjY78gMrr0Ky9zB2g1wSTdk9UK5M":-1},"/Tresjs/tres/167"]