\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.",[2890],{"name":2891,"color":2892},"pending-triage","97A4FE",791,"reactive property bug","2024-08-21T09:46:13Z","https://github.com/Tresjs/tres/issues/791",0.7787785,{"description":2899,"labels":2900,"number":2905,"owner":2880,"repository":2906,"state":2882,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Description\r\n\r\nAs a dev using TresJS, I would like to have an abstraction for [Drag Controls](https://threejs.org/docs/#examples/en/controls/DragControls)\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nSimilar to https://github.com/pmndrs/drei?tab=readme-ov-file#dragcontrols\r\nhttps://threejs.org/examples/?q=drag#misc_controls_drag\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/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.",[2901,2904],{"name":2902,"color":2903},"feature","c2e0c6",{"name":2871,"color":2872},455,"cientos","Drag Controls","2024-11-27T10:47:00Z","https://github.com/Tresjs/cientos/issues/455",0.7807567,{"description":2912,"labels":2913,"number":2917,"owner":2880,"repository":2881,"state":2882,"title":2918,"updated_at":2919,"url":2920,"score":2921},"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",[2914],{"name":2915,"color":2916},"docs","0075ca",152,"Add Algolia Search to docs","2024-03-28T11:19:27Z","https://github.com/Tresjs/tres/issues/152",0.78435963,{"description":2923,"labels":2924,"number":1042,"owner":2880,"repository":2928,"state":2882,"title":2929,"updated_at":2930,"url":2931,"score":2932},"",[2925],{"name":2926,"color":2927},"enhancement","a2eeef","lab","Add source code to examples content","2024-04-08T16:47:32Z","https://github.com/Tresjs/lab/issues/22",0.80605465,{"description":2934,"labels":2935,"number":2951,"owner":2880,"repository":2881,"state":2882,"title":2952,"updated_at":2953,"url":2954,"score":2955},"### Describe the bug\r\n\r\nUsing ```\u003CTresCanvas>\u003C/TresCanvas>``` will cause errors: \r\nUncaught TypeError: l.default is not a function\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-is86dt?file=src%2FApp.vue\r\n\r\n### Steps to reproduce\r\n\r\nOpen reproduction link\r\nCheck console\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.",[2936,2939,2942,2945,2948],{"name":2937,"color":2938},"good first issue","7057ff",{"name":2940,"color":2941},"help wanted","008672",{"name":2943,"color":2944},"PR welcome","2D76B0",{"name":2946,"color":2947},"p2-edge-case","ABCC40",{"name":2949,"color":2950},"has-workaround","AEA9C4",815,"Error when using empty TresCanvas ","2024-09-06T14:16:26Z","https://github.com/Tresjs/tres/issues/815",0.8065674,{"description":2957,"labels":2958,"number":1660,"owner":2880,"repository":2906,"state":2959,"title":2960,"updated_at":2961,"url":2962,"score":2963},"**Is your feature request related to a problem? Please describe.**\r\nCurrently, there is no straightforward way to tie HTML content to any object of a TresJS scene and have it projected to the object's whereabouts automatically. This feature would be useful for users who want to create rich, interactive 3D scenes with HTML content that moves and scales along with the 3D objects.\r\n\r\n**Describe the solution you'd like**\r\nI would like to have a new HTML component that allows users to tie HTML content to any object in their TresJS scene. The component should support a variety of properties for customization, such as the wrapping element, className, positioning, scaling, occlusion, and more.\r\n\r\n**Suggested solution**\r\nIn the TresJS library, we could provide the following implementation as a Vue component:\r\n\r\n```vue\r\n\u003Ctemplate>\r\n \u003CHtml\r\n :as=\"'div'\"\r\n :wrapperClass=\"wrapperClass\"\r\n :prepend=\"prepend\"\r\n :center=\"center\"\r\n :fullscreen=\"fullscreen\"\r\n :distanceFactor=\"10\"\r\n :zIndexRange=\"[100, 0]\"\r\n :portal=\"domnodeRef\"\r\n :transform=\"transform\"\r\n :sprite=\"sprite\"\r\n :calculatePosition=\"calculatePosition\"\r\n :occlude=\"occlude\"\r\n :onOcclude=\"onOcclude\"\r\n v-bind=\"groupProps\"\r\n v-bind=\"divProps\"\r\n >\r\n \u003Ch1>hello\u003C/h1>\r\n \u003Cp>world\u003C/p>\r\n \u003C/Html>\r\n\u003C/template>\r\n\r\n\u003Cscript>\r\nimport { Html } from 'path/to/html-component';\r\n\r\nexport default {\r\n components: {\r\n Html,\r\n },\r\n // ...\r\n};\r\n\u003C/script>\r\n```\r\nThis implementation should cover the desired features and provide users with the ability to create dynamic 3D scenes with HTML content. \r\nhttps://github.com/pmndrs/drei/blob/master/src/web/Html.tsx\r\n\r\n## Additional context\r\nThis feature is inspired by the React Three Fiber (R3F) library, which provides a similar functionality for React users. Implementing this feature in TresJS would allow Vue developers to achieve the same level of interactivity and customization in their 3D scenes.\r\n\r\n\r\n",[],"closed","HTML component","2023-09-27T06:10:48Z","https://github.com/Tresjs/cientos/issues/23",0.767922,{"description":2965,"labels":2966,"number":2968,"owner":2880,"repository":2969,"state":2959,"title":2970,"updated_at":2971,"url":2972,"score":2973},"**Is your feature request related to a problem? Please describe.**\nAdvanced users might want to use the attach feature from the core instead of post-processing. I think we should mention it in the docs.",[2967],{"name":2915,"color":2916},195,"post-processing","Have a section mentioning the attach feature in the docs","2025-04-13T10:14:24Z","https://github.com/Tresjs/post-processing/issues/195",0.7780773,{"description":2975,"labels":2976,"number":2981,"owner":2880,"repository":2881,"state":2959,"title":2982,"updated_at":2983,"url":2984,"score":2985},"**Is your feature request related to a problem? Please describe.**\r\nAtm we are using `provide/inject` API to share the renderer state, especially to be able to extend the catalogue on cientos. \r\n\r\n`useTres` was an attempt to achieve a local state but wasn't that efficient or type-safe. Also is using `reactive` atm which can affect performance.\r\n\r\n**Describe the solution you'd like**\r\nA state that is:\r\n- Performant: doesn't affect the performance of the scene\r\n- Scalable\r\n- Typed\r\n\r\n**Suggested solution**\r\nMaybe `shallowReactive` with `readonly` for some properties. I'm also thinking a lot about pinia, especially for devtools support but I still don't know if it's possible to make the state shallowReactive to avoid issues (specially for scene)\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[2977,2978],{"name":2940,"color":2941},{"name":2979,"color":2980},"performance","3F1D85",37,"Better state management `useTres`","2023-02-16T08:09:50Z","https://github.com/Tresjs/tres/issues/37",0.7828748,{"description":2987,"labels":2988,"number":2993,"owner":2880,"repository":2881,"state":2959,"title":2994,"updated_at":2995,"url":2996,"score":2997},"### Description\r\n\r\n`useRenderLoop` is used to provide the end user a callback method `onLoop` every frame per second to align with the one that the core uses for rendering.\r\n\r\nIt's based on `useRafn` composable from `@vueuse/core` https://vueuse.org/core/useRafFn/ but due to the feedback of the community, there are few issues related to its current behavior:\r\n\r\n- #607 \r\n- #252 \r\n- tresjs/nuxt#97\r\n\r\n### Suggested solution\r\n\r\nRefactor `useRenderLoop` to move away from `useRafn`\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.",[2989,2992],{"name":2990,"color":2991},"experimental","01D7E6",{"name":2874,"color":2875},633,"Reconsider how useRenderLoop works.","2024-05-30T06:43:03Z","https://github.com/Tresjs/tres/issues/633",0.7835437,["Reactive",2999],{},["Set"],["ShallowReactive",3002],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fXVHL8SXEpiFSX4yzhs6O7tBqAV_cKb9SYV4v6uqioQE":-1},"/Tresjs/cientos/611"]