\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,"tres","closed","TresCanvas Screenshot","2023-12-13T09:08:50Z","https://github.com/Tresjs/tres/issues/408",0.68828547,{"description":3040,"labels":3041,"number":3048,"owner":3022,"repository":3033,"state":3034,"title":3049,"updated_at":3050,"url":3051,"score":3052},"**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",[3042,3045],{"name":3043,"color":3044},"bug","d73a4a",{"name":3046,"color":3047},"pending-triage","97A4FE",162,"[v2] - Failed to resolve component warnings","2023-11-23T18:35:20Z","https://github.com/Tresjs/tres/issues/162",0.7039346,{"description":3054,"labels":3055,"number":3057,"owner":3022,"repository":3058,"state":3034,"title":3059,"updated_at":3060,"url":3061,"score":3062},"### Describe the bug\n\n\r\n\n\n### Reproduction\n\nplayground\n\n### Steps to reproduce\n\nRun `npm install` and then `npm run dev` or `npm run build & npm run preview`\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 13.5.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 97.73 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm\r\n Browsers:\r\n Brave Browser: 117.1.58.135\r\n Chrome: 117.0.5938.149\r\n Firefox: 118.0.1\r\n Safari: 16.6\r\n```\n```\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.",[3056],{"name":3043,"color":3044},46,"nuxt","Multiple Instances of ThreeJS - Orbitcontrols broken","2023-10-06T03:55:26Z","https://github.com/Tresjs/nuxt/issues/46",0.7135952,{"description":3064,"labels":3065,"number":3066,"owner":3022,"repository":3058,"state":3034,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### Describe the bug\n\nI added OrbitControls, and when scrolling I get the following error\r\n\r\n```\r\nWARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.\r\n```\r\n\r\nMake it impossible to scroll to zoom in/out. \r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-3nnslu?file=package.json\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSee https://stackblitz.com/edit/nuxt-starter-3nnslu?file=package.json\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.",[],49,"Nuxtjs: OrbitControls.js encountered an unknown camera type","2023-11-08T09:28:32Z","https://github.com/Tresjs/nuxt/issues/49",0.71398884,{"description":3072,"labels":3073,"number":3075,"owner":3022,"repository":3058,"state":3034,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### 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.",[3074],{"name":3043,"color":3044},33,"Unable to use `useNuxtApp()` since `@tresjs/core@3.1.0`","2023-09-12T08:36:40Z","https://github.com/Tresjs/nuxt/issues/33",0.71474993,{"description":3081,"labels":3082,"number":3075,"owner":3022,"repository":3033,"state":3034,"title":3089,"updated_at":3090,"url":3091,"score":3079},"Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.\r\n\r\nSince we are rendering a scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the scene 60 times per second. This is not a good idea 😅 and will be detrimental to performance, especially in big scenes\r\n\r\nHere is a benchmark of the difference between using a Proxy object and a plain object.\r\n\u003Cimg width=\"1224\" alt=\"proxy-benchmark\" src=\"https://user-images.githubusercontent.com/4699008/206704835-d0235c0d-e868-4c32-96f0-d6926b2c5563.png\">\r\n\r\nSource: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)\r\n\r\n## To discuss\r\n\r\n- [ ] How can we improve the performance of the core (ex use `shallowRef` instead of `ref`) See [Reactivity Advanced API](https://vuejs.org/api/reactivity-advanced.html)\r\n- [x] #34\r\n\r\nOne real world example is updating an instance for animation: \r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst boxRef: Ref\u003CTresInstance | null> = ref(null)\r\n\r\nonLoop(({ _delta, elapsed }) => {\r\n if (boxRef.value) {\r\n boxRef.value.rotation.y += 0.01\r\n boxRef.value.rotation.z = elapsed * 0.2\r\n }\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresMesh ref=\"boxRef\" :scale=\"1\" cast-shadow>\r\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\r\n \u003CTresMeshStandardMaterial v-bind=\"pbrTexture\" />\r\n \u003C/TresMesh>\r\n\u003C/template>\r\n```\r\n\r\nHere we are getting the ref for the mesh with the Mesh instance so we can update the rotation, but `boxRef` remains a Proxy, a solution would be to `unref` or use a shallowRef since Direct template ref are not available see https://github.com/vuejs/core/issues/1227\r\n\r\n\r\nI would love to have your input here @wheatjs @kissu @Astanusic \r\n\r\n## Food for though \r\n\r\nhttps://discoverthreejs.com/tips-and-tricks/#performance ",[3083,3086],{"name":3084,"color":3085},"help wanted","008672",{"name":3087,"color":3088},"discussion 💭","AE4C80","Performance discussion","2023-12-13T08:55:23Z","https://github.com/Tresjs/tres/issues/33",{"description":3093,"labels":3094,"number":3096,"owner":3022,"repository":3033,"state":3034,"title":3097,"updated_at":3098,"url":3099,"score":3100},"### Describe the bug\n\nThe official [Vue devtools](https://github.com/vuejs/devtools) is broken since v2. Most probably related to the edge case of the use of a custom renderer.\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-sa3ruk?file=README.md\n\n### Steps to reproduce\n\nOpen in a new tab\r\nCheck dev tools\r\nCheck error in console\r\n\r\n```\r\nTypeError: Cannot read properties of undefined (reading 'ownerDocument')\r\n```\n\n### System Info\n\n_No response_\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.",[3095],{"name":3043,"color":3044},317,"Vue-devtools broken since v2 custom renderer","2023-08-23T05:12:31Z","https://github.com/Tresjs/tres/issues/317",0.7163391,{"description":3102,"labels":3103,"number":3114,"owner":3022,"repository":3023,"state":3034,"title":3115,"updated_at":3116,"url":3117,"score":3118},"### Describe the bug\r\n\r\nLensflare seems to be broken on v4\r\n\r\nCannot destructure property 'registerCamera' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nRun local playground\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: macOS 14.5\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 51.02 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm\r\n pnpm: 8.15.4 - ~/Library/pnpm/pnpm\r\n bun: 1.0.2 - ~/.bun/bin/bun\r\n Browsers:\r\n Brave Browser: 120.1.61.116\r\n Chrome: 125.0.6422.142\r\n Safari: 17.5\r\n npmPackages:\r\n @tresjs/core: 4.0.0-rc.2 => 4.0.0-rc.2 \r\n @tresjs/leches: ^0.14.0 => 0.14.0\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/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.",[3104,3105,3108,3111],{"name":3043,"color":3044},{"name":3106,"color":3107},"v4","EEF2B0",{"name":3109,"color":3110},"p4-important-bug","D93F0B",{"name":3112,"color":3113},"regression","167F7A",435,"Lensflare playground demo is broken","2024-08-28T19:23:52Z","https://github.com/Tresjs/cientos/issues/435",0.7165767,{"description":3120,"labels":3121,"number":3127,"owner":3022,"repository":3033,"state":3034,"title":3128,"updated_at":3129,"url":3130,"score":3131},"### 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.",[3122,3123,3126],{"name":3043,"color":3044},{"name":3124,"color":3125},"good first issue","7057ff",{"name":3084,"color":3085},273,"False Positive No Camera Warning","2023-06-19T15:26:30Z","https://github.com/Tresjs/tres/issues/273",0.7169263,["Reactive",3133],{},["Set"],["ShallowReactive",3136],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fWl5P40DdoQFtjs7hinVyh8p5YViv-wOJKCG4esRQ_b4":-1},"/Tresjs/tres/521"]