`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.7362168,{"description":2885,"labels":2886,"number":2894,"owner":2877,"repository":2878,"state":2879,"title":2895,"updated_at":2896,"url":2897,"score":2898},"### Describe the bug\n\n\r\n1. Why does the uninstallation sequence not follow vue3\r\n2. Why does the subcomponent under Scene load again after unloading when I switch routes to a non-TRES page\r\nIt will also appear in other versions\n\n### Reproduction\n\nN\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.",[2887,2890,2893],{"name":2888,"color":2889},"pending-triage","97A4FE",{"name":2891,"color":2892},"investigation","D03599",{"name":2871,"color":2872},697,"The Lifecycle Hooks is out of order after v3.9.0","2024-08-21T10:02:25Z","https://github.com/Tresjs/tres/issues/697",0.8024441,{"description":2900,"labels":2901,"number":2914,"owner":2877,"repository":2878,"state":2879,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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.",[2902,2905,2908,2911],{"name":2903,"color":2904},"p3-downstream-blocker","BFFC4F",{"name":2906,"color":2907},"p3-significant","2C78E3",{"name":2909,"color":2910},"breaking-change","5612D2",{"name":2912,"color":2913},"v5","EFC959",922,"Several composables are not truly composables.","2025-04-12T06:37:45Z","https://github.com/Tresjs/tres/issues/922",0.80479044,{"description":2920,"labels":2921,"number":2930,"owner":2877,"repository":2931,"state":2879,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Description\n\nAs a developer using Cientos, it would be useful to have a function available that allows to capture a screenshot of the scene canvas.\n\n### Suggested solution\n\nProvide a function that allows capturing screenshots.\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.",[2922,2924,2927],{"name":2871,"color":2923},"DEEAB8",{"name":2925,"color":2926},"has-workaround","aea9c4",{"name":2928,"color":2929},"p2-nice-to-have","D4C5F9",229,"cientos","Taking screenshots of the canvas","2024-04-05T14:54:01Z","https://github.com/Tresjs/cientos/issues/229",0.80535686,{"description":2937,"labels":2938,"number":2942,"owner":2877,"repository":2943,"state":2879,"title":2944,"updated_at":2945,"url":2946,"score":2947},"The current API is far from ideal, we initially followed the same DX as https://github.com/pmndrs/leva \r\nbut encountered number of issues\"\r\n\r\n- Need to use `value.value` for multiple controls #92 \r\n- Shared `useControls` composable, impossible to have multiple distinct instances #98 \r\n\r\nI will copy the different suggestions from @andretchen0 \r\n\r\n## Example: Tweakpane\r\n\r\n[Tweakpane | Bindings](https://tweakpane.github.io/docs/input-bindings/)\r\n\r\nTweakpane uses `.addBinding(stateObject, key, params)`.\r\n\r\n```ts\r\nconst PARAMS = {\r\n speed: 50,\r\n};\r\n\r\nconst pane = new Pane();\r\npane.addBinding(PARAMS, 'speed', {\r\n min: 0,\r\n max: 100,\r\n});\r\n```\r\n\r\nWith this setup, there's no need for a `watch` and so no `value.value`. The value is already being \"watched\" with the configuration above.\r\n\r\n## Example: v-tweakpane\r\n\r\nA variation of Tweakpane, this time with Vue. Like Tweakpane, it uses a specific method for creating a widget and binding at the same time. This avoids the need to `watch` and avoids `.value.value`.\r\n\r\n```ts\r\nconst onPaneTwoCreated = (pane: any) => {\r\n pane.registerPlugin(CamerakitPlugin);\r\n const PARAMS = {\r\n flen: 55,\r\n fnum: 1.8,\r\n iso: 100,\r\n };\r\n pane.addInput(PARAMS, 'flen', {\r\n view: 'cameraring',\r\n series: 0,\r\n unit: { pixels: 50, ticks: 10, value: 0.2 },\r\n min: 1,\r\n step: 0.02,\r\n });\r\n```\r\n\r\nThe [example](https://github.com/vinayakkulkarni/v-tweakpane/blob/main/example/src/App.vue) uses some callbacks for setup, which Leches doesn't need. Personally, I'd like to avoid having those.\r\n\r\n## Example: Vuetify\r\n\r\nIn this [Vuetify example](https://vuetifyjs.com/en/components/sliders/#min-and-max), most of the config that Leches does in `\u003Csetup>` is handled in `\u003Ctemplate>`. Bindings are created using `v-model` in the `\u003Ctemplate>`.\r\n\r\n```html\r\n\u003Ctemplate>\r\n \u003Cv-slider\r\n v-model=\"slider\"\r\n class=\"align-center\"\r\n :max=\"max\"\r\n :min=\"min\"\r\n hide-details\r\n >\r\n \u003Ctemplate v-slot:append>\r\n \u003Cv-text-field\r\n v-model=\"slider\"\r\n hide-details\r\n single-line\r\n density=\"compact\"\r\n type=\"number\"\r\n style=\"width: 70px\"\r\n >\u003C/v-text-field>\r\n \u003C/template>\r\n \u003C/v-slider>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\n export default {\r\n data () {\r\n return {\r\n min: -50,\r\n max: 90,\r\n slider: 40,\r\n }\r\n },\r\n }\r\n\u003C/script>\r\n```",[2939],{"name":2940,"color":2941},"enhancement","a2eeef",104,"leches","Rethink API and DX","2024-04-27T19:31:44Z","https://github.com/Tresjs/leches/issues/104",0.8055527,{"description":2949,"labels":2950,"number":2954,"owner":2877,"repository":2931,"state":2955,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Description\n\nCurrently almost all components are in the abstractions folder.\r\n\r\nWe could re-order them to make more sense\r\nEj: stars should go in staging\n\n### Suggested solution\n\nA organization that make logic, follow the example of drei\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.",[2951],{"name":2952,"color":2953},"dx","1576ad",157,"closed","Re-order components","2023-09-07T12:21:17Z","https://github.com/Tresjs/cientos/issues/157",0.73893803,{"description":2961,"labels":2962,"number":2954,"owner":2877,"repository":2963,"state":2955,"title":2964,"updated_at":2965,"url":2966,"score":2959},"Hello. I have encountered with a problem with events of component 'primitive'.\r\n### Problem\r\nI initialize a primitive component to bond with an array as below:\r\n\r\n\r\n`\r\n\u003Cscript setup lang=\"ts\">\r\nconst gl = {\r\n clearColor: '#12B7F3',\r\n shadows: true,\r\n alpha: false,\r\n shadowMapType: BasicShadowMap,\r\n outputColorSpace: SRGBColorSpace,\r\n toneMapping: NoToneMapping,\r\n};\r\nvar testList = ref\u003CArray\u003CTHREE.Object3D>>([])\r\n\r\nonMounted(() => {\r\n\r\n const geometry2 = new THREE.ConeGeometry();\r\n const mtl2 = new THREE.MeshBasicMaterial({ color: 0x00ffff })\r\n const mesh2 = new THREE.Mesh(geometry2, mtl2)\r\n testList.value.push(mesh2)\r\n})\r\n\r\nconst clickMethod = () => {\r\n const geometry1 = new THREE.ConeGeometry();\r\n const mtl1 = new THREE.MeshBasicMaterial({ color: 0xffff00 })\r\n const mesh1 = new THREE.Mesh(geometry1, mtl1 )\r\n testList.value.push(mesh1)\r\n\r\n}\r\n\u003C/script>\r\n`\r\nAs result, the mesh2 created in OnMounted() can arise the 'pointer-enter' and 'click' events. But mesh1 created by clicking button failed to arise these two events. Eager to get your help.",[],"lab","Events were failed when dynamically add object3d to primitive!","2024-09-01T16:07:41Z","https://github.com/Tresjs/lab/issues/157",{"description":2968,"labels":2969,"number":2971,"owner":2877,"repository":2943,"state":2955,"title":2972,"updated_at":2973,"url":2974,"score":2975},"**Is your feature request related to a problem? Please describe.**\r\nWhen more than one control is passed to the `useControls`, the object returned contains all the controls refs, so to access the value inside is `slider.value.value` \r\n\r\nSee https://tresleches.tresjs.org/guide/controls.html#multiple-controls\r\n\r\nSince vue reactivity uses `value` for refs and having these differences within single and multiple controls is awkward and worsens the DX\r\n\r\n**Describe the solution you'd like**\r\n\r\n@andretchen0 I need your help here, what do you think we can do? Maybe instead of an object with all the controls, let's return an array?\r\n",[2970],{"name":2940,"color":2941},92,"Rethink `value.value` for multiple controls","2025-01-17T17:45:24Z","https://github.com/Tresjs/leches/issues/92",0.77573436,{"description":2977,"labels":2978,"number":2980,"owner":2877,"repository":2878,"state":2955,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Describe the bug\n\nThe official [Vue devtools](https://github.com/vuejs/devtools) is broken since v2. Most probably related to the edge case of the use of a custom renderer.\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-sa3ruk?file=README.md\n\n### Steps to reproduce\n\nOpen in a new tab\r\nCheck dev tools\r\nCheck error in console\r\n\r\n```\r\nTypeError: Cannot read properties of undefined (reading 'ownerDocument')\r\n```\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.",[2979],{"name":2868,"color":2869},317,"Vue-devtools broken since v2 custom renderer","2023-08-23T05:12:31Z","https://github.com/Tresjs/tres/issues/317",0.78021747,{"description":2986,"labels":2987,"number":2997,"owner":2877,"repository":2931,"state":2955,"title":2998,"updated_at":2999,"url":3000,"score":3001},"### Describe the bug\r\n\r\nLensflare seems to be broken on v4\r\n\r\nCannot destructure property 'registerCamera' of '(intermediate value)(intermediate value)(intermediate value)' as it is undefined.\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nRun local playground\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 14.5\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 51.02 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm\r\n pnpm: 8.15.4 - ~/Library/pnpm/pnpm\r\n bun: 1.0.2 - ~/.bun/bin/bun\r\n Browsers:\r\n Brave Browser: 120.1.61.116\r\n Chrome: 125.0.6422.142\r\n Safari: 17.5\r\n npmPackages:\r\n @tresjs/core: 4.0.0-rc.2 => 4.0.0-rc.2 \r\n @tresjs/leches: ^0.14.0 => 0.14.0\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/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.\r\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2988,2989,2991,2994],{"name":2868,"color":2869},{"name":2874,"color":2990},"EEF2B0",{"name":2992,"color":2993},"p4-important-bug","D93F0B",{"name":2995,"color":2996},"regression","167F7A",435,"Lensflare playground demo is broken","2024-08-28T19:23:52Z","https://github.com/Tresjs/cientos/issues/435",0.7852024,["Reactive",3003],{},["Set"],["ShallowReactive",3006],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fynNHnu1-GM9CVKBbCap96F4JOeEzJyQwgmXBvGwrjqM":-1},"/Tresjs/cientos/160"]