\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.",[3030],{"name":3031,"color":3032},"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.72104925,{"description":3039,"labels":3040,"number":3044,"owner":3020,"repository":3021,"state":3022,"title":3045,"updated_at":3046,"url":3047,"score":3048},"### Describe the bug\n\nI have a Nuxt 3 app and in it a page with a Tres.js scene. The scene contains `\u003CTresDirectionalLight cast-shadow />` which casts a shadow. When navigating away from the page with the scene and navigating back to the scene (using NuxtLink), I get the error below.\r\n\r\nWhen I remove the `cast-shadow` prop, the bug disappears.\r\n\r\n\r\n```\r\nthree.js?v=f17f74c8:17801 Uncaught TypeError: Cannot read properties of null (reading 'state')\r\n at setProgram (three.js?v=f17f74c8:17801:41)\r\n at WebGLRenderer.renderBufferDirect (three.js?v=f17f74c8:17292:23)\r\n at renderObject (three.js?v=f17f74c8:13624:21)\r\n at renderObject (three.js?v=f17f74c8:13631:7)\r\n at WebGLShadowMap.render (three.js?v=f17f74c8:13519:9)\r\n at WebGLRenderer.render (three.js?v=f17f74c8:17493:17)\r\n at tres.js:387:33\r\n at index.mjs:71:52\r\n at Array.map (\u003Canonymous>)\r\n at Object.trigger (index.mjs:71:40)\r\n ```\r\n \u003Cdetails>\r\n \u003Csummary>complete error log\u003C/summary>\r\n\r\n ```\r\nsetProgram\t\t\t\t@\tthree.js?v=f17f74c8:17801\r\nWebGLRenderer.renderBufferDirect\t@\tthree.js?v=f17f74c8:17292\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13624\r\nrenderObject\t\t\t\t@\tthree.js?v=f17f74c8:13631\r\nWebGLShadowMap.render\t\t\t@\tthree.js?v=f17f74c8:13519\r\nWebGLRenderer.render\t\t\t@\tthree.js?v=f17f74c8:17493\r\n(anonymous)\t\t\t\t@\ttres.js:387\r\n(anonymous)\t\t\t\t@\tindex.mjs:71\r\ntrigger\t\t\t\t\t@\tindex.mjs:71\r\nwe.immediate\t\t\t\t@\ttres.js:160\r\nloop\t\t\t\t\t@\tindex.mjs:617\r\nrequestAnimationFrame\t\t\r\nresume\t\t\t\t\t@\tindex.mjs:624\r\nor\t\t\t\t\t@\ttres.js:388\r\ncr\t\t\t\t\t@\ttres.js:593\r\n(anonymous)\t\t\t\t@\ttres.js:1086\r\n(anonymous)\t\t\t\t@\truntime-core.esm-bundler.js:2757\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\nhook.__weh.hook.__weh\t\t\t@\truntime-core.esm-bundler.js:2737\r\nflushPostFlushCbs\t\t\t@\truntime-core.esm-bundler.js:385\r\nflushJobs\t\t\t\t@\truntime-core.esm-bundler.js:427\r\nPromise.then\t\t\r\nqueueFlush\t\t\t\t@\truntime-core.esm-bundler.js:322\r\nqueuePostFlushCb\t\t\t@\truntime-core.esm-bundler.js:336\r\nqueueEffectWithSuspense\t\t\t@\truntime-core.esm-bundler.js:7256\r\nbaseWatchOptions.scheduler\t\t@\truntime-core.esm-bundler.js:6138\r\neffect2.scheduler\t\t\t@\treactivity.esm-bundler.js:1892\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:250\r\nendBatch\t\t\t\t@\treactivity.esm-bundler.js:308\r\nnotify\t\t\t\t\t@\treactivity.esm-bundler.js:594\r\ntrigger\t\t\t\t\t@\treactivity.esm-bundler.js:568\r\nset value\t\t\t\t@\treactivity.esm-bundler.js:1510\r\nfinalizeNavigation\t\t\t@\tvue-router.mjs:3478\r\n(anonymous)\t\t\t\t@\tvue-router.mjs:3343\r\nPromise.then\t\t\r\npushWithRedirect\t\t\t@\tvue-router.mjs:3310\r\npush\t\t\t\t\t@\tvue-router.mjs:3235\r\nnavigate\t\t\t\t@\tvue-router.mjs:2300\r\ncallWithErrorHandling\t\t\t@\truntime-core.esm-bundler.js:199\r\ncallWithAsyncErrorHandling\t\t@\truntime-core.esm-bundler.js:206\r\ninvoker\t\t\t\t\t@\truntime-dom.esm-bundler.js:722\r\n```\r\n\u003C/details>\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-w3neca?file=pages%2Findex.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 14.6.1\r\n CPU: (10) arm64 Apple M1 Pro\r\n Memory: 79.77 MB / 32.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.9.0 - ~/.nvm/versions/node/v20.9.0/bin/node\r\n Yarn: 1.22.19 - /opt/homebrew/bin/yarn\r\n npm: 10.1.0 - ~/.nvm/versions/node/v20.9.0/bin/npm\r\n pnpm: 9.4.0 - ~/Library/pnpm/pnpm\r\n bun: 1.0.3 - ~/.bun/bin/bun\r\n Browsers:\r\n Chrome: 129.0.6668.100\r\n Safari: 17.6\r\n npmPackages:\r\n @tresjs/cientos: ^4.0.3 => 4.0.2 \r\n @tresjs/core: ^4.2.10 => 4.2.10 \r\n @tresjs/nuxt: ^3.0.7 => 3.0.7\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.",[3041],{"name":3042,"color":3043},"pending-triage","97A4FE",851,"Scene breaks when `cast-shadow` enabled and navigating back to a previously initialized scene","2024-10-22T15:09:42Z","https://github.com/Tresjs/tres/issues/851",0.7242518,{"description":3050,"labels":3051,"number":3052,"owner":3020,"repository":3021,"state":3053,"title":3054,"updated_at":3055,"url":3056,"score":3057},"### Describe the bug\r\n\r\n### Description\r\n\r\nI'm trying to write some simple vitest tests for nodeOps. Here's an example:\r\n\r\n```ts\r\n it ('should not throw on nodeOps.remove', async() => {\r\n const mesh = nodeOps.createElement('TresMesh')\r\n const parent = nodeOps.createElement('TresMesh')\r\n nodeOps.insert(mesh, parent)\r\n nodeOps.remove(mesh)\r\n })\r\n```\r\n\r\nThis test fails with the following error:\r\n\r\n```TypeError: deregisterBlockingObjectAtPointerEventHandler is not a function```\r\n\r\n### Desired outcome\r\n\r\nInsertions/removals without a root shouldn't throw.\r\n\r\n### Steps to reproduce\r\n\r\n* Insert example into src/core/nodeOps.test.ts\r\n* `pnpm run test:ui`\r\n* See failing test\r\n\r\n### Context\r\n\r\nRelated: #515 \r\n\r\nThe code that throws [starts at line 137](https://github.com/Tresjs/tres/blob/898a8b1694962ae371591f3ff7ed2659a6b5f1ac/src/core/nodeOps.ts#L137):\r\n\r\n```ts\r\n const ctx = node.__tres\r\n // remove is only called on the node being removed and not on child nodes.\r\n node.parent = node.parent || scene\r\n \r\n const { \r\n deregisterObjectAtPointerEventHandler,\r\n deregisterBlockingObjectAtPointerEventHandler, \r\n } = ctx.root\r\n```\r\n\r\n### Proposed solution\r\n\r\nDispatch an event and handle at the root. That would allow the tests to pass and reduce some coupling at the same time.\r\n\r\nFor what it's worth, [this is how `THREE.Material.dispose()` works](https://github.com/mrdoob/three.js/blob/841d2e791d3e8a2463322c5ca31b16956828b91c/src/materials/Material.js#L508C1-L512C3), which is [called in the Tres code](https://github.com/Tresjs/tres/blob/898a8b1694962ae371591f3ff7ed2659a6b5f1ac/src/core/nodeOps.ts#L150) right below the block shown above.\r\n\r\n### Used Package Manager\r\n\r\npnpm\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.",[],551,"closed","(v4) Tests without `root` fail","2024-02-21T14:39:22Z","https://github.com/Tresjs/tres/issues/551",0.6605916,{"description":3059,"labels":3060,"number":3067,"owner":3020,"repository":3021,"state":3053,"title":3068,"updated_at":3069,"url":3070,"score":3071},"### Describe the bug\n\nIt seems like Tres.js is no longer working in Firefox. Even on your official documentation all examles render just a black canvas.\r\nI would really like to use Tres.js in projects of my company, but I am unable to do this if Firefox is not supported or working :(\n\n### Reproduction\n\nhttps://tresjs.org/guide/\n\n### Steps to reproduce\n\nThe first and all other examples of this page.\n\n### System Info\n\n```shell\nWindows 10\r\nFirerfiox version 114.0.1 (64-Bit)\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.",[3061,3064],{"name":3062,"color":3063},"question","d876e3",{"name":3065,"color":3066},"waiting for author","B145BC",310,"Black Canvas in Firefox","2023-06-20T07:13:04Z","https://github.com/Tresjs/tres/issues/310",0.68296975,{"description":3073,"labels":3074,"number":3075,"owner":3020,"repository":3021,"state":3053,"title":3076,"updated_at":3077,"url":3078,"score":3079},"### Description\n\nI would like to have a version for Babylon.js\n\n### Suggested solution\n\nI'm currently learning Babylon.js and have noticed some differences in terms of mesh events between Three.js and Babylon.js. Unlike Three.js, Babylon.js provides a mechanism similar to the actionManager on its meshes. I'm curious to know if Cientos has a similar feature. I'm looking forward to seeing how the combination of Vue with Babylon.js will eventually shape a project\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.",[],502,"Are you considering providing a version for Babylon.js after completing this project?","2024-01-10T10:59:15Z","https://github.com/Tresjs/tres/issues/502",0.7014725,{"description":3081,"labels":3082,"number":3086,"owner":3020,"repository":3087,"state":3053,"title":3088,"updated_at":3089,"url":3090,"score":3091},"### 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.",[3083],{"name":3084,"color":3085},"good first issue","7057ff",107,"cientos","UseVideoTexture","2023-08-21T17:01:07Z","https://github.com/Tresjs/cientos/issues/107",0.7024932,{"description":3093,"labels":3094,"number":3086,"owner":3020,"repository":3104,"state":3053,"title":3105,"updated_at":3106,"url":3107,"score":3091},"### Description\n\nWe should be able to emit an event when colliders enters or leaves another collider, acting as sensor\n\n### Suggested solution\n\nCould be based on: https://github.com/pmndrs/react-three-rapier?tab=readme-ov-file#sensors\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.",[3095,3098,3101],{"name":3096,"color":3097},"feature","c2e0c6",{"name":3099,"color":3100},"p2-nice-to-have","D4C5F9",{"name":3102,"color":3103},"v1","5B6B67","rapier","Sensors","2024-12-12T15:16:47Z","https://github.com/Tresjs/rapier/issues/107",{"description":3109,"labels":3110,"number":3111,"owner":3020,"repository":3021,"state":3053,"title":3112,"updated_at":3113,"url":3114,"score":3115},"### Description\r\n\r\nI'm using a v-for to instantiate some TresMeshes (as seen in some of the examples), but I need the v-for to dynamically update, and that doesn't seem to work. Any ideas on how to dynamically update a v-for with tres components?\r\n\r\n### Suggested solution\r\n\r\nNot sure if this is a module thing, but maybe add a v-for to the TresGroup component?\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nTo clarify, the array being used by the v-for: when it changes, the meshes instantiated by the v-for do not update.\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.",[],413,"v-for please","2023-10-06T22:05:25Z","https://github.com/Tresjs/tres/issues/413",0.7054431,{"description":3117,"labels":3118,"number":3119,"owner":3020,"repository":3087,"state":3053,"title":3120,"updated_at":3121,"url":3122,"score":3123},"### Description\n\nAs a dev using TresJS, I would like to have smooth OrbitControls and TrackballControls\n\n### Suggested solution\n\nhttps://twitter.com/niccolofanton/status/1836727821005139988\r\nhttps://github.com/niccolofanton/SmoothOrbitControls\r\n\r\nCredits @niccolofanton\r\n\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.",[],495,"Smooth Orbit Controls","2024-09-27T16:09:51Z","https://github.com/Tresjs/cientos/issues/495",0.7106615,["Reactive",3125],{},["Set"],["ShallowReactive",3128],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flSf3dlVVGYPiENc2sjxDLyNdB46M0uE5UgsUc2HxYws":-1},"/Tresjs/tres/271"]