\r\n\r\n \u003Cdiv class=\"wrapper\">\r\n \u003CHelloWorld msg=\"You did it!\" />\r\n\r\n \u003Cnav>\r\n \u003CRouterLink to=\"/\">Home\u003C/RouterLink>\r\n \u003CRouterLink to=\"/about\">About\u003C/RouterLink>\r\n \u003C/nav>\r\n \u003C/div>\r\n \u003C/header>\r\n\r\n \u003CRouterView />\r\n\u003C/template>\r\n\r\n\u003Cstyle scoped>\r\n\r\n\u003C/style>\r\n```\r\n\r\nAboutView\r\n```\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"about\">\r\n \u003Ch1>This is an about page\u003C/h1>\r\n \u003Cdiv class=\"canvas\">\r\n \u003CTresCanvas>\r\n \u003C!-- Your scene here -->\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n \u003C/div>\r\n\u003C/template>\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core'\r\n\u003C/script>\r\n\u003Cstyle>\r\n@media (min-width: 1024px) {\r\n .about {\r\n min-height: 100vh;\r\n display: flex;\r\n align-items: center;\r\n }\r\n}\r\n.canvas {\r\n width: 100px;\r\n height: 100px;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\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\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 13th Gen Intel(R) Core(TM) i7-1355U\r\n Memory: 1.70 GB / 7.76 GB\r\n Container: Yes\r\n Shell: 5.1.16 - /bin/bash\r\n Binaries:\r\n Node: 20.18.0 - ~/.nvm/versions/node/v20.18.0/bin/node\r\n npm: 11.0.0 - ~/.nvm/versions/node/v20.18.0/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.3 \r\n @tresjs/core: ^4.3.2 => 4.3.2 \r\n vite: ~6.0.6 => 6.0.6\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/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.",[2856],{"name":2857,"color":2858},"bug","d73a4a",905,"Tresjs","tres","open","I get an error when using TresCanvas. Like this .. ( onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can... )","2025-02-08T10:41:31Z","https://github.com/Tresjs/tres/issues/905",0.67452693,{"description":2868,"labels":2869,"number":2870,"owner":2860,"repository":2871,"state":2862,"title":2872,"updated_at":2873,"url":2874,"score":2875},"### 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,"cientos","Html content reactive support","2024-05-08T01:52:13Z","https://github.com/Tresjs/cientos/issues/407",0.68888843,{"description":2877,"labels":2878,"number":2885,"owner":2860,"repository":2861,"state":2862,"title":2886,"updated_at":2887,"url":2888,"score":2889},"### Description\n\nAs a maintainer of TresJS, I would like to clean up the core logic by refactoring it to use VueUse `createInjectionState` https://vueuse.org/shared/createInjectionState/#createinjectionstate instead\n\n### Suggested solution\n\nReplace manual context provider with something like:\n\n```ts\nconst [useTresContextProvider, useTresContext] = createInjectionState((props, emit) => {\n // Create refs with initial null values\n const scene = shallowRef\u003CTresScene | null>(null)\n const renderer = shallowRef\u003CWebGLRenderer | null>(null)\n const camera = shallowRef\u003CPerspectiveCamera | null>(null)\n const loop = createRenderLoop()\n\n // Render mode logic etc\n})\n\nexport { useTresContext, useTresContextProvider }\n```\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.",[2879,2882],{"name":2880,"color":2881},"p3-significant","2C78E3",{"name":2883,"color":2884},"v5","EFC959",961,"Refactor `useTresContextProvider` into `createInjectionState`","2025-03-18T15:30:44Z","https://github.com/Tresjs/tres/issues/961",0.69085425,{"description":2891,"labels":2892,"number":2893,"owner":2860,"repository":2861,"state":2862,"title":2894,"updated_at":2895,"url":2896,"score":2897},"### 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,"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.6933882,{"description":2899,"labels":2900,"number":2901,"owner":2860,"repository":2871,"state":2862,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Describe the bug\r\n\r\n* When the `\u003CEnvironment />` component is unmounted, reflections/lighting are not updated.\r\n* Some props – e.g., `blur` – do not have an effect.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-ucrrurnf?file=src%2Fcomponents%2FTheExperience.vue",[],569,"Environment: Lighting/reflections do not disappear when component is unmounted; props do not work","2024-12-19T16:37:20Z","https://github.com/Tresjs/cientos/issues/569",0.70961595,{"description":2907,"labels":2908,"number":2913,"owner":2860,"repository":2861,"state":2862,"title":2914,"updated_at":2915,"url":2916,"score":2917},"### Describe the bug\r\n\r\nDue to the debounced ref introduced in #512, the canvas only renders once the resize animation has finished.\r\n\r\nHow it's supposed to work\r\n\r\n\r\nIt can be fixed by moving renderer size update and the camera projection matrix update to before rendering or using useFps composable from vueuse to dynamically calculate debounceTime\r\n\r\n### Reproduction\r\n\r\nMonitor with refresh rate above 100 hz needed\r\n\r\nhttps://stackblitz.com/edit/stackblitz-starters-jtmew9?file=src%2FApp.vue\r\n### Steps to reproduce\r\n\r\nHave container of TresCanvas resize continuously. \r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.4 LTS 22.04.4 LTS (Jammy Jellyfish)\r\n CPU: (12) x64 AMD Ryzen 5 5600X 6-Core Processor\r\n Memory: 12.28 GB / 15.58 GB\r\n Container: Yes\r\n Shell: 5.8.1 - /usr/bin/zsh\r\n Binaries:\r\n Node: 22.8.0 - ~/.asdf/installs/nodejs/22.8.0/bin/node\r\n npm: 10.8.2 - ~/.asdf/plugins/nodejs/shims/npm\r\n pnpm: 9.9.0 - ~/.local/share/pnpm/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.2 => 4.0.2 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\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.",[2909,2910],{"name":2857,"color":2858},{"name":2911,"color":2912},"p3-minor-bug","F28C37",848,"Render issue with continuous resize animation","2024-10-18T20:46:48Z","https://github.com/Tresjs/tres/issues/848",0.7105472,{"description":2919,"labels":2920,"number":2923,"owner":2860,"repository":2861,"state":2862,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### Description\r\n\r\nAs a developer using TresJS, I want to have a `\u003CPortal>` component that can contain a separate `Scene` and `context`.\r\n\r\n### Suggested solution\r\n\r\nProvide a `\u003CPortal>` component similar to R3F.\r\n\r\n### Requirements\r\n\r\n- [ ] Add override-able pointer to `TresContext` (Also add as prop to TresCanvas: see #581 ); use vanilla `THREE.Vector2`, accept `Vector2` and `UsePointerOptions` as TresCanvas prop\r\n- [ ] Make these fields on `TresContext` swappable and (in some case injectable by the user): scene, camera, cameras, controls, raycaster, eventManager, sizes\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.",[2921,2922],{"name":2880,"color":2881},{"name":2883,"color":2884},789,"Portal","2025-02-06T09:59:01Z","https://github.com/Tresjs/tres/issues/789",0.7110216,{"description":2929,"labels":2930,"number":2931,"owner":2860,"repository":2861,"state":2862,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Describe the bug\n\n\u003CTresCanvas v-bind=\"canvasConfig\" ref=\"TresCanvasRef\">\r\n \u003Ctemplate v-for=\"(item,i) in lightSetting\">\r\n \u003Ccomponent ref=\"lightRef\" :is=\"item.type\" v-light-helper v-bind=\"item.config\" />\r\n \u003C/template>\r\n\u003C/TresCanvas>\r\n\u003Cscript>\r\nconst options = [ {\r\n label: '平行光',\r\n value: 'TresDirectionalLight',\r\n },\r\n {\r\n label: '点光源',\r\n value: 'TresPointLight',\r\n },\r\n {\r\n label: '聚光灯',\r\n value: 'TresSpotLight',\r\n },\r\n {\r\n label: '半球光',\r\n value: 'TresHemisphereLight',\r\n }]\r\n const lightSetting = ref([{\r\n type: 'TresDirectionalLight',\r\n config: {\r\n position: [5, 5, 5],\r\n targets: [0, 0, 0],\r\n color: '#ffffff',\r\n intensity: 1,\r\n castShadow: false\r\n }\r\n }\r\n ])\r\n\u003C/script>\r\n当我改变 type 值的时候就报错 Cannot read properties of null (reading 'children'),不加 v-light-helper的时候正常不会报错。\n\n### Reproduction\n\n还未上线\n\n### Steps to reproduce\n\n\u003CTresCanvas v-bind=\"canvasConfig\" ref=\"TresCanvasRef\">\r\n \u003Ctemplate v-for=\"(item,i) in lightSetting\">\r\n \u003Ccomponent ref=\"lightRef\" :is=\"item.type\" v-light-helper v-bind=\"item.config\" />\r\n \u003C/template>\r\n\u003C/TresCanvas>\r\n\u003Cscript>\r\nconst options = [ {\r\n label: '平行光',\r\n value: 'TresDirectionalLight',\r\n },\r\n {\r\n label: '点光源',\r\n value: 'TresPointLight',\r\n },\r\n {\r\n label: '聚光灯',\r\n value: 'TresSpotLight',\r\n },\r\n {\r\n label: '半球光',\r\n value: 'TresHemisphereLight',\r\n }]\r\n const lightSetting = ref([{\r\n type: 'TresDirectionalLight',\r\n config: {\r\n position: [5, 5, 5],\r\n targets: [0, 0, 0],\r\n color: '#ffffff',\r\n intensity: 1,\r\n castShadow: false\r\n }\r\n }\r\n ])\r\n\u003C/script>\r\n当我改变 type 值的时候就报错 Cannot read properties of null (reading 'children'),不加 v-light-helper的时候正常不会报错。\n\n### System Info\n\n```shell\nCannot read properties of null (reading 'children')\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.",[],871," Cannot read properties of null (reading 'children')","2024-11-13T01:30:10Z","https://github.com/Tresjs/tres/issues/871",0.7164423,{"description":2937,"labels":2938,"number":2945,"owner":2860,"repository":2861,"state":2946,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### 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.",[2939,2942],{"name":2940,"color":2941},"question","d876e3",{"name":2943,"color":2944},"waiting for author","B145BC",310,"closed","Black Canvas in Firefox","2023-06-20T07:13:04Z","https://github.com/Tresjs/tres/issues/310",0.67095625,{"description":2952,"labels":2953,"number":2954,"owner":2860,"repository":2871,"state":2946,"title":2955,"updated_at":2956,"url":2957,"score":2958},"### Description\n\nI would like to have a easy way to add shadows in my GLTF model component, just passing a simple prop\n\n### Suggested solution\n\n\u003CGLTFModel cast-shadow path=\"...\" />\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.",[],329,"Add cast-shadows props to exporter models","2024-01-12T15:38:37Z","https://github.com/Tresjs/cientos/issues/329",0.6803718,["Reactive",2960],{},["Set"],["ShallowReactive",2963],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$feZMHFedY4dPeBUHuQ6Nm1TABrhm6_SOd--QgBtzqz-I":-1},"/Tresjs/tres/572"]