and moving it to a sub component. Both didn't work. \r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/~/github.com/Luckystriike1962/TresJsPlayground\r\n\r\n### Steps to reproduce\r\n\r\n- open my stackblitz page https://stackblitz.com/~/github.com/Luckystriike1962/TresJsPlayground\r\n- check the cientosBackground.vue page code\r\n- it uses the Environment component\r\n\r\n\r\n### System Info\r\n\r\n```shell\r\n\"@tresjs/cientos\": \"^3.8.0\",\r\n\"@tresjs/core\": \"^3.9.0\",\r\n\"@tresjs/nuxt\": \"^2.1.1\",\r\n\"@tresjs/post-processing\": \"^0.7.1\",\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\npnpm\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.",[2890,2893],{"name":2891,"color":2892},"bug","d73a4a",{"name":2877,"color":2878},410,"cientos","Environment results in black screen","2024-09-03T13:04:31Z","https://github.com/Tresjs/cientos/issues/410",0.7653641,{"description":2901,"labels":2902,"number":2907,"owner":2866,"repository":2908,"state":2868,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### 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.",[2903,2904],{"name":2891,"color":2892},{"name":2905,"color":2906},"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.7657995,{"description":2914,"labels":2915,"number":2918,"owner":2866,"repository":2895,"state":2868,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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.",[2916,2917],{"name":2891,"color":2892},{"name":2857,"color":2858},368,"[Docs] - HTML examples are broken ","2024-07-18T08:07:36Z","https://github.com/Tresjs/cientos/issues/368",0.7689307,{"description":2924,"labels":2925,"number":2930,"owner":2866,"repository":2895,"state":2931,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Describe the bug\n\nWhen you receive a key event, you receive two values, the event.code (KeyA) and the event.key (A).\r\nThe key is equal to the pressed letter, but letters change based on keyboard layout. \r\n\r\nWhile event.code don't.\r\n\r\nPlease swap the use of key to code, and use the proper values (A => KeyA).\r\n\r\nHere is an example.\r\n\r\n\r\nIn my picture, WASD is as unusable as you can imagine, but if you use KeyW, KeyA, KeyS, and KeyD, then it will map to my ZQSD no problem.\r\n\r\n\n\n### Reproduction\n\nhttps://cientos.tresjs.org/guide/controls/keyboard-controls.html\n\n### Steps to reproduce\n\nAccess the webpage with a keyboard of different layout\n\n### System Info\n\n```shell\nazerty layout keyboard\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.",[2926,2927],{"name":2891,"color":2892},{"name":2928,"color":2929},"p3-minor-bug","F28C37",573,"closed","Keyboard controls is improperly mapped","2025-01-02T08:46:55Z","https://github.com/Tresjs/cientos/issues/573",0.7538274,{"description":2937,"labels":2938,"number":2939,"owner":2866,"repository":2895,"state":2931,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### Description\n\nAs a developer using cientos, I would like to have clear linting rules in all tresJs Ecosystem.\n\n### Suggested solution\n\nFollow the format on TresJs/Core\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.",[],195,"Update lint rules","2023-09-05T15:19:17Z","https://github.com/Tresjs/cientos/issues/195",0.75499046,{"description":2945,"labels":2946,"number":2947,"owner":2866,"repository":2867,"state":2931,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### 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.75870633,{"description":2953,"labels":2954,"number":2955,"owner":2866,"repository":2867,"state":2931,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Describe the bug\n\nCurrent type definitions don't allow for a function to be passed to the `ref` prop of a component, so any time you use a [functional ref](https://vuejs.org/guide/essentials/template-refs.html#function-refs) you'll run into a type error.\r\n\r\nApologies for not including a reproduction or sample but this should be quick to recreate in any dev environment with the reproduction steps.\n\n### Reproduction\n\n/\n\n### Steps to reproduce\n\n1. Install tresjs in any project\r\n2. Add TresCanvas\r\n3. Add new ref, and function to populate ref \r\n`const sphereRefs = ref\u003CObject3D[]>([]);`\r\n`const setSphereRefs = (el: any) => {\r\n if (el && !sphereRefs.value.includes(el)) {\r\n sphereRefs.value.push(el);\r\n }\r\n};`\r\n4. Add TresGroup, TresMesh, etc...\r\n5. Pass a function to the `ref` property `:ref=\"(el) => \"setSphereRef(el)\"`\r\n6. Type error pops up indicating this isn't a valid value for the `ref` prop despite this being a common use for the `ref` prop.\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\nyarn\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.",[],427,"ref prop missing type for functional ref","2023-10-30T10:34:55Z","https://github.com/Tresjs/tres/issues/427",0.7597672,{"description":2961,"labels":2962,"number":2969,"owner":2866,"repository":2867,"state":2931,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Description\r\n\r\nIdea from @userquin, the idea would be to use [Vue named scoped slots ](https://vuejs.org/guide/components/slots.html#named-scoped-slots) to be able to get the canvas context on the parent like this:\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"state?.renderer\"\r\n :args=\"[state?.camera, state?.renderer?.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\nOr even deconstruct it\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"{ camera, renderer }\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"renderer\"\r\n :args=\"[camera, renderer.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\n### Suggested solution\r\n\r\nAdd this to `TresCanvas.vue`\r\n\r\n```html\r\n\u003Ccanvas\r\n ref=\"canvas\"\r\n :data-scene=\"scene.uuid\"\r\n :class=\"$attrs.class\"\r\n :data-tres=\"`tresjs ${pkg.version}`\"\r\n :style=\"{\r\n display: 'block',\r\n width: '100%',\r\n height: '100%',\r\n position: windowSize ? 'fixed' : 'relative',\r\n top: 0,\r\n left: 0,\r\n pointerEvents: 'auto',\r\n touchAction: 'none',\r\n ...$attrs.style as Object,\r\n }\"\r\n >\r\n \u003Cslot v-bind=\"context\" />\r\n\u003C/canvas>\r\n```\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nrelated #565\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.",[2963,2966],{"name":2964,"color":2965},"wontfix","ffffff",{"name":2967,"color":2968},"has-workaround","AEA9C4",572,"Use default slot props to get Canvas context","2024-06-01T07:39:43Z","https://github.com/Tresjs/tres/issues/572",0.75985366,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fekeHNBxeGOyGnxR-Yv20CJKd_g1VpDxqi2pTT6IlzDg":-1},"/Tresjs/tres/792"]