\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.",[3034,3037],{"name":3035,"color":3036},"help wanted","008672",{"name":3038,"color":3039},"investigation","D03599",464,"tres","Enable usage of \u003CTeleport>","2024-03-28T11:19:20Z","https://github.com/Tresjs/tres/issues/464",0.78549933,{"description":3047,"labels":3048,"number":352,"owner":3024,"repository":3049,"state":3026,"title":3050,"updated_at":3051,"url":3052,"score":3053},"### Description\n\nAs a developer of TresJS I want to have the type of the global callback hook (`window.parent.parent.__TRES__DEVTOOLS__.cb`), so I can use it in core and make it more type safe.\n\n### Suggested solution\n\nExpose the type.\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.",[],"nuxt","Make global callback hook type available","2025-04-24T10:35:09Z","https://github.com/Tresjs/nuxt/issues/163",0.78652513,{"description":3055,"labels":3056,"number":1221,"owner":3024,"repository":3025,"state":3026,"title":3058,"updated_at":3059,"url":3060,"score":3061},"### Description\r\n\r\nGood controls for presentation purposes\r\n\r\n### Suggested solution\r\n\r\nhttps://drei.docs.pmnd.rs/controls/presentation-controls#presentationcontrols\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/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.",[3057],{"name":3021,"color":3022},"Presentation Controls","2024-11-26T07:08:48Z","https://github.com/Tresjs/cientos/issues/108",0.79416466,{"description":3063,"labels":3064,"number":3068,"owner":3024,"repository":3025,"state":3026,"title":3069,"updated_at":3070,"url":3071,"score":3072},"### Describe the bug\r\n\r\nFollowing a link with a named anchor to a page including `ScrollControls` does not scroll the resulting page to the anchor.\r\n\r\nE.g., where `http://example.org` is a page including `ScrollControls`, from a new tab, pasting `http://example.org#features` into the address bar and pressing `Return` will load the page, but the page will not be scrolled to the `features` anchor.\r\n\r\n#### Behavior\r\n\r\nOn page load, the page is not scrolled to the named anchor. (offset y = 0)\r\n\r\n#### Expected behavior\r\n\r\nOn page load, the page should be scrolled to the named anchor.\r\n\r\n\r\n### Reproduction\r\n\r\nNo StackBlitz provided. It doesn't appear that the bug is reproducible on StackBlitz' window-in-window setup.\r\n\r\n### Steps to reproduce\r\n\r\n#### Example markup\r\n\r\n```\r\n\u003Ca href=\"#two\">Jump to section 2\u003C/a>\r\n\u003Csection>\u003Ch1>Section 1\u003C/h1>\u003C/section>\r\n\u003Csection>\u003Ch2 id=\"#two\">Section 2\u003C/h2>\u003C/section>\r\n```\r\n\r\n1. In the text editor, insert the example markup into the playground/src/pages/controls/ScrollControlsDemo.vue and save.\r\n2. On the command line, start the playground with `pnpm run playground` if not already running.\r\n3. In the browser, open a new, blank tab.\r\n4. In the browser, paste `http://localhost:5173/controls/scroll-controls#two` in the address bar and hit `Enter`.\r\n\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 14.0\r\n CPU: (8) arm64 Apple M1\r\n Memory: 77.72 MB / 8.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 20.8.1 - /opt/homebrew/bin/node\r\n npm: 10.1.0 - /opt/homebrew/bin/npm\r\n pnpm: 8.6.5 - /opt/homebrew/bin/pnpm\r\n Browsers:\r\n Chrome: 119.0.6045.199\r\n Safari: 17.0\r\n npmPackages:\r\n @tresjs/core: 3.5.0 => 3.5.0 \r\n @tresjs/eslint-config-vue: ^0.2.1 => 0.2.1 \r\n vite: ^4.5.0 => 5.0.4 \r\n\r\nTested in Chrome, FF, Safari on Mac.\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/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.\r\n\r\nRelated: https://github.com/Tresjs/cientos/pull/288#issuecomment-1838828275",[3065],{"name":3066,"color":3067},"bug","d73a4a",301,"ScrollControls: external links to named anchors don't scroll the page","2024-10-25T08:05:04Z","https://github.com/Tresjs/cientos/issues/301",0.80919653,{"description":3074,"labels":3075,"number":3079,"owner":3024,"repository":3025,"state":3026,"title":3080,"updated_at":3081,"url":3082,"score":3083},"### Description\n\nAs a developer using TresJS,\nI want a straightforward way to enable a bounding volume hierarchy (BVH) on my 3D meshes and geometries,\nso that I can benefit from drastically improved raycasting performance and more efficient collision detection in complex scenes.\n\n### Reason / Use Cases\n- **Performance Gains**: A BVH can accelerate raycasting operations, especially for large/complex geometry.\n\n- **Collision Detection**: Many real-time applications (e.g. games, simulations) need fast collision checks; BVH can help optimize these.\n\n- **Simplicity & Consistency**: Having a composable approach in TresJS aligns with the rest of the API, keeping logic encapsulated and Vue-friendly.\n\n### Suggested solution\n\nIn the appropriate module (e.g.,`/useBVH.ts` or similar), we could provide:\n\n> [!TIP]\n> Check R3F Drei's implementation https://drei.docs.pmnd.rs/performances/bvh\n\n```ts\nimport { ref, onMounted } from 'vue'\n// Possibly import { MeshBVH, MeshBVHVisualizer } from 'three-mesh-bvh' \n// or any relevant utility from three-mesh-bvh\n\nexport function useBVH(geometryRef) {\n const bvhRef = ref(null)\n\n onMounted(() => {\n // Pseudocode: \n // 1. Create or update the BVH\n // 2. Store the result in bvhRef\n // 3. Optionally expose utilities for intersection, collision checks, etc.\n\n // Example:\n // bvhRef.value = new MeshBVH(geometryRef.value)\n })\n\n // Return whatever is helpful for the user:\n // e.g. the BVH instance, methods for raycasting, collision checks, etc.\n return {\n bvhRef,\n // raycastWithBVH, collisionCheck, etc.\n }\n}\n```\n\nReactive Updates\n\nOptionally watch for changes in the provided geometry or the mesh and re-build BVH if necessary.\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n- Potentially wrap [three-mesh-bvh](https://github.com/gkjohnson/three-mesh-bvh) or another library under the hood.\n- Consider how to handle dynamic geometries versus static ones (e.g., partial updates vs. full rebuilds).\n- Align the API style with other TresJS composables (useXyz naming, returning refs or methods, etc.).\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.",[3076],{"name":3077,"color":3078},"p4-important-bug","D93F0B",604,"useBVH (Bounding Volume Hierarchy) composable","2025-03-24T15:26:01Z","https://github.com/Tresjs/cientos/issues/604",0.8390817,{"description":3085,"labels":3086,"number":3087,"owner":3024,"repository":3088,"state":3089,"title":3090,"updated_at":3091,"url":3092,"score":3093},"Hello\r\n\r\nThanks for the great work. Just started with Tres in Vue, and love it, but I'm getting the two below warnings in Chrome when loading and animating a gltf model, using your approach here to load the model : https://docs.tresjs.org/cookbook/load-models.html#using-usegltf\r\n\r\n**The Warnings:**\r\n\r\nchunk-RZFXUODE.js?v=c85fe90a:33228 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952\r\n\r\nmain.js:5 [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\nThe warnings vanish if I don't include my HeroBackgroundTres component (ok, have to come up with a better name for it)\r\n\r\n**HeroBackgroundTres.vue code:**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport Model from '@/model/Model.vue';\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cdiv class=\"tres-wrapper\">\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera :position=\"[-3, -2, 4]\" />\r\n \u003CSuspense>\r\n \u003CModel />\r\n \u003C/Suspense>\r\n \u003CTresDirectionalLight :intensity=\"2\" />\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n.tres-wrapper {\r\n position: absolute;\r\n top: 0;\r\n right: 0;\r\n width: 100%;\r\n height: 100%;\r\n}\r\n\u003C/style>\r\n```\r\n\r\n**Model.vue**\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { useTresContext } from '@tresjs/core'\r\nimport { useGLTF } from '@tresjs/cientos';\r\nimport { useLoop } from '@tresjs/core';\r\nimport { shallowRef } from 'vue';\r\n\r\nconst boxRef = shallowRef();\r\nconst context = useTresContext();\r\nconst path = './src/assets/gltf/scene.gltf';\r\nconst { scene, nodes, animations, materials } = await useGLTF(path, { draco: true });\r\n\r\nconst { onBeforeRender } = useLoop();\r\n\r\nonBeforeRender(({ delta, elapsed }) => {\r\n if (boxRef.value) {\r\n boxRef.value.rotation.y += delta\r\n boxRef.value.rotation.z = elapsed * 0.2\r\n }\r\n})\r\n\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003Cprimitive :object=\"scene\" ref=\"boxRef\" />\r\n\u003C/template>\r\n```\r\nThankful for any insights as I get a slight rash from yellow warnings. Again, Tres is great, keep up the fine work \r\n\r\n.T 😎",[],214,"lab","closed","Two Warnings in Chrome when using gltf Model approach to load and run","2024-12-14T13:52:53Z","https://github.com/Tresjs/lab/issues/214",0.7741168,{"description":3095,"labels":3096,"number":3097,"owner":3024,"repository":3041,"state":3089,"title":3098,"updated_at":3099,"url":3100,"score":3101},"### Description\n\nAs a developer of TresJS I don't want any deprecated method calls.\n\n### Suggested solution\n\nremove them\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.",[],989,"Remove deprecated toValue calls","2025-04-22T17:09:10Z","https://github.com/Tresjs/tres/issues/989",0.7851305,{"description":3103,"labels":3104,"number":3116,"owner":3024,"repository":3041,"state":3089,"title":3117,"updated_at":3118,"url":3119,"score":3120},"### Describe the bug\n\nVscode intellisense autocompletion tooltip is not working for custom render components. \r\n\r\nTresPerspectiveCamera (custom renderer):\r\n\r\n\r\n\r\nTresCanvas (actual vue component):\r\n\r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/~/edit/tresjs-minimal-reproduction?file=package.json\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: 62.16 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: 9.4.0 - ~/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: 126.0.6478.128\r\n Safari: 17.5\r\n npmPackages:\r\n @tresjs/cientos: 3.9.0 => 3.9.0 \r\n @tresjs/core: workspace:^ => 4.2.1 \r\n @tresjs/leches: 0.15.0-next.3 => 0.15.0-next.3\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.",[3105,3106,3109,3112,3115],{"name":3035,"color":3036},{"name":3107,"color":3108},"dx","1576AD",{"name":3110,"color":3111},"types","5C076E",{"name":3113,"color":3114},"PR welcome","2D76B0",{"name":3077,"color":3078},785,"Vscode intellisense autocompletion not getting Tres components props","2024-09-06T02:50:54Z","https://github.com/Tresjs/tres/issues/785",0.79316837,{"description":3122,"labels":3123,"number":3126,"owner":3024,"repository":3041,"state":3089,"title":3127,"updated_at":3128,"url":3129,"score":3130},"**Describe the bug**\r\nThis bug comes from a new user trying to set her first scene using the documentation here https://tresjs.org/guide/your-first-scene.html\r\n\r\nSeems like the code provided in the documentation is not enough and is frustrating because they are experiencing a blank page.\r\nThe main issue was the camera since `OrbitControls` is not used in the first example\r\n\r\nhttps://twitter.com/puppycat_uaena/status/1643857982512594944?s=20\r\n\r\n**Expected behavior**\r\nMake it easier for users and add default values to the camera if not set.\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\r\n\r\n\r\n\r\n",[3124,3125],{"name":3066,"color":3067},{"name":3107,"color":3108},190,"[v2] - Set default position and look-at for Camera","2023-04-06T09:12:33Z","https://github.com/Tresjs/tres/issues/190",0.7965119,["Reactive",3132],{},["Set"],["ShallowReactive",3135],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fDtUVTAuy_ZnUKo57E_Cyjm9dOnEzqGXgrkPHWDGp1Cw":-1},"/Tresjs/tres/986"]