\n \u003CVisuTrackBallControls />\n \u003C/TresPerspectiveCamera>\n \u003C/TresCanvas>\n`\n\n[VisuTrackBallControls.vue.txt](https://github.com/user-attachments/files/18799562/VisuTrackBallControls.vue.txt)\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.",[],595,"cientos","Add TrackballControls to Cientos","2025-02-14T13:18:40Z","https://github.com/Tresjs/cientos/issues/595",0.7318357,{"description":2885,"labels":2886,"number":2887,"owner":2868,"repository":2869,"state":2870,"title":2888,"updated_at":2889,"url":2890,"score":2891},"### Describe the bug\n\nI would like to render the CatmullRomCurve3 component. On the linked Playground reproduction case (which uses TresJS 3.9.0 and Cientos 3.9.0), I get the following error:\r\n```\r\nInvalid watch source: A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.\r\n at \u003CLine2points=[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]vertex-colors=undefinedcolor=\"#fbb03b\" ...>\r\n at \u003CCatmullRomCurve3points=-1.5,0,0,-0.5,1,0,0.5,0,0,1.5,1,0segments=40line-width=10 ...>\r\n at \u003CApp>\r\n```\r\nwhich is strange because I didn't declare any watcher.\r\n\r\nStranger: [this Stackblitz](https://stackblitz.com/edit/tresjs-basic-jednrn?file=src%2Fcomponents%2FTheExperience.vue) that includes the same SFC displays the curve properly.\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqVVE2P2jAQ/StWethDyQeCUgmlFS1a9ePQrbZ7IxxCMoBZf8l2gArx3zt2SAjb3RULOcRv3jw/z4xzCB40mC9KRdsKgnGQmkJTZYkBWynCcrH6lAXWZMHnTFCupLbkQFzKNBfb3JAjWWrJyc3EIrYxcSE13HSo09zyirF7yaeV3sKgR+70gtqpFFZL9kw+BWGlQYk0rq3gxriwwBXLLeCKkLRjoGCQ67CQTGp0+m64dH9vl+Avfbp/DRMyVpIKazBlNgv70YceSfCZ98gsTNyqf1r5RRPyPB+ZZ0GrZGDF0bTTGiYdnFEB4Y6Wdo2RfifSml0uFslg0QTixrM73TdNy+/AFOgzflm5Gk7jcy0QSOO2UEEvqLsQ8lxFGyMFtvfgcrJTALs6Jh5xWLeDLpAFa2uVGcdxUQrML4HRrY4E2FgoHnfpk0E0ivpxSY2NHYzsLOj9J1y39i3adQbKf4ySs/wJvtzF7iB/VLm4xnvLnQyjpDXegBGnLqervdZwla7jTVBxlKDf92B4twx4wSoDV9e3Q5/0cQxRkYoS9hG/rO6JZ9a5hvINwnXCa9JIDEvg9ArRhuoOP4xGMaOLrqRTPGbiiDNpTSHFkq6eTGQhuaIM9J2yVIrLycwZk7ufHrO6gtZfsYbi8Rl8Y/a15d84LIC3vtvKXK/A1uHbP79gj+9tkMuyYqfmvBC8ByNZ5TzWtK+VKNF2h+fd/vAXjIrVg7ndWxCmOdSFUftXgUdnzaehnbUamPvCeb5vx/SVKp1PNoj8Z84X/PgPoizpCg==\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nTresJS 3.9.0\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/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.",[],694,"Invalid watch source error when declaring a CatmullRomCurve3","2024-05-31T23:36:28Z","https://github.com/Tresjs/tres/issues/694",0.73782223,{"description":2893,"labels":2894,"number":2901,"owner":2868,"repository":2869,"state":2870,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Description\r\n\r\nCurrently, Tres core does not accept kebab-case for compound property names in \"pierced\" paths like `shadow.mapSize.height`.\r\n\r\nUsers must write `:shadow-mapSize-height`. `:shadow-map-size-height` is not accepted.\r\n\r\n`attach=\"kebab-string\"` accepts kebab-case for compound property names.\r\n\r\n### Suggested solution\r\n\r\nUse the same logic as `attach`.\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/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.",[2895,2898],{"name":2896,"color":2897},"feature","c2e0c6",{"name":2899,"color":2900},"p3-significant","2C78E3",873,"Allow compound property names to be kebab-cased","2024-11-27T10:10:40Z","https://github.com/Tresjs/tres/issues/873",0.73816323,{"description":2907,"labels":2908,"number":2915,"owner":2868,"repository":2869,"state":2870,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### Describe the bug\n\nCan't seem to use TresDirectionalLightHelper in the simplest way.\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqdVW1P2zAQ/itW0MSmtUlaYNoyNrF2Y2MaAwHfCB9McjQGx7Zs922I/76z07QJMChro6q+l+eeO99dboMzDeaLUuFkDEES7JpMM2WJATtWhFMx+pQG1qTB51SwUkltyS0xBeVcTk/gityRKy1Lsonemw0LBzqkYkLN0mLPouzaRJnUsPmxYXukL5kdSmG15I+YMxBWGueRikwKYwlno8K64J8aTF6/ScVuVLFHrniwUCpOLeCJkN0GoykTuZx2DfsDJONAdTeTXGpMdON9/+tguOOzJfjxXsegjYLMsgkMaQmakkRJwyyTAl3OP3SIey7SgES1WzulpdihHYIp2gDdfofgEzuEREtLa0XcIYfUFuHxQaVdwNTJSAHfQZZg9ZwkVI+M8+l1SC/c6ZCtJp9G6DMpBYKCZpSTB2mvqEa1w9PckaJ7XLCMGtvF+8DStsMO5OwRno5k/fMirtv77vsfXLHGrtQPK3mqCtCrWq7NZH8wiLcGzzL5yrTrHiko/+U6l2i4Qve6i92t3yspstz23cCEBYGqOSp6Yb9d5XZf3Y/yA7gCvSp4Ha5DluX2c+EpV4OBot2oMTV4NHbO3d/ClryTikuZz8mt8ysRl4mExDiXhCia50yM6mMBLlhCenH8ygumLLfF8nyXig2qVAX0jC0hlzS7GWk5Fnk1pgnZiGMXB2Fw4D3BoBNU66RbUhVeGylwlXn4dKHADZZUAZ2suYucIg0Ka5VJoijLBfrnwNlEhwJsJFQZNc33tsN+2I9yZmzkxGidBliae8DV1noJduWB8HEYdwXMbNhbRVlo28HsFOiNomKdFJa2PkCNXAvDkjmfJnahYS1cZ7eHiO+QdvQWTNmsBr4VxgbWLnPDfK8XhzuIiKsaZmHZLvLCDsdAQ/4C4MrhKWg07OZQsjVAa1OX/Hb4LuLssgnpELFD77A1rcH31hUb3WvMTJaKcdBHyo1tu0H9W+2nl1k9hiW/rIDs5hH5tZlVlI+xWUBPsNyrq8RRBVupv53+xs5qKEuZj/nicv6hPAEj+dhxrMwGOIpIu2Hn2R74OcMtcGa+zfzaWiTVImrnCrz0vF6yy16rBBe+cN7eX8fwiSqtMtsKt5YFv/sLFQ3fhw==\n\n### Steps to reproduce\n\nUsing the Tres playground, I've added `\u003CTresDirectionalLightHelper :args=\"[lightRef, 5]\" />` just below the `TresDirectionalLight`, and sets it ref property to a shallow ref. This seems to cause an error in the library:\r\n\r\n```\r\nthree.module.js:52035 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'matrixWorld')\r\n at new Lm (three.module.js:52035:23)\r\n at n (tres.js:1202:14)\r\n at mountElement (runtime-dom.esm-browser.js:5971:21)\r\n at processElement (runtime-dom.esm-browser.js:5945:7)\r\n at patch (runtime-dom.esm-browser.js:5813:11)\r\n at mountChildren (runtime-dom.esm-browser.js:6057:7)\r\n at processFragment (runtime-dom.esm-browser.js:6239:7)\r\n at patch (runtime-dom.esm-browser.js:5799:9)\r\n at ReactiveEffect.componentUpdateFn [as fn] (runtime-dom.esm-browser.js:6440:11)\r\n at ReactiveEffect.run (runtime-dom.esm-browser.js:471:19)\r\n```\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.",[2909,2912],{"name":2910,"color":2911},"bug","d73a4a",{"name":2913,"color":2914},"p4-important-bug","D93F0B",860,"TresDirectionalLightHelper Uncaught (in promise): Cannot read properties of undefined (reading 'matrixWorld')","2024-10-19T11:51:58Z","https://github.com/Tresjs/tres/issues/860",0.73821837,{"description":2921,"labels":2922,"number":2923,"owner":2868,"repository":2869,"state":2870,"title":2924,"updated_at":2925,"url":2926,"score":2927},"## Problem\r\n\r\nThis message ...\r\n\r\n```\r\nUncaught (in promise) Error: useTresContext must be used together with useTresContextProvider\r\n```\r\n\r\n... is emitted as an error whenever `useTresContext` is called without a `provide`ing context. I.e., it's called without, or in the same file as a `TresCanvas`.\r\n\r\nIt's not only thrown when users call `useTresContext`, but also when they call anything that eventually touches `useTresContext`. This includes commonly used functions like `useLoop`. \r\n\r\nBut in that case, the error message doesn't point the user in a helpful direction.\r\n\r\n## Solution\r\n\r\n1) [Offer constructive advise](https://www.nngroup.com/articles/error-message-guidelines/) for fixing the most common problems that generate the message. Something like: \"use* should be moved to a child component of \u003CTresCanvas />`.\" \r\n2) Create a small write-up on tresjs.org. Link to the write-up in the error message.\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/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.",[],878,"Improve error message: `Uncaught (in promise) Error: useTresContext must be used together with useTresContextProvider`","2024-12-02T05:54:34Z","https://github.com/Tresjs/tres/issues/878",0.74054164,{"description":2929,"labels":2930,"number":2940,"owner":2868,"repository":2869,"state":2870,"title":2941,"updated_at":2942,"url":2943,"score":2944},"### Describe the bug\n\nI tried writing this code in `tresjs v 4.0.2`\r\n```vue \u003CTresGroup>\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003COrbitControls />\r\n \u003CTresAmbientLight :intensity=\"0.5\" color=\"red\" />\r\n \u003CTresMesh ref=\"boxRef\" :position=\"[0, 2, 0]\">\r\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003CTresAxesHelper />\r\n \u003CTresGridHelper :args=\"[10, 10, 0x444444, 'teal']\" />\r\n \u003C/TresGroup>\r\n````\r\nThen I got this\r\n\r\n\r\n**However, it can run correctly in `v3.9.0`**\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/~/github.com/hexianWeb/starter\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n_No response_\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.",[2931,2934,2937],{"name":2932,"color":2933},"question","d876e3",{"name":2935,"color":2936},"waiting for author","B145BC",{"name":2938,"color":2939},"p2-edge-case","ABCC40",727,"`Camera` wrapped by `TresGroup` cannot be used properly after `version 4.0`","2024-06-15T11:45:11Z","https://github.com/Tresjs/tres/issues/727",0.74211055,{"description":2946,"labels":2947,"number":2950,"owner":2868,"repository":2869,"state":2951,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Describe the bug\n\nFirst of all, thanks @alvarosabu for implementing #806.\r\n\r\nI went to try it out today, but it wasn't working. After some debugging, I realized it's because we are using [Symbol keys](https://vuejs.org/guide/components/provide-inject#working-with-symbol-keys) for many of our provides.\r\n\r\n`Object.entries` only includes string-keyed properties, so the Symbol-keyed properties are not included.\r\n\r\nEither `Object.getOwnPropertySymbols` or `Reflect.ownKeys` should be able to at least get the symbol keys.\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-wkbbis?file=src%2FApp.vue,src%2Fcomponents%2FTheExperience.vue,src%2Fcomponents%2FSubComponent.vue,package.json\n\n### Steps to reproduce\n\nRun the Stackblitz project (`npm install && npm run dev`) if not automatically run.\r\n\r\nThe console will have the following log messages:\r\n\r\n```\r\nTheExperience.vue string-keyed string-keyed\r\nTheExperience.vue symbol-keyed symbol-keyed\r\n```\r\n\r\nThese are the values of two injections provided in `App.vue`.\r\n\r\nClicking the box logs the following:\r\n\r\n```\r\nSubComponent.vue string-keyed string-keyed\r\nSubComponent.vue symbol-keyed undefined\r\n```\r\n\r\nAs the symbol-keyed provision can not be read inside the `TresCanvas`.\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.",[2948,2949],{"name":2910,"color":2911},{"name":2913,"color":2914},849,"closed","Provide/Inject from Vue component not working with Symbol keys","2024-10-12T14:15:04Z","https://github.com/Tresjs/tres/issues/849",0.66202444,{"description":2957,"labels":2958,"number":2965,"owner":2868,"repository":2869,"state":2951,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### Description\n\nTo nudge users and contributors to use `shallowRef` over `ref`, convert `ref(TresObject)` to `shallowRef(TresObject)` in the docs and playgrounds.\r\n\r\n## Context\r\n\r\nAccording to the Vue docs:\r\n\r\n> shallowRef() is typically used for performance optimizations of large data structures, or integration with external state management systems.\r\n\r\nhttps://vuejs.org/api/reactivity-advanced.html\r\n\r\n`TresObject`s are \"large data structures\". Each one typically holds a reference to `context`, which contains `scene`, `renderer`, etc.\r\n\r\nAfter a rough regex search for `\\bref\\b`, it appears that the Tres docs and playgrounds have 100+ occurrences of `ref(TresObject)`. Many of those can be converted to `shallowRef(TresObject)` with no loss of intent/functionality.\r\n\r\n## Meta\r\n\r\nDiscussed among the core team on Discord\n\n### Suggested solution\n\nConvert ref(TresObject) to shallowRef(TresObject) in the docs and playgrounds.\n\n### Alternative\n\nLeave as is.\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.",[2959,2962],{"name":2960,"color":2961},"performance","3F1D85",{"name":2963,"color":2964},"p1-chore","BFD4F2",778,"Docs/playgrounds: change `ref(TresObject)` to `shallowRef(TresObject)`","2024-07-17T09:31:19Z","https://github.com/Tresjs/tres/issues/778",0.6800148,{"description":2971,"labels":2972,"number":2980,"owner":2868,"repository":2869,"state":2951,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Description\n\nCurrently, `TresObject3D#material` doesn't allow to set array. My suggestion is to make Array acceptable as well.\r\n\r\nhttps://github.com/Tresjs/tres/blob/main/src/types/index.ts#L43\r\n\r\n```\r\n- material?: THREE.Material & TresBaseObject\r\n+ material?: THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]\r\n```\r\n\r\n## (Personal) reason\r\n\r\nI use TresJS and [spine-ts THREE.JS](https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/README.md). \r\n\r\nTHREE.Mesh#material's type is `Material | Material[]`. (https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/three/src/objects/Mesh.d.ts#L24)\r\n\r\nspine-ts' set Array material according to THREE's type. (https://github.com/EsotericSoftware/spine-runtimes/blob/4.1/spine-ts/spine-threejs/src/MeshBatcher.ts#L60)\r\n\r\nHowever, `TresObject3D#material` doesn't allow to set Array material, when a spine's mesh is rendered in Scene of TresJS and a material**s** in spine's mesh are evaluate, TresJS throws runtime error.\r\n\r\n\r\n## Basis that my suggestion is reasonable\r\n\r\nA type of THREE.Mesh#material extending THREE.Object3D is `Material | Material[]`, so I think it's reasonable that a type of `TresObject3D#material` extending THREE.Object3D is `THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]`.\r\n\n\n### Suggested solution\n\nhttps://github.com/Tresjs/tres/blob/main/src/types/index.ts#L43\r\n\r\n```\r\n- material?: THREE.Material & TresBaseObject\r\n+ material?: THREE.Material & TresBaseObject | (THREE.Material & TresBaseObject)[]\r\n```\r\n\r\nand adding logic for array.\n\n### Alternative\n\nnothing. I currently use pnpm patch and add logic for array.\n\n### Additional context\n\nI can create PR for this suggestion.\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.",[2973,2976,2979],{"name":2974,"color":2975},"types","5C076E",{"name":2977,"color":2978},"PR welcome","2D76B0",{"name":2899,"color":2900},496,"Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.7042418,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2G9CtMKfApiIAclCquFQiRn8186swoP2hJ5YFU7Ul4k":-1},"/Tresjs/tres/481"]