` ...\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.",[2867,2870],{"name":2868,"color":2869},"pending-triage","97A4FE",{"name":2871,"color":2872},"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.7345475,{"description":2882,"labels":2883,"number":2890,"owner":2874,"repository":2875,"state":2876,"title":2891,"updated_at":2892,"url":2893,"score":2894},"### 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.",[2884,2887],{"name":2885,"color":2886},"docs","0075ca",{"name":2888,"color":2889},"v4","7980EA",494,"Improvements Docs","2024-03-28T11:19:18Z","https://github.com/Tresjs/tres/issues/494",0.7365027,{"description":2896,"labels":2897,"number":2901,"owner":2874,"repository":2902,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"**Is your feature request related to a problem? Please describe.**\nI find that this example: https://lab.openbloc.fr/droneWorld and his code it's possible to add that to Tres.js?\nI'm not good with PP but would be poerfect for more realistic scenes like my FPS-controls \n\n**Describe the solution you'd like**\nAt the time we move the camera the scene get blur (similar to old cameras or ray casting effects)\n\n**Suggested solution**\nhttps://github.com/blaze33/droneWorld/blob/master/src/postprocessing/MotionBlur.js\n",[2898],{"name":2899,"color":2900},"enhancement","a2eeef",191,"post-processing","It's possible to add a motion blur effect?","2025-03-15T11:51:23Z","https://github.com/Tresjs/post-processing/issues/191",0.73833317,{"description":2908,"labels":2909,"number":2910,"owner":2874,"repository":2875,"state":2876,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### 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.7477398,{"description":2916,"labels":2917,"number":2918,"owner":2874,"repository":2919,"state":2876,"title":2920,"updated_at":2921,"url":2922,"score":2923},"## Bug description\r\n\r\nAll controls created using `useControls` are added to all instances of `\u003CTresLeches />` even if they're in separate files.\r\n\r\n## Expected behavior\r\n\r\nAllow multiple, separate instances of Leches. Don't share state across multiple, separate files.\r\n\r\n## Reproduction\r\n[StackBlitz](https://stackblitz.com/edit/tresjs-basic-jmjdqy?file=src%2Fcomponents%2FTheExperience.vue)\r\n\r\n## Solution?\r\n\r\nMaybe create and return a unique controls instance from `useControls` that closes over the current controls state.\r\n\r\n```\r\nconst controls = useControls({\r\n wireframe: false,\r\n})\r\n\r\ncontrols.useControls( /* ... add more controls to this instance */ )\r\n```\r\n\r\nThen use like\r\n\r\n```\r\n\u003CTresLeches :controls=\"controls\" />\r\n```\r\n\r\n## Screenshot\r\n\r\n\u003Cimg width=\"567\" alt=\"Screenshot 2024-02-23 at 19 56 28\" src=\"https://github.com/Tresjs/leches/assets/20469369/44cef606-cd01-49b4-a8d9-9dfdd3d0566c\">\r\n\r\n\r\n## Context\r\n\r\nWe use Leches for Cientos' docs and often have multiple separate examples of functionality in a given docs page. But we can't have multiple Leches menus on a given page without running into this bug.\r\n",[],98,"leches","Leches shares `useControls`; can't have multiple, distinct instances","2024-02-23T19:02:27Z","https://github.com/Tresjs/leches/issues/98",0.75379443,{"description":2925,"labels":2926,"number":2918,"owner":2874,"repository":2927,"state":2876,"title":2928,"updated_at":2929,"url":2930,"score":2923},"### Describe the bug\n\nI'm posting this here, as it seems to be related to the Nuxt module.\r\n\r\nI've already posted some more info here https://github.com/Tresjs/cientos/issues/369 and here https://github.com/orgs/Tresjs/discussions/642\r\n\r\nThe problem is that both `Levioso` and `MouseParallax` are not working as expected, while other stuff from `cientos` don't seem to have issues (in my case, 3d text is working).\r\n\r\nThe problem started with these two components not working only in development environment, but with the latest dependencies updates (probably caused by Nuxt), they don't work in the built production site too. (the problem with development is on a private project that I cannot share at the moment).\r\n\r\nThe issue with the production environment can be seen also on the linked repository, in the latest commits on the `main` branch. The latest working configuration is available at the `working` tag: https://github.com/stefanobartoletti/tresjs-playground/tree/working tag.\r\n\r\nA live demo is also available here https://tresjs-playground.vercel.app/3d-text\r\n\r\nIf more info is needed, please ask :)\r\n\n\n### Reproduction\n\nhttps://github.com/stefanobartoletti/tresjs-playground\n\n### Steps to reproduce\n\n- pnpm i\r\n- pnpm generate\r\n- pnpm preview\n\n### System Info\n\n_No response_\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.",[],"nuxt","`Levioso` and `MouseParallax` are not working as expected.","2024-05-17T09:28:20Z","https://github.com/Tresjs/nuxt/issues/98",{"description":2932,"labels":2933,"number":2938,"owner":2874,"repository":2875,"state":2939,"title":2940,"updated_at":2941,"url":2942,"score":2943},"**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",[2934,2937],{"name":2935,"color":2936},"bug","d73a4a",{"name":2868,"color":2869},96,"closed","Could not resolve \"@vueuse/core\" on Installation","2023-02-06T18:17:07Z","https://github.com/Tresjs/tres/issues/96",0.68212384,{"description":2945,"labels":2946,"number":2954,"owner":2874,"repository":2875,"state":2939,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Describe the bug\n\n\u003Cimg width=\"582\" alt=\"Screenshot 2025-01-02 at 17 08 22\" src=\"https://github.com/user-attachments/assets/4bd7837b-d246-4404-9bfe-baa8e17f6810\" />\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/~/edit/tresjs-minimal-reproduction-zhxzh2vt?file=src/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\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.",[2947,2948,2951],{"name":2935,"color":2936},{"name":2949,"color":2950},"types","5C076E",{"name":2952,"color":2953},"p3-minor-bug","F28C37",895,"Primtive is missing types","2025-01-03T08:54:29Z","https://github.com/Tresjs/tres/issues/895",0.7072174,{"description":2960,"labels":2961,"number":2969,"owner":2874,"repository":2875,"state":2939,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Description\n\nCurrently, `TresObject3D#material` doesn't allow to set array. My suggestion is to make Array acceptable as well.\r\n\r\nhttps://github.com/Tresjs/tres/blob/main/src/types/index.ts#L43\r\n\r\n```\r\n- material?: THREE.Material & TresBaseObject\r\n+ material?: THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]\r\n```\r\n\r\n## (Personal) reason\r\n\r\nI use TresJS and [spine-ts THREE.JS](https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/README.md). \r\n\r\nTHREE.Mesh#material's type is `Material | Material[]`. (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/objects/Mesh.d.ts#L24)\r\n\r\nspine-ts' set Array material according to THREE's type. (https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/src/MeshBatcher.ts#L60)\r\n\r\nHowever, `TresObject3D#material` doesn't allow to set Array material, when a spine's mesh is rendered in Scene of TresJS and a material**s** in spine's mesh are evaluate, TresJS throws runtime error.\r\n\r\n\r\n## Basis that my suggestion is reasonable\r\n\r\nA type of THREE.Mesh#material extending THREE.Object3D is `Material | Material[]`, so I think it's reasonable that a type of `TresObject3D#material` extending THREE.Object3D is `THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]`.\r\n\n\n### Suggested solution\n\nhttps://github.com/Tresjs/tres/blob/main/src/types/index.ts#L43\r\n\r\n```\r\n- material?: THREE.Material & TresBaseObject\r\n+ material?: THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]\r\n```\r\n\r\nand adding logic for array.\n\n### Alternative\n\nnothing. I currently use pnpm patch and add logic for array.\n\n### Additional context\n\nI can create PR for this suggestion.\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.",[2962,2963,2966],{"name":2949,"color":2950},{"name":2964,"color":2965},"PR welcome","2D76B0",{"name":2967,"color":2968},"p3-significant","2C78E3",496,"Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.72398835,{"description":2975,"labels":2976,"number":2985,"owner":2874,"repository":2875,"state":2939,"title":2986,"updated_at":2987,"url":2988,"score":2989},"### 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.",[2977,2978,2981,2982],{"name":2885,"color":2886},{"name":2979,"color":2980},"good first issue","7057ff",{"name":2964,"color":2965},{"name":2983,"color":2984},"p1-chore","BFD4F2",750,"Deltatime Documentation Inaccuracy","2024-07-03T16:32:56Z","https://github.com/Tresjs/tres/issues/750",0.7244968,["Reactive",2991],{},["Set"],["ShallowReactive",2994],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fWS42Al4WT9Dm6ZbnwpwPJBVpNlEdFX1w2CRLh0H8mXs":-1},"/Tresjs/cientos/581"]