` on the same page. \n\nShould be easier now that is a custom renderer, my wild guess is that composable is being shared between the two instances, so the second one doesn't create a singleton. v1 Also is not possible\n\nThis is a nice to have.\n\n",[2935],{"name":2936,"color":2937},"v2","FEE22E",153,"Multiple canvas in same page","2023-04-05T13:41:40Z","https://github.com/Tresjs/tres/issues/153",0.7047599,{"description":2944,"labels":2945,"number":2947,"owner":2863,"repository":2927,"state":2918,"title":2948,"updated_at":2949,"url":2950,"score":2951},"## Bug\r\n\r\nNodeOps accidentally shares `scene` across multiple `TresCanvas`s.\r\n\r\nSee the StackBlitz reproduction for details.\r\n\r\n## Problem\r\n\r\nNodeOps's [`let scene`](https://github.com/Tresjs/tres/blob/f6097a3d6a3e34fddb689266b062869fe5a9bf1e/src/core/nodeOps.ts#L15) is [set whenever a new `Scene` is added to any `TresCanvas`](https://github.com/Tresjs/tres/blob/f6097a3d6a3e34fddb689266b062869fe5a9bf1e/src/core/nodeOps.ts#L84) – i.e., the variable points to the last `Scene` added to a `TresCanvas`. If elements from another `TresCanvas` read `scene` in nodeOps, the code expects that they will find *their* `Scene`, but they do not.\r\n\r\n## Solution?\r\n\r\n### Solution A\r\n\r\nWe could refactor nodeOps as `(context: TresContext) => NodeOps`. \r\n\r\nEvery new instance of `TresCanvas` could create a new nodeOps instance which contains a unique `TresContext` (i.e., with the appropriate `Scene`) within its scope.\r\n\r\n### Solution B\r\n\r\nOtherwise, we could simply recurse up the parent chain until we reach a `Scene` or run out of parents.\r\n\r\n## Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-e6uzmm?file=src%2FApp.vue\r\n\r\n## System Info\r\n\r\n```shell\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: 10.2.3 - /usr/local/bin/npm\r\n pnpm: 8.14.0 - /usr/local/bin/pnpm\r\n npmPackages:\r\n @tresjs/cientos: ^3.5.1 => 3.5.1 \r\n @tresjs/core: ^3.4.1 => 3.4.1 \r\n @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 \r\n vite: ^4.5.0 => 4.5.0\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.",[2946],{"name":2857,"color":2858},560,"NodeOps shares `scene` across multiple`TresCanvas`s","2024-03-08T10:36:46Z","https://github.com/Tresjs/tres/issues/560",0.7224718,{"description":2953,"labels":2954,"number":2961,"owner":2863,"repository":2927,"state":2918,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Describe the bug\n\nDescription:\r\n\r\nI am experiencing an issue where events on dynamically added spheres are not being registered. In my setup, I have a box that, when clicked, adds a new sphere to the scene. While the initial spheres respond to click, pointer-enter, and pointer-leave events as expected, the newly added spheres do not trigger these events.\r\n\r\nSample Code:\r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { ref, reactive } from 'vue';\r\nimport { Sphere, Box, OrbitControls } from '@tresjs/cientos';\r\n\r\nconst addHotspot = () => {\r\n const newHotspot = reactive({\r\n position: [-2, 0, 0],\r\n });\r\n hotspots.push(newHotspot);\r\n};\r\n\r\nconst hotspots = reactive([\r\n {\r\n position: [-2, 0, -2],\r\n },\r\n {\r\n position: [0, 0, -2],\r\n },\r\n {\r\n position: [2, 0, -2],\r\n },\r\n]);\r\n\r\nconst grow = (event) => {\r\n event.object.scale.set(1.5, 1.5, 1.5);\r\n};\r\n\r\nconst shrink = (event) => {\r\n event.object.scale.set(1, 1, 1);\r\n};\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003COrbitControls />\r\n \u003CTresPerspectiveCamera />\r\n \u003CTresAmbientLight :args=\"['white', 0.5]\" />\r\n \u003CBox :position=\"[0, 0, 0]\" :scale=\"[1, 1, 1]\" @click=\"addHotspot\">\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/Box>\r\n \u003CSphere\r\n :args=\"[0.5, 32, 32]\"\r\n v-for=\"(hotspot, index) in hotspots\"\r\n :position=\"hotspot.position\"\r\n @click=\"console.log('click', index)\"\r\n @pointer-enter=\"grow\"\r\n @pointer-leave=\"shrink\"\r\n >\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/Sphere>\r\n\u003C/template>\r\n\r\n```\r\nExpected Behavior:\r\n\r\nThe click, pointer-enter, and pointer-leave events on the newly added spheres should function identically to those on the initial spheres, triggering the respective console logs and scaling effects.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-minimal-reproduction-aa972s?file=src%2Fcomponents%2FTheExperience.vue,package-lock.json\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.",[2955,2958],{"name":2956,"color":2957},"p4-important-bug","D93F0B",{"name":2959,"color":2960},"regression","167F7A",763,"Events not registering on dynamically added objects","2024-07-12T05:05:00Z","https://github.com/Tresjs/tres/issues/763",0.7247544,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fZ0AG9NJkmOvLWKSy1oqYD9WUa-sJOy8__ELETs1JNPA":-1},"/Tresjs/rapier/106"]