\r\n \u003CTresMesh>\r\n \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 32]\" />\r\n \u003CTresMeshToonMaterial color=\"orange\" />\r\n \u003C/TresMesh>\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\nWhen I press ctrl + space, it should show TS hints, but they don't:\r\n\r\n\r\n\r\n\r\n\r\nEditor:\r\n- VSCode\r\n- `Vue.volar`\r\n- `Vue.vscode-typescript-vue-plugin`\r\n\r\nPackages versions:\r\n- `@tresjs/core`: `^2.1.1`\r\n- `three`: `^0.152.2`\r\n- `typescript`: `^5.0.4`\r\n\r\nGithub requires reproduction link, but stackblitz don't checks TS in vue sfc. Download and run reproduction project locally.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-aqkqrl?file=src%2FApp.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.18363\r\n CPU: (4) x64 Intel(R) Pentium(R) CPU G4560 @ 3.50GHz\r\n Memory: 540.46 MB / 3.92 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: master_preferences\r\n Internet Explorer: 11.0.18362.1\r\n npmPackages:\r\n @tresjs/cientos: ^2.0.0 => 2.0.0 \r\n @tresjs/core: ^2.1.1 => 2.1.1 \r\n vite: ^4.3.8 => 4.3.8\n```\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.",[],279,"closed","Typescript autocompletion doesn't work","2023-05-23T09:37:59Z","https://github.com/Tresjs/tres/issues/279",0.6692017,{"description":2877,"labels":2878,"number":2882,"owner":2860,"repository":2883,"state":2871,"title":2884,"updated_at":2885,"url":2886,"score":2887},"### Describe the bug\r\n\r\nI set up a brand new Nuxt3 project, added `@tresjs/nuxt` via npm and added it to modules section of **_nuxt.config.ts_** . I then added the `\u003CTresCanvas>` to the **_app.vue_**. The resulting `\u003Ccanvas ...>` in the DOM continuously grows in height... forever! What could be causing this, and how do I fix it? \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/trescanvas-height-error?file=app.vue\r\n\r\n### Steps to reproduce\r\n\r\nRun `npm install` and then `npm run dev`. View the results using the url provided (typically [http://localhost:3000/](http://localhost:3000/)). When using Chrome you can see the height grow by opening the dev tools window and selecting the Elements and then hovering the mouse over the \u003Cbody> element. If you drill down to the \u003Ccanvas> element you'll see the height continuously increasing!!!\r\n\r\n### System Info\r\n\r\n```shell\r\nNo errors reported. But the size of the window is continuously increasing!!!\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.",[2879],{"name":2880,"color":2881},"bug","d73a4a",48,"nuxt","\u003CTresCanvas> results in continuous height growth of the \u003Ccanvas>","2024-01-26T14:41:44Z","https://github.com/Tresjs/nuxt/issues/48",0.6749904,{"description":2889,"labels":2890,"number":2891,"owner":2860,"repository":2861,"state":2871,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Describe the bug\r\n\r\nHi, I'm using TresJs v2(@tres/core) in Nuxt3.\r\nThrough your docs and kind explanations, I succeeded in configuring the environment and displaying 3d objects in Nuxt3.\r\n\r\nHowever, if a vue component (I made) containing the TresCanvas tag is unmounted according to the page route movement or certain conditions, and then re-enters the page and is newly mounted, it seems that the object is not rendered on the canvas tag.\r\n\r\nCan you check this?\r\nYou can see an example in the reproduction link below. You can check it when you toggle v-if with the toggle button.\r\nThank you.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-36xfsn?file=nuxt.config.ts,app.vue (in Nuxt3)\r\nhttps://stackblitz.com/edit/tresjs-basic-i4h4kk?file=src%2FApp.vue (same in Vue3)\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\nnpm packages version\r\n- nuxt: 3.5.3\r\n- three: 0.153.0\r\n- @tresjs/core: 2.1.3\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nyarn\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.",[],302,"Nuxt3 + Tresjs rendering issue(when remounting, not displaying)","2023-06-19T15:26:29Z","https://github.com/Tresjs/tres/issues/302",0.67787915,{"description":2897,"labels":2898,"number":2899,"owner":2860,"repository":2883,"state":2871,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the bug\n\nI am trying to use a TresCanvas that is known to work when using in a staticly declared way\r\nbut if I use it in a component that is dynamicly loaded using \r\n\r\n`defineAsyncComponent(() => import('@/components/pageBuilder/component.vue'))`\r\n\r\nit doesn't render the canvas the most I can get is the following\r\n\r\n`\u003Cdiv window-size=\"\" clear-color=\"#241246\" shadows=\"\" data-v-3789b801=\"\">\u003Ccanvas style=\"\">\u003C/canvas>\u003C/div>`\r\n\r\n## Recent findings\r\n\r\njust having the TresCanvas in a component that is nested 2 levels deep doesn't work.\r\nno idea why or what is causing this. \r\n\r\nI've provided a reproduction of this\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-z2g8yk?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\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/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.",[],79,"TresCanvas doesn't render in Dynamicly loaded components or deeply nested components","2024-01-26T12:08:01Z","https://github.com/Tresjs/nuxt/issues/79",0.68209386,{"description":2905,"labels":2906,"number":2907,"owner":2860,"repository":2861,"state":2871,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Describe the bug\n\n\u003Cimg width=\"1006\" alt=\"Screenshot 2024-01-21 at 22 33 48 copy\" src=\"https://github.com/Tresjs/tres/assets/20469369/ff81041f-518b-46dc-87a5-d8c4aa16c8c4\">\r\n\r\nIn the [Tres docs](https://docs.tresjs.org/guide/), an error appears in the sandbox:\r\n\r\n```\r\nFailed to resolve component: TresDirectionalLight\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n at \u003CRepl>\r\n```\r\n\r\n\r\n\n\n### Reproduction\n\nN/A\n\n### Steps to reproduce\n\n* in the browser, navigate to https://docs.tresjs.org/guide/\r\n* in the sandbox window, see the error\n\n### System Info\n\n```shell\nTested in:\r\n\r\n* Firefox 127.0.1 (Mac ARM)\r\n* Chrome Version 120.0.6099.234 (Mac ARM)\n```\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.",[],521,"docs(sandbox): \"Failed to resolve component: TresDirectionalLight\"","2024-01-22T15:10:07Z","https://github.com/Tresjs/tres/issues/521",0.6910195,{"description":2913,"labels":2914,"number":2915,"owner":2860,"repository":2861,"state":2871,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Description\r\n\r\nRight now there is no way to access the TresCanvas context without hacking the script setup using TresCanvas:\r\n\r\n\u003Cdetails>\r\n\u003Csummary>\u003Cstrong>Hack\u003C/strong>\u003C/summary>\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport { computed, ref, onMounted } from 'vue';\r\n\r\nimport { extend, useTresContext } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls';\r\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry';\r\n\r\nconst trescanvas = ref();\r\nconst state = ref();\r\n\r\nonMounted(() => {\r\n setTimeout(() => {\r\n state.value = trescanvas.value?.context;\r\n }, 0);\r\n});\r\n\r\n// Add the element to the catalogue\r\nextend({ TextGeometry, OrbitControls });\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas ref=\"trescanvas\" shadows alpha>\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"state?.renderer\"\r\n :args=\"[state?.camera, state?.renderer?.domElement]\"\r\n />\r\n \u003CTresMesh>\r\n \u003CTresTextGeometry :args=\"['TresJS', { font, ...fontOptions }]\" center />\r\n \u003CTresMeshMatcapMaterial :matcap=\"matcapTexture\" />\r\n \u003C/TresMesh>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\u003C/details>\r\n\r\n### Suggested solution\r\n\r\nAdd default slot props, we¡ve the default slot there without any binding:\r\n```ts\r\n\u003Ccanvas\r\n ref=\"canvas\"\r\n :data-scene=\"scene.uuid\"\r\n :class=\"$attrs.class\"\r\n :data-tres=\"`tresjs ${pkg.version}`\"\r\n :style=\"{\r\n display: 'block',\r\n width: '100%',\r\n height: '100%',\r\n position: windowSize ? 'fixed' : 'relative',\r\n top: 0,\r\n left: 0,\r\n pointerEvents: 'auto',\r\n touchAction: 'none',\r\n ...$attrs.style as Object,\r\n }\"\r\n >\r\n \u003Cslot v-bind=\"context\" />\r\n\u003C/canvas>\r\n```\r\n\r\nthen in the sfc template:\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"{ camera, renderer }\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"renderer\"\r\n :args=\"[camera, renderer.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\n### Alternative\r\n\r\ncheck the hack in the description\r\n\r\n### Additional context\r\n\r\nrelated #565\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.",[],573,"provide default slot props in TresCanvas","2024-03-05T19:47:12Z","https://github.com/Tresjs/tres/issues/573",0.70556104,{"description":2921,"labels":2922,"number":2923,"owner":2860,"repository":2861,"state":2871,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Describe the bug\n\nThis error hapend when I write ` const state = useTres()` or `const { state } = useTres()` In devtools, and the scene is not loaded.\r\nThis is my code (in App.vue):\r\n```\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas, extend, useTres } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js'\r\nimport { watchEffect } from 'vue'\r\n\r\nconst state = useTres()\r\n\r\nlet controls: OrbitControls | null = null\r\n\r\nwatchEffect(()=>{\r\n if (state.renderer && state.camera) {\r\n controls = new OrbitControls(state.camera.value!, state.renderer.value.domElement )\r\n }\r\n})\r\n\r\nextend({OrbitControls})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas window-size>\r\n \u003CTresPerspectiveCamera />\r\n\r\n \u003CTresScene>\r\n \u003CTresMesh>\r\n \u003CTresBoxGeometry />\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/TresMesh>\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\nI did it like in this tutorial: [The tutorial](https://youtu.be/QP3gCY5_dds)\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-fg1y4w?file=src%2FApp.vue\n\n### Steps to reproduce\n\nAdd \r\n```\r\nimport { useTres } from '@tresjs/core';\r\nconst state = useTres()\r\n```\r\nto your code\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/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.",[],410,"Uncaught Error: useTresContext must be used together with useTresContextProvider","2023-09-30T07:00:08Z","https://github.com/Tresjs/tres/issues/410",0.7119729,{"description":2929,"labels":2930,"number":2938,"owner":2860,"repository":2861,"state":2871,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Describe the bug\n\nWhen nesting a camera within a group, an error message is displayed indicating that no camera was found in the scene.\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://unique-cajeta-763bfe.netlify.app/\n\n### Steps to reproduce\n\nSetup template with the following components:\r\n`\u003CTresCanvas>\r\n \u003CTresGroup>\r\n \u003CTresPerspectiveCamera :position=\"[0, 0, 6]\" />\r\n \u003C/TresGroup>\r\n \u003C/TresCanvas>`\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 12.4\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 104.41 MB / 16.00 GB\r\n Shell: 5.8.1 - /bin/zsh\r\n Binaries:\r\n Node: 16.18.1 - ~/.nvm/versions/node/v16.18.1/bin/node\r\n Yarn: 1.22.15 - /usr/local/bin/yarn\r\n npm: 8.19.2 - ~/.nvm/versions/node/v16.18.1/bin/npm\r\n Browsers:\r\n Chrome: 113.0.5672.126\r\n Firefox: 113.0.1\r\n Safari: 15.5\r\n npmPackages:\r\n @tresjs/cientos: ^2.0.0-rc.3 => 2.0.0-rc.3 \r\n @tresjs/core: ^2.0.0 => 2.0.0\n```\n\n\n### Used Package Manager\n\nyarn\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.",[2931,2932,2935],{"name":2880,"color":2881},{"name":2933,"color":2934},"good first issue","7057ff",{"name":2936,"color":2937},"help wanted","008672",273,"False Positive No Camera Warning","2023-06-19T15:26:30Z","https://github.com/Tresjs/tres/issues/273",0.7172677,{"description":2944,"labels":2945,"number":2947,"owner":2860,"repository":2883,"state":2871,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Describe the bug\r\n\r\nI tried upgrading the `@tresjs/core` package from `3.0.1` to `3.1.x` and now every attempt to use the `useNuxtApp()` composable breaks the application.\r\n\r\n\u003Cimg width=\"569\" alt=\"Screenshot 2023-08-30 alle 00 45 56\" src=\"https://github.com/Tresjs/nuxt/assets/5191941/2dd34502-e8eb-4372-a8cb-2a4d98363659\">\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/kekkorider/nuxt-tres-starter/tree/tresjs-core-3-1?file=components%2FSampleBox.vue\r\n\r\n### Steps to reproduce\r\n\r\nIn `/components/SampleBox.vue`, comment out line 19, the one where `useNuxtApp()` is used.\r\nThe error will be gone.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 13.4.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 280.75 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm\r\n pnpm: 8.7.0 - /opt/homebrew/bin/pnpm\r\n Browsers:\r\n Chrome: 116.0.5845.110\r\n Edge: 114.0.1823.55\r\n Safari: 16.5.1\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.",[2946],{"name":2880,"color":2881},33,"Unable to use `useNuxtApp()` since `@tresjs/core@3.1.0`","2023-09-12T08:36:40Z","https://github.com/Tresjs/nuxt/issues/33",0.7181762,["Reactive",2953],{},["Set"],["ShallowReactive",2956],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fLpkD29ReGHmG7u8VVZnXzwGgriE0v16eMZdbo9adGBM":-1},"/Tresjs/tres/408"]