\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.",[2872,2875],{"name":2873,"color":2874},"bug","d73a4a",{"name":2876,"color":2877},"p3-minor-bug","F28C37",457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.75138193,{"description":2884,"labels":2885,"number":2890,"owner":2862,"repository":2863,"state":2864,"title":2891,"updated_at":2892,"url":2893,"score":2894},"\r\n\r\n\r\n\r\n### Description\r\n\r\nImplement a MeshRefractionMaterial \r\n\r\n\r\n### Suggested solution\r\n\r\nSome links for context:\r\nhttps://medium.com/geekculture/simulating-refraction-in-three-js-9e367753bf6d\r\nhttps://github.com/pmndrs/drei/blob/master/src/core/MeshRefractionMaterial.tsx\r\nhttps://github.com/pmndrs/drei/blob/master/src/materials/MeshRefractionMaterial.tsx\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.",[2886,2887],{"name":2853,"color":2854},{"name":2888,"color":2889},"p3-significant","2C78E3",454,"MeshRefractionMaterial","2024-07-23T11:40:40Z","https://github.com/Tresjs/cientos/issues/454",0.7692728,{"description":2896,"labels":2897,"number":2913,"owner":2862,"repository":2914,"state":2864,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### Describe the bug\r\n\r\nUsing ```\u003CTresCanvas>\u003C/TresCanvas>``` will cause errors: \r\nUncaught TypeError: l.default is not a function\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-is86dt?file=src%2FApp.vue\r\n\r\n### Steps to reproduce\r\n\r\nOpen reproduction link\r\nCheck console\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/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.",[2898,2901,2904,2907,2910],{"name":2899,"color":2900},"good first issue","7057ff",{"name":2902,"color":2903},"help wanted","008672",{"name":2905,"color":2906},"PR welcome","2D76B0",{"name":2908,"color":2909},"p2-edge-case","ABCC40",{"name":2911,"color":2912},"has-workaround","AEA9C4",815,"tres","Error when using empty TresCanvas ","2024-09-06T14:16:26Z","https://github.com/Tresjs/tres/issues/815",0.779032,{"description":2920,"labels":2921,"number":2928,"owner":2862,"repository":2863,"state":2864,"title":2929,"updated_at":2930,"url":2931,"score":2932},"### Describe the bug\n\nCan someone explain to me how to make the environment work with a file? With the preset it works well. using useEnvironment doesn't work either.\r\n\r\nI tried with a file in the public folder \r\n\r\n```javascript\r\n\u003CEnvironment\r\n path=\"/milkyway-4k.jpg\"\r\n :background=\"true\"\r\n/>\r\n```\r\nbut also by importing it from the assets folder.\r\n\r\n```javascript\r\nimport MilkyWayEnvironment from '@assets/environments/milkyway-4k.jpg'\r\n\r\n\u003CEnvironment\r\n :path=\"MilkyWayEnvironment\"\r\n :background=\"true\"\r\n/>\r\n```\r\n\r\nWhen using the component I get only a warning :\r\n```\r\n[Vue warn]: expose() should be passed a plain object, received ref. \r\n at \u003CComponent path=\"/milkyway-4k.jpg\" background=true > \r\n at \u003CApp>\r\n```\r\n\r\nWhen I use useEnvironments I get 2 warnings and 1 error : \r\n```\r\n[Vue warn]: injection \"useTres\" not found. \r\nUnhandled error during execution of setup function \r\ntres.js:431 Uncaught (in promise) Error: useTresContext must be used together with useTresContextProvider\r\n```\r\n\r\nI tried to import the environment image into Stackblitz but it doesn't work. \n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-8r1lk7\n\n### Steps to reproduce\n\n_No response_\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/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.",[2922,2925],{"name":2923,"color":2924},"needs reproduction","16309A",{"name":2926,"color":2927},"waiting for author","DEEAB8",305,"Environment not working","2023-12-22T00:49:40Z","https://github.com/Tresjs/cientos/issues/305",0.7921813,{"description":2934,"labels":2935,"number":2939,"owner":2862,"repository":2914,"state":2940,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### 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.",[2936],{"name":2937,"color":2938},"p4-important-bug","D93F0B",909,"closed","on-demand invalidation not triggered when assets are loaded.","2025-02-06T09:34:37Z","https://github.com/Tresjs/tres/issues/909",0.7456916,{"description":2946,"labels":2947,"number":2948,"owner":2862,"repository":2914,"state":2940,"title":2949,"updated_at":2950,"url":2951,"score":2952},"### Describe the bug\n\nWhen the resize event is triggered, the canvas is not re-rendered in time, causing the screen to flicker. This situation is also seen in the official example.\r\n\r\n \r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-hhwpaq?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\nThis happens even when building the most basic scene:\r\n```vue\r\n\u003Ctemplate>\r\n\t\u003CTresCanvas ref=\"canvasRef\" v-bind=\"gl\">\r\n\t\t\u003CTresAxesHelper />\r\n\t\u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n\u003Cscript setup lang=\"ts\">\r\n\timport { BasicShadowMap, SRGBColorSpace, NoToneMapping } from 'three';\r\n\r\n\tconst gl = {\r\n\t\tclearColor: '#82DBC5',\r\n\t\tshadows: true,\r\n\t\talpha: false,\r\n\t\tshadowMapType: BasicShadowMap,\r\n\t\toutputColorSpace: SRGBColorSpace,\r\n\t\ttoneMapping: NoToneMapping,\r\n\t};\r\n\r\n\u003C/script>\r\n```\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.19045\r\n CPU: (8) x64 Intel(R) Core(TM) i7-7700HQ CPU @ 2.80GHz\r\n Memory: 2.49 GB / 15.90 GB\r\n Binaries:\r\n Node: 18.19.0 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.17 - ~\\AppData\\Roaming\\npm\\yarn.CMD\r\n npm: 9.6.6 - ~\\AppData\\Roaming\\npm\\npm.CMD\r\n pnpm: 7.7.0 - ~\\AppData\\Roaming\\npm\\pnpm.CMD\r\n Browsers:\r\n Edge: Chromium (120.0.2210.133)\r\n Internet Explorer: 11.0.19041.3636\r\n npmPackages:\r\n @tresjs/core: ^3.6.0 => 3.6.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/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.",[],511,"The screen flickers severely when the resize event is triggered","2024-01-17T15:04:32Z","https://github.com/Tresjs/tres/issues/511",0.7457518,{"description":2954,"labels":2955,"number":2962,"owner":2862,"repository":2914,"state":2940,"title":2963,"updated_at":2964,"url":2965,"score":2966},"**Describe the bug**\r\nUpdate new way of loading controls for examples",[2956,2959],{"name":2957,"color":2958},"docs","0075ca",{"name":2960,"color":2961},"pending-triage","97A4FE",167,"[v2] - Update three/example/loaders to new url from three","2023-04-06T07:38:35Z","https://github.com/Tresjs/tres/issues/167",0.7476887,{"description":2968,"labels":2969,"number":2974,"owner":2862,"repository":2914,"state":2940,"title":2975,"updated_at":2976,"url":2977,"score":2978},"### Describe the bug\n\nDescription:\r\n\r\nI am experiencing an issue where events on dynamically added spheres are not being registered. In my setup, I have a box that, when clicked, adds a new sphere to the scene. While the initial spheres respond to click, pointer-enter, and pointer-leave events as expected, the newly added spheres do not trigger these events.\r\n\r\nSample Code:\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref, reactive } from 'vue';\r\nimport { Sphere, Box, OrbitControls } from '@tresjs/cientos';\r\n\r\nconst addHotspot = () => {\r\n const newHotspot = reactive({\r\n position: [-2, 0, 0],\r\n });\r\n hotspots.push(newHotspot);\r\n};\r\n\r\nconst hotspots = reactive([\r\n {\r\n position: [-2, 0, -2],\r\n },\r\n {\r\n position: [0, 0, -2],\r\n },\r\n {\r\n position: [2, 0, -2],\r\n },\r\n]);\r\n\r\nconst grow = (event) => {\r\n event.object.scale.set(1.5, 1.5, 1.5);\r\n};\r\n\r\nconst shrink = (event) => {\r\n event.object.scale.set(1, 1, 1);\r\n};\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003COrbitControls />\r\n \u003CTresPerspectiveCamera />\r\n \u003CTresAmbientLight :args=\"['white', 0.5]\" />\r\n \u003CBox :position=\"[0, 0, 0]\" :scale=\"[1, 1, 1]\" @click=\"addHotspot\">\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/Box>\r\n \u003CSphere\r\n :args=\"[0.5, 32, 32]\"\r\n v-for=\"(hotspot, index) in hotspots\"\r\n :position=\"hotspot.position\"\r\n @click=\"console.log('click', index)\"\r\n @pointer-enter=\"grow\"\r\n @pointer-leave=\"shrink\"\r\n >\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/Sphere>\r\n\u003C/template>\r\n\r\n```\r\nExpected Behavior:\r\n\r\nThe click, pointer-enter, and pointer-leave events on the newly added spheres should function identically to those on the initial spheres, triggering the respective console logs and scaling effects.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction-aa972s?file=src%2Fcomponents%2FTheExperience.vue,package-lock.json\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.",[2970,2971],{"name":2937,"color":2938},{"name":2972,"color":2973},"regression","167F7A",763,"Events not registering on dynamically added objects","2024-07-12T05:05:00Z","https://github.com/Tresjs/tres/issues/763",0.74922043,{"description":2980,"labels":2981,"number":2986,"owner":2862,"repository":2914,"state":2940,"title":2987,"updated_at":2988,"url":2989,"score":2990},"### Describe the bug\n\nReported by Guillaume Leo on discord:\r\n\r\n- Object prop is not reactive\r\n- Conditional rendering is not working. `v-if` \r\n\r\nhttps://discord.com/channels/1047126995424780288/1193882152811642892\n\n### Reproduction\n\nhttps://stackblitz.com/fork/github/stackblitz/starters/tree/main/tres?title=TresJS&description=Quick%20start%20repo%20for%20Tres.js%20projects\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.",[2982,2983],{"name":2873,"color":2874},{"name":2984,"color":2985},"v4","7980EA",503,"Conditional and dynamic rendering of primitives.","2024-05-30T06:40:39Z","https://github.com/Tresjs/tres/issues/503",0.7531604,["Reactive",2992],{},["Set"],["ShallowReactive",2995],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8iJIi9BLB4Rgqt7xOsCxvf4E71Z3ma6iQ3ZzYkUQsfo":-1},"/Tresjs/tres/720"]