` ...\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CTresCanvas>\r\n \u003CTresMesh>\r\n ... \r\n \u003CMyMaterial :prop=\"myProp\" />\r\n \u003C/TresMesh>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\n... if changing `:prop` changes the material `:key`:\r\n\r\n* the existing material should be removed from the parent.\r\n* the rerendered material should be attached to the parent.\r\n\r\n## Bug\r\n\r\n* The existing material is not removed from the parent.\r\n* The new material is not attached to the parent.\r\n\r\n### What happens instead\r\n\r\n* The existing material remains on the parent.\r\n* A new material is created.\r\n* The new material is not attached.\r\n\r\nChanging the `:prop` again leads to:\r\n\r\n* The new material is disposed.\r\n* Another new material is created.\r\n\r\n## Context\r\n\r\nWorking on updating [`MeshReflectionMaterial` from Cientos](https://github.com/Tresjs/cientos/tree/main/src/core/materials/meshReflectionMaterial). It's based on [this Drei component](https://github.com/pmndrs/drei/blob/master/src/core/MeshReflectorMaterial.tsx). \r\n\r\nBoth components use the `key` prop to force a rerender/recompile. [Drei](https://github.com/pmndrs/drei/blob/47d94d72f70ad23818b993f8b316c132ff04e146/src/core/MeshReflectorMaterial.tsx#L238) | [Cientos](https://github.com/Tresjs/cientos/blob/55ca2bfd4f078ec4633fab2dc40b146adbfac2fd/src/core/materials/meshReflectionMaterial/index.vue#L292)\r\n\r\nUsing the `key` to force rerendering/recompiling currently doesn't work in the Cientos component.\r\n\r\nRerendering/recompiling the material's shader is required here for full reactivity.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-a7wxyh?file=src%2Fcomponents%2FTheExperience.vue\r\n\r\n### Steps to reproduce\r\n\r\nSee Stackblitz.\r\n\r\n### System Info\r\n\r\n```shell\r\nall platforms\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.",[3019,3022],{"name":3020,"color":3021},"pending-triage","97A4FE",{"name":3023,"color":3024},"p2-to-be-discussed","97C1B1",615,"Tresjs","tres","open","Changing a `\u003CMaterial />`'s `key` prop doesn't attach new material, remove old one","2024-04-17T09:28:14Z","https://github.com/Tresjs/tres/issues/615",0.7127774,{"description":3034,"labels":3035,"number":3045,"owner":3026,"repository":3046,"state":3028,"title":3047,"updated_at":3048,"url":3049,"score":3050},"Inspire on https://madewithvuejs.com/",[3036,3039,3042],{"name":3037,"color":3038},"demo","CAC7AC",{"name":3040,"color":3041},"showcase","FBF307",{"name":3043,"color":3044},"v4","A0E697",88,"lab","Add option for external showcases","2024-01-04T17:02:27Z","https://github.com/Tresjs/lab/issues/88",0.7228843,{"description":3052,"labels":3053,"number":3059,"owner":3026,"repository":3027,"state":3028,"title":3060,"updated_at":3061,"url":3062,"score":3063},"### Description\n\nDocs need a little bit of caring for v4\r\nSame for playgrounds\n\n### Suggested solution\n\n- [ ] Remove playground section on https://docs.tresjs.org/guide/#playground\r\n- [x] Remove basic demos from playground https://playground.tresjs.org/\r\n- [ ] Move Events demo from playground to docs (use sandbox)\r\n- [ ] Change naming sandbox to playground\r\n- [ ] Playground is gonna be Showcase/MadeWithTres\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.",[3054,3057],{"name":3055,"color":3056},"docs","0075ca",{"name":3043,"color":3058},"7980EA",494,"Improvements Docs","2024-03-28T11:19:18Z","https://github.com/Tresjs/tres/issues/494",0.72689706,{"description":3065,"labels":3066,"number":3073,"owner":3026,"repository":3074,"state":3028,"title":3075,"updated_at":3076,"url":3077,"score":3078},"### 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.",[3067,3070],{"name":3068,"color":3069},"bug","d73a4a",{"name":3071,"color":3072},"p2-nice-to-have","D4C5F9",493,"cientos","Line2,Modify props.points, but it does not take effect","2024-10-17T16:25:41Z","https://github.com/Tresjs/cientos/issues/493",0.72866154,{"description":3080,"labels":3081,"number":3084,"owner":3026,"repository":3027,"state":3085,"title":3086,"updated_at":3087,"url":3088,"score":3089},"**Describe the bug**\r\nCould not resolve \"@vueuse/core\" on installation, since it's a peerDependency set as external, the user would need to add it separately\r\n\r\n**Reproduction**\r\n[Stackblitz](https://stackblitz.com/edit/tresjs-basic?file=README.md)\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 System:\r\n OS: Linux 5.0 undefined\r\n CPU: (3) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 7.17.0 - /usr/local/bin/npm\r\n npmPackages:\r\n @tresjs/core: ^1.6.0 => 1.6.0 \r\n vite: ^4.1.0 => 4.1.1 \r\n```\r\n",[3082,3083],{"name":3068,"color":3069},{"name":3020,"color":3021},96,"closed","Could not resolve \"@vueuse/core\" on Installation","2023-02-06T18:17:07Z","https://github.com/Tresjs/tres/issues/96",0.66497946,{"description":3091,"labels":3092,"number":3103,"owner":3026,"repository":3027,"state":3085,"title":3104,"updated_at":3105,"url":3106,"score":3107},"### Describe the bug\n\nIn the docs, delta is described as milliseconds from last frame, which is inaccurate since under the hood it uses Clock.deltaTime() which is in seconds.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction-tuauqe?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\nJust use the useLoop function as described in the documentation\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 11 10.0.22631\r\n CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700K\r\n Memory: 21.41 GB / 31.77 GB\r\n Binaries:\r\n Node: 21.7.1 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 10.5.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 8.6.2 - C:\\ProgramData\\chocolatey\\bin\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (126.0.2592.81)\r\n Internet Explorer: 11.0.22621.3527\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.",[3093,3094,3097,3100],{"name":3055,"color":3056},{"name":3095,"color":3096},"good first issue","7057ff",{"name":3098,"color":3099},"PR welcome","2D76B0",{"name":3101,"color":3102},"p1-chore","BFD4F2",750,"Deltatime Documentation Inaccuracy","2024-07-03T16:32:56Z","https://github.com/Tresjs/tres/issues/750",0.69194424,{"description":3109,"labels":3110,"number":3111,"owner":3026,"repository":3074,"state":3085,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Description\n\nCurrently, in the cientos docs there are just a few examples of the components, it will be better to provide examples as in MeshWobbleMaterial to as many components as possible\n\n### Suggested solution\n\nBasically add example to all abstractions, controls, shapes, material and misc. Possible\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.",[],177,"Add more examples to the Cientos docs","2023-09-13T13:31:29Z","https://github.com/Tresjs/cientos/issues/177",0.6944782,{"description":3117,"labels":3118,"number":3123,"owner":3026,"repository":3074,"state":3085,"title":3124,"updated_at":3125,"url":3126,"score":3127},"### Describe the bug\n\nAdding a light former should create the object inside the envMap\r\n\r\n```html\r\n\u003CEnvironment background preset=\"sunset\" :blur=\"1\" :frames=\"Infinity\">\r\n \u003CLightformer\r\n :intensity=\"1\"\r\n form=\"ring\"\r\n color=\"red\"\r\n :position=\"[-15, 4, -18]\"\r\n :scale=\"10\"\r\n :target=\"[0,0,0]\"\r\n />\r\n\u003C/Environment>\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/~/edit/tresjs-environment-lightworkers?file=src/App.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 18.20.3 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.2.3 - /usr/local/bin/npm\r\n pnpm: 8.15.6 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: 4.0.3 => 4.0.3 \r\n @tresjs/core: 4.3.1 => 4.3.1 \r\n @tresjs/leches: ^0.14.0 => 0.14.0 \r\n vite: ^6.0.3 => 6.0.5\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/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.",[3119,3120],{"name":3068,"color":3069},{"name":3121,"color":3122},"p4-important-bug","D93F0B",581,"Environment Lightformers are not working ","2025-01-17T14:26:45Z","https://github.com/Tresjs/cientos/issues/581",0.7038771,{"description":3129,"labels":3130,"number":3134,"owner":3026,"repository":3074,"state":3085,"title":3135,"updated_at":3136,"url":3137,"score":3138},"### Description\n\nAs we talk about, it's better to have all the assets organized in the assets repository and not in the cientos pkg.\r\n\r\nCurrently, we have the suzanne.json in the abstraction folder and the card-bo-bot in the docs/public \r\n\r\nSo let's move to the assets' repo\r\n\n\n### Suggested solution\n\nMove the necessary models to assets repo or replace them. But cientos should be free of models/textures etc\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.",[3131],{"name":3132,"color":3133},"dx","1576ad",176,"Move models to Assets repository","2023-09-13T13:31:48Z","https://github.com/Tresjs/cientos/issues/176",0.707684,{"description":3140,"labels":3141,"number":3142,"owner":3026,"repository":3074,"state":3085,"title":3143,"updated_at":3144,"url":3145,"score":3146},"### Description\n\nAs a developer using Tresjs I would like to have a simple way to add sparkles as a component\n\n### Suggested solution\n\nSimilar to: https://github.com/pmndrs/drei#sparkles\n\n### Alternative\n\nAny other alternative is considered\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.",[],221,"Sparkles","2023-11-09T19:27:14Z","https://github.com/Tresjs/cientos/issues/221",0.71491146,["Reactive",3148],{},["Set"],["ShallowReactive",3151],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4vaelxYS0QEl2cgSxxZJNLV4jGY0PWKqorlkVS-MuXo":-1},"/Tresjs/tres/895"]