`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.7362168,{"description":3037,"labels":3038,"number":3046,"owner":3029,"repository":3030,"state":3031,"title":3047,"updated_at":3048,"url":3049,"score":3050},"### 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.",[3039,3042,3045],{"name":3040,"color":3041},"pending-triage","97A4FE",{"name":3043,"color":3044},"investigation","D03599",{"name":3023,"color":3024},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":3052,"labels":3053,"number":3066,"owner":3029,"repository":3030,"state":3031,"title":3067,"updated_at":3068,"url":3069,"score":3070},"### 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.",[3054,3057,3060,3063],{"name":3055,"color":3056},"p3-downstream-blocker","BFFC4F",{"name":3058,"color":3059},"p3-significant","2C78E3",{"name":3061,"color":3062},"breaking-change","5612D2",{"name":3064,"color":3065},"v5","EFC959",922,"Several composables are not truly composables.","2025-04-12T06:37:45Z","https://github.com/Tresjs/tres/issues/922",0.80479044,{"description":3072,"labels":3073,"number":3082,"owner":3029,"repository":3083,"state":3031,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### 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.",[3074,3076,3079],{"name":3023,"color":3075},"DEEAB8",{"name":3077,"color":3078},"has-workaround","aea9c4",{"name":3080,"color":3081},"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":3089,"labels":3090,"number":3094,"owner":3029,"repository":3095,"state":3031,"title":3096,"updated_at":3097,"url":3098,"score":3099},"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```",[3091],{"name":3092,"color":3093},"enhancement","a2eeef",104,"leches","Rethink API and DX","2024-04-27T19:31:44Z","https://github.com/Tresjs/leches/issues/104",0.8055528,{"description":3101,"labels":3102,"number":3106,"owner":3029,"repository":3083,"state":3107,"title":3108,"updated_at":3109,"url":3110,"score":3111},"### 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.",[3103],{"name":3104,"color":3105},"dx","1576ad",157,"closed","Re-order components","2023-09-07T12:21:17Z","https://github.com/Tresjs/cientos/issues/157",0.73893803,{"description":3113,"labels":3114,"number":3106,"owner":3029,"repository":3115,"state":3107,"title":3116,"updated_at":3117,"url":3118,"score":3111},"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":3120,"labels":3121,"number":3123,"owner":3029,"repository":3095,"state":3107,"title":3124,"updated_at":3125,"url":3126,"score":3127},"**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",[3122],{"name":3092,"color":3093},92,"Rethink `value.value` for multiple controls","2025-01-17T17:45:24Z","https://github.com/Tresjs/leches/issues/92",0.77573436,{"description":3129,"labels":3130,"number":3132,"owner":3029,"repository":3030,"state":3107,"title":3133,"updated_at":3134,"url":3135,"score":3136},"### 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.",[3131],{"name":3020,"color":3021},317,"Vue-devtools broken since v2 custom renderer","2023-08-23T05:12:31Z","https://github.com/Tresjs/tres/issues/317",0.78021747,{"description":3138,"labels":3139,"number":3149,"owner":3029,"repository":3083,"state":3107,"title":3150,"updated_at":3151,"url":3152,"score":3153},"### 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.",[3140,3141,3143,3146],{"name":3020,"color":3021},{"name":3026,"color":3142},"EEF2B0",{"name":3144,"color":3145},"p4-important-bug","D93F0B",{"name":3147,"color":3148},"regression","167F7A",435,"Lensflare playground demo is broken","2024-08-28T19:23:52Z","https://github.com/Tresjs/cientos/issues/435",0.7852024,["Reactive",3155],{},["Set"],["ShallowReactive",3158],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fynNHnu1-GM9CVKBbCap96F4JOeEzJyQwgmXBvGwrjqM":-1},"/Tresjs/cientos/160"]