` ...\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.",[2882,2885],{"name":2883,"color":2884},"pending-triage","97A4FE",{"name":2886,"color":2887},"p2-to-be-discussed","97C1B1",615,"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.72091347,{"description":2894,"labels":2895,"number":2902,"owner":2857,"repository":2858,"state":2903,"title":2904,"updated_at":2905,"url":2906,"score":2907},"### Describe the bug\n\nIt seems like Tres.js is no longer working in Firefox. Even on your official documentation all examles render just a black canvas.\r\nI would really like to use Tres.js in projects of my company, but I am unable to do this if Firefox is not supported or working :(\n\n### Reproduction\n\nhttps://tresjs.org/guide/\n\n### Steps to reproduce\n\nThe first and all other examples of this page.\n\n### System Info\n\n```shell\nWindows 10\r\nFirerfiox version 114.0.1 (64-Bit)\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.",[2896,2899],{"name":2897,"color":2898},"question","d876e3",{"name":2900,"color":2901},"waiting for author","B145BC",310,"closed","Black Canvas in Firefox","2023-06-20T07:13:04Z","https://github.com/Tresjs/tres/issues/310",0.67219853,{"description":2909,"labels":2910,"number":2914,"owner":2857,"repository":2915,"state":2903,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Description\n\nAs a developer using Tres, I would like to have a `\u003CCylinder />` component in order to easily add a customizable cylinder to scenes.\n\n### Suggested solution\n\nImplement a Cientos component with an underlying `THREE.CylinderGeometry` and accepting the props of the same, with the same defaults.\r\n\r\nhttps://threejs.org/docs/#api/en/geometries/CylinderGeometry\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.",[2911],{"name":2912,"color":2913},"good first issue","7057ff",437,"cientos","`\u003CCylinder />`","2024-06-09T20:05:32Z","https://github.com/Tresjs/cientos/issues/437",0.6863251,{"description":2921,"labels":2922,"number":2923,"owner":2857,"repository":2915,"state":2903,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Describe the bug\r\n\r\n\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\nimport { OrbitControls, Sky } from '@tresjs/cientos'\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas :tone-mapping-exposure=\"0.25\">\r\n \u003CTresPerspectiveCamera :position=\"[0, 0, 2000]\" />\r\n \u003CSky />\r\n \u003COrbitControls\r\n :enable-pan=\"false\"\r\n :enable-zoom=\"false\"\r\n />\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n\r\n### Reproduction\r\n\r\nno\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/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.",[],451,"\u003CSky /> can not utilize","2024-09-03T12:59:10Z","https://github.com/Tresjs/cientos/issues/451",0.6959369,{"description":2929,"labels":2930,"number":2931,"owner":2857,"repository":2858,"state":2903,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Description\r\n\r\nBased on https://github.com/orgs/Tresjs/discussions/321\r\n\r\nAs a plugin author, I will like to have a reactive state with the following characteristics:\r\n\r\n- Performant, (use of `shallowRef` where needed)\r\n- read-only\r\n- Strictly Typed\r\n- Reduce side effects on watchers\r\n- Needs to work on cientos and the rest of ecosystem via `provide/inject` \r\n\r\n### Suggested solution\r\n\r\n| Name | Type | Requirement | Details |\r\n| ---------------------------------- | -------------------- | ----------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| scene | readonly, shallowRef | essential | |\r\n| cameras | readonly, shallowRef | essential | userData.TRES_IS_ACTIVE_CAMERA = true\u003Cbr>const cameras = shallowRef([]) return { cameras: readonly(cameras)} |\r\n| camera | computed, readonly | essential | |\r\n| pushCamera(newCamera: Camera, setActive: boolean) | function | essential | cameras should be watched and removed from the cameras array if they got removed from the scene |\r\n| removeCamera(camera: Camera) | function | essential ||\r\n| setCamera(cameraId string) | function | essential ||\r\n| renderer | readonly, shallowRef | essential | setRenderer(renderer: Renderer)\u003Cbr>maybe only callable once? |\r\n| setRenderer(renderer: Renderer) | function | essential ||\r\n| sizes (height, width, aspectRatio) | readonly | handy | sizes: {\u003Cbr> height: Ref\u003Cnumber>\u003Cbr> width: Ref\u003Cnumber>\u003Cbr> aspectRatio: Computed\u003Cnumber>\u003Cbr>} |\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/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.",[],331,"New and better state context provider","2023-07-29T08:58:56Z","https://github.com/Tresjs/tres/issues/331",0.69692,{"description":2937,"labels":2938,"number":2873,"owner":2857,"repository":2915,"state":2903,"title":2940,"updated_at":2941,"url":2942,"score":2878},"### 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.",[2939],{"name":2912,"color":2913},"useFBO abstraction","2023-10-07T14:07:10Z","https://github.com/Tresjs/cientos/issues/149",{"description":2944,"labels":2945,"number":2946,"owner":2857,"repository":2858,"state":2903,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Describe the bug\n\nI was trying to load an OBJ file and get the geometry out to make it a TresLine instead of TresMesh, but it kept failed. And every BufferGeometry I've tried has failed the same thing, including empty new one (`new BufferGeometry()`).\r\n\r\n```\r\nUncaught (in promise) TypeError: Spread syntax requires ...iterable[Symbol.iterator] to be a function\r\n at patchProp (chunk-JZH6BBMB.js:1084:11)\r\n at mountElement (chunk-BVQHDTV7.js:6605:11)\r\n at processElement (chunk-BVQHDTV7.js:6552:7)\r\n at patch (chunk-BVQHDTV7.js:6424:11)\r\n at mountChildren (chunk-BVQHDTV7.js:6680:7)\r\n at mountElement (chunk-BVQHDTV7.js:6587:7)\r\n at processElement (chunk-BVQHDTV7.js:6552:7)\r\n at patch (chunk-BVQHDTV7.js:6424:11)\r\n at mountChildren (chunk-BVQHDTV7.js:6680:7)\r\n at processFragment (chunk-BVQHDTV7.js:6897:7)\r\n```\r\n\r\nI could bypass this by changing the nodeOps part of compiled tres.js file, by wrapping the setAttribute call in patchProps method with try-catch, and it seems to work. But it feels kinda hacky and I am assuming there would be some data lost during this process.\r\n\r\n\u003Cimg width=\"1604\" alt=\"스크린샷 2023-08-11 오후 11 01 59\" src=\"https://github.com/Tresjs/tres/assets/7546436/4c959416-d366-43fe-94e3-bb005d2a5ec4\">\r\n\r\n```ts\r\npatchProp(node, prop, _prevValue, nextValue) {\r\n if (node) {\r\n let root = node\r\n let key = prop\r\n let finalKey = kebabToCamel(key)\r\n let target = root?.[finalKey]\r\n\r\n if (root.type === 'BufferGeometry') {\r\n if (key === 'args') return\r\n try { // added to bypass error\r\n root.setAttribute(\r\n kebabToCamel(key),\r\n new BufferAttribute(...(nextValue as ConstructorParameters\u003Ctypeof BufferAttribute>)),\r\n )\r\n } catch {} // added to bypass error\r\n return\r\n }\r\n// ...\r\n```\r\n\r\nhttps://github.com/Tresjs/tres/blob/211c3e172726a4cb339a02333ac596fcf3bb7793/src/core/nodeOps.ts#L187C7-L187C7\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-yrhocm?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n1. Create a TresCanvas and include a TresMesh or any other component that utilises a geometry.\r\n2. Create a BufferGeometry in `\u003Cscript>` section. (ex. `const geometry = new BufferGeometry()`)\r\n3. Refer to the BufferGeometry with `\u003Cprimitive :object=\"geometry\">` tag.\r\n4. Run the code.\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 14.0\r\n CPU: (10) arm64 Apple M1 Max\r\n Memory: 114.36 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\nBinaries:\r\n Node: 18.14.0 - ~/.nvm/versions/node/v18.14.0/bin/node\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.0/bin/npm\r\nBrowsers:\r\n Safari: 17.0\r\nnpmPackages:\r\n @tresjs/cientos: ^3.0.1 => 3.0.1\r\n @tresjs/nuxt: ^1.1.3 => 1.1.3\r\n\r\nNote: I also have ran this on Firefox (116.0.2) and Arc (Version 1.3.0 (40706) / Chromium Engine Version 115.0.5790.170)\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.",[],363,"BufferGeometry as \u003Cprimitive> component throws an error","2024-07-17T09:43:31Z","https://github.com/Tresjs/tres/issues/363",0.7057015,{"description":2952,"labels":2953,"number":2958,"owner":2857,"repository":2915,"state":2903,"title":2959,"updated_at":2960,"url":2961,"score":2962},"\nCheck if we can avoid deep exposure `.value.value`",[2954,2955],{"name":2868,"color":2869},{"name":2956,"color":2957},"dx","1576ad",60,"Check defineExpose for refs","2023-05-31T09:01:21Z","https://github.com/Tresjs/cientos/issues/60",0.7084723,["Reactive",2964],{},["Set"],["ShallowReactive",2967],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZ5cHmv-Xtw5TZ3Zcj0rUobXoXvopv8EByyd0B4n0hdc":-1},"/Tresjs/tres/754"]