\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,"Tresjs","cientos","open","Html content reactive support","2024-05-08T01:52:13Z","https://github.com/Tresjs/cientos/issues/407",0.64972264,{"description":2865,"labels":2866,"number":2867,"owner":2857,"repository":2868,"state":2859,"title":2869,"updated_at":2870,"url":2871,"score":2872},"### 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.6794291,{"description":2874,"labels":2875,"number":2882,"owner":2857,"repository":2883,"state":2859,"title":2884,"updated_at":2885,"url":2886,"score":2887},"### Description\n\nI'm looking to migrate an Aframe project to tresJS to benefit from vue bindings however I'm struggling to setup the camera to work with a VR headset.\r\n\r\nI've attempted loading the ArrayCamera and StereoGame classes built-in to threeJS and using the extend method in TresJS to be able to load them as components such as \u003CTresArrayCamera /> 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.",[2876,2879],{"name":2877,"color":2878},"investigation","D03599",{"name":2880,"color":2881},"waiting for author","B145BC",102,"XR","VR Style Camera (Aframe implementation or ArrayCamera/StereoCamera from three","2024-08-21T10:45:26Z","https://github.com/Tresjs/XR/issues/102",0.6843661,{"description":2889,"labels":2890,"number":2897,"owner":2857,"repository":2868,"state":2898,"title":2899,"updated_at":2900,"url":2901,"score":2902},"Since vue compiler doesn't recognize the TresJS as native, users need to add this code to the `vite.config.ts` \n\n isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',",[2891,2894],{"name":2892,"color":2893},"docs","0075ca",{"name":2895,"color":2896},"v2","FEE22E",169,"closed","Add customElement vue compiler code to docs","2023-03-30T06:19:00Z","https://github.com/Tresjs/tres/issues/169",0.63459456,{"description":2904,"labels":2905,"number":2910,"owner":2857,"repository":2868,"state":2898,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Describe the bug\n\nIt seems like Tres.js is no longer working in Firefox. Even on your official documentation all examles render just a black canvas.\r\nI would really like to use Tres.js in projects of my company, but I am unable to do this if Firefox is not supported or working :(\n\n### Reproduction\n\nhttps://tresjs.org/guide/\n\n### Steps to reproduce\n\nThe first and all other examples of this page.\n\n### System Info\n\n```shell\nWindows 10\r\nFirerfiox version 114.0.1 (64-Bit)\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.",[2906,2909],{"name":2907,"color":2908},"question","d876e3",{"name":2880,"color":2881},310,"Black Canvas in Firefox","2023-06-20T07:13:04Z","https://github.com/Tresjs/tres/issues/310",0.638015,{"description":2916,"labels":2917,"number":2927,"owner":2857,"repository":2868,"state":2898,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### 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.",[2918,2921,2924],{"name":2919,"color":2920},"types","5C076E",{"name":2922,"color":2923},"PR welcome","2D76B0",{"name":2925,"color":2926},"p3-significant","2C78E3",496,"Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.649077,{"description":2933,"labels":2934,"number":2945,"owner":2857,"repository":2868,"state":2898,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Describe the bug\n\nDetails on https://discord.com/channels/1047126995424780288/1101057616324603914/1168533469148745768\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-c3kpch?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n`npm run dev`\r\n\r\nYou will see how the text resets to initial position\n\n### System Info\n\n```shell\nSystem:\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.9.2 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: 2.1.2 => 2.1.2 \r\n @tresjs/core: 2.1.2 => 2.1.2 \r\n vite: ^4.3.9 => 4.4.11 \r\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/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.",[2935,2938,2941,2944],{"name":2936,"color":2937},"bug","d73a4a",{"name":2939,"color":2940},"help wanted","008672",{"name":2942,"color":2943},"performance","3F1D85",{"name":2877,"color":2878},430,"Passing computed or ref values as props triggers a re-renderer","2024-03-25T15:22:13Z","https://github.com/Tresjs/tres/issues/430",0.6539178,{"description":2951,"labels":2952,"number":2953,"owner":2857,"repository":2954,"state":2898,"title":2955,"updated_at":2956,"url":2957,"score":2958},"So there is my code. And my canvas has black background and i wanna change it to transparent but it doesnt work. PLS HELP😿\r\n\r\n\u003Cscript setup>\r\n import { TresCanvas } from \"@tresjs/core\";\r\n import { OrbitControls, useFBX } from \"@tresjs/cientos\";\r\n\r\n const path = \"/src/assets/model/room.fbx\";\r\n const scene = await useFBX(path);\r\n console.log(scene);\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera :position=\"[3, 2, 5]\" />\r\n \u003COrbitControls />\r\n \u003CSuspense>\r\n \u003Cprimitive v-if=\"scene\" :object=\"scene\" scale=\"0.025\" />\r\n \u003C/Suspense>\r\n \u003CTresDirectionalLight :intensity=\"2\" :position=\"[3, 3, 3]\" />\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n",[],81,"lab","Good morning everynyan. How to change background to transparent","2023-12-25T05:01:44Z","https://github.com/Tresjs/lab/issues/81",0.67191434,{"description":2960,"labels":2961,"number":2962,"owner":2857,"repository":2868,"state":2898,"title":2963,"updated_at":2964,"url":2965,"score":2966},"**Is your feature request related to a problem? Please describe.**\r\nIn the current implementation, the check for intersecting objects happens on every single render cycle (see [here](https://github.com/Tresjs/tres/blob/b0a237edff2aaf2f25a344e0578ffde6dbb036b5/packages/tres/src/core/useInstanceCreator/index.ts#L287)).\r\n\r\n**Describe the solution you'd like**\r\nWe could change the code in a way that the intersections are only calculated when the pointer moves or when the canvas is being clicked. Maybe there is even a possibility to only check meshes in which the respective directives (`@click`, ...) are used. These changes would lead to performance improvements.\r\n\r\n**Suggested solution**\r\nSee above.",[],139,"Raycaster: Only check for intersections when pointer moves or on click events","2023-03-30T09:08:55Z","https://github.com/Tresjs/tres/issues/139",0.67755514,{"description":2968,"labels":2969,"number":2976,"owner":2857,"repository":2868,"state":2898,"title":2977,"updated_at":2978,"url":2979,"score":2980},"### Description\r\n\r\nIdea from @userquin, the idea would be to use [Vue named scoped slots ](https://vuejs.org/guide/components/slots.html#named-scoped-slots) to be able to get the canvas context on the parent like this:\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"state?.renderer\"\r\n :args=\"[state?.camera, state?.renderer?.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\nOr even deconstruct it\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"{ camera, renderer }\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"renderer\"\r\n :args=\"[camera, renderer.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\n### Suggested solution\r\n\r\nAdd this to `TresCanvas.vue`\r\n\r\n```html\r\n\u003Ccanvas\r\n ref=\"canvas\"\r\n :data-scene=\"scene.uuid\"\r\n :class=\"$attrs.class\"\r\n :data-tres=\"`tresjs ${pkg.version}`\"\r\n :style=\"{\r\n display: 'block',\r\n width: '100%',\r\n height: '100%',\r\n position: windowSize ? 'fixed' : 'relative',\r\n top: 0,\r\n left: 0,\r\n pointerEvents: 'auto',\r\n touchAction: 'none',\r\n ...$attrs.style as Object,\r\n }\"\r\n >\r\n \u003Cslot v-bind=\"context\" />\r\n\u003C/canvas>\r\n```\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nrelated #565\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.",[2970,2973],{"name":2971,"color":2972},"wontfix","ffffff",{"name":2974,"color":2975},"has-workaround","AEA9C4",572,"Use default slot props to get Canvas context","2024-06-01T07:39:43Z","https://github.com/Tresjs/tres/issues/572",0.68299294,["Reactive",2982],{},["Set"],["ShallowReactive",2985],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fygTIoE48koekQozT-K08_DWf79Q0UGl5fVQfbo1LUkw":-1},"/Tresjs/cientos/495"]