\r\n \u003CTresCanvas v-bind=\"gl\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CCameraControls\r\n v-bind=\"controlsState\"\r\n ref=\"controlsRef\"\r\n :make-default=\"makeDefault\"\r\n @change=\"onChange\"\r\n @start=\"onStart\"\r\n @end=\"onEnd\"\r\n />\r\n \r\n```\r\n \r\n \r\nThat means every time these emits would be expected to fire once, they're fired 100 times:\r\n\r\n```\r\nfunction addEventListeners() {\r\n useEventListener(controlsRef.value as any, 'update', () => {\r\n emit('change', controlsRef.value)\r\n invalidateOnDemand()\r\n })\r\n useEventListener(controlsRef.value as any, 'controlend', () => emit('end', controlsRef.value))\r\n useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))\r\n}\r\n```\r\n\r\nThe problem is the anonymous functions:\r\n\r\nNote: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.\r\n\r\nIndeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.\r\n\r\nRepeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)\r\n\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\r\nMDN Web Docs\r\n[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\nThe addEventListener() method of the EventTarget interface\r\nsets up a function that will be called whenever the specified event is delivered to the target.\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n_No response_\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/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.",[2899,2900],{"name":2885,"color":2886},{"name":2901,"color":2902},"p3-minor-bug","F28C37",457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.7191808,{"description":2909,"labels":2910,"number":2914,"owner":2866,"repository":2915,"state":2868,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Describe the bug\n\nI have a Nuxt 3 app and in it a page with a Tres.js scene. The scene contains `\u003CTresDirectionalLight cast-shadow />` which casts a shadow. When navigating away from the page with the scene and navigating back to the scene (using NuxtLink), I get the error below.\r\n\r\nWhen I remove the `cast-shadow` prop, the bug disappears.\r\n\r\n\r\n```\r\nthree.js?v=f17f74c8:17801 Uncaught TypeError: Cannot read properties of null (reading 'state')\r\n at setProgram (three.js?v=f17f74c8:17801:41)\r\n at WebGLRenderer.renderBufferDirect (three.js?v=f17f74c8:17292:23)\r\n at renderObject (three.js?v=f17f74c8:13624:21)\r\n at renderObject (three.js?v=f17f74c8:13631:7)\r\n at WebGLShadowMap.render (three.js?v=f17f74c8:13519:9)\r\n at WebGLRenderer.render (three.js?v=f17f74c8:17493:17)\r\n at tres.js:387:33\r\n at index.mjs:71:52\r\n at Array.map (\u003Canonymous>)\r\n at Object.trigger (index.mjs:71:40)\r\n ```\r\n \u003Cdetails>\r\n \u003Csummary>complete error log\u003C/summary>\r\n\r\n ```\r\nsetProgram\t\t\t\t@\tthree.js?v=f17f74c8:17801\r\nWebGLRenderer.renderBufferDirect\t@\tthree.js?v=f17f74c8:17292\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13624\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13631\r\nWebGLShadowMap.render\t\t\t@\tthree.js?v=f17f74c8:13519\r\nWebGLRenderer.render\t\t\t@\tthree.js?v=f17f74c8:17493\r\n(anonymous)\t\t\t\t@\ttres.js:387\r\n(anonymous)\t\t\t\t@\tindex.mjs:71\r\ntrigger\t\t\t\t\t@\tindex.mjs:71\r\nwe.immediate\t\t\t\t@\ttres.js:160\r\nloop\t\t\t\t\t@\tindex.mjs:617\r\nrequestAnimationFrame\t\t\r\nresume\t\t\t\t\t@\tindex.mjs:624\r\nor\t\t\t\t\t@\ttres.js:388\r\ncr\t\t\t\t\t@\ttres.js:593\r\n(anonymous)\t\t\t\t@\ttres.js:1086\r\n(anonymous)\t\t\t\t@\truntime-core.esm-bundler.js:2757\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\nhook.__weh.hook.__weh\t\t\t@\truntime-core.esm-bundler.js:2737\r\nflushPostFlushCbs\t\t\t@\truntime-core.esm-bundler.js:385\r\nflushJobs\t\t\t\t@\truntime-core.esm-bundler.js:427\r\nPromise.then\t\t\r\nqueueFlush\t\t\t\t@\truntime-core.esm-bundler.js:322\r\nqueuePostFlushCb\t\t\t@\truntime-core.esm-bundler.js:336\r\nqueueEffectWithSuspense\t\t\t@\truntime-core.esm-bundler.js:7256\r\nbaseWatchOptions.scheduler\t\t@\truntime-core.esm-bundler.js:6138\r\neffect2.scheduler\t\t\t@\treactivity.esm-bundler.js:1892\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:250\r\nendBatch\t\t\t\t@\treactivity.esm-bundler.js:308\r\nnotify\t\t\t\t\t@\treactivity.esm-bundler.js:594\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:568\r\nset value\t\t\t\t@\treactivity.esm-bundler.js:1510\r\nfinalizeNavigation\t\t\t@\tvue-router.mjs:3478\r\n(anonymous)\t\t\t\t@\tvue-router.mjs:3343\r\nPromise.then\t\t\r\npushWithRedirect\t\t\t@\tvue-router.mjs:3310\r\npush\t\t\t\t\t@\tvue-router.mjs:3235\r\nnavigate\t\t\t\t@\tvue-router.mjs:2300\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\ninvoker\t\t\t\t\t@\truntime-dom.esm-bundler.js:722\r\n```\r\n\u003C/details>\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-w3neca?file=pages%2Findex.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 14.6.1\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 79.77 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm\r\n pnpm: 9.4.0 - ~/Library/pnpm/pnpm\r\n bun: 1.0.3 - ~/.bun/bin/bun\r\n Browsers:\r\n Chrome: 129.0.6668.100\r\n Safari: 17.6\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.2 \r\n @tresjs/core: ^4.2.10 => 4.2.10 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\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.",[2911],{"name":2912,"color":2913},"pending-triage","97A4FE",851,"tres","Scene breaks when `cast-shadow` enabled and navigating back to a previously initialized scene","2024-10-22T15:09:42Z","https://github.com/Tresjs/tres/issues/851",0.7223963,{"description":2921,"labels":2922,"number":2927,"owner":2866,"repository":2867,"state":2868,"title":2928,"updated_at":2929,"url":2930,"score":2931},"\r\n\r\n\r\n\r\n### Description\r\n\r\nImplement a MeshRefractionMaterial \r\n\r\n\r\n### Suggested solution\r\n\r\nSome links for context:\r\nhttps://medium.com/geekculture/simulating-refraction-in-three-js-9e367753bf6d\r\nhttps://github.com/pmndrs/drei/blob/master/src/core/MeshRefractionMaterial.tsx\r\nhttps://github.com/pmndrs/drei/blob/master/src/materials/MeshRefractionMaterial.tsx\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\r\n\r\n### Validations\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.",[2923,2924],{"name":2857,"color":2858},{"name":2925,"color":2926},"p3-significant","2C78E3",454,"MeshRefractionMaterial","2024-07-23T11:40:40Z","https://github.com/Tresjs/cientos/issues/454",0.7361576,{"description":2933,"labels":2934,"number":2935,"owner":2866,"repository":2915,"state":2868,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Description\r\n\r\nHey there,\r\nTres looks amazing. Great work!\r\n\r\nI'd love to switch to Tres, but my application uses multiple canvas elements, each rendering a different camera perspectives to the same scene. Of what I read in the docs & source code, TresCanvas creates its own scene and doesn't share it with other TresCanvas instances. I'd love to see TresCanvas taking scene as an optional prop, but I can also imagine that there might be a lot of side effects coming with such a change.\r\n\r\nWhat do you think of it? Edge case that's hard to implement or easy and viable for the ecosystem?\r\n\r\nHave a great day!\r\nMarc\r\n\r\n\r\n### Suggested solution\r\n\r\n`/src/components/TresCanvas.vue`\r\n```ts\r\nconst props = withDefaults(defineProps\u003CTresCanvasProps>(), {\r\n ...,\r\n scene: new Scene() // TresScene | Scene\r\n})\r\n```\r\nI already know, I'm missing out on component lifecycle handling. I just wanted to point in the direction this is going.\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nI think this is somehow the reverse request to [Portal](https://github.com/Tresjs/tres/issues/789)\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.",[],842,"Decouple scene from canvas","2024-10-17T14:16:20Z","https://github.com/Tresjs/tres/issues/842",0.7370245,{"description":2941,"labels":2942,"number":2944,"owner":2866,"repository":2945,"state":2946,"title":2947,"updated_at":2948,"url":2949,"score":2950},"**Describe the bug**\r\nFor some reason the dof and outline effect demos got broken.\r\n\r\n**Reproduction**\r\ncheck docs\r\n",[2943],{"name":2885,"color":2886},67,"post-processing","closed","depth of field and outline effect docs are broken","2025-03-09T17:05:23Z","https://github.com/Tresjs/post-processing/issues/67",0.7030394,{"description":2952,"labels":2953,"number":2890,"owner":2866,"repository":2867,"state":2946,"title":2957,"updated_at":2958,"url":2959,"score":2895},"### Description\n\nAs a Developer using TresJS I would like to have a composable `useFBO` that leverages the effort of creating a `THREE.WebGLRenderTarget` \r\n\r\n```\r\nconst target = useFBO({ stencilBuffer: false })\r\n\r\n```\r\n\r\nDrei's\r\nhttps://github.com/pmndrs/drei/blob/master/src/core/useFBO.tsx\r\n\r\nReference:\r\nhttps://github.com/pmndrs/drei/tree/master#usefbo\r\n\r\n\n\n### Suggested solution\n\nImplement a composable that accepts:\r\n\r\n- `width`\r\n- `height`/\r\n- `samples` // Defines the count of MSAA samples. Can only be used with WebGL 2. Default: 0 \r\n- `depth` // If set, the scene depth will be rendered into buffer.depthTexture. Default: false\r\n\r\nAnd returns the renderTarget, The rendertarget should be automatically disposed when unmounted.\r\n\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/cientos/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\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.",[2954],{"name":2955,"color":2956},"good first issue","7057ff","useFBO abstraction","2023-10-07T14:07:10Z","https://github.com/Tresjs/cientos/issues/149",{"description":2961,"labels":2962,"number":2967,"owner":2866,"repository":2915,"state":2946,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Describe the bug\n\nReported by Guillaume Leo on discord:\r\n\r\n- Object prop is not reactive\r\n- Conditional rendering is not working. `v-if` \r\n\r\nhttps://discord.com/channels/1047126995424780288/1193882152811642892\n\n### Reproduction\n\nhttps://stackblitz.com/fork/github/stackblitz/starters/tree/main/tres?title=TresJS&description=Quick%20start%20repo%20for%20Tres.js%20projects\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.",[2963,2964],{"name":2885,"color":2886},{"name":2965,"color":2966},"v4","7980EA",503,"Conditional and dynamic rendering of primitives.","2024-05-30T06:40:39Z","https://github.com/Tresjs/tres/issues/503",0.7138941,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fy7THEFhMD6n8Et4E6ptSHhcF14ubd-2EMtbI7rX1l_A":-1},"/Tresjs/cientos/273"]