`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.7864327,{"description":2899,"labels":2900,"number":2901,"owner":2874,"repository":2902,"state":2876,"title":2903,"updated_at":2904,"url":2905,"score":2906},"### Description\n\nBased on breaking changes from the core https://github.com/Tresjs/tres/pull/959. Refactor useGLTF to use https://vueuse.org/core/useAsyncState/#useasyncstate \n\n### Suggested solution\n\n```\nexport function useGLTF(path: MaybeRef\u003Cstring>, options?: {\n draco?: boolean\n manager?: LoadingManager\n asyncOptions?: UseAsyncStateOptions\u003Ctrue, any | null>\n}) {\n const loader = new GLTFLoader(options?.manager)\n if (options?.draco) {\n const dracoLoader = new DRACOLoader()\n dracoLoader.setDecoderPath('https://www.gstatic.com/draco/versioned/decoders/1.5.6/')\n loader.setDRACOLoader(dracoLoader)\n }\n\n const initialPath = toValue(path)\n\n const result = useAsyncState(\n (path?: string) => new Promise((resolve, reject) => {\n loader.load(path || initialPath || '', (result: GLTF) => {\n const loadedData = result\n if (loadedData.scene) {\n const graph = buildGraph(loadedData.scene)\n Object.assign(loadedData, graph.value)\n }\n resolve(loadedData as unknown as TresObject)\n }, undefined, (err: unknown) => {\n reject(err)\n })\n }),\n null,\n {\n ...options?.asyncOptions,\n immediate: options?.asyncOptions?.immediate ?? true,\n },\n )\n\n return result as UseAsyncStateReturn\u003CGLTF & TresObjectMap, [string], true>\n}\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.",[],609,"cientos","Refactor useGLTF","2025-04-11T06:47:22Z","https://github.com/Tresjs/cientos/issues/609",0.79835075,{"description":2908,"labels":2909,"number":2913,"owner":2874,"repository":2875,"state":2914,"title":2915,"updated_at":2916,"url":2917,"score":2918},"**Is your feature request related to a problem? Please describe.**\r\nIn the current implementation, `useTres` uses a [global state](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L100) which has some downsides.\r\n\r\n1. It prevents having multiple canvases on the same page. Fixing this issue might help solving #153 \r\n2. Fixing this issue might help solving #173 \r\n3. Global states are prone to [cross-request state pollution](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution) in the SSR context\r\n4. One could put anything inside the state by using [setState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L128), but there would be no representation of it in [TresState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L5). DX suffers from this.\r\n\r\n**Describe the solution you'd like**\r\nWe could restructure `useTres` to make it use the [provide context pattern](https://medium.com/@maoberlehner/context-and-provider-pattern-with-the-vue-3-composition-api-17247eb7b001). `TresCanvas` would be the entity to provide things like renderer, camera and so on (see [TresState](https://github.com/Tresjs/tres/issues/new?assignees=&labels=enhancement&template=feature-request-%F0%9F%AA%90.md)). Any entity being child of `TresCanvas` could use the composable that injects those things.\r\n\r\n**Additional context**\r\nI'm not 100% sure if my proposed solution works. Let's see this issue as a opportunity for a little experiment 😊.\r\n",[2910],{"name":2911,"color":2912},"v2","FEE22E",183,"closed","feat: restructuring useTres using the provide context pattern","2023-04-04T15:47:17Z","https://github.com/Tresjs/tres/issues/183",0.71305555,{"description":2920,"labels":2921,"number":2926,"owner":2874,"repository":2875,"state":2914,"title":2927,"updated_at":2928,"url":2929,"score":2930},"**Is your feature request related to a problem? Please describe.**\r\nAtm we are using `provide/inject` API to share the renderer state, especially to be able to extend the catalogue on cientos. \r\n\r\n`useTres` was an attempt to achieve a local state but wasn't that efficient or type-safe. Also is using `reactive` atm which can affect performance.\r\n\r\n**Describe the solution you'd like**\r\nA state that is:\r\n- Performant: doesn't affect the performance of the scene\r\n- Scalable\r\n- Typed\r\n\r\n**Suggested solution**\r\nMaybe `shallowReactive` with `readonly` for some properties. I'm also thinking a lot about pinia, especially for devtools support but I still don't know if it's possible to make the state shallowReactive to avoid issues (specially for scene)\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[2922,2923],{"name":2868,"color":2869},{"name":2924,"color":2925},"performance","3F1D85",37,"Better state management `useTres`","2023-02-16T08:09:50Z","https://github.com/Tresjs/tres/issues/37",0.7454204,{"description":2932,"labels":2933,"number":2934,"owner":2874,"repository":2875,"state":2914,"title":2935,"updated_at":2936,"url":2937,"score":2938},"### 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,"Uncaught Error: useTresContext must be used together with useTresContextProvider","2023-09-30T07:00:08Z","https://github.com/Tresjs/tres/issues/410",0.7531754,{"description":2940,"labels":2941,"number":2945,"owner":2874,"repository":2902,"state":2914,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Description\n\nAdd a component, stats-gl, to measure the performance of the scene\n\n### Suggested solution\n\nSee https://github.com/pmndrs/drei#statsgl\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.",[2942],{"name":2943,"color":2944},"good first issue","7057ff",197,"Stats-gl","2023-09-21T12:58:24Z","https://github.com/Tresjs/cientos/issues/197",0.7666368,{"description":2951,"labels":2952,"number":2955,"owner":2874,"repository":2902,"state":2914,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Description\r\n\r\nAs a developer using TresJS, I want \r\n- Environment props to be reactive\r\n- More presets other than 'sunset' (city, etc)\r\n\r\n so that:\r\n- I can dynamically configure the preset or toggle the `background` property\r\n\r\n### Suggested solution\r\n\r\nModify the `useEnvironment/component.ts` component so:\r\n\r\n- Convert to vue file SFC\r\n- texture should be a ref\r\n- Set the default for the props here.\r\n\r\nModify the `useEnvironment/index.ts` composable so:\r\n\r\n- Reacts to prop changes (Using watchers and computed)\r\n- Return the texture as a ref\r\n\r\n \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/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.",[2953,2954],{"name":2943,"color":2944},{"name":2868,"color":2869},147,"Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.76830274,{"description":2961,"labels":2962,"number":2955,"owner":2874,"repository":2970,"state":2914,"title":2971,"updated_at":2972,"url":2973,"score":2959},"Attempting to use the 1.0.0 release with Nuxt, I get an error on the `nuxt prepare` step. This is reproducible within this repo's nuxt playground if you update the dependency to 1.0.0.\r\n\r\n```\r\n ERROR ENOENT: no such file or directory, open '/Users/.../.../post-processing/playground-nuxt/@tresjs/post-processing' 10:29:39 AM\r\n ```\r\n\r\nThis does not happen when using `1.0.0-next.1`.\r\n\r\n```\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.14.1592\r\n- CLI Version: 3.15.0\r\n- Nitro Version: 2.10.4\r\n- Package Manager: npm@10.8.3\r\n- Builder: -\r\n- User Config: default\r\n- Runtime Modules: @nuxt/eslint@0.7.2, @pinia/nuxt@0.7.0, @nuxtjs/supabase@1.4.3, @primevue/nuxt-module@4.2.4, @nuxtjs/tailwindcss@6.12.2, nuxt-lodash@2.5.3, @nuxt/icon@1.8.2, @tresjs/nuxt@3.0.7\r\n- Build Modules: -\r\n```\r\n\r\nThanks for maintaining this project!",[2963,2964,2967],{"name":2885,"color":2886},{"name":2965,"color":2966},"p4-important-bug","D93F0B",{"name":2968,"color":2969},"types","5C076E","post-processing","Broken imports in v1.0.0 w/ Nuxt","2025-01-03T09:37:19Z","https://github.com/Tresjs/post-processing/issues/147",{"description":2975,"labels":2976,"number":2984,"owner":2874,"repository":2875,"state":2914,"title":2985,"updated_at":2986,"url":2987,"score":2988},"### Describe the bug\n\nI am importing useSeek in my project:\r\n```typescript\r\nimport { useSeek } from \"@tresjs/core\";\r\n```\r\n\r\nSince the upgrade to Tres 3.8.0, I get the error `Module \"\"@tresjs/core\"\" has no exported member \"useSeek\". Did you mean to use \"import useSeek from \"@tresjs/core\"\" instead?`\r\n\r\nIndeed, useSeek, useRaycaster and useLoader which are exported in src/composables/index.d.ts don't seem to be present in the package anymore.\n\n### Reproduction\n\nhttps://www.runpkg.com/?@tresjs/core@3.8.0/dist/src/composables/index.d.ts\n\n### Steps to reproduce\n\nUnfortunately I didn't manage to reproduce the issue on Stackblitz, but the link above shows that the 3 files are missing from the directory where it's supposed to be imported from.\n\n### System Info\n\n_No response_\n\n### Used Package Manager\n\npnpm\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.",[2977,2978,2981],{"name":2885,"color":2886},{"name":2979,"color":2980},"p2-edge-case","ABCC40",{"name":2982,"color":2983},"regression","167F7A",619,"useSeek, useRaycaster and useLoader are missing from TresJS 3.8.0","2024-04-08T10:24:47Z","https://github.com/Tresjs/tres/issues/619",0.7728452,["Reactive",2990],{},["Set"],["ShallowReactive",2993],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fE1l8kPyMLSb7RaWuQ6UsylRRUQXgx-1NRbl59nG6wSk":-1},"/Tresjs/post-processing/43"]