\r\n\u003C/template>\r\n```\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.",[2875,2878,2881],{"name":2876,"color":2877},"feature","c2e0c6",{"name":2879,"color":2880},"p3-significant","2C78E3",{"name":2882,"color":2883},"v5","EFC959",883,"WebGPU support","2025-02-06T09:35:42Z","https://github.com/Tresjs/tres/issues/883",0.74104255,{"description":2890,"labels":2891,"number":2894,"owner":2853,"repository":2867,"state":2855,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Description\n\nAs a maintainer of TresJS, I would like to clean up the core logic by refactoring it to use VueUse `createInjectionState` https://vueuse.org/shared/createInjectionState/#createinjectionstate instead\n\n### Suggested solution\n\nReplace manual context provider with something like:\n\n```ts\nconst [useTresContextProvider, useTresContext] = createInjectionState((props, emit) => {\n // Create refs with initial null values\n const scene = shallowRef\u003CTresScene | null>(null)\n const renderer = shallowRef\u003CWebGLRenderer | null>(null)\n const camera = shallowRef\u003CPerspectiveCamera | null>(null)\n const loop = createRenderLoop()\n\n // Render mode logic etc\n})\n\nexport { useTresContext, useTresContextProvider }\n```\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.",[2892,2893],{"name":2879,"color":2880},{"name":2882,"color":2883},961,"Refactor `useTresContextProvider` into `createInjectionState`","2025-03-18T15:30:44Z","https://github.com/Tresjs/tres/issues/961",0.74339104,{"description":2900,"labels":2901,"number":2908,"owner":2853,"repository":2867,"state":2855,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Describe the bug\r\n\r\nDue to the debounced ref introduced in #512, the canvas only renders once the resize animation has finished.\r\n\r\nHow it's supposed to work\r\n\r\n\r\nIt can be fixed by moving renderer size update and the camera projection matrix update to before rendering or using useFps composable from vueuse to dynamically calculate debounceTime\r\n\r\n### Reproduction\r\n\r\nMonitor with refresh rate above 100 hz needed\r\n\r\nhttps://stackblitz.com/edit/stackblitz-starters-jtmew9?file=src%2FApp.vue\r\n### Steps to reproduce\r\n\r\nHave container of TresCanvas resize continuously. \r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor\r\n Memory: 12.28 GB / 15.58 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 22.8.0 - ~/.asdf/installs/nodejs/22.8.0/bin/node\r\n npm: 10.8.2 - ~/.asdf/plugins/nodejs/shims/npm\r\n pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.2 => 4.0.2 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\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.",[2902,2905],{"name":2903,"color":2904},"bug","d73a4a",{"name":2906,"color":2907},"p3-minor-bug","F28C37",848,"Render issue with continuous resize animation","2024-10-18T20:46:48Z","https://github.com/Tresjs/tres/issues/848",0.74897635,{"description":2914,"labels":2915,"number":2918,"owner":2853,"repository":2867,"state":2855,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Description\r\n\r\nAs a developer using TresJS, I want to have a `\u003CPortal>` component that can contain a separate `Scene` and `context`.\r\n\r\n### Suggested solution\r\n\r\nProvide a `\u003CPortal>` component similar to R3F.\r\n\r\n### Requirements\r\n\r\n- [ ] Add override-able pointer to `TresContext` (Also add as prop to TresCanvas: see #581 ); use vanilla `THREE.Vector2`, accept `Vector2` and `UsePointerOptions` as TresCanvas prop\r\n- [ ] Make these fields on `TresContext` swappable and (in some case injectable by the user): scene, camera, cameras, controls, raycaster, eventManager, sizes\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.",[2916,2917],{"name":2879,"color":2880},{"name":2882,"color":2883},789,"Portal","2025-02-06T09:59:01Z","https://github.com/Tresjs/tres/issues/789",0.75495744,{"description":2924,"labels":2925,"number":2929,"owner":2853,"repository":2867,"state":2855,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### Describe the bug\n\nInitial properties not getting used when vue-object is created.\r\n\r\neg in official tresjs playground use:\r\n\r\n\u003COrbitControls min-distance=\"20\"/>\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqdVV1z4jYU/SsaZzp5KNgmJGnrsh0K+zHbaXYzC9OX9T4I+wYrkSWNJAhMhv/eK4kPm02zpJhh8L1HR0dHuldP0VSD+VOpeLmAKIsGptBMWWLALhThVMzf5JE1efRHLlitpLbkiYyoYcWkoqV8vKGqQyZfPozGkks9UbSADvkkp1IAphQT8w75BwordZ9syJ2WNTm3lQY4/71B6DSMqVhSswcNLcbuTVJI3cZ+1jNmx1JYLfkzcAbCSuNG5KKQwlgy5+QNecoFIQUHqr3QjJyf/XrxdjS+Ou+4jPGLMRmxegE+QrmqaEbuKDchECC4qOlaQXbsgUPIhVULlLYzIjs2xoHswZnsyKhcbFD2IAlbgIaHZ2ChVpxawAghg4ZXy+6MiRI3aM79BhH8+PwtaKPQdbaEMa1BU5IpaZhlUiD6628dfL7lEUl2g9qm1kx0S2YsFQUg/iLNoz3S0d+AqdqM3YsOwW/qSDMtLd0l0g65obaKbz+G7JZmtw5c/QeQNVi9JhnVc+PG9DqkF191SL8psTH1VEqBpKAZ5aRw9uKo7XY2F5XsBrysHSW6r5usoMZ2w0a3px3J1TM6ncjdz6u0Xr53z//Qih47q793cqIq0AcvT1byfjRK+6MfKnnLtDtOUlD+N5tX9jsHUdSl33wmLAhMrTHRiy/apm5nCXOEQ4yBQdI44fhq7Jq7v5WtORbFTJbrUL81Os9ERlIsE0IULUtfReG1AicsI700/ckHHllpq/37JhdnWGeB6AdYQma0eJhruRBl11uVkbM0dfMgDRaoFxh1otCUujVV8b2RAvunp8+3CWybWZjQxZodzSXyqLJWmSxJilLg+BI4W+pYgE2EqpMmfNiPr+Ne4moycWFE55FvJy3i0Ptewx1GIP0vcXqg34bbs9hHoA+KilO077HDyzjdC98FY+wvR9zuRjiF1+GGyHidot6fwdRNG/AGWxg42d8GfNhL4ytkxG4Kq7huu7vF4QnWUL6COAx4iRqB3RJqdgLpDuoWfxlfJ5zNmpSOEY/mBs+kNXjt3bH50YksZK0YB/1Zuaptn0zKuXz8y8f2958fU0Hx8Ez83qyC5Fs8LKCXaPdhK7FGwYb0u8knWOH/fbKW5YJvN+c/kl/ASL5wGgNshDWIshs4r/ajLzAs/6l5t/IdZ7uollCLV7WPft21w/1ZC4Fv3jiP99sxfsGlw8r6cX9v+OZfbu8GKw==\n\n### Steps to reproduce\n\nOpen the reproduction-url and use the orbit-controls -> camera will jump.\n\n### System Info\n\n```shell\nUsing the tresjs playground with the latest Edge browser.\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.",[2926],{"name":2927,"color":2928},"pending-triage","97A4FE",791,"reactive property bug","2024-08-21T09:46:13Z","https://github.com/Tresjs/tres/issues/791",0.7556637,{"description":2935,"labels":2936,"number":2937,"owner":2853,"repository":2867,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Describe the bug\n\nI recently found this lib and find it awesome so far! Unfortunately, while I was experimenting with the `TresDirectionalLight` I realised there is an exception thrown when passing `:shadow-map-size-width` or `:shadow-map-size-height` attrs to the component, which seems to work fine in the examples (probably something changed overtime).\r\nThe root cause as I can see, comes from `[tres/src/core/nodeOps.ts].patchProp`, which tries to retrieve an inner object prop, based on the attribute name. The problem with `shadow-map-size-height` comes from the fact it must be transpiled into `shadow.mapSize.height`, where the selector becomes `shadow.map.size.height`.\r\n\r\nAs a temporary solution, I use v-bind on the component attached to object as follows:\r\n```\r\nconst shadowConfig = {\r\n 'shadow-mapSize-width': 512,\r\n 'shadow-mapSize-height': 512\r\n}\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-yslayw\n\n### Steps to reproduce\n\nnpm intall && npm run dev\r\nerror is being logged in the inspector :/\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.",[],445,"closed","[Cannot read properties of null (reading 'size')] patchProp does not properly handle camelCase props","2023-11-28T13:27:55Z","https://github.com/Tresjs/tres/issues/445",0.7029852,{"description":2944,"labels":2945,"number":2946,"owner":2853,"repository":2867,"state":2938,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Describe the bug\n\nWhen the resize event is triggered, the canvas is not re-rendered in time, causing the screen to flicker. This situation is also seen in the official example.\r\n\r\n \r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-hhwpaq?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\nThis happens even when building the most basic scene:\r\n```vue\r\n\u003Ctemplate>\r\n\t\u003CTresCanvas ref=\"canvasRef\" v-bind=\"gl\">\r\n\t\t\u003CTresAxesHelper />\r\n\t\u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n\timport { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three';\r\n\r\n\tconst gl = {\r\n\t\tclearColor: '#82DBC5',\r\n\t\tshadows: true,\r\n\t\talpha: false,\r\n\t\tshadowMapType: BasicShadowMap,\r\n\t\toutputColorSpace: SRGBColorSpace,\r\n\t\ttoneMapping: NoToneMapping,\r\n\t};\r\n\r\n\u003C/script>\r\n```\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz\r\n Memory: 2.49 GB / 15.90 GB\r\n Binaries:\r\n Node: 18.19.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.17 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 9.6.6 - ~\\AppData\\Roaming\\npm\\npm.CMD\r\n pnpm: 7.7.0 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (120.0.2210.133)\r\n Internet Explorer: 11.0.19041.3636\r\n npmPackages:\r\n @tresjs/core: ^3.6.0 => 3.6.0\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.",[],511,"The screen flickers severely when the resize event is triggered","2024-01-17T15:04:32Z","https://github.com/Tresjs/tres/issues/511",0.7080198,{"description":2952,"labels":2953,"number":2964,"owner":2853,"repository":2867,"state":2938,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### Describe the bug\r\n\r\nThere is an issue with the automatic disposal, some elements like\r\n\r\n- GridHelper\r\n- AxesHelper \r\n\r\nAre throwing this error when the scene is unmounted\r\n\r\n```\r\nchunk-SRLW6FY7.js?v=a19e4a6b:30745 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispose')\r\n at AxesHelper.dispose (chunk-SRLW6FY7.js?v=a19e4a6b:30745:19)\r\n```\r\n\r\n### Reproduction\r\n\r\nlocal playground\r\n\r\n### Steps to reproduce\r\n\r\n- Run playground with `npm run dev`\r\n- Open `conditional` example\r\n- Go back\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 14.3.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 60.73 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: 124.0.6367.207\r\n Safari: 17.3.1\r\n npmPackages:\r\n @tresjs/cientos: 3.8.0 => 3.8.0 \r\n @tresjs/core: workspace:^ => 4.0.0-rc.0 \r\n @tresjs/leches: 0.15.0-next.3 => 0.15.0-next.3\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.",[2954,2955,2958,2961],{"name":2903,"color":2904},{"name":2956,"color":2957},"v4","7980EA",{"name":2959,"color":2960},"p4-important-bug","D93F0B",{"name":2962,"color":2963},"regression","167F7A",682,"Helpers diposal error since latest threejs update","2024-05-16T06:51:51Z","https://github.com/Tresjs/tres/issues/682",0.7209128,["Reactive",2970],{},["Set"],["ShallowReactive",2973],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fhJgCilNNXMQAyIPH2-ogYzUN1ZfNoEhLf7Gt6sRIGHM":-1},"/Tresjs/tres/815"]