`](https://drei.docs.pmnd.rs/staging/bounds#bounds) would be welcome.\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.",[2867,2870],{"name":2868,"color":2869},"feature","c2e0c6",{"name":2871,"color":2872},"p2-nice-to-have","D4C5F9",408,"Tresjs","cientos","open","\u003CBounds />","2024-12-17T18:07:35Z","https://github.com/Tresjs/cientos/issues/408",0.7522819,{"description":2882,"labels":2883,"number":2887,"owner":2874,"repository":2888,"state":2876,"title":2889,"updated_at":2890,"url":2891,"score":2892},"Atm the docs don't have search functionality, as we grow on features, it's important to have it\n\nhttps://vitepress.dev/reference/default-theme-search",[2884],{"name":2885,"color":2886},"docs","0075ca",152,"tres","Add Algolia Search to docs","2024-03-28T11:19:27Z","https://github.com/Tresjs/tres/issues/152",0.765258,{"description":2894,"labels":2895,"number":2899,"owner":2874,"repository":2888,"state":2876,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the bug\r\n\r\nIf you just add TresCanvas to your code, you will get the error.\r\n[Vue warn]: onUnmounted is called when there is no active component instance to be associated with. Lifecycle injection APIs can only be used during execution of setup(). If you are using async setup(), make sure to register lifecycle hooks before the first await statement.\r\n\r\nsample of stackblitz has same problem too.\r\n\r\n\r\nAn error occurs even if you only add TresCanvas to a vue project without anything.\r\n\r\nApp.vue\r\n```\u003Cscript setup lang=\"ts\">\r\nimport { RouterLink, RouterView } from 'vue-router'\r\nimport HelloWorld from './components/HelloWorld.vue'\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cheader>\r\n \u003Cimg alt=\"Vue logo\" class=\"logo\" src=\"@/assets/logo.svg\" width=\"125\" height=\"125\" />\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.",[2896],{"name":2897,"color":2898},"bug","d73a4a",905,"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.7720538,{"description":2905,"labels":2906,"number":2907,"owner":2874,"repository":2888,"state":2876,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### 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.7744759,{"description":2913,"labels":2914,"number":2917,"owner":2874,"repository":2888,"state":2876,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Description\n\nAs a developer using Tres I would like to have an easy and fast way to add or remove layers to my instances.\r\n\r\n\n\n### Suggested solution\n\nMy suggestion is something like:\r\n\r\n\u003CTresMesh v-layer:enable=\"1\" />\r\n\r\nWe should accept an array too\r\n\u003CTresMesh v-layer:enable=\"[1, 2, 3]\" />\r\n\r\nAnd of course other methods like: disable, test (maybe with a console.log), toggle\r\n\r\nFor more info, check:\r\nhttps://threejs.org/docs/index.html?q=layers#api/en/core/Layers\r\n\n\n### Alternative\n\nAny other alternative is considered\n\n### Additional context\n\nAs we discuss, you can achieve this by using template ref, but sometimes is just too much code, this Issue will could improve the UX\r\n\r\nFollowing the directives pattern (to make our user easier)\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.",[2915,2916],{"name":2868,"color":2869},{"name":2871,"color":2872},543,"v-layer directive","2024-03-30T15:32:13Z","https://github.com/Tresjs/tres/issues/543",0.7794674,{"description":2923,"labels":2924,"number":2925,"owner":2874,"repository":2875,"state":2926,"title":2927,"updated_at":2928,"url":2929,"score":2930},"### Description\r\n\r\nExpose access to helpers listed here https://github.com/yomotsu/camera-controls to enable easy camera animation. Some seem more useful than others.\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nWould look something like this:\r\n```js\r\n \u003CCameraControls ref=\"camcontrols\" />\r\nconst camcontrols = ref()\r\n\r\nwatchEffect(() => {\r\n camcontrols.moveTo(someNumberX.value, someNumberY.value, someNumberZ.value, true)\r\n})\r\n```\r\n",[],289,"closed","Pass CameraControls helpers through ref","2023-12-09T20:38:14Z","https://github.com/Tresjs/cientos/issues/289",0.7617264,{"description":2932,"labels":2933,"number":2941,"owner":2874,"repository":2888,"state":2926,"title":2942,"updated_at":2943,"url":2944,"score":2945},"Add more insightful changes\r\n\r\n- [x] Extend is no longer from `useCatalog` \r\n- [x] Models ref value getModel is deprecated\r\n- [x] Controls needs to be below the camera\r\n- [x] Change `three/examples/jsm` to `three/addons`",[2934,2935,2938],{"name":2885,"color":2886},{"name":2936,"color":2937},"v2","FEE22E",{"name":2939,"color":2940},"dx","1576AD",206,"Improve migration guide","2023-04-18T07:57:51Z","https://github.com/Tresjs/tres/issues/206",0.7659955,{"description":2947,"labels":2948,"number":2950,"owner":2874,"repository":2888,"state":2926,"title":2951,"updated_at":2952,"url":2953,"score":2954},"### Description\n\nAdd core team, contributors and sponsors page in docs\n\n### Suggested solution\n\nI think we can get this data using Github API (at least for the contributors part) to make it dynamic \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.",[2949],{"name":2885,"color":2886},287,"Add core team, contributors and sponsors page in docs","2023-06-26T07:19:25Z","https://github.com/Tresjs/tres/issues/287",0.77168363,{"description":2956,"labels":2957,"number":2971,"owner":2874,"repository":2888,"state":2926,"title":2972,"updated_at":2973,"url":2974,"score":2975},"### Describe \r\n\r\nAs a developer using TresJS, I would like the tone-mapping of the renderer to be set to `ACESFilmicToneMapping` as default.\r\n\r\nThis will introduce a Breaking change.\r\n\r\nDecisions based on feedback from the community: \r\n\r\n\r\n\r\n\r\n\r\n\r\nFrom left to right: r3f, Tres, Threlte\r\n\r\n\r\n\r\n\r\n## Docs\r\n\r\n[Render defaults](https://docs.pmnd.rs/react-three-fiber/api/canvas#render-defaults)\r\nCanvas uses [createRoot](https://docs.pmnd.rs/react-three-fiber/api/canvas#createroot) which will create a translucent THREE.WebGLRenderer with the following constructor args:\r\n\r\nantialias=true\r\nalpha=true\r\npowerPreference=\"high-performance\"\r\nand with the following properties:\r\n\r\noutputColorSpace = THREE.SRGBColorSpace\r\ntoneMapping = THREE.ACESFilmicToneMapping\r\nIt will also create the following scene internals:\r\n\r\nA THREE.Perspective camera\r\nA THREE.Orthographic cam if orthographic is true\r\nA THREE.PCFSoftShadowMap if shadows is true\r\nA THREE.Scene (into which all the JSX is rendered) and a THREE.Raycaster\r\nIn recent versions of threejs, THREE.ColorManagement.enabled will be set to true to enable automatic conversion of colors according to the renderer's configured color space. R3F will handle texture color space conversion. For more on this topic, see https://threejs.org/docs/#manual/en/introduction/Color-management.\r\n\r\n",[2958,2961,2964,2965,2968],{"name":2959,"color":2960},"good first issue","7057ff",{"name":2962,"color":2963},"help wanted","008672",{"name":2868,"color":2869},{"name":2966,"color":2967},"discussion 💭","AE4C80",{"name":2969,"color":2970},"v4","7980EA",492,"Set tone-mapping default to ACESFilmicToneMapping","2024-01-27T11:58:47Z","https://github.com/Tresjs/tres/issues/492",0.77262175,{"description":2977,"labels":2978,"number":2980,"owner":2874,"repository":2875,"state":2926,"title":2981,"updated_at":2982,"url":2983,"score":2984},"### Description\n\nTo allow users to easily load video as a texture\n\n### Suggested solution\n\nhttps://github.com/pmndrs/drei#usevideotexture\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.",[2979],{"name":2959,"color":2960},107,"UseVideoTexture","2023-08-21T17:01:07Z","https://github.com/Tresjs/cientos/issues/107",0.7730426,["Reactive",2986],{},["Set"],["ShallowReactive",2989],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fGX4jNsSDhX6TMnWR1lIYS1jQqStuzg86MCF1IsvHbG8":-1},"/Tresjs/post-processing/195"]