\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.",[2856,2859],{"name":2857,"color":2858},"bug","d73a4a",{"name":2860,"color":2861},"p3-minor-bug","F28C37",457,"Tresjs","cientos","open","useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.6649069,{"description":2871,"labels":2872,"number":2882,"owner":2863,"repository":2864,"state":2865,"title":2883,"updated_at":2884,"url":2885,"score":2886},"### Description\r\n\r\nCurrently, I am working on a project where I use TransformControl extensively to easily determine an object’s position. I can use console logs or TresLeches to show the current position, rotation, or scale of the object. Wouldn’t it be nice to have an optional reactive label displayed with the current mode value? When transform is the mode, it shows the Vector3 for the object’s position.\r\n\r\nFeatures:\r\n\r\n- A prop to enable a label showing the Vector3 for current mode (scale, position, rotation) or all at once.\r\n- When you shift + click the label, it copies the vector value to your clipboard.\r\n- Not sure yet where it should show, either at the bottom left corner or as an HTML component at the object’s center.\r\n\r\nI have already made a small demo and can continue upon receiving the green light. ✅\r\n\r\n\r\n\r\nhttps://github.com/Tresjs/cientos/assets/43521233/5375feb9-9bcf-4e8b-a877-8ec18cbab518\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nFeatures:\r\n\r\n- A prop to enable a label showing the Vector3 for current mode (scale, position, rotation) or all at once.\r\n- When you shift + click the label, it copies the vector value to your clipboard.\r\n- Not sure yet where it should show, either at the bottom left corner or as an HTML component at the object’s center.\r\n\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.",[2873,2876,2879],{"name":2874,"color":2875},"feature","c2e0c6",{"name":2877,"color":2878},"experimental","01d7e6",{"name":2880,"color":2881},"p2-nice-to-have","D4C5F9",434,"[feat] TransformControl has a label showing it’s transform vector","2024-09-12T20:06:38Z","https://github.com/Tresjs/cientos/issues/434",0.69098437,{"description":2888,"labels":2889,"number":2892,"owner":2863,"repository":2864,"state":2865,"title":2893,"updated_at":2894,"url":2895,"score":2896},"### Describe the bug\n\nI used Line2 to add a point to the props.points, but it doesn't seem to render. \r\nSpecifically, points larger than the original array were not rendered, but points smaller than the original array were re rendered\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-kftrax?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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2890,2891],{"name":2857,"color":2858},{"name":2880,"color":2881},493,"Line2,Modify props.points, but it does not take effect","2024-10-17T16:25:41Z","https://github.com/Tresjs/cientos/issues/493",0.70372266,{"description":2898,"labels":2899,"number":2903,"owner":2863,"repository":2864,"state":2865,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Description\r\n\r\nAs a Tres dev, I'd sometimes like to show off Tres/Cientos on mobile. But when the docs demos include Leches controls, the Leches controls mostly cover the demo visuals.\r\n\r\n[From Lensflare](https://deploy-preview-272--cientos-tresjs.netlify.app/guide/abstractions/lensflare.html):\r\n\r\n\u003Cimg width=\"322\" alt=\"Screenshot 2023-10-29 at 22 33 56\" src=\"https://github.com/Tresjs/cientos/assets/20469369/55599767-0d8d-456e-b681-810a37a270f3\">\r\n\r\n### Suggested solution\r\n\r\nI suggest that we extend Leches controls so that they can be embedded in the page below the demos. See highlighted area:\r\n\r\n\u003Cimg width=\"318\" alt=\"Screenshot 2023-10-29 at 22 41 46\" src=\"https://github.com/Tresjs/cientos/assets/20469369/1004d966-1e28-4776-b132-0e2c42255244\">\r\n\r\n### Additional requirements\r\n\r\n* the controls would be inserted into the [normal document flow](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Normal_Flow), so that they don't overlap other content\r\n* the controls' styling would reflect the dark/light theme choices of the user\r\n\r\n\r\n### Alternative\r\n\r\nLeave as is.\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.",[2900],{"name":2901,"color":2902},"docs","0075ca",273,"Embed Leches controls under docs demos","2024-04-02T07:13:11Z","https://github.com/Tresjs/cientos/issues/273",0.70869106,{"description":2909,"labels":2910,"number":2915,"owner":2863,"repository":2916,"state":2865,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### Describe the bug\n\nWhile working on the `Joint` I wanted to reproduce the same custom collider exportation, and when I wanted to watch the `Joint` props, I wasn't able to do so...\r\n\r\nI figured that the Vue component `setup function` needs a `Proxy` as the first parameter to **reflect** changes and here:\r\nhttps://github.com/Tresjs/rapier/blob/main/src/components/colliders/index.ts#L29-L42\r\n```ts\r\nprops: {\r\n ...BaseCollider.props,\r\n shape: undefined,\r\n },\r\n setup(props, ctx) {\r\n return {\r\n ...BaseCollider?.setup?.(\r\n { ...props, shape } as Parameters\u003C\r\n Exclude\u003C(typeof BaseCollider)['setup'], undefined>\r\n >['0'],\r\n ctx,\r\n ),\r\n }\r\n },\r\n```\r\n\r\nWe are destructing it which is equivalent to passing a native `Object`\n\n### Reproduction\n\n---\n\n### Steps to reproduce\n\n---\n\n### System Info\n\n```shell\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/rapier/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/rapier/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://rapier.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/Tresjs/rapier/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,2912],{"name":2857,"color":2858},{"name":2913,"color":2914},"collider","306B60",149,"rapier","Bug: custom collider props are not reactive anymore.","2024-11-19T23:52:46Z","https://github.com/Tresjs/rapier/issues/149",0.71040154,{"description":2922,"labels":2923,"number":2925,"owner":2863,"repository":2926,"state":2865,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Describe the bug\r\n\r\nIf you just add TresCanvas to your code, you will get the error.\r\n[Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.\r\n\r\nsample of stackblitz has same problem too.\r\n\r\n\r\nAn error occurs even if you only add TresCanvas to a vue project without anything.\r\n\r\nApp.vue\r\n```\u003Cscript setup lang=\"ts\">\r\nimport { RouterLink, RouterView } from 'vue-router'\r\nimport HelloWorld from './components/HelloWorld.vue'\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cheader>\r\n \u003Cimg alt=\"Vue logo\" class=\"logo\" src=\"@/assets/logo.svg\" width=\"125\" height=\"125\" />\r\n\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CHelloWorld msg=\"You did it!\" />\r\n\r\n \u003Cnav>\r\n \u003CRouterLink to=\"/\">Home\u003C/RouterLink>\r\n \u003CRouterLink to=\"/about\">About\u003C/RouterLink>\r\n \u003C/nav>\r\n \u003C/div>\r\n \u003C/header>\r\n\r\n \u003CRouterView />\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n```\r\n\r\nAboutView\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"about\">\r\n \u003Ch1>This is an about page\u003C/h1>\r\n \u003Cdiv class=\"canvas\">\r\n \u003CTresCanvas>\r\n \u003C!-- Your scene here -->\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\n\u003C/script>\r\n\u003Cstyle>\r\n@media (min-width: 1024px) {\r\n .about {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n}\r\n.canvas {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\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: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U\r\n Memory: 1.70 GB / 7.76 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node\r\n npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.3 \r\n @tresjs/core: ^4.3.2 => 4.3.2 \r\n vite: ~6.0.6 => 6.0.6\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.",[2924],{"name":2857,"color":2858},905,"tres","I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... )","2025-02-08T10:41:31Z","https://github.com/Tresjs/tres/issues/905",0.7242367,{"description":2932,"labels":2933,"number":2934,"owner":2863,"repository":2864,"state":2865,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### Describe the bug\n\nI have multiple models paths in an array, and when i try to load them in a cycle, it only load one, it seems a race condition with `dracoLoader`not being an async function. \r\n\r\nWrapping the `dracoLoader` in an async function seems to solve the problem, i'll provide a pr as soon as possibile.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zbayq9?file=app.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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],432,"useGLTF: race conditions problem after add of `autodispose`","2024-05-29T13:20:57Z","https://github.com/Tresjs/cientos/issues/432",0.7254059,{"description":2940,"labels":2941,"number":2946,"owner":2863,"repository":2926,"state":2947,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### 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.",[2942,2943],{"name":2857,"color":2858},{"name":2944,"color":2945},"v4","7980EA",503,"closed","Conditional and dynamic rendering of primitives.","2024-05-30T06:40:39Z","https://github.com/Tresjs/tres/issues/503",0.60449004,{"description":2953,"labels":2954,"number":2955,"owner":2863,"repository":2864,"state":2947,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Description\r\n\r\nAdapt `cientos` package to https://github.com/Tresjs/tres/issues/331 changes\r\n\r\n#### Abstractions\r\n\r\n- [x] Environment\r\n- [x] MouseParallax\r\n- [x] Stars\r\n- [x] Smoke\r\n- [x] Levioso\r\n- [x] Contact Shadows\r\n- [x] Precipitation\r\n\r\n#### Controls\r\n- [x] OrbitControls @alvarosabu \r\n- [x] TransformControls\r\n- [x] PointerLockControls\r\n- [x] KeyboardControls\r\n- [x] MapControls\r\n- [x] ScrollControls\r\n\r\n### Materials\r\n\r\n- [x] WobbleMaterial\r\n\r\n### Staging\r\n\r\n- [x] Backdrop\r\n\r\n### Misc\r\n\r\n- [x] useTweakpane\r\n\r\n### Suggested solution\r\n\r\n- [x] Refactor watchers \r\n- [x] Remove deconstruct props if needed\r\n- [x] Merge to 'next'\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.",[],120,"Refactor useCientos to new state context provider","2023-07-29T11:45:37Z","https://github.com/Tresjs/cientos/issues/120",0.7007218,{"description":2961,"labels":2962,"number":2955,"owner":2863,"repository":2966,"state":2947,"title":2967,"updated_at":2968,"url":2969,"score":2959},"**Is your feature request related to a problem? Please describe.**\r\nIt would be helpful for users to have the component's prop types available.\r\n",[2963],{"name":2964,"color":2965},"enhancement","a2eeef","post-processing","make prop types available","2024-10-15T14:41:37Z","https://github.com/Tresjs/post-processing/issues/120",["Reactive",2971],{},["Set"],["ShallowReactive",2974],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fzcScwLENGsoWD-th3KWaXs1Kx8fUfXROcpbzcZkJ3Ak":-1},"/Tresjs/tres/909"]