\r\n\r\n \u003C!-- There will be a type problem here -->\r\n\t\t\t\u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\r\n\r\n\t\t\t\u003CSuspense>\r\n\t\t\t\t\u003CTexture_02 />\r\n\t\t\t\u003C/Suspense>\r\n\r\n \u003C!-- OK -->\r\n\t\t\t\u003CTresDirectionalLight :intensity=\"1\" :position=\"new THREE.Vector3(0, 3, 3)\" v-light-helper />\r\n\t\t\u003C/TresCanvas>\r\n\t\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n\t.container {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\u003C/style>\r\n\r\n```\n\n### Alternative\n\nAt first I thought: position=\"new THREE.Vector3(0, 3, 3)\" is a better way to understand the original parameters of threejs, but after reading the documentation, I found: position=\"[0,3,3]\" is simpler ;But the recommended writing method in the document is: position=\"[0,3,3]\"\r\n\r\n\r\n\n\n### Additional context\n\n\r\n\r\n\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.",[],696,"position type is incorrect","2024-05-27T03:45:05Z","https://github.com/Tresjs/tres/issues/696",0.7375316,{"description":2875,"labels":2876,"number":2877,"owner":2859,"repository":2878,"state":2879,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### 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,"nuxt","closed","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.69303006,{"description":2885,"labels":2886,"number":2887,"owner":2859,"repository":2860,"state":2879,"title":2888,"updated_at":2889,"url":2890,"score":2891},"### 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.69902277,{"description":2893,"labels":2894,"number":2901,"owner":2859,"repository":2860,"state":2879,"title":2902,"updated_at":2903,"url":2904,"score":2905},"**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",[2895,2898],{"name":2896,"color":2897},"bug","d73a4a",{"name":2899,"color":2900},"pending-triage","97A4FE",162,"[v2] - Failed to resolve component warnings","2023-11-23T18:35:20Z","https://github.com/Tresjs/tres/issues/162",0.702626,{"description":2907,"labels":2908,"number":2910,"owner":2859,"repository":2878,"state":2879,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### 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.",[2909],{"name":2896,"color":2897},48,"\u003CTresCanvas> results in continuous height growth of the \u003Ccanvas>","2024-01-26T14:41:44Z","https://github.com/Tresjs/nuxt/issues/48",0.71074355,{"description":2916,"labels":2917,"number":2918,"owner":2859,"repository":2860,"state":2879,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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.7122041,{"description":2924,"labels":2925,"number":2927,"owner":2859,"repository":2860,"state":2879,"title":2928,"updated_at":2929,"url":2930,"score":2931},"**Describe the bug**\r\nI update the new TresJs beta version, and each canvas throw a problem with the onPointerEvent\r\n\r\nNote: I Don't have onPointerEvent, in any canvas, but I do have one PointerMove event in the \r\nhttps://serene-mousse-562782.netlify.app/MouseShaderEffect \r\nWhich is not working properly (do not update the uniforms) but also is the only page that don't throw a pointer error\r\n\r\nThe other experiments (you can navigate using the navbar) all have the onPointerEvent error\r\n\r\n**Reproduction**\r\nFollow the steps\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to [my-tresJs-playground](https://serene-mousse-562782.netlify.app/)\r\n2. Move the mouse through the canvas\r\n3. Each canvas on the routes contain this problem (except /MouseShaderEffect which do not update the uniforms)\r\n4. You can go to a different site to see\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\nIf I'm doing something wrong, please let me know\r\n",[2926],{"name":2896,"color":2897},189,"Problems with pointerevents","2023-04-12T14:07:01Z","https://github.com/Tresjs/tres/issues/189",0.71489406,{"description":2933,"labels":2934,"number":2935,"owner":2859,"repository":2860,"state":2879,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### 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.7182586,{"description":2941,"labels":2942,"number":2943,"owner":2859,"repository":2860,"state":2879,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### 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.72233075,["Reactive",2949],{},["Set"],["ShallowReactive",2952],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fNSWg4RFlGRuseVjD-rfjB6a3DR1CaslmBz3Cq3k8Jvs":-1},"/Tresjs/tres/923"]