`](https://drei.docs.pmnd.rs/staging/bounds#bounds) would be welcome.\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.",[2873,2876],{"name":2874,"color":2875},"feature","c2e0c6",{"name":2877,"color":2878},"p2-nice-to-have","D4C5F9",408,"cientos","\u003CBounds />","2024-12-17T18:07:35Z","https://github.com/Tresjs/cientos/issues/408",0.68342507,{"description":2886,"labels":2887,"number":2895,"owner":2863,"repository":2880,"state":2865,"title":2896,"updated_at":2897,"url":2898,"score":2899},"### Description\n\nWould be awesome if there was arc ball controls added to tres\r\n\r\nThis control method is ideal for industrial applications (like CAD) and is what most engineers expect coming from software like solidworks, onshape, or fusion 360.\r\n\r\n\r\n\r\n\n\n### Suggested solution\n\nhttps://threejs.org/examples/misc_controls_arcball.html\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.",[2888,2891,2892],{"name":2889,"color":2890},"good first issue","7057ff",{"name":2874,"color":2875},{"name":2893,"color":2894},"PR Welcome","2D76B0",490,"Arcball controlls helper","2024-09-12T19:58:43Z","https://github.com/Tresjs/cientos/issues/490",0.7127682,{"description":2901,"labels":2902,"number":2907,"owner":2863,"repository":2880,"state":2865,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Describe the bug\n\nThe examples under https://cientos.tresjs.org/guide/misc/html-component.html#html are currently broken\n\n### Reproduction\n\nhttps://cientos.tresjs.org/guide/misc/html-component.html#html\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.",[2903,2904],{"name":2857,"color":2858},{"name":2905,"color":2906},"docs","0075ca",368,"[Docs] - HTML examples are broken ","2024-07-18T08:07:36Z","https://github.com/Tresjs/cientos/issues/368",0.713086,{"description":2913,"labels":2914,"number":2915,"owner":2863,"repository":2880,"state":2865,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Describe the bug\n\nWhen TresCanvas is unmounted, an error occurs equal to the number of Html components.\r\nhook.js:608 THREE.Material: parameter 'vertexShader' has value of undefined.\r\n\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 v-bind=\"gl\">\r\n \u003COrbitControls />\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003C!-- Your scene here -->\r\n \u003CTresMesh cast-shadow :position=\"[0, 0, 0]\">\r\n \u003CTresBoxGeometry :args=\"[1, 1, 2]\" />\r\n \u003CTresMeshToonMaterial color=\"blue\" />\r\n \u003CHtml center transform sprite>\r\n \u003Cdiv class=\"text\">TEXT\u003C/div>\r\n \u003C/Html>\r\n \u003C/TresMesh>\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\nimport { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three'\r\nimport { Html, OrbitControls } from '@tresjs/cientos'\r\nconst gl = {\r\n clearColor: '#87CEEB',\r\n shadows: true,\r\n alpha: true,\r\n shadowMapType: BasicShadowMap,\r\n outputColorSpace: SRGBColorSpace,\r\n toneMapping: NoToneMapping,\r\n}\r\n\u003C/script>\r\n\u003Cstyle>\r\n.canvas {\r\n width: 500px;\r\n height: 500px;\r\n position: relative;\r\n}\r\n.text {\r\n color: white;\r\n font-weight: bold;\r\n font-size: 30px;\r\n}\r\n\u003C/style>\r\n\r\n\r\n```\r\nhook.js:608 THREE.Material: parameter 'vertexShader' has value of undefined.\r\n\r\nnow about page\r\n\r\n\r\nif I go home?\r\n\r\nIf I add Html components, the error increases by the corresponding number.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-4pso7hpr?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nnpx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers\r\nNeed to install the following packages:\r\nenvinfo@7.14.0\r\nOk to proceed? (y) y\r\n\r\n\r\n System:\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\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/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.",[],587,"When TresCanvas is unmounted, an error occurs equal to the number of Html components.","2025-01-14T07:22:09Z","https://github.com/Tresjs/cientos/issues/587",0.7154772,{"description":2921,"labels":2922,"number":2929,"owner":2863,"repository":2930,"state":2931,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Description\r\n\r\nSince we are going to deprecate [tweakpane](https://tweakpane.github.io/docs/) direct support on https://github.com/Tresjs/cientos/issues/347 we should at least \r\n\r\n### Suggested solution\r\n\r\nProvide a recipe similar approach to this [demo](https://github.com/JaimeTorrealba/creative-lab/blob/main/src/views/Demos/Glass.vue)\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.",[2923,2926],{"name":2924,"color":2925},"cookbook 🍳","863A4B",{"name":2927,"color":2928},"p1-chore","BFD4F2",762,"tres","closed","Recipe using `tweakpane` ","2024-08-21T09:53:05Z","https://github.com/Tresjs/tres/issues/762",0.65299165,{"description":2937,"labels":2938,"number":2862,"owner":2863,"repository":2880,"state":2931,"title":2940,"updated_at":2941,"url":2942,"score":2869},"### 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":2889,"color":2890},"useFBO abstraction","2023-10-07T14:07:10Z","https://github.com/Tresjs/cientos/issues/149",{"description":2944,"labels":2945,"number":2946,"owner":2863,"repository":2930,"state":2931,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### 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.69061023,{"description":2952,"labels":2953,"number":2954,"owner":2863,"repository":2880,"state":2931,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### 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.69098514,{"description":2960,"labels":2961,"number":2970,"owner":2863,"repository":2930,"state":2931,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### 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,2965,2967],{"name":2963,"color":2964},"types","5C076E",{"name":2966,"color":2894},"PR welcome",{"name":2968,"color":2969},"p3-significant","2C78E3",496,"Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.6910056,["Reactive",2976],{},["Set"],["ShallowReactive",2979],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fztOk_5mRUPezwdNBshCG5aGhZ-QdpLEWJ-Hcl1B94qc":-1},"/Tresjs/cientos/493"]