\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.",[3046],{"name":3047,"color":3048},"bug","d73a4a",905,"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.7586108,{"description":3055,"labels":3056,"number":3064,"owner":3027,"repository":3038,"state":3029,"title":3065,"updated_at":3066,"url":3067,"score":3068},"### 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.",[3057,3058,3061],{"name":3047,"color":3048},{"name":3059,"color":3060},"dx","1576ad",{"name":3062,"color":3063},"p4-important-bug","D93F0B",440,"useSurfaceSampler is not a composable","2024-06-17T23:04:25Z","https://github.com/Tresjs/cientos/issues/440",0.75898033,{"description":3070,"labels":3071,"number":3077,"owner":3027,"repository":3078,"state":3029,"title":3079,"updated_at":3080,"url":3081,"score":3082},"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",[3072,3075,3076],{"name":3073,"color":3074},"enhancement","a2eeef",{"name":3021,"color":3022},{"name":3024,"color":3025},75,"leches","Dark mode","2023-11-30T12:40:21Z","https://github.com/Tresjs/leches/issues/75",0.7628117,{"description":3084,"labels":3085,"number":3090,"owner":3027,"repository":3038,"state":3029,"title":3091,"updated_at":3092,"url":3093,"score":3094},"### 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.",[3086,3087],{"name":3047,"color":3048},{"name":3088,"color":3089},"p3-minor-bug","F28C37",457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.7688337,{"description":3096,"labels":3097,"number":3098,"owner":3027,"repository":3038,"state":3029,"title":3099,"updated_at":3100,"url":3101,"score":3102},"### Description\n\n### Description\n\nAs a maintainer of TresJS I would like to drop support for UMD bundles\n\n### Motivation\n\n- Align to modern Javascript Ecosystem alignments\n- Vue 3 is primarily distributed and consumed as ESM\n- Three.js (which TresJS wraps) supports ESM imports\n- Vite (our build tool) is designed with an ESM-first philosophy\n\nDropping UMD support offers tangible benefits:\n\n- **Smaller package size**: No need to ship multiple module formats\n- **Simplified build configuration**: Your vite.config.ts becomes cleaner\n- **Reduced maintenance burden**: One less format to test and debug\n\n### Related\n\n- https://github.com/Tresjs/tres/issues/947\n\n\n\n### Suggested solution\n\nReference https://github.com/Tresjs/tres/pull/960\n\n### Suggested solution\n\n```ts\n// vite.config.ts\nlib: {\n entry: resolve(__dirname, 'src/index.ts'),\n name: 'trescientos',\n fileName: format => `trescientos.${format}.js`,\n formats: ['es'], \n},\n```\n\nRemove `rollupOptions.output.globals`\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.",[],608,"Drop UMD Support","2025-04-08T11:09:05Z","https://github.com/Tresjs/cientos/issues/608",0.77092576,{"description":3104,"labels":3105,"number":3107,"owner":3027,"repository":3108,"state":3109,"title":3110,"updated_at":3111,"url":3112,"score":3113},"**Is your feature request related to a problem? Please describe.**\r\nThe effects from [three.js itself](https://threejs.org/examples/?q=postprocessing) should be available in this package.\r\n\r\n**Describe the solution you'd like**\r\nSimilar to the existing effects. A submodule would be handy.\r\n",[3106],{"name":3073,"color":3074},113,"post-processing","closed","Native three.js effects","2024-09-26T07:21:06Z","https://github.com/Tresjs/post-processing/issues/113",0.69515216,{"description":3115,"labels":3116,"number":3117,"owner":3027,"repository":3118,"state":3109,"title":3119,"updated_at":3120,"url":3121,"score":3122},"Hello\r\n\r\nThanks for the great work. Just started with Tres in Vue, and love it, but I'm getting the two below warnings in Chrome when loading and animating a gltf model, using your approach here to load the model : https://docs.tresjs.org/cookbook/load-models.html#using-usegltf\r\n\r\n**The Warnings:**\r\n\r\nchunk-RZFXUODE.js?v=c85fe90a:33228 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952\r\n\r\nmain.js:5 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.\r\n\r\nThe warnings vanish if I don't include my HeroBackgroundTres component (ok, have to come up with a better name for it)\r\n\r\n**HeroBackgroundTres.vue code:**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport Model from '@/model/Model.vue';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"tres-wrapper\">\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera :position=\"[-3, -2, 4]\" />\r\n \u003CSuspense>\r\n \u003CModel />\r\n \u003C/Suspense>\r\n \u003CTresDirectionalLight :intensity=\"2\" />\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n.tres-wrapper {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n**Model.vue**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useTresContext } from '@tresjs/core'\r\nimport { useGLTF } from '@tresjs/cientos';\r\nimport { useLoop } from '@tresjs/core';\r\nimport { shallowRef } from 'vue';\r\n\r\nconst boxRef = shallowRef();\r\nconst context = useTresContext();\r\nconst path = './src/assets/gltf/scene.gltf';\r\nconst { scene, nodes, animations, materials } = await useGLTF(path, { draco: true });\r\n\r\nconst { onBeforeRender } = useLoop();\r\n\r\nonBeforeRender(({ delta, elapsed }) => {\r\n if (boxRef.value) {\r\n boxRef.value.rotation.y += delta\r\n boxRef.value.rotation.z = elapsed * 0.2\r\n }\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cprimitive :object=\"scene\" ref=\"boxRef\" />\r\n\u003C/template>\r\n```\r\nThankful for any insights as I get a slight rash from yellow warnings. Again, Tres is great, keep up the fine work \r\n\r\n.T 😎",[],214,"lab","Two Warnings in Chrome when using gltf Model approach to load and run","2024-12-14T13:52:53Z","https://github.com/Tresjs/lab/issues/214",0.7040673,{"description":3124,"labels":3125,"number":3126,"owner":3027,"repository":3028,"state":3109,"title":3127,"updated_at":3128,"url":3129,"score":3130},"### Describe the bug\n\nCurrent type definitions don't allow for a function to be passed to the `ref` prop of a component, so any time you use a [functional ref](https://vuejs.org/guide/essentials/template-refs.html#function-refs) you'll run into a type error.\r\n\r\nApologies for not including a reproduction or sample but this should be quick to recreate in any dev environment with the reproduction steps.\n\n### Reproduction\n\n/\n\n### Steps to reproduce\n\n1. Install tresjs in any project\r\n2. Add TresCanvas\r\n3. Add new ref, and function to populate ref \r\n`const sphereRefs = ref\u003CObject3D[]>([]);`\r\n`const setSphereRefs = (el: any) => {\r\n if (el && !sphereRefs.value.includes(el)) {\r\n sphereRefs.value.push(el);\r\n }\r\n};`\r\n4. Add TresGroup, TresMesh, etc...\r\n5. Pass a function to the `ref` property `:ref=\"(el) => \"setSphereRef(el)\"`\r\n6. Type error pops up indicating this isn't a valid value for the `ref` prop despite this being a common use for the `ref` prop.\n\n### System Info\n\n_No response_\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/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.",[],427,"ref prop missing type for functional ref","2023-10-30T10:34:55Z","https://github.com/Tresjs/tres/issues/427",0.7385007,["Reactive",3132],{},["Set"],["ShallowReactive",3135],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f_bmkcggpm0LXd2Sag938ljMxqWhfP-RYuhRzpH5c0ao":-1},"/Tresjs/cientos/108"]