`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.6785621,{"description":2874,"labels":2875,"number":2879,"owner":2866,"repository":2867,"state":2880,"title":2881,"updated_at":2882,"url":2883,"score":2884},"**Is your feature request related to a problem? Please describe.**\r\nIn the current implementation, `useTres` uses a [global state](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L100) which has some downsides.\r\n\r\n1. It prevents having multiple canvases on the same page. Fixing this issue might help solving #153 \r\n2. Fixing this issue might help solving #173 \r\n3. Global states are prone to [cross-request state pollution](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution) in the SSR context\r\n4. One could put anything inside the state by using [setState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L128), but there would be no representation of it in [TresState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L5). DX suffers from this.\r\n\r\n**Describe the solution you'd like**\r\nWe could restructure `useTres` to make it use the [provide context pattern](https://medium.com/@maoberlehner/context-and-provider-pattern-with-the-vue-3-composition-api-17247eb7b001). `TresCanvas` would be the entity to provide things like renderer, camera and so on (see [TresState](https://github.com/Tresjs/tres/issues/new?assignees=&labels=enhancement&template=feature-request-%F0%9F%AA%90.md)). Any entity being child of `TresCanvas` could use the composable that injects those things.\r\n\r\n**Additional context**\r\nI'm not 100% sure if my proposed solution works. Let's see this issue as a opportunity for a little experiment 😊.\r\n",[2876],{"name":2877,"color":2878},"v2","FEE22E",183,"closed","feat: restructuring useTres using the provide context pattern","2023-04-04T15:47:17Z","https://github.com/Tresjs/tres/issues/183",0.6571145,{"description":2886,"labels":2887,"number":2888,"owner":2866,"repository":2867,"state":2880,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### Description\r\n\r\nRight now there is no way to access the TresCanvas context without hacking the script setup using TresCanvas:\r\n\r\n\u003Cdetails>\r\n\u003Csummary>\u003Cstrong>Hack\u003C/strong>\u003C/summary>\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport { computed, ref, onMounted } from 'vue';\r\n\r\nimport { extend, useTresContext } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls';\r\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry';\r\n\r\nconst trescanvas = ref();\r\nconst state = ref();\r\n\r\nonMounted(() => {\r\n setTimeout(() => {\r\n state.value = trescanvas.value?.context;\r\n }, 0);\r\n});\r\n\r\n// Add the element to the catalogue\r\nextend({ TextGeometry, OrbitControls });\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas ref=\"trescanvas\" shadows alpha>\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 \u003CTresMesh>\r\n \u003CTresTextGeometry :args=\"['TresJS', { font, ...fontOptions }]\" center />\r\n \u003CTresMeshMatcapMaterial :matcap=\"matcapTexture\" />\r\n \u003C/TresMesh>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\u003C/details>\r\n\r\n### Suggested solution\r\n\r\nAdd default slot props, we¡ve the default slot there without any binding:\r\n```ts\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\nthen in the sfc template:\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### Alternative\r\n\r\ncheck the hack in the description\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.",[],573,"provide default slot props in TresCanvas","2024-03-05T19:47:12Z","https://github.com/Tresjs/tres/issues/573",0.6782879,{"description":2894,"labels":2895,"number":2896,"owner":2866,"repository":2867,"state":2880,"title":2897,"updated_at":2898,"url":2899,"score":2900},"# Goal\r\nGenerate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n\r\nimport { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' \r\nimport { OrbitControls, TransformControls } from '@tresjs/cientos'\r\n\r\nconst sphereRef = ref()\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CTresCanvas v-bind=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :fov=\"45\" :near=\"0.1\" :far=\"1000\" :look-at=\"[-8, 3, -3]\" />\r\n \u003COrbitControls make-default />\r\n \u003CTresScene>\r\n \u003CTresAmbientLight :intensity=\"0.5\" />\r\n \u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\r\n\r\n \u003CTresMesh ref=\"sphereRef\" :position=\"[0, 4, 0]\" cast-shadow>\r\n \u003CTresSphereGeometry />\r\n \u003CTresMeshToonMaterial color=\"#FBB03B\" />\r\n \u003C!-- \u003CTresMeshToonMaterial color=\"#FBB03B\" /> -->\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 8, 4]\" :intensity=\"0.7\" cast-shadow />\r\n \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\" receive-shadow>\r\n \u003CTresPlaneGeometry :args=\"[10, 10, 10, 10]\" />\r\n \u003CTresMeshToonMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n- [ ] Using a vite plugin to generate all the components from THREE instances (Except Scene)\r\n- [ ] Each component should locally register components on the slots (is possible?)\r\n- [ ] Typescript Definition for the components generated from the ThreeJS instance\r\n- [ ] Include them in the final bundle\r\n- [ ] Strategy for replacing catalog `extend` \r\n- [ ] Update the way `cientos` extends the catalog\r\n",[],104,"Generate instances on build-time rather than run-time","2023-03-13T14:26:46Z","https://github.com/Tresjs/tres/issues/104",0.6894827,{"description":2902,"labels":2903,"number":2904,"owner":2866,"repository":2867,"state":2880,"title":2905,"updated_at":2906,"url":2907,"score":2908},"### Describe the bug\n\nUsing the TresJS nuxt module on Nuxt 3.8.1. \r\nWhen trying to use `useTexture` directly in a script setup, I'm getting a \"500 - document is not defined\" error upon loading the page!\r\n\r\nSo this:\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { extend } from '@tresjs/core';\r\nimport { OrbitControls } from '@tresjs/cientos';\r\n\r\nextend({ OrbitControls });\r\n\r\nconst pbrTexture = await useTexture({\r\n map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',\r\n displacementMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',\r\n roughnessMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',\r\n normalMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',\r\n ambientOcclusion:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',\r\n});\r\n\u003C/script>\r\n```\r\n\r\nIs throwing the error when directly calling the correspondig route.\r\n\r\nWhat is working is wrapping `useTexture` inside a onBeforeMount hook:\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { extend } from '@tresjs/core';\r\nimport { OrbitControls } from '@tresjs/cientos';\r\n\r\nextend({ OrbitControls });\r\n\r\nconst pbrTexture2 = ref();\r\n\r\nonBeforeMount(async () => {\r\n pbrTexture2.value = await useTexture({\r\n map: 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',\r\n displacementMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Displacement.jpg',\r\n roughnessMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_Roughness.jpg',\r\n normalMap:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_NormalGL.jpg',\r\n ambientOcclusion:\r\n 'https://raw.githubusercontent.com/Tresjs/assets/main/textures/black-rock/Rock035_2K_AmbientOcclusion.jpg',\r\n });\r\n});\r\n\u003C/script>\r\n```\r\n\r\nI've provided a very basic reproduction below!\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-fn4snl?file=app.vue\n\n### Steps to reproduce\n\nSimply navigate to the reproduction link\n\n### System Info\n\n```shell\nFrom Stackblitz: \r\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: ^3.6.0 => 3.6.0 \r\n @tresjs/nuxt: ^1.2.2 => 1.2.2 \r\n @tresjs/post-processing: ^0.5.0 => 0.5.0 \r\n\r\nFrom my Local environment:\r\n System:\r\n OS: Windows 11 10.0.22621\r\n CPU: (16) x64 13th Gen Intel(R) Core(TM) i7-1360P\r\n Memory: 10.65 GB / 31.64 GB\r\n Binaries:\r\n Node: 18.18.2 - C:\\Program Files\\nodejs\\node.EXE\r\n Yarn: 1.22.19 - C:\\Program Files\\nodejs\\yarn.CMD\r\n npm: 9.8.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n pnpm: 8.10.2 - ~\\AppData\\Local\\pnpm\\pnpm.EXE\r\n Browsers:\r\n Edge: Chromium (119.0.2151.58)\r\n Internet Explorer: 11.0.22621.1\n```\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.",[],444,"Document is not defined when using `useTexture`","2023-12-11T14:42:48Z","https://github.com/Tresjs/tres/issues/444",0.69166064,{"description":2910,"labels":2911,"number":2912,"owner":2866,"repository":2867,"state":2880,"title":2913,"updated_at":2914,"url":2915,"score":2916},"### Describe the bug\n\nI'm trying to take a screenshot of the TresCanvas, but get always an empty PNG.\r\n\r\n \u003CTresCanvas ref=\"tresCanvasRef\" clear-color=\"#aaaaaa\" shadows id=\"modelCanvas\">\r\n \u003CCaptureScreenshot />\r\n \u003CTresPerspectiveCamera :position=\"[-150, 470, 220]\" :look-at=\"[0, 0, 0]\" />\r\n \u003CSuspense>\r\n \u003Cprimitive :position=\"[0, -100, 0]\" v-if=\"sceneLoaded\" :object=\"scene\" />\r\n \u003C/Suspense>\r\n \u003CTresAmbientLight :intensity=\"1.2\" color=\"#ffffff\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[-100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[0, 200, 0]\" />\r\n \u003COrbitControls />\r\n \u003C/TresCanvas>\r\n \r\n \r\n**CaptureScreenshot:**\r\n \u003Cscript setup>\r\nimport { useTresContext } from \"@tresjs/core\";\r\n\r\nconst { renderer } = useTresContext();\r\n\r\nconst captureScreenshot = () => {\r\n const canvas = renderer.value.domElement;\r\n const url = canvas.toDataURL();\r\n const link = document.createElement(\"a\");\r\n link.href = url;\r\n link.download = \"screenshot.png\";\r\n link.click();\r\n};\r\n\u003C/script>\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-bovwvh?file=tsconfig.json\n\n### Steps to reproduce\n\nnpm i\r\nnpm run dev\n\n### System Info\n\n```shell\n\"devDependencies\": {\r\n \"@nuxt/devtools\": \"latest\",\r\n \"@nuxtjs/tailwindcss\": \"^6.8.0\",\r\n \"autoprefixer\": \"^10.4.15\",\r\n \"nuxt\": \"^3.7.3\"\r\n },\r\n \"dependencies\": {\r\n \"@tresjs/cientos\": \"^3.3.0\",\r\n \"@tresjs/nuxt\": \"^1.1.6\",\r\n \"@tresjs/post-processing\": \"^0.4.0\",\r\n \"@types/node\": \"^20.6.0\",\r\n \"dom-to-image\": \"^2.6.0\",\r\n \"html2canvas\": \"^1.4.1\",\r\n \"node\": \"^16.20.2\",\r\n \"three\": \"^0.156.1\"\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.",[],408,"TresCanvas Screenshot","2023-12-13T09:08:50Z","https://github.com/Tresjs/tres/issues/408",0.6939521,{"description":2918,"labels":2919,"number":2920,"owner":2866,"repository":2921,"state":2880,"title":2922,"updated_at":2923,"url":2924,"score":2925},"### Describe the bug\n\nI am trying to use a TresCanvas that is known to work when using in a staticly declared way\r\nbut if I use it in a component that is dynamicly loaded using \r\n\r\n`defineAsyncComponent(() => import('@/components/pageBuilder/component.vue'))`\r\n\r\nit doesn't render the canvas the most I can get is the following\r\n\r\n`\u003Cdiv window-size=\"\" clear-color=\"#241246\" shadows=\"\" data-v-3789b801=\"\">\u003Ccanvas style=\"\">\u003C/canvas>\u003C/div>`\r\n\r\n## Recent findings\r\n\r\njust having the TresCanvas in a component that is nested 2 levels deep doesn't work.\r\nno idea why or what is causing this. \r\n\r\nI've provided a reproduction of this\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-z2g8yk?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n_No response_\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.",[],79,"nuxt","TresCanvas doesn't render in Dynamicly loaded components or deeply nested components","2024-01-26T12:08:01Z","https://github.com/Tresjs/nuxt/issues/79",0.6965362,{"description":2927,"labels":2928,"number":2934,"owner":2866,"repository":2867,"state":2880,"title":2935,"updated_at":2936,"url":2937,"score":2938},"**Describe the bug**\r\nWhen use `useTres` composable inside a sub-component to obtain the state, this state never gets updated. Curiously it does get updated when accessed from `cientos` or any other package\r\n\r\n**Reproduction**\r\nPlease provide a link using this template on [Stackblitz](https://stackblitz.com/edit/tresjs-basic-trxx6f?file=src/components/TheSphere.vue) \r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to reproduction link\r\n2. Open console.\r\n4. See that the console inside of the sphere gives a default state with mostly all undefined, but the console on the parent using templateRef `context` is updated with the correct value of state\r\n\r\n**Expected behavior**\r\nState using `useTres` should provide correct updated state\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n\r\n```\r\n System:\r\n OS: Linux 5.0 undefined\r\n CPU: (3) 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: 16.14.2 - /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 npmPackages:\r\n @tresjs/cientos: ^2.0.0-beta.3 => 2.0.0-beta.3 \r\n @tresjs/core: ^2.0.0-beta.9 => 2.0.0-beta.9 \r\n vite: ^4.2.2 => 4.2.2 \r\n```\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2929,2930,2933],{"name":2857,"color":2858},{"name":2931,"color":2932},"help wanted","008672",{"name":2877,"color":2878},209,"useTres doesnt get updated on subcomponent","2023-04-19T08:01:20Z","https://github.com/Tresjs/tres/issues/209",0.69765455,{"description":2940,"labels":2941,"number":2946,"owner":2866,"repository":2867,"state":2880,"title":2947,"updated_at":2948,"url":2949,"score":2950},"**Is your feature request related to a problem? Please describe.**\r\nSince a potential user is interested in using TresJS to load FBX models and to be honest, along with Gltf is one of the most used formats let's add support for it \r\n\r\n**Describe the solution you'd like**\r\nSame thing as `useGLTF`but for `fbx` models\r\n\r\n**Suggested solution**\r\n\r\n```\r\nimport { useFBX } from '@tresjs/cientos'\r\n\r\nconst { scene } = await useFBX('/models/AkuAku.fbx')\r\n```\r\n\r\nor \r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { OrbitControls, FBXModel } from '@tresjs/cientos'\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CSuspense>\r\n \u003CTresCanvas clear-color=\"#82DBC5\" shadows alpha>\r\n \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\r\n \u003COrbitControls />\r\n \u003CTresScene>\r\n \u003CFBXModel path=\"/models/AkuAku.fbx\" />\r\n \u003CTresDirectionalLight :position=\"[-4, 8, 4]\" :intensity=\"1.5\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n \u003C/Suspense>\r\n\u003C/template>\r\n```\r\n\r\nfor the composable import the loader from `three-stdlib`\r\n\r\n- [ ] Update docs",[2942,2945],{"name":2943,"color":2944},"good first issue","7057ff",{"name":2931,"color":2932},67,"useFbx composable and component for cientos","2023-01-10T18:48:31Z","https://github.com/Tresjs/tres/issues/67",0.70460284,{"description":2952,"labels":2953,"number":2958,"owner":2866,"repository":2867,"state":2880,"title":2959,"updated_at":2960,"url":2961,"score":2962},"**Describe the bug**\r\nSince we are using a Custom Renderer, the main instances of Vue don't recognize the Tres components and throw these annoying warnings that will confuse users.\r\n\r\nOne way around this is to add this to the `vite.config.ts`:\r\n\r\n```\r\nplugins: [vue({\r\n template: {\r\n compilerOptions: {\r\n isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',\r\n },\r\n },\r\n })],\r\n```\r\nBut that's not ideal.\r\n\r\n**Expected behavior**\r\nNo warnings\r\n\r\n**Screenshots**\r\n\u003Cimg width=\"803\" alt=\"Screenshot 2023-03-23 at 06 15 08\" src=\"https://user-images.githubusercontent.com/4699008/227110134-44644ecb-367b-4fe4-b071-8e3b645611ce.png\">\r\n\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2954,2955],{"name":2857,"color":2858},{"name":2956,"color":2957},"pending-triage","97A4FE",162,"[v2] - Failed to resolve component warnings","2023-11-23T18:35:20Z","https://github.com/Tresjs/tres/issues/162",0.7072353,["Reactive",2964],{},["Set"],["ShallowReactive",2967],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4tev6k4Ej5tldscxvIDToWcJYGB4Su18olLBEdq_ka4":-1},"/Tresjs/tres/410"]