\r\n\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CHelloWorld msg=\"You did it!\" />\r\n\r\n \u003Cnav>\r\n \u003CRouterLink to=\"/\">Home\u003C/RouterLink>\r\n \u003CRouterLink to=\"/about\">About\u003C/RouterLink>\r\n \u003C/nav>\r\n \u003C/div>\r\n \u003C/header>\r\n\r\n \u003CRouterView />\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n```\r\n\r\nAboutView\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"about\">\r\n \u003Ch1>This is an about page\u003C/h1>\r\n \u003Cdiv class=\"canvas\">\r\n \u003CTresCanvas>\r\n \u003C!-- Your scene here -->\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\n\u003C/script>\r\n\u003Cstyle>\r\n@media (min-width: 1024px) {\r\n .about {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n}\r\n.canvas {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\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: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U\r\n Memory: 1.70 GB / 7.76 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node\r\n npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.3 \r\n @tresjs/core: ^4.3.2 => 4.3.2 \r\n vite: ~6.0.6 => 6.0.6\r\n```\r\n\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.",[2867],{"name":2868,"color":2869},"bug","d73a4a",905,"Tresjs","tres","open","I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... )","2025-02-08T10:41:31Z","https://github.com/Tresjs/tres/issues/905",0.72889555,{"description":2879,"labels":2880,"number":2881,"owner":2871,"repository":2872,"state":2873,"title":2882,"updated_at":2883,"url":2884,"score":2885},"### Description\n\nHi, Tres is powerful tools, I like it ,now I use potree js for pointcloud application, so could make potree as plugin in tres ,so could use it in vue. \nthanks\n\n### Suggested solution\n\nTres add Potree\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.",[],968,"could Tres add potree plugin for pointCloud in vue","2025-03-27T07:13:05Z","https://github.com/Tresjs/tres/issues/968",0.7335956,{"description":2887,"labels":2888,"number":2898,"owner":2871,"repository":2899,"state":2873,"title":2900,"updated_at":2901,"url":2902,"score":2903},"Inevitable 😂 \r\n\r\n- Unocss Dark mode https://unocss.dev/presets/mini#dark-mode \r\n- Vueuse dark https://vueuse.org/core/useDark/\r\n",[2889,2892,2895],{"name":2890,"color":2891},"enhancement","a2eeef",{"name":2893,"color":2894},"good first issue","7057ff",{"name":2896,"color":2897},"help wanted","008672",75,"leches","Dark mode","2023-11-30T12:40:21Z","https://github.com/Tresjs/leches/issues/75",0.744183,{"description":2905,"labels":2906,"number":2908,"owner":2871,"repository":2909,"state":2873,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\r\n\r\nGood controls for presentation purposes\r\n\r\n### Suggested solution\r\n\r\nhttps://drei.docs.pmnd.rs/controls/presentation-controls#presentationcontrols\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.",[2907],{"name":2893,"color":2894},108,"cientos","Presentation Controls","2024-11-26T07:08:48Z","https://github.com/Tresjs/cientos/issues/108",0.7525464,{"description":2915,"labels":2916,"number":2917,"owner":2871,"repository":2909,"state":2873,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Describe the bug\n\nI have multiple models paths in an array, and when i try to load them in a cycle, it only load one, it seems a race condition with `dracoLoader`not being an async function. \r\n\r\nWrapping the `dracoLoader` in an async function seems to solve the problem, i'll provide a pr as soon as possibile.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-zbayq9?file=app.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/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.",[],432,"useGLTF: race conditions problem after add of `autodispose`","2024-05-29T13:20:57Z","https://github.com/Tresjs/cientos/issues/432",0.75777906,{"description":2923,"labels":2924,"number":2926,"owner":2871,"repository":2909,"state":2927,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### Description\n\nAs a developer using Tresjs I would like to add water effect easily, threejs has some addons for this.\r\n\r\n\n\n### Suggested solution\n\nIt could be based on: https://github.com/mrdoob/three.js/blob/master/examples/webgl_water.html use the \r\nimport { Water } from 'three/addons/objects/Water2.js';\r\nDemo: https://threejs.org/examples/?q=water#webgl_water\r\nor \r\nin https://github.com/mrdoob/three.js/blob/master/examples/webgl_shaders_ocean.html\r\nimport { Water } from 'three/addons/objects/Water.js';\r\nDemo: https://threejs.org/examples/?q=water#webgl_shaders_ocean\r\n\r\nI personally prefer more the second one\n\n### Alternative\n\nOthers alternatives are considered, feel free to bring to discussion\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.",[2925],{"name":2893,"color":2894},252,"closed","Water component","2024-03-13T15:40:19Z","https://github.com/Tresjs/cientos/issues/252",0.7299274,{"description":2933,"labels":2934,"number":2926,"owner":2871,"repository":2872,"state":2927,"title":2940,"updated_at":2941,"url":2942,"score":2931},"**Is your feature request related to a problem? Please describe.**\r\n\r\nUse case is having multiple `\u003CTresCanvas>` instances on one page which are individually pausable. Currently, pausing one instance results in all instances being paused.\r\n\r\n**Describe the solution you'd like**\r\n\r\nI think there's two possible solutions here:\r\n\r\n- Each `useRenderLoop()` instance has its own state. It looks like this would have implications on the raycasting functionality, but that might be desirable?\r\n- Each `\u003CTresCanvas>` has its own state and providers or refs are used to tell `useRenderLoop` which to use\r\n\r\nEach approach has their own pros and cons. I think each `\u003CTresCanvas>` could have its own problems when third party Tres components try to do their own thing and affect the main app behaviour. It's also harder to implement and possibly involves an API change!\r\n\r\nHappy to contribute a fix, especially if the first solution is chosen as it's a lot easier :D\r\n",[2935,2936,2937],{"name":2868,"color":2869},{"name":2896,"color":2897},{"name":2938,"color":2939},"investigation","D03599","Multiple instances of `useRenderLoop` per page share state","2024-05-30T06:46:56Z","https://github.com/Tresjs/tres/issues/252",{"description":2944,"labels":2945,"number":2947,"owner":2871,"repository":2909,"state":2927,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Describe the bug\n\nIf Levioso's `speed` prop is updated, it leads to (likely) unwanted behavior.\r\n\r\nHere it's changed over time:\r\n\r\nhttps://github.com/Tresjs/cientos/assets/20469369/876fdff9-6e45-43b2-a6ef-2440cb8d3508\r\n\r\nThe problem is [here](https://github.com/Tresjs/cientos/blob/cc3f3e98a4d0bb9fd22a2120fa529a7db081b5cf/src/core/abstractions/Levioso.vue#L34C1-L40C60):\r\n\r\n````\r\nonLoop(({ elapsed }) => {\r\n if (!groupRef.value) return\r\n\r\n const theta = offset.value + elapsed\r\n groupRef.value.rotation.x = (Math.cos((theta / 4) * props.speed) / 8) * props.rotationFactor\r\n [ ... ]\r\n````\r\n\r\nDoing a quick substitution and dropping the divisors and `offset`, we have:\r\n\r\n```\r\ntheta = elapsed * props.speed\r\n```\r\n\r\nSo `props.speed` scales `elapsed` time.\r\n\r\nIf instead, we scale `delta` time, we get the (likely) desired behavior:\r\n\r\n````\r\nlet elapsed = 0;\r\nonLoop(({ delta }) => {\r\n if (!groupRef.value) return\r\n\r\n elapsed += delta * props.speed\r\n const theta = offset.value + elapsed\r\n groupRef.value.rotation.x = (Math.cos((theta / 4)) / 8) * props.rotationFactor\r\n [ ... ]\r\n````\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-dpvzsu?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n* Use Levioso in a TresCanvas\r\n* Place a visible element in the Levioso\r\n* Set speed prop\r\n* Change speed prop\r\n\r\nSee StackBlitz.\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/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.",[2946],{"name":2868,"color":2869},208,"Levioso – changing speed leads to (likely) unwanted behavior","2023-10-10T09:00:57Z","https://github.com/Tresjs/cientos/issues/208",0.7311788,{"description":2953,"labels":2954,"number":2958,"owner":2871,"repository":2909,"state":2927,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Describe the bug\n\nCSS transitions (neither `transform` based) are working when inside of the HTML component.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-q6q8cg?file=src%2Fcomponents%2FTheExperience.vue,src%2FApp.vue\n\n### Steps to reproduce\n\nClick on the section above the canvas and then click the gray box on the scene where the HTML element is use for a label.\r\n\r\nBoth have exactly the same CSS transition\n\n### System Info\n\n```shell\nSystem:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) 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: 18.18.0 - /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 pnpm: 8.9.2 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^3.5.1 => 3.5.1 \r\n @tresjs/core: ^3.4.1 => 3.4.1 \r\n @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 \r\n vite: ^4.5.0 => 4.5.0 \r\n```\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.",[2955,2956,2957],{"name":2868,"color":2869},{"name":2893,"color":2894},{"name":2896,"color":2897},275,"[Html] CSS transitions are not working","2023-11-05T09:25:55Z","https://github.com/Tresjs/cientos/issues/275",0.7365522,{"description":2964,"labels":2965,"number":2969,"owner":2871,"repository":2872,"state":2927,"title":2970,"updated_at":2971,"url":2972,"score":2973},"### Describe the bug\n\nWe should automatically invalidate when useTexture resolves the textures fetching. Is not really noticeable on the reproduction but I have a asset heavy demo that occurs \n\nhttps://github.com/user-attachments/assets/bfe5ce99-64c8-4b7a-aeea-c97858614a8c\n\n### Reproduction\n\nhttps://stackblitz.com/~/edit/tresjs-minimal-reproduction-sht9ttt5?file=src/App.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\n OS: Linux 5.0 undefined\n CPU: (4) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\n Memory: 0 Bytes / 0 Bytes\n Shell: 1.0 - /bin/jsh\n Binaries:\n Node: 18.20.3 - /usr/local/bin/node\n Yarn: 1.22.19 - /usr/local/bin/yarn\n npm: 10.2.3 - /usr/local/bin/npm\n pnpm: 8.15.6 - /usr/local/bin/pnpm\n npmPackages:\n @tresjs/cientos: 4.1.0 => 4.1.0 \n @tresjs/core: 4.3.2 => 4.3.2 \n @tresjs/leches: ^0.14.0 => 0.14.0 \n vite: ^6.0.3 => 6.0.5\n```\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.",[2966],{"name":2967,"color":2968},"p4-important-bug","D93F0B",909,"on-demand invalidation not triggered when assets are loaded.","2025-02-06T09:34:37Z","https://github.com/Tresjs/tres/issues/909",0.7392113,["Reactive",2975],{},["Set"],["ShallowReactive",2978],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flEf-rgahZEY4dyosyNfT_zECHUkXvMzSsjiHBfKsLJ0":-1},"/Tresjs/cientos/573"]