and \u003CTresStereoCamera /> but nothing works. I either get a blank black screen or a bluescreen with a line through it (when using the default example from the TresJS starter repo)\r\n\r\nThis is after being able to use \u003CTresPerspectiveCamera /> without any issues and just swapping out the camera used. Would appreciate any ideas or info how to implement this thanks.\n\n### Suggested solution\n\nImplement Array or StereoCamera as Tres JS native component preconfigured to work with VR.\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.",[2856,2859],{"name":2857,"color":2858},"investigation","D03599",{"name":2860,"color":2861},"waiting for author","B145BC",102,"Tresjs","XR","open","VR Style Camera (Aframe implementation or ArrayCamera/StereoCamera from three","2024-08-21T10:45:26Z","https://github.com/Tresjs/XR/issues/102",0.62303215,{"description":2871,"labels":2872,"number":2873,"owner":2863,"repository":2874,"state":2865,"title":2875,"updated_at":2876,"url":2877,"score":2878},"### Describe the bug\n\nRan into this issue when trying to integrate TresJS in my Astro project. To verify that it wasn't me doing something stupid, I switched to Alvaro's [tres-astro repository](https://github.com/alvarosabu/tres-astro) from the \"How to add 3D to Astro using TresJS\" video. I'm running into the same warning there. I also upgraded to the latest astro in the tres-astro repository, but still seeing the same error. As far as I can tell, the 3D model does show up. \r\n\r\nRemoving the TheExperience component and just trying to use TresCanvas also triggers the same warning. \r\n\r\n```\r\n(index):224 [Vue warn]: onUnmounted is called when there is no active component instance to be associated with. \r\nLifecycle injection APIs can only be used during execution of setup(). \r\nIf you are using async setup(), make sure to register lifecycle hooks before the first await statement.\r\n```\r\n\r\nCall Stack as shown in Edge \r\n| Method | | File|\r\n| --- | --- | --- |\r\n| warn$1 | @ | runtime-core.esm-bundler.js:51|\r\n| injectHook | @ | runtime-core.esm-bundler.js:2808|\r\n| (anonymous) | @ | runtime-core.esm-bundler.js:2815|\r\n| yr | @ | tres.js:831|\r\n| _r | @ | tres.js:889|\r\n| (anonymous) | @ | tres.js:1058|\r\n| (anonymous) | @ | index.mjs:71|\r\n| trigger | @ | index.mjs:71|\r\n| c | @ | tres.js:944|\r\n| setTimeout | | |\r\n| c | @ | tres.js:944|\r\n| wr | @ | tres.js:949|\r\n| yt | @ | tres.js:972|\r\n| br | @ | tres.js:1056|\r\n| (anonymous) | @ | tres.js:1638|\r\n| (anonymous) | @ | runtime-core.esm-bundler.js:2815|\r\n| callWithErrorHandling | @ | runtime-core.esm-bundler.js:199|\r\n| callWithAsyncErrorHandling | @ | runtime-core.esm-bundler.js:206|\r\n| hook.__weh.hook.__weh | @ | runtime-core.esm-bundler.js:2795|\r\n| flushPostFlushCbs | @ | runtime-core.esm-bundler.js:385|\r\n| hydrate2 | @ | runtime-core.esm-bundler.js:1675|\r\n| mount | @ | runtime-core.esm-bundler.js:3939|\r\n| app.mount | @ | runtime-dom.esm-bundler.js:1786|\r\n| (anonymous) | @ | client.js:45|\r\n| await in (anonymous) | | |\r\n| (anonymous) | @ | (index):224|\r\n| e | @ | (index):224|\r\n| await in e | | |\r\n| start | @ | (index):224|\r\n| childrenConnectedCallback | @ | (index):224|\r\n| await in childrenConnectedCallback | | |\r\n| e | @ | (index):224|\r\n| (anonymous) | @ | (index):224|\n\n### Reproduction\n\nhttps://github.com/alvarosabu/tres-astro\n\n### Steps to reproduce\n\nClone the repository \r\nrm the package-lock.json file \r\nnpm install\r\nnpm run dev\n\n### System Info\n\n```shell\nnpx envinfo --system --npmPackages '{vite,@tresjs/*,three,vue,@astrojs/*}' --binaries\r\n --browsers --npmGlobalPackages '{astro}'\r\n\r\n System:\r\n OS: Windows 11 10.0.22631\r\n CPU: (28) x64 Intel(R) Core(TM) i7-14700K\r\n Memory: 40.84 GB / 63.77 GB\r\n Binaries:\r\n Node: 20.11.1 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - C:\\Program Files (x86)\\Yarn\\bin\\yarn.CMD\r\n npm: 10.4.0 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Edge: Chromium (127.0.2651.74)\r\n Internet Explorer: 11.0.22621.3527\r\n npmPackages:\r\n @astrojs/mdx: ^3.1.4 => 3.1.9\r\n @astrojs/rss: ^4.0.7 => 4.0.10\r\n @astrojs/sitemap: ^3.1.6 => 3.2.1\r\n @astrojs/vue: ^4.5.0 => 4.5.3\r\n @tresjs/cientos: ^4.0.0 => 4.0.3\r\n @tresjs/core: ^4.2.7 => 4.3.1\r\n three: ^0.167.1 => 0.167.1\r\n vue: ^3.4.38 => 3.5.13\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.",[],886,"tres","Using TresJS with Astro : [Vue warn]: onUnmounted is called when there is no active component instance to be associated with...","2024-12-20T10:08:26Z","https://github.com/Tresjs/tres/issues/886",0.6505107,{"description":2880,"labels":2881,"number":2885,"owner":2863,"repository":2886,"state":2865,"title":2887,"updated_at":2888,"url":2889,"score":2890},"### Description\n\nAs a developer I would like to have a easy way to use the [Flow](https://threejs.org/examples/?q=curve#webgl_modifier_curve) instance in ThreeJs\n\n### Suggested solution\n\nCould be base on drei implementation https://github.com/pmndrs/drei?tab=readme-ov-file#curvemodifier\r\n\r\nBut I would like to add an SVG path option\n\n### Alternative\n\nAny other alternative is considered\n\n### Additional context\n\nWhich name do you prefer for this component\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.",[2882],{"name":2883,"color":2884},"p2-nice-to-have","D4C5F9",417,"cientos","FollowPath/Flow or CurveModifier","2024-05-16T12:36:06Z","https://github.com/Tresjs/cientos/issues/417",0.6563031,{"description":2892,"labels":2893,"number":2900,"owner":2863,"repository":2901,"state":2865,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Describe the bug\n\nWhile working on the `Joint` I wanted to reproduce the same custom collider exportation, and when I wanted to watch the `Joint` props, I wasn't able to do so...\r\n\r\nI figured that the Vue component `setup function` needs a `Proxy` as the first parameter to **reflect** changes and here:\r\nhttps://github.com/Tresjs/rapier/blob/main/src/components/colliders/index.ts#L29-L42\r\n```ts\r\nprops: {\r\n ...BaseCollider.props,\r\n shape: undefined,\r\n },\r\n setup(props, ctx) {\r\n return {\r\n ...BaseCollider?.setup?.(\r\n { ...props, shape } as Parameters\u003C\r\n Exclude\u003C(typeof BaseCollider)['setup'], undefined>\r\n >['0'],\r\n ctx,\r\n ),\r\n }\r\n },\r\n```\r\n\r\nWe are destructing it which is equivalent to passing a native `Object`\n\n### Reproduction\n\n---\n\n### Steps to reproduce\n\n---\n\n### System Info\n\n```shell\n---\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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2894,2897],{"name":2895,"color":2896},"bug","d73a4a",{"name":2898,"color":2899},"collider","306B60",149,"rapier","Bug: custom collider props are not reactive anymore.","2024-11-19T23:52:46Z","https://github.com/Tresjs/rapier/issues/149",0.6639149,{"description":2907,"labels":2908,"number":2918,"owner":2863,"repository":2886,"state":2865,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### Description\n\nWould be awesome if there was arc ball controls added to tres\r\n\r\nThis control method is ideal for industrial applications (like CAD) and is what most engineers expect coming from software like solidworks, onshape, or fusion 360.\r\n\r\n\r\n\r\n\n\n### Suggested solution\n\nhttps://threejs.org/examples/misc_controls_arcball.html\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.",[2909,2912,2915],{"name":2910,"color":2911},"good first issue","7057ff",{"name":2913,"color":2914},"feature","c2e0c6",{"name":2916,"color":2917},"PR Welcome","2D76B0",490,"Arcball controlls helper","2024-09-12T19:58:43Z","https://github.com/Tresjs/cientos/issues/490",0.6647411,{"description":2924,"labels":2925,"number":2926,"owner":2863,"repository":2927,"state":2865,"title":2928,"updated_at":2929,"url":2930,"score":2931},"## Bug description\r\n\r\nAll controls created using `useControls` are added to all instances of `\u003CTresLeches />` even if they're in separate files.\r\n\r\n## Expected behavior\r\n\r\nAllow multiple, separate instances of Leches. Don't share state across multiple, separate files.\r\n\r\n## Reproduction\r\n[StackBlitz](https://stackblitz.com/edit/tresjs-basic-jmjdqy?file=src%2Fcomponents%2FTheExperience.vue)\r\n\r\n## Solution?\r\n\r\nMaybe create and return a unique controls instance from `useControls` that closes over the current controls state.\r\n\r\n```\r\nconst controls = useControls({\r\n wireframe: false,\r\n})\r\n\r\ncontrols.useControls( /* ... add more controls to this instance */ )\r\n```\r\n\r\nThen use like\r\n\r\n```\r\n\u003CTresLeches :controls=\"controls\" />\r\n```\r\n\r\n## Screenshot\r\n\r\n\u003Cimg width=\"567\" alt=\"Screenshot 2024-02-23 at 19 56 28\" src=\"https://github.com/Tresjs/leches/assets/20469369/44cef606-cd01-49b4-a8d9-9dfdd3d0566c\">\r\n\r\n\r\n## Context\r\n\r\nWe use Leches for Cientos' docs and often have multiple separate examples of functionality in a given docs page. But we can't have multiple Leches menus on a given page without running into this bug.\r\n",[],98,"leches","Leches shares `useControls`; can't have multiple, distinct instances","2024-02-23T19:02:27Z","https://github.com/Tresjs/leches/issues/98",0.6674913,{"description":2933,"labels":2934,"number":2926,"owner":2863,"repository":2935,"state":2865,"title":2936,"updated_at":2937,"url":2938,"score":2931},"### Describe the bug\n\nI'm posting this here, as it seems to be related to the Nuxt module.\r\n\r\nI've already posted some more info here https://github.com/Tresjs/cientos/issues/369 and here https://github.com/orgs/Tresjs/discussions/642\r\n\r\nThe problem is that both `Levioso` and `MouseParallax` are not working as expected, while other stuff from `cientos` don't seem to have issues (in my case, 3d text is working).\r\n\r\nThe problem started with these two components not working only in development environment, but with the latest dependencies updates (probably caused by Nuxt), they don't work in the built production site too. (the problem with development is on a private project that I cannot share at the moment).\r\n\r\nThe issue with the production environment can be seen also on the linked repository, in the latest commits on the `main` branch. The latest working configuration is available at the `working` tag: https://github.com/stefanobartoletti/tresjs-playground/tree/working tag.\r\n\r\nA live demo is also available here https://tresjs-playground.vercel.app/3d-text\r\n\r\nIf more info is needed, please ask :)\r\n\n\n### Reproduction\n\nhttps://github.com/stefanobartoletti/tresjs-playground\n\n### Steps to reproduce\n\n- pnpm i\r\n- pnpm generate\r\n- pnpm preview\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.",[],"nuxt","`Levioso` and `MouseParallax` are not working as expected.","2024-05-17T09:28:20Z","https://github.com/Tresjs/nuxt/issues/98",{"description":2940,"labels":2941,"number":2942,"owner":2863,"repository":2886,"state":2865,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Describe the bug\r\n\r\nconst text = ref('this is text!')\r\n\r\nconst onClick = ( )=>{\r\n text.value='text change!'\r\n}\r\n\r\n\r\n\r\n \u003CTresMesh @click=\"onClick\" :position=\"[1, 1, 1]\">\r\n \u003CTresBoxGeometry />\r\n \u003CTresMeshNormalMaterial />\r\n \u003CHtml\r\n center\r\n transform\r\n :distance-factor=\"4\"\r\n :position=\"[0, 0, 0.65]\"\r\n :scale=\"[0.75, 0.75, 0.75]\"\r\n >\r\n \u003Ch1 class=\"bg-white dark:bg-dark text-xs p-1 rounded\">\r\n {{ text }}\r\n \u003C/h1>\r\n \u003C/Html>\r\n \u003C/TresMesh>\r\n\r\n\r\n### Reproduction\r\n\r\nN\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.",[],407,"Html content reactive support","2024-05-08T01:52:13Z","https://github.com/Tresjs/cientos/issues/407",0.66861653,{"description":2948,"labels":2949,"number":2958,"owner":2863,"repository":2874,"state":2959,"title":2960,"updated_at":2961,"url":2962,"score":2963},"### 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.",[2950,2953,2955],{"name":2951,"color":2952},"types","5C076E",{"name":2954,"color":2917},"PR welcome",{"name":2956,"color":2957},"p3-significant","2C78E3",496,"closed","Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.58828294,{"description":2965,"labels":2966,"number":2967,"owner":2863,"repository":2886,"state":2959,"title":2968,"updated_at":2969,"url":2970,"score":2971},"**Is your feature request related to a problem? Please describe.**\r\nContinuing with the controls abstraction, will be useful to add MapControls to cientos catalog\r\n\r\n**Describe the solution you'd like**\r\n\u003CMapControls \r\nscreen-space-panning\r\n />\r\n\r\n**Suggested solution**\r\nSimilar to other controls already implemented\r\n\r\n",[],52,"MapControls abstraction","2023-05-03T17:42:07Z","https://github.com/Tresjs/cientos/issues/52",0.6104094,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$ffNNNlBPxSBt-QTCnYKjNZRsHRrE0XfHBKDV56Mq6DcM":-1},"/Tresjs/tres/310"]