\r\n\r\nWe should accept an array too\r\n\u003CTresMesh v-layer:enable=\"[1, 2, 3]\" />\r\n\r\nAnd of course other methods like: disable, test (maybe with a console.log), toggle\r\n\r\nFor more info, check:\r\nhttps://threejs.org/docs/index.html?q=layers#api/en/core/Layers\r\n\n\n### Alternative\n\nAny other alternative is considered\n\n### Additional context\n\nAs we discuss, you can achieve this by using template ref, but sometimes is just too much code, this Issue will could improve the UX\r\n\r\nFollowing the directives pattern (to make our user easier)\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.",[2898,2899],{"name":2885,"color":2886},{"name":2900,"color":2901},"p2-nice-to-have","D4C5F9",543,"tres","v-layer directive","2024-03-30T15:32:13Z","https://github.com/Tresjs/tres/issues/543",0.75825334,{"description":2909,"labels":2910,"number":2917,"owner":2874,"repository":2875,"state":2876,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### 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.",[2911,2914],{"name":2912,"color":2913},"needs reproduction","16309A",{"name":2915,"color":2916},"waiting for author","DEEAB8",305,"Environment not working","2023-12-22T00:49:40Z","https://github.com/Tresjs/cientos/issues/305",0.7623223,{"description":2923,"labels":2924,"number":217,"owner":2874,"repository":2930,"state":2876,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### Description\n\nAfter the initial, what about creating abstraction/component like in cientos but that only works with physics\n\n### Suggested solution\n\nLike Attractor in r3f\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/rapier/blob/main/CODE_OF_CONDUCT.md)\n- [X] Read the [Contributing Guidelines](https://github.com/Tresjs/rapier/blob/main/CONTRIBUTING.md).\n- [X] Read the [docs](https://rapier.tresjs.org/guide).\n- [X] Check that there isn't [already an issue](https://github.com/tresjs/rapier/issues) that reports the same bug to avoid creating a duplicate.",[2925,2926,2929],{"name":2885,"color":2886},{"name":2927,"color":2928},"investigation","D03599",{"name":2900,"color":2901},"rapier","Cloth simmulator","2024-10-04T10:54:33Z","https://github.com/Tresjs/rapier/issues/135",0.766273,{"description":2936,"labels":2937,"number":2942,"owner":2874,"repository":2903,"state":2876,"title":2943,"updated_at":2944,"url":2945,"score":2946},"## Problem\r\n\r\nOpening a link in a new tab causes TresCanvas with manual rendering to be blank.\r\n\r\nhttps://github.com/Tresjs/tres/assets/20469369/382e1c7f-c6e9-42f1-9136-d829032ff7b5\r\n\r\n\r\n### Reproduction\r\n\r\nN/A\r\n\r\n### Steps to reproduce\r\n\r\n* `pnpm run playground`\r\n* Navigate to http://localhost:5173/\r\n* Ctrl/Command + click \"Manual rendering\" to open in a new tab\r\n* Wait a moment ~ 2 seconds\r\n* Switch to new tab\r\n\r\n### System Info\r\n\r\n```shell\r\nTested in latest Chrome and FF on Mac.\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/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.",[2938,2939],{"name":2868,"color":2869},{"name":2940,"color":2941},"p2-edge-case","ABCC40",720,"Manual rendering (edge case): canvases loaded into new tabs are initially blank","2024-06-04T20:56:47Z","https://github.com/Tresjs/tres/issues/720",0.7729241,{"description":2948,"labels":2949,"number":2954,"owner":2874,"repository":2875,"state":2876,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Describe the bug\r\n\r\n`useAnimations` is not working when the project dependencies are installed using `npm` \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/stackblitz-starters-mrz7qx?file=src%2Fcomponents%2FTheExperience.vue\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\nystem:\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.14.0 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: 3.7.0 => 3.7.0 \r\n @tresjs/core: 3.6.0 => 3.6.0 \r\n vite: ^5.0.11 => 5.0.11 \r\n\r\n```\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/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.",[2950,2951,2953],{"name":2868,"color":2869},{"name":2927,"color":2952},"D0359D",{"name":2915,"color":2916},326,"useAnimations does not work if project uses npm as package manager","2024-04-05T14:57:17Z","https://github.com/Tresjs/cientos/issues/326",0.7784565,{"description":2960,"labels":2961,"number":2964,"owner":2874,"repository":2875,"state":2876,"title":2965,"updated_at":2966,"url":2967,"score":2968},"### 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.",[2962,2963],{"name":2868,"color":2869},{"name":2871,"color":2872},457,"useEventListener bug in controls","2024-07-24T06:42:25Z","https://github.com/Tresjs/cientos/issues/457",0.7809959,{"description":2970,"labels":2971,"number":2982,"owner":2874,"repository":2903,"state":2876,"title":2983,"updated_at":2984,"url":2985,"score":2986},"### Description\n\nI have been using the kebab-case style component with eslint constraints. However, Tres only supports UpperCamelCase, which breaks the style we already have, can we have support for kebab-case style component?\n\n### Suggested solution\n\nDo a naming conversion when reading the component\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.",[2972,2975,2978,2981],{"name":2973,"color":2974},"good first issue","7057ff",{"name":2976,"color":2977},"help wanted","008672",{"name":2979,"color":2980},"PR welcome","2D76B0",{"name":2900,"color":2901},798,"Support for kebab-case style component naming","2024-08-15T09:43:04Z","https://github.com/Tresjs/tres/issues/798",0.78448504,{"description":2988,"labels":2989,"number":2997,"owner":2874,"repository":2903,"state":2876,"title":2998,"updated_at":2999,"url":3000,"score":3001},"### 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.",[2990,2991,2992,2993,2994],{"name":2973,"color":2974},{"name":2976,"color":2977},{"name":2979,"color":2980},{"name":2940,"color":2941},{"name":2995,"color":2996},"has-workaround","AEA9C4",815,"Error when using empty TresCanvas ","2024-09-06T14:16:26Z","https://github.com/Tresjs/tres/issues/815",0.7927515,["Reactive",3003],{},["Set"],["ShallowReactive",3006],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f0MQbB1tnn-1F6CqvfWNcqILDO8n-EsnV6dMTg71Yp7Y":-1},"/Tresjs/tres/649"]