\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqdVV1z4jYU/SsaZzp5KNgmJGnrsh0K+zHbaXYzC9OX9T4I+wYrkSWNJAhMhv/eK4kPm02zpJhh8L1HR0dHuldP0VSD+VOpeLmAKIsGptBMWWLALhThVMzf5JE1efRHLlitpLbkiYyoYcWkoqV8vKGqQyZfPozGkks9UbSADvkkp1IAphQT8w75BwordZ9syJ2WNTm3lQY4/71B6DSMqVhSswcNLcbuTVJI3cZ+1jNmx1JYLfkzcAbCSuNG5KKQwlgy5+QNecoFIQUHqr3QjJyf/XrxdjS+Ou+4jPGLMRmxegE+QrmqaEbuKDchECC4qOlaQXbsgUPIhVULlLYzIjs2xoHswZnsyKhcbFD2IAlbgIaHZ2ChVpxawAghg4ZXy+6MiRI3aM79BhH8+PwtaKPQdbaEMa1BU5IpaZhlUiD6628dfL7lEUl2g9qm1kx0S2YsFQUg/iLNoz3S0d+AqdqM3YsOwW/qSDMtLd0l0g65obaKbz+G7JZmtw5c/QeQNVi9JhnVc+PG9DqkF191SL8psTH1VEqBpKAZ5aRw9uKo7XY2F5XsBrysHSW6r5usoMZ2w0a3px3J1TM6ncjdz6u0Xr53z//Qih47q793cqIq0AcvT1byfjRK+6MfKnnLtDtOUlD+N5tX9jsHUdSl33wmLAhMrTHRiy/apm5nCXOEQ4yBQdI44fhq7Jq7v5WtORbFTJbrUL81Os9ERlIsE0IULUtfReG1AicsI700/ckHHllpq/37JhdnWGeB6AdYQma0eJhruRBl11uVkbM0dfMgDRaoFxh1otCUujVV8b2RAvunp8+3CWybWZjQxZodzSXyqLJWmSxJilLg+BI4W+pYgE2EqpMmfNiPr+Ne4moycWFE55FvJy3i0Ptewx1GIP0vcXqg34bbs9hHoA+KilO077HDyzjdC98FY+wvR9zuRjiF1+GGyHidot6fwdRNG/AGWxg42d8GfNhL4ytkxG4Kq7huu7vF4QnWUL6COAx4iRqB3RJqdgLpDuoWfxlfJ5zNmpSOEY/mBs+kNXjt3bH50YksZK0YB/1Zuaptn0zKuXz8y8f2958fU0Hx8Ez83qyC5Fs8LKCXaPdhK7FGwYb0u8knWOH/fbKW5YJvN+c/kl/ASL5wGgNshDWIshs4r/ajLzAs/6l5t/IdZ7uollCLV7WPft21w/1ZC4Fv3jiP99sxfsGlw8r6cX9v+OZfbu8GKw==\n\n### Steps to reproduce\n\nOpen the reproduction-url and use the orbit-controls -> camera will jump.\n\n### System Info\n\n```shell\nUsing the tresjs playground with the latest Edge browser.\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.",[2856],{"name":2857,"color":2858},"pending-triage","97A4FE",791,"Tresjs","tres","open","reactive property bug","2024-08-21T09:46:13Z","https://github.com/Tresjs/tres/issues/791",0.7367489,{"description":2868,"labels":2869,"number":2879,"owner":2860,"repository":2861,"state":2862,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### Description\n\nWebGPU [Three.js r171](https://github.com/mrdoob/three.js/releases) has been released and it’s a major milestone for WebGPU integration with third-party libraries such as React Three Fiber and bundlers like Vite or Next.js. We can now do this with zero configuration:\r\n\r\nThree.js Vanilla Three.js\r\n\r\n```ts\r\nimport * as THREE from 'three'\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n \r\nconst renderer = new WebGPURenderer()\r\n```\r\n\r\nR3F\r\n\r\n```ts\r\nimport { Canvas } from '@react-three/fiber'\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n \r\n\u003CCanvas gl={canvas => new WebGPURenderer({ canvas })}>\r\n```\n\n### Suggested solution\n\nEnable a `renderer` prop to override the renderer, restricted to canvas-based WebGL/WebGPU renderers.\r\n\r\n```vue\r\n\u003Cscript setup>\r\nimport { WebGPURenderer } from 'three/webgpu'\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas :renderer=\"WebGPURenderer\" />\r\n\u003C/template>\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/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.",[2870,2873,2876],{"name":2871,"color":2872},"feature","c2e0c6",{"name":2874,"color":2875},"p3-significant","2C78E3",{"name":2877,"color":2878},"v5","EFC959",883,"WebGPU support","2025-02-06T09:35:42Z","https://github.com/Tresjs/tres/issues/883",0.74428785,{"description":2885,"labels":2886,"number":2896,"owner":2860,"repository":2897,"state":2862,"title":2898,"updated_at":2899,"url":2900,"score":2901},"### Describe the bug\n\nWhile adding `on-demand` invalidation on the `useSurfaceSampler` and `Sampler` on #436 I noticed that `useSurfaceSampler` is not a vue composable per definition (it doesn't deal with any type of reactivity or state), is just a function. See why here https://vuejs.org/guide/reusability/composables#what-is-a-composable\r\n\r\nSince we are providing to our users as it was a composable, I would expect that the options are reactive.\r\n\r\nhttps://github.com/Tresjs/cientos/blob/9e17559fc98066db79b02b7ea0c98ae3037ac906/src/core/abstractions/useSurfaceSampler/index.ts#L81-L143\n\n### Reproduction\n\nLocal playground, run useSurfaceSampler\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 14.5\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 89.09 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.12.2 - ~/.nvm/versions/node/v20.12.2/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 10.5.0 - ~/.nvm/versions/node/v20.12.2/bin/npm\r\n pnpm: 8.15.4 - ~/Library/pnpm/pnpm\r\n bun: 1.0.2 - ~/.bun/bin/bun\r\n Browsers:\r\n Brave Browser: 120.1.61.116\r\n Chrome: 125.0.6422.142\r\n Safari: 17.5\r\n npmPackages:\r\n @tresjs/core: 4.0.2 => 4.0.2 \r\n @tresjs/leches: ^0.14.0 => 0.14.0\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/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.",[2887,2890,2893],{"name":2888,"color":2889},"bug","d73a4a",{"name":2891,"color":2892},"dx","1576ad",{"name":2894,"color":2895},"p4-important-bug","D93F0B",440,"cientos","useSurfaceSampler is not a composable","2024-06-17T23:04:25Z","https://github.com/Tresjs/cientos/issues/440",0.74517155,{"description":2903,"labels":2904,"number":2911,"owner":2860,"repository":2861,"state":2862,"title":2912,"updated_at":2913,"url":2914,"score":2915},"### Description\n\nDocs need a little bit of caring for v4\r\nSame for playgrounds\n\n### Suggested solution\n\n- [ ] Remove playground section on https://docs.tresjs.org/guide/#playground\r\n- [x] Remove basic demos from playground https://playground.tresjs.org/\r\n- [ ] Move Events demo from playground to docs (use sandbox)\r\n- [ ] Change naming sandbox to playground\r\n- [ ] Playground is gonna be Showcase/MadeWithTres\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.",[2905,2908],{"name":2906,"color":2907},"docs","0075ca",{"name":2909,"color":2910},"v4","7980EA",494,"Improvements Docs","2024-03-28T11:19:18Z","https://github.com/Tresjs/tres/issues/494",0.75463814,{"description":2917,"labels":2918,"number":2920,"owner":2860,"repository":2861,"state":2862,"title":2921,"updated_at":2922,"url":2923,"score":2924},"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",[2919],{"name":2906,"color":2907},152,"Add Algolia Search to docs","2024-03-28T11:19:27Z","https://github.com/Tresjs/tres/issues/152",0.75534576,{"description":2926,"labels":2927,"number":2929,"owner":2860,"repository":2861,"state":2862,"title":2930,"updated_at":2931,"url":2932,"score":2933},"### 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.",[2928],{"name":2888,"color":2889},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.7562717,{"description":2935,"labels":2936,"number":2937,"owner":2860,"repository":2897,"state":2862,"title":2938,"updated_at":2939,"url":2940,"score":2941},"### Describe the bug\n\nI've been using the `GLTFModel` component to load my models.\nUnfortunately, I can't programmatically modify or even access them.\nThe documentation provides this example:\n``` \n\u003Cscript setup lang=\"ts\">\nimport { GLTFModel, OrbitControls } from '@tresjs/cientos'\n\nconst modelRef = shallowRef\u003CTHREE.Object3D>()\n\nwatch(modelRef, (model) => {\n // Do something with the model\n model.position.set(0, 0, 0)\n})\n\u003C/script>\n``` \nUnfortunately, the object I receive in return is not a 3D Model. I don't even know what it is.\nIt looks like a `ref` without a `.value`, and I can't access any value.\n\nIt's something like this:\n```\n{\n \"dep\": {\n \"version\": 1,\n \"sc\": 0\n },\n \"__v_isRef\": true,\n \"__v_isShallow\": false,\n \"_rawValue\": {\n \"instance\": {\n \"metadata\": {\n \"version\": 4.6,\n \"type\": \"Object\",\n \"generator\": \"Object3D.toJSON\"\n },\n \"geometries\": [\n```\nI found a better approach, but unfortunately, it produces the same results. Instead of using `watch`, I’m now using the `@resolve` event from `Suspense`, which wraps the `GLTFModel`.\n\nHow can we programmatically modify the object when using the `GLTFModel` component?\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-tktzn1zk?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n1. Wait to load up\n2. Check the console logs\n\n### System Info\n\n```shell\nSystem:\n OS: Windows 11 10.0.26100\n CPU: (20) x64 12th Gen Intel(R) Core(TM) i7-12700H\n Memory: 2.57 GB / 15.68 GB\n Binaries:\n Node: 18.20.4 - C:\\Program Files\\nodejs\\node.EXE\n npm: 10.7.0 - C:\\Program Files\\nodejs\\npm.CMD\n Browsers:\n Edge: Chromium (132.0.2957.127)\n Internet Explorer: 11.0.26100.1882\n npmPackages:\n @tresjs/cientos: ^4.1.0 => 4.1.0\n @tresjs/core: ^4.3.2 => 4.3.2\n vite: ^6.0.11 => 6.0.11\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/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.",[],594,"Cant reach the model with `GLTFModel`","2025-03-05T12:22:33Z","https://github.com/Tresjs/cientos/issues/594",0.7573037,{"description":2943,"labels":2944,"number":2945,"owner":2860,"repository":2946,"state":2862,"title":2947,"updated_at":2948,"url":2949,"score":2950},"### Description\r\n\r\nAs a developer using Tres Nuxt devtools I would like to be able to modify object values from the devtools directly and visualize the changes on the scene in real time.\r\n\r\n### Suggested solution\r\n\r\nAn `action` hook is gonna be potentially implemented in https://github.com/Tresjs/tres/issues/478\r\n\r\nIntroduce an editable functionality on the devtools so values become inputs and attach the event to the change of the value\r\n\r\n```ts\r\nwindow.__TRES__DEVTOOLS__.action(\r\n {\r\n type: 'tres:edit'\r\n payload: {\r\n object: //obj uuid\r\n property: 'position.x'\r\n value: 2\r\n }\r\n }\r\n)\r\n```\r\n\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\n_No response_\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.",[],73,"nuxt","Devtools edit scene object values","2024-04-11T14:13:36Z","https://github.com/Tresjs/nuxt/issues/73",0.75864494,{"description":2952,"labels":2953,"number":2957,"owner":2860,"repository":2958,"state":2862,"title":2959,"updated_at":2960,"url":2961,"score":2962},"Inspiration \r\n\r\nhttps://codepen.io/prisoner849/pen/poNXPyv\r\n\r\n\r\n",[2954],{"name":2955,"color":2956},"demo","CAC7AC",84,"lab","Light Bloom example","2023-12-15T13:49:28Z","https://github.com/Tresjs/lab/issues/84",0.75916123,{"description":2964,"labels":2965,"number":2972,"owner":2860,"repository":2861,"state":2862,"title":2973,"updated_at":2974,"url":2975,"score":2976},"### Description\r\n\r\nSometimes I want to contain some shared logic for HTML User-Interface and 3d Content in the same component, for example the user clicks a `\u003Cbutton>` and something in the 3d scene acts accordingly. With the help of [portal-vue](https://portal-vue.linusb.org/) or [Teleport](https://vuejs.org/guide/built-ins/teleport.html) I have used this approach in the past, but with a custom made implementation of BabylonJS without using a custom renderer.\r\n\r\nExample:\r\n```vue\r\n\u003Ctemplate>\r\n \u003CGLTFModel path=\"my-model.glb\" v-if=\"isVisible\" />\r\n \r\n \u003CTeleport to=\"body\">\r\n \u003Cbutton @click=\"isVisible.value = false\">Hide GLTF\u003C/button>\r\n \u003C/Teleport>\r\n\u003C/template>\r\n```\r\n\r\n### Suggested solution\r\n\r\nEnable usage of portal-vue and/or Teleport. I have tried both, but they both throw different kinds of error:\r\n- portal-vue: \"[portal-vue]: Necessary Injection not found. Make sur you installed the plugin properly.\"\r\n- Teleport: \"Failed to locate Teleport target with selector \"body\" […]\"\r\n\r\nI suspect both errors are caused by the usage of a custom-renderer thus portal-vue/Teleport simply can't access their targets. It's a wild guess, but when moving everything outside of the `\u003CTresCanvas>` context it works just fine.\r\n\r\n### Alternative\r\n\r\n_No response_\r\n\r\n### Additional context\r\n\r\nI guess https://github.com/Tresjs/tres/issues/312 is somewhat of a similar topic\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.",[2966,2969],{"name":2967,"color":2968},"help wanted","008672",{"name":2970,"color":2971},"investigation","D03599",464,"Enable usage of \u003CTeleport>","2024-03-28T11:19:20Z","https://github.com/Tresjs/tres/issues/464",0.7641203,["Reactive",2978],{},["Set"],["ShallowReactive",2981],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDPTf56GfP5SG0FxTQ18hLsJaeCP3bop9RyZjZK524RU":-1},"/Tresjs/rapier/135"]