\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 \u003Cdiv>\r\n \u003Cp>This should not scroll\u003C/p>\r\n \u003C/div>\r\n \u003C/Html>\r\n \u003C/TresMesh>\r\n```\r\nI expect the first element to scroll, and the second to stay.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz\r\n Memory: 3.82 GB / 11.69 GB\r\n Container: Yes\r\n Shell: 3.6.1 - /usr/bin/fish\r\n Binaries:\r\n Node: 21.5.0 - ~/.local/share/nvm/v21.5.0/bin/node\r\n Yarn: 1.22.19 - /usr/bin/yarn\r\n npm: 10.2.4 - ~/.local/share/nvm/v21.5.0/bin/npm\r\n pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm\r\n bun: 1.0.7 - ~/.bun/bin/bun\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.",[2885,2888],{"name":2886,"color":2887},"pending-triage","97A4FE",{"name":2871,"color":2872},507,"Native html scroll and @tresjs/cientos Html component behaviour","2024-03-30T15:37:07Z","https://github.com/Tresjs/tres/issues/507",0.7096866,{"description":2895,"labels":2896,"number":2909,"owner":2860,"repository":2861,"state":2862,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\n\nAs a developer using TresJS I want to have the ability to Teleport my TresJS Canvas to multiple places in my DOM tree without having to use multiple Canvases. \r\n\r\nI use the tunnel rat package that is made for React: https://github.com/pmndrs/tunnel-rat\r\n\r\nI use the react three fiber nextjs starter template and they have a great example of how tunnel rat is used: \r\nhttps://github.com/pmndrs/react-three-next \r\n\r\nIt helps me to easily use a canvas inside different html tags at all kinds of places in my project. By using tunnel-rat I only have to use one main Canvas which is reused for all the places where ThreeJS is used.\n\n### Suggested solution\n\nVue has the provide/Inject and Teleport functions, However I think they come short to get the full functionality of tunnel-rat.\r\n\r\nhttps://github.com/pmndrs/tunnel-rat/blob/main/src/index.tsx\r\nhttps://github.com/pmndrs/tunnel-rat/blob/main/src/utils.ts\r\n\r\nI would suggest using pinia for keeping track of all the childs that went into the \"In\" component so they can be rendered properly in the \"Out\" component\r\n\r\nSome sort of suggestion that gives an idea of the implementation: \r\n\r\n`// store.js\r\nimport { defineStore } from 'pinia'\r\n\r\nexport const useStore = defineStore({\r\n id: 'main',\r\n state: () => ({\r\n current: [],\r\n version: 0,\r\n }),\r\n actions: {\r\n incrementVersion() {\r\n this.version++\r\n },\r\n addChild(child) {\r\n this.current.push(child)\r\n },\r\n removeChild(child) {\r\n this.current = this.current.filter((c) => c !== child)\r\n },\r\n },\r\n})\r\n\r\n// In.vue\r\n\u003Ctemplate>\r\n \u003C!-- The In component does not render anything -->\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { useStore } from './store'\r\nimport { onMounted, watchEffect } from 'vue'\r\n\r\nconst store = useStore()\r\n\r\nlet child\r\n\r\nwatchEffect(() => {\r\n child = slots.default ? slots.default() : []\r\n store.addChild(child)\r\n})\r\n\r\nonMounted(() => {\r\n store.incrementVersion()\r\n})\r\n\r\nonBeforeUnmount(() => {\r\n store.removeChild(child)\r\n})\r\n\u003C/script>\r\n\r\n// Out.vue\r\n\u003Ctemplate>\r\n \u003Cdiv v-for=\"(child, index) in store.current\" :key=\"index\">\r\n \u003Cslot v-bind=\"child\" />\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { useStore } from './store'\r\nconst store = useStore()\r\n\u003C/script>`\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/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.",[2897,2900,2903,2906],{"name":2898,"color":2899},"help wanted","008672",{"name":2901,"color":2902},"investigation","D03599",{"name":2904,"color":2905},"PR welcome","2D76B0",{"name":2907,"color":2908},"p2-nice-to-have","D4C5F9",312,"Vue Tunnel rat","2024-08-21T20:24:24Z","https://github.com/Tresjs/tres/issues/312",0.7320714,{"description":2915,"labels":2916,"number":2917,"owner":2860,"repository":2861,"state":2918,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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,"closed","Nuxt3 + Tresjs rendering issue(when remounting, not displaying)","2023-06-19T15:26:29Z","https://github.com/Tresjs/tres/issues/302",0.6527735,{"description":2924,"labels":2925,"number":2926,"owner":2860,"repository":2861,"state":2918,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Describe the bug\n\nI'm trying to take a screenshot of the TresCanvas, but get always an empty PNG.\r\n\r\n \u003CTresCanvas ref=\"tresCanvasRef\" clear-color=\"#aaaaaa\" shadows id=\"modelCanvas\">\r\n \u003CCaptureScreenshot />\r\n \u003CTresPerspectiveCamera :position=\"[-150, 470, 220]\" :look-at=\"[0, 0, 0]\" />\r\n \u003CSuspense>\r\n \u003Cprimitive :position=\"[0, -100, 0]\" v-if=\"sceneLoaded\" :object=\"scene\" />\r\n \u003C/Suspense>\r\n \u003CTresAmbientLight :intensity=\"1.2\" color=\"#ffffff\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[-100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[0, 200, 0]\" />\r\n \u003COrbitControls />\r\n \u003C/TresCanvas>\r\n \r\n \r\n**CaptureScreenshot:**\r\n \u003Cscript setup>\r\nimport { useTresContext } from \"@tresjs/core\";\r\n\r\nconst { renderer } = useTresContext();\r\n\r\nconst captureScreenshot = () => {\r\n const canvas = renderer.value.domElement;\r\n const url = canvas.toDataURL();\r\n const link = document.createElement(\"a\");\r\n link.href = url;\r\n link.download = \"screenshot.png\";\r\n link.click();\r\n};\r\n\u003C/script>\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-bovwvh?file=tsconfig.json\n\n### Steps to reproduce\n\nnpm i\r\nnpm run dev\n\n### System Info\n\n```shell\n\"devDependencies\": {\r\n \"@nuxt/devtools\": \"latest\",\r\n \"@nuxtjs/tailwindcss\": \"^6.8.0\",\r\n \"autoprefixer\": \"^10.4.15\",\r\n \"nuxt\": \"^3.7.3\"\r\n },\r\n \"dependencies\": {\r\n \"@tresjs/cientos\": \"^3.3.0\",\r\n \"@tresjs/nuxt\": \"^1.1.6\",\r\n \"@tresjs/post-processing\": \"^0.4.0\",\r\n \"@types/node\": \"^20.6.0\",\r\n \"dom-to-image\": \"^2.6.0\",\r\n \"html2canvas\": \"^1.4.1\",\r\n \"node\": \"^16.20.2\",\r\n \"three\": \"^0.156.1\"\r\n }\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.",[],408,"TresCanvas Screenshot","2023-12-13T09:08:50Z","https://github.com/Tresjs/tres/issues/408",0.6850102,{"description":2932,"labels":2933,"number":2937,"owner":2860,"repository":2877,"state":2918,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### 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.",[2934],{"name":2935,"color":2936},"bug","d73a4a",48,"\u003CTresCanvas> results in continuous height growth of the \u003Ccanvas>","2024-01-26T14:41:44Z","https://github.com/Tresjs/nuxt/issues/48",0.6876585,{"description":2943,"labels":2944,"number":2947,"owner":2860,"repository":2861,"state":2918,"title":2948,"updated_at":2949,"url":2950,"score":2951},"**Describe the bug**\r\nSince we are using a Custom Renderer, the main instances of Vue don't recognize the Tres components and throw these annoying warnings that will confuse users.\r\n\r\nOne way around this is to add this to the `vite.config.ts`:\r\n\r\n```\r\nplugins: [vue({\r\n template: {\r\n compilerOptions: {\r\n isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',\r\n },\r\n },\r\n })],\r\n```\r\nBut that's not ideal.\r\n\r\n**Expected behavior**\r\nNo warnings\r\n\r\n**Screenshots**\r\n\u003Cimg width=\"803\" alt=\"Screenshot 2023-03-23 at 06 15 08\" src=\"https://user-images.githubusercontent.com/4699008/227110134-44644ecb-367b-4fe4-b071-8e3b645611ce.png\">\r\n\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2945,2946],{"name":2935,"color":2936},{"name":2886,"color":2887},162,"[v2] - Failed to resolve component warnings","2023-11-23T18:35:20Z","https://github.com/Tresjs/tres/issues/162",0.7007257,{"description":2953,"labels":2954,"number":2876,"owner":2860,"repository":2955,"state":2918,"title":2956,"updated_at":2957,"url":2958,"score":2881},"When looking at docs for Bloom I can see empty canvas box with console message saying:\r\n```md\r\nframework.8oxMyIc2.js:1 TypeError: Class constructor ue cannot be invoked without 'new'\r\n at guide_effects_bloom.md.7kCtuEBS.js:1:914\r\n at Object.i [as default] (framework.8oxMyIc2.js:1:16078)\r\n at Proxy.\u003Canonymous> (useRouteDisposal.tyh0ETgK.js:3645:321145)\r\n at ei (framework.8oxMyIc2.js:1:16394)\r\n at Mi.F [as fn] (framework.8oxMyIc2.js:1:49505)\r\n at Mi.run (framework.8oxMyIc2.js:1:4163)\r\n at B.p.update (framework.8oxMyIc2.js:1:49779)\r\n at B (framework.8oxMyIc2.js:1:49805)\r\n at ie (framework.8oxMyIc2.js:1:48650)\r\n at V (framework.8oxMyIc2.js:1:48444)\r\n```\r\n",[],"post-processing","Bloom demo is broken","2024-10-12T11:30:57Z","https://github.com/Tresjs/post-processing/issues/108",{"description":2960,"labels":2961,"number":2876,"owner":2860,"repository":2970,"state":2918,"title":2971,"updated_at":2972,"url":2973,"score":2881},"### Description\n\nResearch of how to apply joints with tres-rapier \n\n### Suggested solution\n\nCould be based on: https://github.com/pmndrs/react-three-rapier?tab=readme-ov-file#joints\r\n\r\nI suggest create a new issue for each joint\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/rapier/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/rapier/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://rapier.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/rapier/issues) that reports the same bug to avoid creating a duplicate.",[2962,2963,2966,2967],{"name":2898,"color":2899},{"name":2964,"color":2965},"feature","c2e0c6",{"name":2857,"color":2858},{"name":2968,"color":2969},"v1","5B6B67","rapier","Joints","2025-03-18T09:47:48Z","https://github.com/Tresjs/rapier/issues/108",["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fD4EFQihKxBARfDmVAczKINdTfCsiGrc_ANcsSjsSDPw":-1},"/Tresjs/nuxt/79"]