\r\n \u003CTresMeshNormalMaterial />\r\n \u003CHtml\r\n center\r\n transform\r\n :distance-factor=\"4\"\r\n :position=\"[0, 0, 0.65]\"\r\n :scale=\"[0.75, 0.75, 0.75]\"\r\n >\r\n \u003Cdiv>\r\n \u003Cp>This should not scroll\u003C/p>\r\n \u003C/div>\r\n \u003C/Html>\r\n \u003C/TresMesh>\r\n```\r\nI expect the first element to scroll, and the second to stay.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz\r\n Memory: 3.82 GB / 11.69 GB\r\n Container: Yes\r\n Shell: 3.6.1 - /usr/bin/fish\r\n Binaries:\r\n Node: 21.5.0 - ~/.local/share/nvm/v21.5.0/bin/node\r\n Yarn: 1.22.19 - /usr/bin/yarn\r\n npm: 10.2.4 - ~/.local/share/nvm/v21.5.0/bin/npm\r\n pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm\r\n bun: 1.0.7 - ~/.bun/bin/bun\r\n```\r\n\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.",[2892,2895],{"name":2893,"color":2894},"pending-triage","97A4FE",{"name":2896,"color":2897},"waiting for author","B145BC",507,"Native html scroll and @tresjs/cientos Html component behaviour","2024-03-30T15:37:07Z","https://github.com/Tresjs/tres/issues/507",0.7513741,{"description":2904,"labels":2905,"number":2906,"owner":2869,"repository":2870,"state":2871,"title":2907,"updated_at":2908,"url":2909,"score":2910},"### Describe the bug\n\nThe delta property of the `pointer-missed` is always zero (obvious [in the code](https://github.com/Tresjs/tres/blob/main/src/composables/useRaycaster/index.ts#L137-L139)).\r\n\r\nI have a project where object of the scene can be selected by clicking on them. To unselect the user can press where there is no object, which I implemented using the `pointer-missed `event on the `Trescanvas`. However, objects get also unselected when the user uses the mouse to drag the camera around. To prevent this I wanted to rely on the `delta` of the `pointer-missed` event, to discard events with dragging.\n\n### Reproduction\n\nhttps://github.com/Tresjs/tres/blob/main/src/composables/useRaycaster/index.ts#L137-L139\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n_No response_\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.",[],852,"The delta of pointer-missed events is always zero","2024-10-12T18:44:56Z","https://github.com/Tresjs/tres/issues/852",0.75422066,{"description":2912,"labels":2913,"number":2915,"owner":2869,"repository":2916,"state":2917,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Describe the bug\r\n\r\nI tried upgrading the `@tresjs/core` package from `3.0.1` to `3.1.x` and now every attempt to use the `useNuxtApp()` composable breaks the application.\r\n\r\n\u003Cimg width=\"569\" alt=\"Screenshot 2023-08-30 alle 00 45 56\" src=\"https://github.com/Tresjs/nuxt/assets/5191941/2dd34502-e8eb-4372-a8cb-2a4d98363659\">\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/github/kekkorider/nuxt-tres-starter/tree/tresjs-core-3-1?file=components%2FSampleBox.vue\r\n\r\n### Steps to reproduce\r\n\r\nIn `/components/SampleBox.vue`, comment out line 19, the one where `useNuxtApp()` is used.\r\nThe error will be gone.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: macOS 13.4.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 280.75 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.16.0 - ~/.nvm/versions/node/v18.16.0/bin/node\r\n Yarn: 1.22.19 - ~/.yarn/bin/yarn\r\n npm: 9.5.1 - ~/.nvm/versions/node/v18.16.0/bin/npm\r\n pnpm: 8.7.0 - /opt/homebrew/bin/pnpm\r\n Browsers:\r\n Chrome: 116.0.5845.110\r\n Edge: 114.0.1823.55\r\n Safari: 16.5.1\r\n```\r\n\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.",[2914],{"name":2857,"color":2858},33,"nuxt","closed","Unable to use `useNuxtApp()` since `@tresjs/core@3.1.0`","2023-09-12T08:36:40Z","https://github.com/Tresjs/nuxt/issues/33",0.71169704,{"description":2923,"labels":2924,"number":2915,"owner":2869,"repository":2870,"state":2917,"title":2929,"updated_at":2930,"url":2931,"score":2921},"Vue reactivity is based on [Proxy](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy). This allows Vue 3 to automatically track changes to data objects and update the corresponding DOM elements whenever the data changes.\r\n\r\nSince we are rendering a scene and updating it in every frame (60FPS), that means that we are updating the scene 60 times per second. If the object to be updated is reactive, Vue will try to update the scene 60 times per second. This is not a good idea 😅 and will be detrimental to performance, especially in big scenes\r\n\r\nHere is a benchmark of the difference between using a Proxy object and a plain object.\r\n\u003Cimg width=\"1224\" alt=\"proxy-benchmark\" src=\"https://user-images.githubusercontent.com/4699008/206704835-d0235c0d-e868-4c32-96f0-d6926b2c5563.png\">\r\n\r\nSource: [Proxy vs Plain Object](https://www.measurethat.net/Benchmarks/Show/12503/0/object-vs-proxy-vs-proxy-setter)\r\n\r\n## To discuss\r\n\r\n- [ ] How can we improve the performance of the core (ex use `shallowRef` instead of `ref`) See [Reactivity Advanced API](https://vuejs.org/api/reactivity-advanced.html)\r\n- [x] #34\r\n\r\nOne real world example is updating an instance for animation: \r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nconst boxRef: Ref\u003CTresInstance | null> = ref(null)\r\n\r\nonLoop(({ _delta, elapsed }) => {\r\n if (boxRef.value) {\r\n boxRef.value.rotation.y += 0.01\r\n boxRef.value.rotation.z = elapsed * 0.2\r\n }\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresMesh ref=\"boxRef\" :scale=\"1\" cast-shadow>\r\n \u003CTresBoxGeometry :args=\"[1, 1, 1]\" />\r\n \u003CTresMeshStandardMaterial v-bind=\"pbrTexture\" />\r\n \u003C/TresMesh>\r\n\u003C/template>\r\n```\r\n\r\nHere we are getting the ref for the mesh with the Mesh instance so we can update the rotation, but `boxRef` remains a Proxy, a solution would be to `unref` or use a shallowRef since Direct template ref are not available see https://github.com/vuejs/core/issues/1227\r\n\r\n\r\nI would love to have your input here @wheatjs @kissu @Astanusic \r\n\r\n## Food for though \r\n\r\nhttps://discoverthreejs.com/tips-and-tricks/#performance ",[2925,2926],{"name":2860,"color":2861},{"name":2927,"color":2928},"discussion 💭","AE4C80","Performance discussion","2023-12-13T08:55:23Z","https://github.com/Tresjs/tres/issues/33",{"description":2933,"labels":2934,"number":2935,"owner":2869,"repository":2916,"state":2917,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Describe the bug\n\nI added OrbitControls, and when scrolling I get the following error\r\n\r\n```\r\nWARNING: OrbitControls.js encountered an unknown camera type - dolly/zoom disabled.\r\n```\r\n\r\nMake it impossible to scroll to zoom in/out. \r\n\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/nuxt-starter-3nnslu?file=package.json\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSee https://stackblitz.com/edit/nuxt-starter-3nnslu?file=package.json\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.",[],49,"Nuxtjs: OrbitControls.js encountered an unknown camera type","2023-11-08T09:28:32Z","https://github.com/Tresjs/nuxt/issues/49",0.7293036,{"description":2941,"labels":2942,"number":2944,"owner":2869,"repository":2916,"state":2917,"title":2945,"updated_at":2946,"url":2947,"score":2948},"### Describe the bug\r\n\r\nI set up a brand new Nuxt3 project, added `@tresjs/nuxt` via npm and added it to modules section of **_nuxt.config.ts_** . I then added the `\u003CTresCanvas>` to the **_app.vue_**. The resulting `\u003Ccanvas ...>` in the DOM continuously grows in height... forever! What could be causing this, and how do I fix it? \r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/trescanvas-height-error?file=app.vue\r\n\r\n### Steps to reproduce\r\n\r\nRun `npm install` and then `npm run dev`. View the results using the url provided (typically [http://localhost:3000/](http://localhost:3000/)). When using Chrome you can see the height grow by opening the dev tools window and selecting the Elements and then hovering the mouse over the \u003Cbody> element. If you drill down to the \u003Ccanvas> element you'll see the height continuously increasing!!!\r\n\r\n### System Info\r\n\r\n```shell\r\nNo errors reported. But the size of the window is continuously increasing!!!\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.",[2943],{"name":2857,"color":2858},48,"\u003CTresCanvas> results in continuous height growth of the \u003Ccanvas>","2024-01-26T14:41:44Z","https://github.com/Tresjs/nuxt/issues/48",0.7309086,{"description":2950,"labels":2951,"number":2952,"owner":2869,"repository":2870,"state":2917,"title":2953,"updated_at":2954,"url":2955,"score":2956},"### Describe the bug\n\n\u003Cimg width=\"1006\" alt=\"Screenshot 2024-01-21 at 22 33 48 copy\" src=\"https://github.com/Tresjs/tres/assets/20469369/ff81041f-518b-46dc-87a5-d8c4aa16c8c4\">\r\n\r\nIn the [Tres docs](https://docs.tresjs.org/guide/), an error appears in the sandbox:\r\n\r\n```\r\nFailed to resolve component: TresDirectionalLight\r\nIf this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.\r\n at \u003CRepl>\r\n```\r\n\r\n\r\n\n\n### Reproduction\n\nN/A\n\n### Steps to reproduce\n\n* in the browser, navigate to https://docs.tresjs.org/guide/\r\n* in the sandbox window, see the error\n\n### System Info\n\n```shell\nTested in:\r\n\r\n* Firefox 127.0.1 (Mac ARM)\r\n* Chrome Version 120.0.6099.234 (Mac ARM)\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.",[],521,"docs(sandbox): \"Failed to resolve component: TresDirectionalLight\"","2024-01-22T15:10:07Z","https://github.com/Tresjs/tres/issues/521",0.73451674,{"description":2958,"labels":2959,"number":2961,"owner":2869,"repository":2916,"state":2917,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Describe the bug\n\n\r\n\n\n### Reproduction\n\nplayground\n\n### Steps to reproduce\n\nRun `npm install` and then `npm run dev` or `npm run build & npm run preview`\n\n### System Info\n\n```shell\nSystem:\r\n OS: macOS 13.5.1\r\n CPU: (8) arm64 Apple M1 Pro\r\n Memory: 97.73 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.14.1 - ~/.nvm/versions/node/v18.14.1/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 9.3.1 - ~/.nvm/versions/node/v18.14.1/bin/npm\r\n Browsers:\r\n Brave Browser: 117.1.58.135\r\n Chrome: 117.0.5938.149\r\n Firefox: 118.0.1\r\n Safari: 16.6\r\n```\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.",[2960],{"name":2857,"color":2858},46,"Multiple Instances of ThreeJS - Orbitcontrols broken","2023-10-06T03:55:26Z","https://github.com/Tresjs/nuxt/issues/46",0.7347826,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f3OrInJlXCc8kDaPg5X-4IpI2HGv3Z5XyYROdDrH-ERk":-1},"/Tresjs/cientos/403"]