\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,"Wrong color space in the Image abstraction?","2025-04-18T23:18:54Z","https://github.com/Tresjs/cientos/issues/613",0.7653043,{"description":2905,"labels":2906,"number":2907,"owner":2871,"repository":2891,"state":2908,"title":2909,"updated_at":2910,"url":2911,"score":2912},"### Describe the bug\n\nThis error hapend when I write ` const state = useTres()` or `const { state } = useTres()` In devtools, and the scene is not loaded.\r\nThis is my code (in App.vue):\r\n```\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas, extend, useTres } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js'\r\nimport { watchEffect } from 'vue'\r\n\r\nconst state = useTres()\r\n\r\nlet controls: OrbitControls | null = null\r\n\r\nwatchEffect(()=>{\r\n if (state.renderer && state.camera) {\r\n controls = new OrbitControls(state.camera.value!, state.renderer.value.domElement )\r\n }\r\n})\r\n\r\nextend({OrbitControls})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas window-size>\r\n \u003CTresPerspectiveCamera />\r\n\r\n \u003CTresScene>\r\n \u003CTresMesh>\r\n \u003CTresBoxGeometry />\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/TresMesh>\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\nI did it like in this tutorial: [The tutorial](https://youtu.be/QP3gCY5_dds)\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-fg1y4w?file=src%2FApp.vue\n\n### Steps to reproduce\n\nAdd \r\n```\r\nimport { useTres } from '@tresjs/core';\r\nconst state = useTres()\r\n```\r\nto your code\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.",[],410,"closed","Uncaught Error: useTresContext must be used together with useTresContextProvider","2023-09-30T07:00:08Z","https://github.com/Tresjs/tres/issues/410",0.73077345,{"description":2914,"labels":2915,"number":2916,"owner":2871,"repository":2891,"state":2908,"title":2917,"updated_at":2918,"url":2919,"score":2920},"# Goal\r\nGenerate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n\r\nimport { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' \r\nimport { OrbitControls, TransformControls } from '@tresjs/cientos'\r\n\r\nconst sphereRef = ref()\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CTresCanvas v-bind=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :fov=\"45\" :near=\"0.1\" :far=\"1000\" :look-at=\"[-8, 3, -3]\" />\r\n \u003COrbitControls make-default />\r\n \u003CTresScene>\r\n \u003CTresAmbientLight :intensity=\"0.5\" />\r\n \u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\r\n\r\n \u003CTresMesh ref=\"sphereRef\" :position=\"[0, 4, 0]\" cast-shadow>\r\n \u003CTresSphereGeometry />\r\n \u003CTresMeshToonMaterial color=\"#FBB03B\" />\r\n \u003C!-- \u003CTresMeshToonMaterial color=\"#FBB03B\" /> -->\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 8, 4]\" :intensity=\"0.7\" cast-shadow />\r\n \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\" receive-shadow>\r\n \u003CTresPlaneGeometry :args=\"[10, 10, 10, 10]\" />\r\n \u003CTresMeshToonMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n- [ ] Using a vite plugin to generate all the components from THREE instances (Except Scene)\r\n- [ ] Each component should locally register components on the slots (is possible?)\r\n- [ ] Typescript Definition for the components generated from the ThreeJS instance\r\n- [ ] Include them in the final bundle\r\n- [ ] Strategy for replacing catalog `extend` \r\n- [ ] Update the way `cientos` extends the catalog\r\n",[],104,"Generate instances on build-time rather than run-time","2023-03-13T14:26:46Z","https://github.com/Tresjs/tres/issues/104",0.74269885,{"description":2922,"labels":2923,"number":2927,"owner":2871,"repository":2891,"state":2908,"title":2928,"updated_at":2929,"url":2930,"score":2931},"As a user, I will like to know how can I use composable along my vue components",[2924],{"name":2925,"color":2926},"docs","0075ca",19,"Docs for core composables","2022-12-12T10:28:36Z","https://github.com/Tresjs/tres/issues/19",0.7489851,{"description":2933,"labels":2934,"number":2944,"owner":2871,"repository":2891,"state":2908,"title":2945,"updated_at":2946,"url":2947,"score":2948},"**Describe the bug**\r\nWhen use `useTres` composable inside a sub-component to obtain the state, this state never gets updated. Curiously it does get updated when accessed from `cientos` or any other package\r\n\r\n**Reproduction**\r\nPlease provide a link using this template on [Stackblitz](https://stackblitz.com/edit/tresjs-basic-trxx6f?file=src/components/TheSphere.vue) \r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to reproduction link\r\n2. Open console.\r\n4. See that the console inside of the sphere gives a default state with mostly all undefined, but the console on the parent using templateRef `context` is updated with the correct value of state\r\n\r\n**Expected behavior**\r\nState using `useTres` should provide correct updated state\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\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: 9.4.2 - /usr/local/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^2.0.0-beta.3 => 2.0.0-beta.3 \r\n @tresjs/core: ^2.0.0-beta.9 => 2.0.0-beta.9 \r\n vite: ^4.2.2 => 4.2.2 \r\n```\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2935,2938,2941],{"name":2936,"color":2937},"bug","d73a4a",{"name":2939,"color":2940},"help wanted","008672",{"name":2942,"color":2943},"v2","FEE22E",209,"useTres doesnt get updated on subcomponent","2023-04-19T08:01:20Z","https://github.com/Tresjs/tres/issues/209",0.749843,{"description":2950,"labels":2951,"number":2955,"owner":2871,"repository":2891,"state":2908,"title":2956,"updated_at":2957,"url":2958,"score":2959},"**Is your feature request related to a problem? Please describe.**\r\nSince we are aiming to open source it we need Unit testing for composable and utilities at least.\r\n\r\n**Describe the solution you'd like**\r\n[Vitest](https://vitest.dev/) with Happy dom? \r\n\r\n\r\n",[2952],{"name":2953,"color":2954},"test","2A6996",71,"Unit Test","2023-02-26T08:37:58Z","https://github.com/Tresjs/tres/issues/71",0.75159913,{"description":2961,"labels":2962,"number":1660,"owner":2871,"repository":2966,"state":2908,"title":2967,"updated_at":2968,"url":2969,"score":2970},"**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",[2963],{"name":2964,"color":2965},"enhancement","a2eeef","post-processing","Refactor Effects to .vue files","2023-06-23T16:06:50Z","https://github.com/Tresjs/post-processing/issues/23",0.75596386,{"description":2972,"labels":2973,"number":1660,"owner":2871,"repository":2891,"state":2908,"title":2978,"updated_at":2979,"url":2980,"score":2970},"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",[2974,2975],{"name":2939,"color":2940},{"name":2976,"color":2977},"discussion 💭","AE4C80","HMR disposal","2023-09-12T18:58:32Z","https://github.com/Tresjs/tres/issues/23",["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fIpWhf984hebzGCcKKgq1TqpAYNNikXmv2ZZfX0Q_fKU":-1},"/Tresjs/tres/984"]