\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.",[2905],{"name":2868,"color":2869},905,"tres","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.7213283,{"description":2913,"labels":2914,"number":2915,"owner":2877,"repository":2907,"state":2879,"title":2916,"updated_at":2917,"url":2918,"score":2919},"### 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.7353738,{"description":2921,"labels":2922,"number":217,"owner":2877,"repository":2932,"state":2879,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### 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.",[2923,2926,2929],{"name":2924,"color":2925},"feature","c2e0c6",{"name":2927,"color":2928},"investigation","D03599",{"name":2930,"color":2931},"p2-nice-to-have","D4C5F9","rapier","Cloth simmulator","2024-10-04T10:54:33Z","https://github.com/Tresjs/rapier/issues/135",0.750338,{"description":2938,"labels":2939,"number":2942,"owner":2877,"repository":2878,"state":2879,"title":2943,"updated_at":2944,"url":2945,"score":2946},"### Description\n\nAs a developer using TresJS, I would like an equivalent of Three.js's `instancedMesh` to improve performance.\r\n\r\n\n\n### Suggested solution\n\n[Drei's `\u003CInstances />`](https://github.com/pmndrs/drei/blob/514be0d1ff88b43c07cf246da9dca3517ea14d9a/src/core/Instances.tsx#L22)\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.",[2940,2941],{"name":2924,"color":2925},{"name":2930,"color":2931},342,"Equivalent of Three.js's `InstancedMesh`","2024-04-02T09:44:50Z","https://github.com/Tresjs/cientos/issues/342",0.7614975,{"description":2948,"labels":2949,"number":2951,"owner":2877,"repository":2897,"state":2952,"title":2953,"updated_at":2954,"url":2955,"score":2956},"**Is your feature request related to a problem? Please describe.**\r\nWould be pretty nice if just by using `useControls` the vue component gets teleported on added to the VDom three instead of having to import it\r\n\r\nSame for CSS https://www.npmjs.com/package/vite-plugin-css-injected-by-js\r\n\r\n",[2950],{"name":2888,"color":2889},73,"closed","Avoid having to import component and styles","2023-12-13T10:00:34Z","https://github.com/Tresjs/leches/issues/73",0.4511576,{"description":2958,"labels":2959,"number":2961,"owner":2877,"repository":2907,"state":2952,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Description\r\n\r\nAs a developer using TresJS ...\r\n\r\n## Problem\r\n\r\nI forget to `lint --fix` before pushing. Others do too. This leads to messier commit histories, noisier diffs, and wasted time.\r\n\r\n## Suggested solution\r\n\r\nAdd a client-side pre-push [git hook](https://git-scm.com/book/en/v2/Customizing-Git-Git-Hooks) to `lint --fix` the project and abort the push if errors exist. \r\n\r\nBy default, the hook would run `lint --fix` during a push, before any objects have been transferred.\r\n\r\nIf there are no linter errors after running `lint --fix`, it would:\r\n\r\n* continue the push\r\n\r\nIf there are unfixable-by-the-linter errors, it would:\r\n\r\n* abort the push\r\n* report the errors (or filenames with errors) and instruct the user to fix them \r\n* give the user instructions for bypassing the linter step and pushing despite errors\r\n\r\n## Advantages\r\n\r\n* Reduce the number of PRs that fail the CI lint step\r\n* Reduce the amount of diff \"noise\" due to `chore(lint): fix linter errors`\r\n* Reduce mental load when pushing – no need to remember to lint\r\n\r\n## Disadvantages\r\n\r\n* Some new contributors might be turned away. E.g. maybe the linter fails and they can't figure out the next step.\r\n* If linter errors make it into `main`, everyone's `git push` based on the branch will initially fail.\r\n* `pnpm lint --fix` takes a while to run.\r\n\r\n### Alternative\r\n\r\nDo nothing. Keep the project as-is.\r\n\r\n### Additional context\r\n\r\nThe project runs a linter as a CI step and fails unlinted PRs already.\r\n\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.",[2960],{"name":2930,"color":2931},590,"Git pre-push hook to `lint --fix` the project","2024-04-07T23:51:17Z","https://github.com/Tresjs/tres/issues/590",0.6771687,{"description":2967,"labels":2968,"number":2970,"owner":2877,"repository":2907,"state":2952,"title":2971,"updated_at":2972,"url":2973,"score":2974},"### Describe the bug\n\nWhenever we unmount the TresCanvas on route change, for example, we are recursively disposing and deleting scene references. This seems to interfere with Helper's own disposal cycle.\n\n```\nchunk-TMRGR37B.js?v=d91265db:20290 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispose')\n at DirectionalLightHelper.dispose (chunk-TMRGR37B.js?v=d91265db:20290:30)\n at disposeObject3D (index.ts:302:14)\n at index.ts:294:29\n at Array.forEach (\u003Canonymous>)\n at disposeObject3D (index.ts:294:12)\n at dispose (TresCanvas.vue:162:3)\n at unmountCanvas (TresCanvas.vue:183:3)\n```\n\n### Reproduction\n\nInternal\n\n### Steps to reproduce\n\n1. Add a helper to the scene\n2. Change route.\n\n### System Info\n\n```shell\nSystem:\n OS: macOS 15.2\n CPU: (8) arm64 Apple M1 Pro\n Memory: 192.69 MB / 16.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 20.11.0 - /usr/local/bin/node\n Yarn: 1.22.19 - /usr/local/bin/yarn\n npm: 10.2.4 - /usr/local/bin/npm\n pnpm: 9.15.4 - ~/Library/pnpm/pnpm\n bun: 1.0.2 - ~/.bun/bin/bun\n Browsers:\n Brave Browser: 120.1.61.116\n Chrome: 132.0.6834.160\n Safari: 18.2\n npmPackages:\n @tresjs/cientos: 4.0.3 => 4.0.3 \n @tresjs/core: workspace:^ => 4.3.2 \n @tresjs/leches: https://pkg.pr.new/@tresjs/leches@9ad0cd3 => 0.14.1\n```\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.",[2969],{"name":2874,"color":2875},912,"Helpers disposal issue","2025-02-06T13:52:50Z","https://github.com/Tresjs/tres/issues/912",0.679661,{"description":2976,"labels":2977,"number":2978,"owner":2877,"repository":2907,"state":2952,"title":2979,"updated_at":2980,"url":2981,"score":2982},"### Description\n\nCurrently `useGLTF` only supports Draco compressed glTF models. It would be very nice to also support KTX2.0 textures.`\n\n### Suggested solution\n\nAdd `ktx2` and `transcoderPath` options in `useGLTF` and `GLTFModel`.\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.",[],559,"glTF KTX2.0 Texture support","2024-02-23T13:59:54Z","https://github.com/Tresjs/tres/issues/559",0.686051,["Reactive",2984],{},["Set"],["ShallowReactive",2987],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8C5yR1bLWUY2yeQeaUxeLImE01ei21rsUnvr-e5YnK0":-1},"/Tresjs/nuxt/73"]