\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.",[2873],{"name":2857,"color":2858},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.70564383,{"description":2880,"labels":2881,"number":2882,"owner":2863,"repository":2883,"state":2865,"title":2884,"updated_at":2885,"url":2886,"score":2887},"### 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.7221758,{"description":2889,"labels":2890,"number":2891,"owner":2863,"repository":2864,"state":2865,"title":2892,"updated_at":2893,"url":2894,"score":2895},"### Description\r\n\r\nHey there,\r\nTres looks amazing. Great work!\r\n\r\nI'd love to switch to Tres, but my application uses multiple canvas elements, each rendering a different camera perspectives to the same scene. Of what I read in the docs & source code, TresCanvas creates its own scene and doesn't share it with other TresCanvas instances. I'd love to see TresCanvas taking scene as an optional prop, but I can also imagine that there might be a lot of side effects coming with such a change.\r\n\r\nWhat do you think of it? Edge case that's hard to implement or easy and viable for the ecosystem?\r\n\r\nHave a great day!\r\nMarc\r\n\r\n\r\n### Suggested solution\r\n\r\n`/src/components/TresCanvas.vue`\r\n```ts\r\nconst props = withDefaults(defineProps\u003CTresCanvasProps>(), {\r\n ...,\r\n scene: new Scene() // TresScene | Scene\r\n})\r\n```\r\nI already know, I'm missing out on component lifecycle handling. I just wanted to point in the direction this is going.\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nI think this is somehow the reverse request to [Portal](https://github.com/Tresjs/tres/issues/789)\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.",[],842,"Decouple scene from canvas","2024-10-17T14:16:20Z","https://github.com/Tresjs/tres/issues/842",0.722606,{"description":2897,"labels":2898,"number":2899,"owner":2863,"repository":2883,"state":2865,"title":2900,"updated_at":2901,"url":2902,"score":2903},"### Describe the bug\n\nI am using `\u003CHtml>` to wrap elements containing template refs, but these refs are not correctly initialized. As a result, the references to the slotted elements are inaccessible within the component's lifecycle.\n\nPerhaps related to issues: [464](https://github.com/Tresjs/tres/issues/464) — [312](https://github.com/Tresjs/tres/issues/312)\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqdVW1v2zYQ/iucgiEuJkuykxSb5xSZ3XbtsKxBG2Afqn5gpIvFhCIJkvLLAv/3HSnLlpLWdWoLhnkvzz13vDs9BNcazB9KRfMKglEwNplmyhIDtlKEUzE7TwNr0uBVKlippLbkgWi4DYkUl7ISFvKQLKjNCrImt1qW5BiBjn9vWbsAUyrm1GxNLizK7kycSd21/aBvmJ1KYbXkJiTvbMmfOjEQVhrnl4pMCmOJoprONFUf4ZacO3o9UXH+whlsafZ6L8j5K/KQCkKcl+QQcTnrHZe1/jhsw0RzyitAhLVH8Rn2WvqQfAvOm+4BG8d1ibGgeLBQKk4t4ImQcatUCyZyuegb9h+QjAPV/UxyqfE2jn4dvp5Mz/yVEPx4ryvQRkFm2RymtARNyUhJwyyTAl0+/xYS93xJAxI3bp1a78QO7RJM0QXoD0OCT+IQRlpa2iiSkFxSW0RX72vtBqZJRgr4E2QJVq/IiOqZcT6DkAyis5CctPm0Ql9LvDUsimaUY3Efpb2jGjcO+7kjRfe4YBk1tm8KiqXthp3I5Vd4OpLNz7O4nr513x/gijV2pX5ayU+qAL2r5cFM3k4mycmkwx19/GBlOEegW2JUKDc96NfqXmTyDjiX5F+pef7TOFZtpNhB7U3yNdOuMaWg/G82K+yTy8F8T31fMeQjULVCxSAadu9rk0Adox4SFIzj1gTh0dgVd38LZBWm4kbmq3pGS7xUJkYkwbVBcDjznIlZcyzAERuRQZL87AULlttie16n4ogqVQN9x5aQG5rdzzQulbwe2RE5ShIXB2Fw+D3BIAzqndcvqYrujBS4ez18ulHgyh3VAZ2svTCdIg0Ka5UZxXGWC/TPgbO5jgTYWKgybptfnEbDaBjnzNjYidE6DbA0j4Drpfoc7NoD4ZMo6QtY2miwi7LRdoPZBdB7RcUhKWxtfYAGuRFGJXM+bexCw0G4zu4CEV8i7fgXMGW7GvjuqgwcXOaW+cUgic4QEdc2LKOyW+SNHTayhvwZwLXDPmg07OdQsgNAG1OX/Gn0Mubspg3pELFD19ia1uAb7ZbNHjVmJkvFOOgPyg1vt0EpLojFX15mdQVbflkB2f1X5HdmWVO+wmYBPcdy764SRxVsrX7z6R/srJaylHnFN5fzDeVHwLdx5TjWZhMcRaTdsvNs3/s5wy1wbd4s/eLZJNUhalcKvPRzs/S2vVYLvvjCeXt/HdM9VdpldhKdbAu+/h+NgxeG\n\n### Steps to reproduce\n\n1. Use the `\u003CHtml>` component to wrap elements containing template refs.\n2. Observe that these refs are not initialized (console.log inside onMounted shows them as undefined).\n3. Any logic relying on these refs does not work as expected.\n\n```vue\n\u003Ctemplate>\n \u003CHtml>\n \u003Cdiv ref=\"container\">Some Content\u003C/div>\n \u003C/Html>\n\u003C/template>\n\n\u003Cscript setup>\nimport { Html } from '@tresjs/cientos'\nimport { ref, onMounted, watch } from 'vue';\n\nconst container = ref(null);\n\nonMounted(() => {\n console.log(container.value); // Expected: DOM Element | Actual: null\n});\n\nwatch(container, () => {\n console.log('watch', container.value); // Expected: DOM Element | Actual: The log never appears\n})\n\u003C/script>\n```\n\n### Summary of Solutions\n\nParent refs don't get assigned when using `createVNode()` and `render()` because the content ends up outside the parent's render tree. Here's a quick breakdown:\n\n#### What Doesn't Work\n- **Direct `\u003CTeleport>`** \n The custom TresJS renderer can't find the target in the standard DOM.\n\n- **Manual `createVNode()` + `render()`** \n This creates a new root outside the parent's render tree, so refs declared in the template aren't assigned.\n\n#### What Might Work ?\n- **Global Store (Pinia/Vuex)** \n You could set up a tunnel to share content via a global store, but that adds an external dependency we’d rather avoid.\n\n- **Tunnel via Provide/Inject (In/Out)** \n Use provide/inject to share a reactive state (like an array of VNodes) between an \"In\" component (capturing the content) and an \"Out\" component (rendering it in the standard DOM). This should preserve reactivity and proper ref assignment without extra dependencies. This [message](https://github.com/Tresjs/tres/issues/312#issuecomment-2302950778) in [issue 312](https://github.com/Tresjs/tres/issues/312) talked about this method. \n\n\n### System Info\n\n```shell\nSystem:\n OS: macOS 15.1.1\n CPU: (14) arm64 Apple M4 Pro\n Memory: 116.89 MB / 24.00 GB\n Shell: 5.9 - /bin/zsh\n Binaries:\n Node: 22.11.0 - ~/.nvm/versions/node/v22.11.0/bin/node\n npm: 11.0.0 - ~/.nvm/versions/node/v22.11.0/bin/npm\n pnpm: 9.14.4 - ~/.nvm/versions/node/v22.11.0/bin/pnpm\n Browsers:\n Chrome: 133.0.6943.55\n Safari: 18.1.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/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.\n- [x] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],596,"Template refs inside `\u003CHtml>` component are not working","2025-02-17T20:39:49Z","https://github.com/Tresjs/cientos/issues/596",0.73570585,{"description":2905,"labels":2906,"number":2907,"owner":2863,"repository":2864,"state":2865,"title":2908,"updated_at":2909,"url":2910,"score":2911},"### Describe the bug\n\ni have made a clean nuxt 3.15.4 installation, with three.js 0.174.0, @tresjs/core 4.3.3 and @tresjs/nuxt 3.0.8, in firefox.\nin the console, i have these warnings:\n```\nMouseEvent.mozPressure is deprecated. Use PointerEvent.pressure instead. [tres.js:695:6](http://localhost:3000/_nuxt/node_modules/@tresjs/core/dist/tres.js)\nMouseEvent.mozInputSource is deprecated. Use PointerEvent.pointerType instead. [tres.js:695:6](http://localhost:3000/_nuxt/node_modules/@tresjs/core/dist/tres.js)\n```\nthis probably suggests that tresjs uses older browser mouse events. i have opened the same nuxt instance in chrome and it didnt give any warnings, so this is definitely an firefox-only issue.\n\nuser agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:135.0) Gecko/20100101 Firefox/135.0\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction\n\n### Steps to reproduce\n\nstackblitz should run in firefox browser, on chrome this warning doesnt exist\n\n### System Info\n\n```shell\nSystem:\n OS: Windows 11 10.0.26100\n CPU: (12) x64 AMD Ryzen 5 7535HS with Radeon Graphics\n Memory: 4.49 GB / 23.32 GB\n Binaries:\n Node: 23.6.1 - C:\\nvm4w\\nodejs\\node.EXE\n npm: 10.9.2 - C:\\nvm4w\\nodejs\\npm.CMD\n pnpm: 10.2.0 - C:\\nvm4w\\nodejs\\pnpm.CMD\n Browsers:\n Edge: Chromium (132.0.2957.140)\n Internet Explorer: 11.0.26100.1882\n npmPackages:\n @tresjs/core: ^4.3.3 => 4.3.3\n @tresjs/nuxt: ^3.0.8 => 3.0.8\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.",[],952,"Firefox warning: \"MouseEvent.mozPressure\" and \"MouseEvent.mozInputSource\" are deprecated","2025-03-02T20:32:14Z","https://github.com/Tresjs/tres/issues/952",0.736778,{"description":2913,"labels":2914,"number":2915,"owner":2863,"repository":2864,"state":2865,"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.7369409,{"description":2921,"labels":2922,"number":2926,"owner":2863,"repository":2864,"state":2927,"title":2928,"updated_at":2929,"url":2930,"score":2931},"On `v4` I noticed that if a `Sprite` is inside a `Group`, the events coming from the raycast are not triggered, only the missing one, even if the events are binded to the Sprite itself, not the parent group.\r\nRed is `Sprite+Group`, Blue is `Sprite`\r\n\r\n\r\n\r\n-- ADDITION:\r\nI noticed one interesting thing too. In the demo if you swap the order of the sprites, everything is gonna break\r\n```js\r\n \u003CSpriteNoGroup />\r\n \u003CSpriteWithGroup />\r\n ```\r\nTry to swap e bring the one with the group first, it throws an error.\r\n\r\nhttps://github.com/Tresjs/tres/assets/6367879/cbbe512b-c2f9-4734-be8f-5c985f627555\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-yxv5gz?file=components%2FSpriteWithGroup.vue\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/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.",[2923],{"name":2924,"color":2925},"p4-important-bug","D93F0B",759,"closed","Sprite - Raycast events not firing if inside group","2024-07-09T14:15:56Z","https://github.com/Tresjs/tres/issues/759",0.69229054,{"description":2933,"labels":2934,"number":2944,"owner":2863,"repository":2864,"state":2927,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### 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.",[2935,2938,2941],{"name":2936,"color":2937},"types","5C076E",{"name":2939,"color":2940},"PR welcome","2D76B0",{"name":2942,"color":2943},"p3-significant","2C78E3",496,"Allow `TresObject3D#material` to set Array","2024-07-05T15:18:00Z","https://github.com/Tresjs/tres/issues/496",0.7007833,{"description":2950,"labels":2951,"number":2958,"owner":2863,"repository":2864,"state":2927,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### 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.",[2952,2955],{"name":2953,"color":2954},"wontfix","ffffff",{"name":2956,"color":2957},"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.70381975,["Reactive",2964],{},["Set"],["ShallowReactive",2967],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fc2uksYq5OsVAJh4v0KDitBT3DNC3o25FpECPR15zOI0":-1},"/Tresjs/cientos/569"]