\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.",[2856,2859],{"name":2857,"color":2858},"pending-triage","97A4FE",{"name":2860,"color":2861},"waiting for author","B145BC",507,"Tresjs","tres","open","Native html scroll and @tresjs/cientos Html component behaviour","2024-03-30T15:37:07Z","https://github.com/Tresjs/tres/issues/507",0.7013062,{"description":2871,"labels":2872,"number":2876,"owner":2863,"repository":2864,"state":2865,"title":2877,"updated_at":2878,"url":2879,"score":2880},"## Description\n\nAs a developer using TresJS, I need a way to gracefully handle and display runtime errors that occur within the TresCanvas component and its children. This would improve the development experience and make it easier to debug issues in production.\n\n## Motivation\nCurrently, when an error occurs within TresCanvas or any of its child components (lights, meshes, materials, etc.) or threejs, the error can cause the entire application to crash or render a blank canvas without any meaningful feedback. This makes it difficult to:\n\n1. Identify the source of the error\n2. Debug issues in development\n3. Provide a fallback UI in production\n4. Handle errors gracefully without affecting the rest of the application\n\n## Proposal\n\nAdd an Error Boundary feature to TresCanvas that would:\n\n1. Catch runtime errors in:\n - Scene initialization\n - Component mounting/unmounting\n - Animation frame updates\n - Resource loading (textures, models, etc.)\n - Child component errors\n\n2. Provide a customizable error display that shows:\n - Error message and stack trace (in development)\n - Component tree path to the error\n - Simplified error message (in production)\n\n3. Include built-in error handling for common ThreeJS-specific errors:\n - WebGL context loss\n - Texture loading failures\n - Geometry errors\n - Material compilation errors\n\n\n## Suggested solution\n\n### Implementation Details\n\n```vue\n\u003Ctemplate>\n \u003CTresCanvas\n :error-boundary=\"true\"\n :error-fallback=\"customErrorComponent\"\n @error=\"handleError\"\n >\n \u003C!-- Scene content -->\n \u003C/TresCanvas>\n\u003C/template>\n```\n\nThe error boundary would inject necessary CSS styles automatically for the error display, eliminating the need for external CSS files. The styles would be scoped to the error boundary container to avoid conflicts.\n\n### Default Error Display\nThe default error display would be a styled overlay with:\n- Error message\n- Stack trace (in development)\n- Retry button\n- Option to copy error details\n- Responsive design that maintains the canvas aspect ratio\n\n```typescript\n// Internal styling injection\nconst errorStyles = `\n .tres-error-boundary {\n position: relative;\n width: 100%;\n height: 100%;\n background: rgba(30, 30, 30, 0.95);\n color: #fff;\n font-family: monospace;\n padding: 1rem;\n overflow: auto;\n }\n .tres-error-message {\n color: #ff5555;\n margin-bottom: 1rem;\n }\n .tres-error-stack {\n font-size: 0.9em;\n white-space: pre-wrap;\n }\n .tres-error-retry {\n background: #4a4a4a;\n border: none;\n color: white;\n padding: 0.5rem 1rem;\n margin-top: 1rem;\n cursor: pointer;\n }\n`\n```\n\n## Opt-in vs Opt-out Discussion\n\n### Opt-in Approach\n\n```vue\n\u003C!-- Explicit opt-in -->\n\u003CTresCanvas :error-boundary=\"true\">\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n```\n\n#### Pros:\n- More explicit and intentional usage\n- Smaller initial bundle size (code-splitting possible)\n- Developers consciously choose when to use error boundaries\n- Better control over error handling strategies\n\n#### Cons:\n- Requires additional configuration for each TresCanvas instance\n- May lead to inconsistent error handling across the application\n- Developers might forget to add error boundaries where needed\n\n### Opt-out Approach\n\n```vue\n\u003C!-- Error boundaries enabled by default -->\n\u003CTresCanvas>\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n\n\u003C!-- Explicit opt-out -->\n\u003CTresCanvas :error-boundary=\"false\">\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n```\n\n#### Pros:\n- Better developer experience out of the box\n- Consistent error handling across the application\n- Safer default behavior\n- Less configuration needed\n\n#### Cons:\n- Slightly larger initial bundle size\n- May be unnecessary for simple scenes\n- Less explicit about error handling behavior\n\n\n\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n## Questions for Discussion\n\n1. Should error boundaries be opt-in or opt-out by default?\n2. What additional information would be helpful in the error display?\n3. Should we provide different error displays for development and production?\n4. How should we handle WebGL-specific errors differently from Vue component errors?\n\nFeel free to share your thoughts and suggestions on this proposal!\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.",[2873],{"name":2874,"color":2875},"p3-significant","2C78E3",923,"Error Boundary for TresCanvas","2025-02-06T13:45:39Z","https://github.com/Tresjs/tres/issues/923",0.71581596,{"description":2882,"labels":2883,"number":2896,"owner":2863,"repository":2864,"state":2865,"title":2897,"updated_at":2898,"url":2899,"score":2900},"### Description\n\nHow to use vue-cli\n\n### Suggested solution\n\nHow to use vue-cli\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.",[2884,2887,2890,2893],{"name":2885,"color":2886},"bug","d73a4a",{"name":2888,"color":2889},"help wanted","008672",{"name":2891,"color":2892},"PR welcome","2D76B0",{"name":2894,"color":2895},"p2-edge-case","ABCC40",754,"How to use vue-cli","2024-08-21T09:51:50Z","https://github.com/Tresjs/tres/issues/754",0.72149706,{"description":2902,"labels":2903,"number":2904,"owner":2863,"repository":2864,"state":2905,"title":2906,"updated_at":2907,"url":2908,"score":2909},"### Describe the bug\r\n\r\n\r\n\r\nWhen i have a simple canvas with Vue Router and a add an empty canvas it keeps expanding forever downwards.\r\n\r\nI created a git repo where you can reproduce the bug.\r\n\r\nIt only happs in portait (smartphone) size of the window.\r\n\r\n\r\nQuick Workarounds:\r\n- Wrap the Canvas into a div to stop the problem\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://github.com/baumi951/problem1\r\n\r\n### Steps to reproduce\r\n\r\n- Open the git repo (in github codespace)\r\n- npm run dev\r\n- move window to smartphone size\r\n- press the link \"ThreeView\"\r\n- You can see the size keeps expanding\r\n\r\n### System Info\r\n\r\n```shell\r\nChrome Browser\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.",[],493,"closed","empty Canvas keeps expanding infinitely vertically in CSS","2024-01-27T11:58:34Z","https://github.com/Tresjs/tres/issues/493",0.6585248,{"description":2911,"labels":2912,"number":2913,"owner":2863,"repository":2864,"state":2905,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### 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.6739304,{"description":2919,"labels":2920,"number":2921,"owner":2863,"repository":2864,"state":2905,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### 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.68351,{"description":2927,"labels":2928,"number":2929,"owner":2863,"repository":2930,"state":2905,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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","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.6902143,{"description":2936,"labels":2937,"number":2938,"owner":2863,"repository":2864,"state":2905,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Describe the bug\n\nI'm use simple code:\r\n\r\n```vue\r\n\u003Cscript lang=\"ts\" setup>\r\nimport { TresCanvas } from \"@tresjs/core\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas window-size>\r\n \u003CTresPerspectiveCamera />\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,"Typescript autocompletion doesn't work","2023-05-23T09:37:59Z","https://github.com/Tresjs/tres/issues/279",0.70938605,{"description":2944,"labels":2945,"number":2947,"owner":2863,"repository":2930,"state":2905,"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":2885,"color":2886},33,"Unable to use `useNuxtApp()` since `@tresjs/core@3.1.0`","2023-09-12T08:36:40Z","https://github.com/Tresjs/nuxt/issues/33",0.7124566,{"description":2953,"labels":2954,"number":2947,"owner":2863,"repository":2864,"state":2905,"title":2959,"updated_at":2960,"url":2961,"score":2951},"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 ",[2955,2956],{"name":2888,"color":2889},{"name":2957,"color":2958},"discussion 💭","AE4C80","Performance discussion","2023-12-13T08:55:23Z","https://github.com/Tresjs/tres/issues/33",["Reactive",2963],{},["Set"],["ShallowReactive",2966],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ftDTuJHgGxllQURScM3Bv7wi2GNB5TKFRhzsOmgSY6eM":-1},"/Tresjs/nuxt/48"]