\n \u003COrbitControls />\n \u003CImage :url=\"URLS[0]\" :radius=\"0.2\" :transparent=\"true\" :position=\"[-1.5, 0, -1]\" />\n \u003CImage :url=\"URLS[1]\" :radius=\"0.2\" :transparent=\"true\" />\n \u003CImage :url=\"URLS[2]\" :radius=\"0.2\" :transparent=\"true\" :position=\"[1.5, 0, -1]\" />\n \u003C/TresCanvas>\n\u003C/template>\n```\n\n### System Info\n\n```shell\n\n```\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/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.",[],613,"cientos","Wrong color space in the Image abstraction?","2025-04-18T23:18:54Z","https://github.com/Tresjs/cientos/issues/613",0.77903557,{"description":2888,"labels":2889,"number":2899,"owner":2871,"repository":2900,"state":2873,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Description\n\nThe current implementation is different from R3F, as you can see, the model is treat as a group (I personally prefer this approach) is best performance and cover most of the cases, BUT, not all for some specific cases maybe this is not a viable solution.\r\n\r\n\r\n\r\nR3F handling the models in which each geometry has a different RigidBody/Collider:\r\n\r\n\r\n\r\n\r\nI don't know if this will create future problems for uses cases or the people can workaround them. I don't know if this makes joints cases when models more difficult.\n\n### Suggested solution\n\nProper discussion and research\n\n### Alternative\n\nJust by the record, I like the current approach (but maybe I'm thinking in just low poly games)\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/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.",[2890,2893,2896],{"name":2891,"color":2892},"help wanted","008672",{"name":2894,"color":2895},"investigation","D03599",{"name":2897,"color":2898},"p2-to-be-discussed","97C1B1",127,"rapier","Handling models? ","2024-09-17T10:20:52Z","https://github.com/Tresjs/rapier/issues/127",0.7857518,{"description":2906,"labels":2907,"number":2915,"owner":2871,"repository":2882,"state":2873,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Description\r\n\r\nAs a dev using Cientos, I don't want to have to wrap components in `\u003CSuspense>` just because they use a texture internally. \r\n\r\n### Suggested solution\r\n\r\nI suggest we provide a [function like `useTexture`](https://tresjs.org/examples/load-textures.html#using-usetexture), but one that:\r\n\r\n* returns a `ref` (or `ref`s) whose initial value is a 1-pixel transparent DataTexture\r\n* updates the `ref` once the image is loaded\r\n\r\nThis will allow us to avoid `await`ing in setup code.\r\n\r\n### Alternative\r\n\r\nAlternatively, we could keep the current `useTexture` and provide a separate `useEmptyTexture` to be used like\r\n\r\n```ts\r\nconst t:Ref\u003CTexture> = useEmptyTexture()\r\nuseTexture({map:'example.org/texture.png'}).then((obj) => t.value = obj.map)\r\n\r\nwatch(t, () => { /* do something */ })\r\n```\r\n\r\n### Additional context\r\n\r\nI'm adding a texture prop to `\u003CSparkles />` and I don't want to force users to wrap the component in a `\u003CSuspense />`.\r\n\r\nI looked for established patterns and found that `\u003CSmoke />` loads textures, but requires `\u003CSuspense />`. I think we can improve the DX by removing that requirement for users *and* providing a standard-ish way for components to avoid `await`ing.\r\n\r\n### Validations\r\n\r\n- [X] I agree to follow this project's [Code of Conduct](https://github.com/Tresjs/cientos/blob/main/CODE_OF_CONDUCT.md)\r\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/cientos/blob/main/CONTRIBUTING.md).\r\n- [X] Read the [docs](https://cientos.tresjs.org/guide).\r\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.",[2908,2911,2912],{"name":2909,"color":2910},"good first issue","7057ff",{"name":2891,"color":2892},{"name":2913,"color":2914},"p3-significant","2C78E3",264,"Components with textures shouldn't require `\u003CSuspense>`","2024-11-25T09:29:04Z","https://github.com/Tresjs/cientos/issues/264",0.78923786,{"description":2921,"labels":2922,"number":2923,"owner":2871,"repository":2924,"state":2873,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### Describe the bug\n\nI am trying to clip materials using local clipping planes, but no matter what I do, I am not able to access the localClippingEnabled attribute on the instance of the WebGLRenderer. \r\n\r\nI think the most simple solution would be: \r\n```HTML\r\n\u003CTresCanvas ref=\"canvas\" :shadows=\"true\" :local-clipping-enabled=\"true\">\r\n\u003C/TresCanvas>\r\n```\r\n... but this is not working.\r\n\r\nI've tried using:\r\n```\r\nconst { renderer } = useTresContext()\r\nrenderer.value.localClippingEnabled = true\r\n```\r\nbut I get this error:\r\n```\r\nUncaught TypeError: Cannot read properties of undefined (reading 'x')\r\n```\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-eaxcaf?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/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.",[],684,"tres","LocalClippingEnabled","2024-05-27T08:33:39Z","https://github.com/Tresjs/tres/issues/684",0.7943825,{"description":2930,"labels":2931,"number":2942,"owner":2871,"repository":2924,"state":2873,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Description\n\nAs a developer using TresJS, I would like to use `useTexture` and `useLoader` as true vue composition API composables rather than utility functions.\n\n## Current issue\n\nVue composables are special functions that encapsulate and reuse stateful logic (see official [definition](https://vuejs.org/guide/reusability/composables.html#what-is-a-composable)). And should only be called in `\u003Cscript setup>` or the `setup()` hook. They should also be called synchronously in these contexts. In some cases, you can also call them in lifecycle hooks like `onMounted()` (see usage [restrictions](https://vuejs.org/guide/reusability/composables.html#usage-restrictions)).\n\nThere is also this great video by @TheAlexLichter explaining the topic https://www.youtube.com/watch?v=N0QrFKBZuqA\n\nThis is going to be a big breaking change so we need to document accordingly.\n\n### `useTexture`\n\n> [!IMPORTANT]\n> We decided to move useTexture to cientos package https://github.com/Tresjs/cientos/issues/611\n\nIf we follow the official documentation we are promoting the usage of this composable as a function that returns the loaded texture. https://docs.tresjs.org/api/composables.html#usetexture\n\n```\nconst texture = await useTexture(['path/to/texture.png'])\n```\n\nThat texture is a plain object. So this \"composable\" acts more as a loader utility than an actual composable. Making it possible to be used on async operations like:\n\n```ts\nconst currentTexture = ref()\n\nwatch(state.texture, () -> {\n currentTexture.value = await useTexture(['path/to/texture.png'])\n})\n```\n\nhttps://github.com/Tresjs/tres/blob/e4f94e7d6584a151a8383cdab74495fe55948653/src/composables/useTexture/index.ts#L127-L161\n\n### `useLoader`\n\nExactly the same case, which then propagates to `@tresjs/cientos` `useGLTF` and `useFBX`\n\nhttps://github.com/Tresjs/tres/blob/e4f94e7d6584a151a8383cdab74495fe55948653/src/composables/useLoader/index.ts#L68-L101\n\n### Suggested solution\n\n### useTexture\n\nAdd a shallow state to hold the texture/s loaded.\n\n```ts\nexport function useTexture(\n paths, // Initial paths\n manager.\n) {\n const texture = shallowRef()\n const textureLoader = new TextureLoader(manager)\n\n\n async function loadTexture(path) {\n try {\n texture.value = await textureLoader.load(path)\n }\n catch() { }\n }\n}\n\n\nHow the user would use it:\n\n```ts\nconst { texture, loadTexture } = useTexture()\n\nawait loadTexture() \n\nwatch(texture.value, (newTexture) => {\n // do something about it.\n})\n```\n\n#### Considerations for API\n\n- How to handle single path vs multiple paths.\n- How to handle when paths are a PBRUseTextureMap object (Maybe another composable)\n\n\n### useLoader\n\nTBD\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.",[2932,2935,2936,2939],{"name":2933,"color":2934},"p3-downstream-blocker","BFFC4F",{"name":2913,"color":2914},{"name":2937,"color":2938},"breaking-change","5612D2",{"name":2940,"color":2941},"v5","EFC959",922,"Several composables are not truly composables.","2025-04-12T06:37:45Z","https://github.com/Tresjs/tres/issues/922",0.79751813,{"description":2948,"labels":2949,"number":2959,"owner":2871,"repository":2924,"state":2873,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### Describe the bug\r\n\r\n`useTresContext().controls.value` is null when using Cientos' `\u003COrbitControls>`.\r\n\r\n### Context\r\n\r\n[This issue was opened on Cientos.](https://github.com/Tresjs/cientos/issues/249) Part of the issue was addressed with a Cientos' PR. \r\n\r\nOpening an issue here to look into `useTresContext().controls`. \r\n\r\n----\r\n\r\n@zkobrinsky\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-fzdwdc?file=src%2Fcomponents%2FTheScene.vue\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.",[2950,2953,2956],{"name":2951,"color":2952},"bug","d73a4a",{"name":2954,"color":2955},"waiting for author","B145BC",{"name":2957,"color":2958},"v4","7980EA",418,"useTresContext().controls.value is null when using Cientos' `\u003COrbitControls />`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.797735,{"description":2965,"labels":2966,"number":2870,"owner":2871,"repository":2900,"state":2971,"title":2972,"updated_at":2973,"url":2974,"score":2877},"### Description\n\nI would like to have some demos in this repo, applying basic forces \n\n### Suggested solution\n\n_No response_\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/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.",[2967,2968],{"name":2909,"color":2910},{"name":2969,"color":2970},"feature","c2e0c6","closed","Demos: apply forces","2024-09-12T13:49:59Z","https://github.com/Tresjs/rapier/issues/104",{"description":2976,"labels":2977,"number":1660,"owner":2871,"repository":2979,"state":2971,"title":2980,"updated_at":2981,"url":2982,"score":2983},"**Is your feature request related to a problem? Please describe.**\r\nAs of now, effects are typescript `.ts` files with `defineComponent`.\r\n\r\n```ts\r\nexport const Glitch = defineComponent\u003CGlitchProps>({\r\n name: 'Glitch',\r\n props: [\r\n 'delay',\r\n 'duration',\r\n 'strength',\r\n 'mode',\r\n 'active',\r\n 'ratio',\r\n 'columns',\r\n 'chromaticAberrationOffset',\r\n 'peturbationMap',\r\n 'dtSize',\r\n ] as unknown as undefined,\r\n\r\n async setup(props, { expose }) {\r\n const { state } = useCore()\r\n const composer = inject\u003Cany>('effectComposer')\r\n const pass = ref\u003CEffectPass | null>(null)\r\n\r\n expose({ getPass: () => pass.value })\r\n\r\n watchEffect(() => {\r\n if (state.camera && composer && composer.value) {\r\n pass.value = new EffectPass(unref(state.camera), new GlitchEffect(props))\r\n composer.value?.addPass(toRaw(pass.value))\r\n }\r\n })\r\n\r\n watch(\r\n () => props.active,\r\n value => {\r\n if (pass.value) {\r\n pass.value.enabled = value as boolean\r\n }\r\n },\r\n )\r\n\r\n return () => {\r\n pass\r\n }\r\n },\r\n})\r\n\r\n```\r\n\r\n**Describe the solution you'd like**\r\n\r\nUse a similar approach as cientos and use vue SFC components \r\n\r\n",[2978],{"name":2868,"color":2869},"post-processing","Refactor Effects to .vue files","2023-06-23T16:06:50Z","https://github.com/Tresjs/post-processing/issues/23",0.76233286,{"description":2985,"labels":2986,"number":1660,"owner":2871,"repository":2924,"state":2971,"title":2991,"updated_at":2992,"url":2993,"score":2983},"Atm HMR disposal is not working as expected. Meshes are duplicated and this could lead to performance issues on large scenes.\n\nAlso not nice for DX. User needs to reload everytime.\n\nThis one is pretty tricky.\n\n# Desired solution.\n\nRenderer, scene and object follow a disposal flow when HMR hits",[2987,2988],{"name":2891,"color":2892},{"name":2989,"color":2990},"discussion 💭","AE4C80","HMR disposal","2023-09-12T18:58:32Z","https://github.com/Tresjs/tres/issues/23",["Reactive",2995],{},["Set"],["ShallowReactive",2998],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fjtwOKj5yST7KWFSClyL6QwmQgdaVX9ZCIlKO7f9OkXY":-1},"/Tresjs/leches/92"]