\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.7340673,{"description":2879,"labels":2880,"number":2884,"owner":2871,"repository":2885,"state":2873,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### 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.",[2881],{"name":2882,"color":2883},"good first issue","7057ff",108,"cientos","Presentation Controls","2024-11-26T07:08:48Z","https://github.com/Tresjs/cientos/issues/108",0.7647136,{"description":2891,"labels":2892,"number":2900,"owner":2871,"repository":2885,"state":2873,"title":2901,"updated_at":2902,"url":2903,"score":2904},"### Describe the bug\n\nWhile adding `on-demand` invalidation on the `useSurfaceSampler` and `Sampler` on #436 I noticed that `useSurfaceSampler` is not a vue composable per definition (it doesn't deal with any type of reactivity or state), is just a function. See why here https://vuejs.org/guide/reusability/composables#what-is-a-composable\r\n\r\nSince we are providing to our users as it was a composable, I would expect that the options are reactive.\r\n\r\nhttps://github.com/Tresjs/cientos/blob/9e17559fc98066db79b02b7ea0c98ae3037ac906/src/core/abstractions/useSurfaceSampler/index.ts#L81-L143\n\n### Reproduction\n\nLocal playground, run useSurfaceSampler\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 14.5\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 89.09 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.2 => 4.0.2 \r\n @tresjs/leches: ^0.14.0 => 0.14.0\n```\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/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.",[2893,2894,2897],{"name":2868,"color":2869},{"name":2895,"color":2896},"dx","1576ad",{"name":2898,"color":2899},"p4-important-bug","D93F0B",440,"useSurfaceSampler is not a composable","2024-06-17T23:04:25Z","https://github.com/Tresjs/cientos/issues/440",0.7681517,{"description":2906,"labels":2907,"number":2915,"owner":2871,"repository":2916,"state":2873,"title":2917,"updated_at":2918,"url":2919,"score":2920},"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",[2908,2911,2912],{"name":2909,"color":2910},"enhancement","a2eeef",{"name":2882,"color":2883},{"name":2913,"color":2914},"help wanted","008672",75,"leches","Dark mode","2023-11-30T12:40:21Z","https://github.com/Tresjs/leches/issues/75",0.7707098,{"description":2922,"labels":2923,"number":2928,"owner":2871,"repository":2885,"state":2873,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Describe the bug\r\n\r\nSome controls have long-standing bugs where changing props causes duplicate events to be added. \r\n\r\nE.g., flipping makeDefault in CameraControls causes duplicate events to be added. This will add 100 duplicate events:\r\n\r\n```\r\nconst makeDefault = shallowRef(true)\r\n// Flip `makeDefault` 100 times, add 100 events! Lol\r\nArray.from({length: 100}).fill(0).forEach(\r\n (_, i) => setTimeout(\r\n () => {\r\n makeDefault.value = !makeDefault.value\r\n }, i * 1000 / 25)\r\n)\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresLeches />\r\n \u003CTresCanvas v-bind=\"gl\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CCameraControls\r\n v-bind=\"controlsState\"\r\n ref=\"controlsRef\"\r\n :make-default=\"makeDefault\"\r\n @change=\"onChange\"\r\n @start=\"onStart\"\r\n @end=\"onEnd\"\r\n />\r\n \r\n```\r\n \r\n \r\nThat means every time these emits would be expected to fire once, they're fired 100 times:\r\n\r\n```\r\nfunction addEventListeners() {\r\n useEventListener(controlsRef.value as any, 'update', () => {\r\n emit('change', controlsRef.value)\r\n invalidateOnDemand()\r\n })\r\n useEventListener(controlsRef.value as any, 'controlend', () => emit('end', controlsRef.value))\r\n useEventListener(controlsRef.value as any, 'controlstart', () => emit('start', controlsRef.value))\r\n}\r\n```\r\n\r\nThe problem is the anonymous functions:\r\n\r\nNote: If a particular anonymous function is in the list of event listeners registered for a certain target, and then later in the code, an identical anonymous function is given in an addEventListener call, the second function will also be added to the list of event listeners for that target.\r\n\r\nIndeed, anonymous functions are not identical even if defined using the same unchanging source-code called repeatedly, even if in a loop.\r\n\r\nRepeatedly defining the same unnamed function in such cases can be problematic. (See Memory issues, below.)\r\n\r\nhttps://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener\r\nMDN Web Docs\r\n[EventTarget: addEventListener() method - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)\r\nThe addEventListener() method of the EventTarget interface\r\nsets up a function that will be called whenever the specified event is delivered to the target.\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n_No response_\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/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.",[2924,2925],{"name":2868,"color":2869},{"name":2926,"color":2927},"p3-minor-bug","F28C37",457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.77722955,{"description":2934,"labels":2935,"number":2937,"owner":2871,"repository":2885,"state":2938,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### 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.",[2936],{"name":2882,"color":2883},252,"closed","Water component","2024-03-13T15:40:19Z","https://github.com/Tresjs/cientos/issues/252",0.4637309,{"description":2944,"labels":2945,"number":2947,"owner":2871,"repository":2885,"state":2938,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### Description\n\nAdd a component stats, to measure the performance of the scene\n\n### Suggested solution\n\nSee https://github.com/pmndrs/drei#stats\n\n### Alternative\n\nstatsGI\n\n### Additional context\n\nWhen finish this component add a new issue to add statsGI\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.",[2946],{"name":2882,"color":2883},158,"stats","2023-09-05T17:56:54Z","https://github.com/Tresjs/cientos/issues/158",0.7349897,{"description":2953,"labels":2954,"number":2957,"owner":2871,"repository":2885,"state":2938,"title":2958,"updated_at":2959,"url":2960,"score":2961},"### Describe the bug\n\nWhen you receive a key event, you receive two values, the event.code (KeyA) and the event.key (A).\r\nThe key is equal to the pressed letter, but letters change based on keyboard layout. \r\n\r\nWhile event.code don't.\r\n\r\nPlease swap the use of key to code, and use the proper values (A => KeyA).\r\n\r\nHere is an example.\r\n\r\n\r\nIn my picture, WASD is as unusable as you can imagine, but if you use KeyW, KeyA, KeyS, and KeyD, then it will map to my ZQSD no problem.\r\n\r\n\n\n### Reproduction\n\nhttps://cientos.tresjs.org/guide/controls/keyboard-controls.html\n\n### Steps to reproduce\n\nAccess the webpage with a keyboard of different layout\n\n### System Info\n\n```shell\nazerty layout keyboard\n```\n\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.",[2955,2956],{"name":2868,"color":2869},{"name":2926,"color":2927},573,"Keyboard controls is improperly mapped","2025-01-02T08:46:55Z","https://github.com/Tresjs/cientos/issues/573",0.74327046,{"description":2963,"labels":2964,"number":2966,"owner":2871,"repository":2885,"state":2938,"title":2967,"updated_at":2968,"url":2969,"score":2970},"### Describe the bug\n\n\r\n\r\nAt some point, the helper throws error, seems related to this line in the component.\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://github.com/Tresjs/cientos/blob/main/src/core/staging/ContactShadows.vue\n\n### Steps to reproduce\n\nRun the cientos playground.\r\n\r\nGo to the contactShadow component\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.",[2965],{"name":2926,"color":2927},401,"Contact Shadow helper throws errors","2024-05-03T13:35:42Z","https://github.com/Tresjs/cientos/issues/401",0.75001884,{"description":2972,"labels":2973,"number":2975,"owner":2871,"repository":2872,"state":2938,"title":2976,"updated_at":2977,"url":2978,"score":2979},"### 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.",[2974],{"name":2898,"color":2899},909,"on-demand invalidation not triggered when assets are loaded.","2025-02-06T09:34:37Z","https://github.com/Tresjs/tres/issues/909",0.75473547,["Reactive",2981],{},["Set"],["ShallowReactive",2984],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fnIQznCoiJo4dYSjcORG_tfkf64RWDVS2INc1z1KXfVU":-1},"/Tresjs/tres/252"]