\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.",[3139,3142],{"name":3140,"color":3141},"pending-triage","97A4FE",{"name":3143,"color":3144},"waiting for author","B145BC",507,"Tresjs","tres","open","Native html scroll and @tresjs/cientos Html component behaviour","2024-03-30T15:37:07Z","https://github.com/Tresjs/tres/issues/507",0.7475704,{"description":3154,"labels":3155,"number":3156,"owner":3146,"repository":3147,"state":3148,"title":3157,"updated_at":3158,"url":3159,"score":3160},"### Description\n\nFirst of all, thank you for your work! Tresjs has really helped us keeping a composable and declarative structure for our 3D scenes, with a seamless integration with Vue.\r\n\r\nAs our app grew, we have noticed that the rendering loop is using a significant part of the resources on low-end platforms. This was honestly not much of an issue before we started using web workers to offload some computationally intensive tasks. We noticed that the browser is highly prioritizing the main thread over the web workers, making them virtually useless when the main loop is too demanding.\n\n### Suggested solution\n\nWe would like to have the rendering loop and all the Tree artillery in a dedicated web worker with the help of an [offscreen canvas](https://developer.mozilla.org/en-US/docs/Web/API/OffscreenCanvas).\r\n\r\nNote that this would imply some _asynchronous_ messaging system between the DOM thread and the worker using [postMessage](https://developer.mozilla.org/en-US/docs/Web/API/Worker/postMessage).\n\n### Alternative\n\nLimiting the FPS is a workaround, but it does not really solve the problem because it won't adapt to the available computational power. \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.",[],833,"Rendering loop in web worker","2024-09-16T08:24:26Z","https://github.com/Tresjs/tres/issues/833",0.7595023,{"description":3162,"labels":3163,"number":3167,"owner":3146,"repository":3147,"state":3148,"title":3168,"updated_at":3169,"url":3170,"score":3171},"## Description\n\nAs a developer using TresJS, I need a way to gracefully handle and display runtime errors that occur within the TresCanvas component and its children. This would improve the development experience and make it easier to debug issues in production.\n\n## Motivation\nCurrently, when an error occurs within TresCanvas or any of its child components (lights, meshes, materials, etc.) or threejs, the error can cause the entire application to crash or render a blank canvas without any meaningful feedback. This makes it difficult to:\n\n1. Identify the source of the error\n2. Debug issues in development\n3. Provide a fallback UI in production\n4. Handle errors gracefully without affecting the rest of the application\n\n## Proposal\n\nAdd an Error Boundary feature to TresCanvas that would:\n\n1. Catch runtime errors in:\n - Scene initialization\n - Component mounting/unmounting\n - Animation frame updates\n - Resource loading (textures, models, etc.)\n - Child component errors\n\n2. Provide a customizable error display that shows:\n - Error message and stack trace (in development)\n - Component tree path to the error\n - Simplified error message (in production)\n\n3. Include built-in error handling for common ThreeJS-specific errors:\n - WebGL context loss\n - Texture loading failures\n - Geometry errors\n - Material compilation errors\n\n\n## Suggested solution\n\n### Implementation Details\n\n```vue\n\u003Ctemplate>\n \u003CTresCanvas\n :error-boundary=\"true\"\n :error-fallback=\"customErrorComponent\"\n @error=\"handleError\"\n >\n \u003C!-- Scene content -->\n \u003C/TresCanvas>\n\u003C/template>\n```\n\nThe error boundary would inject necessary CSS styles automatically for the error display, eliminating the need for external CSS files. The styles would be scoped to the error boundary container to avoid conflicts.\n\n### Default Error Display\nThe default error display would be a styled overlay with:\n- Error message\n- Stack trace (in development)\n- Retry button\n- Option to copy error details\n- Responsive design that maintains the canvas aspect ratio\n\n```typescript\n// Internal styling injection\nconst errorStyles = `\n .tres-error-boundary {\n position: relative;\n width: 100%;\n height: 100%;\n background: rgba(30, 30, 30, 0.95);\n color: #fff;\n font-family: monospace;\n padding: 1rem;\n overflow: auto;\n }\n .tres-error-message {\n color: #ff5555;\n margin-bottom: 1rem;\n }\n .tres-error-stack {\n font-size: 0.9em;\n white-space: pre-wrap;\n }\n .tres-error-retry {\n background: #4a4a4a;\n border: none;\n color: white;\n padding: 0.5rem 1rem;\n margin-top: 1rem;\n cursor: pointer;\n }\n`\n```\n\n## Opt-in vs Opt-out Discussion\n\n### Opt-in Approach\n\n```vue\n\u003C!-- Explicit opt-in -->\n\u003CTresCanvas :error-boundary=\"true\">\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n```\n\n#### Pros:\n- More explicit and intentional usage\n- Smaller initial bundle size (code-splitting possible)\n- Developers consciously choose when to use error boundaries\n- Better control over error handling strategies\n\n#### Cons:\n- Requires additional configuration for each TresCanvas instance\n- May lead to inconsistent error handling across the application\n- Developers might forget to add error boundaries where needed\n\n### Opt-out Approach\n\n```vue\n\u003C!-- Error boundaries enabled by default -->\n\u003CTresCanvas>\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n\n\u003C!-- Explicit opt-out -->\n\u003CTresCanvas :error-boundary=\"false\">\n \u003C!-- Scene content -->\n\u003C/TresCanvas>\n```\n\n#### Pros:\n- Better developer experience out of the box\n- Consistent error handling across the application\n- Safer default behavior\n- Less configuration needed\n\n#### Cons:\n- Slightly larger initial bundle size\n- May be unnecessary for simple scenes\n- Less explicit about error handling behavior\n\n\n\n\n### Alternative\n\n_No response_\n\n### Additional context\n\n## Questions for Discussion\n\n1. Should error boundaries be opt-in or opt-out by default?\n2. What additional information would be helpful in the error display?\n3. Should we provide different error displays for development and production?\n4. How should we handle WebGL-specific errors differently from Vue component errors?\n\nFeel free to share your thoughts and suggestions on this proposal!\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.",[3164],{"name":3165,"color":3166},"p3-significant","2C78E3",923,"Error Boundary for TresCanvas","2025-02-06T13:45:39Z","https://github.com/Tresjs/tres/issues/923",0.76926655,{"description":3173,"labels":3174,"number":3179,"owner":3146,"repository":3180,"state":3148,"title":3181,"updated_at":3182,"url":3183,"score":3184},"### Description\n\nAs developer using TresJs I would like to have a easy way to \"embed\" images (textures) to an existing mesh.\n\n### Suggested solution\n\nSee: https://github.com/pmndrs/drei#decal\n\n### Alternative\n\nFeel free to come with another alternative\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.",[3175,3178],{"name":3176,"color":3177},"feature","c2e0c6",{"name":3165,"color":3166},282,"cientos","Decal component","2024-11-24T11:20:26Z","https://github.com/Tresjs/cientos/issues/282",0.7694401,{"description":3186,"labels":3187,"number":3188,"owner":3146,"repository":3147,"state":3148,"title":3189,"updated_at":3190,"url":3191,"score":3192},"### Describe the bug\n\nI would like to render the CatmullRomCurve3 component. On the linked Playground reproduction case (which uses TresJS 3.9.0 and Cientos 3.9.0), I get the following error:\r\n```\r\nInvalid watch source: A watch source can only be a getter/effect function, a ref, a reactive object, or an array of these types.\r\n at \u003CLine2points=[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]vertex-colors=undefinedcolor=\"#fbb03b\" ...>\r\n at \u003CCatmullRomCurve3points=-1.5,0,0,-0.5,1,0,0.5,0,0,1.5,1,0segments=40line-width=10 ...>\r\n at \u003CApp>\r\n```\r\nwhich is strange because I didn't declare any watcher.\r\n\r\nStranger: [this Stackblitz](https://stackblitz.com/edit/tresjs-basic-jednrn?file=src%2Fcomponents%2FTheExperience.vue) that includes the same SFC displays the curve properly.\n\n### Reproduction\n\nhttps://play.tresjs.org/#eNqVVE2P2jAQ/StWethDyQeCUgmlFS1a9ePQrbZ7IxxCMoBZf8l2gArx3zt2SAjb3RULOcRv3jw/z4xzCB40mC9KRdsKgnGQmkJTZYkBWynCcrH6lAXWZMHnTFCupLbkQFzKNBfb3JAjWWrJyc3EIrYxcSE13HSo09zyirF7yaeV3sKgR+70gtqpFFZL9kw+BWGlQYk0rq3gxriwwBXLLeCKkLRjoGCQ67CQTGp0+m64dH9vl+Avfbp/DRMyVpIKazBlNgv70YceSfCZ98gsTNyqf1r5RRPyPB+ZZ0GrZGDF0bTTGiYdnFEB4Y6Wdo2RfifSml0uFslg0QTixrM73TdNy+/AFOgzflm5Gk7jcy0QSOO2UEEvqLsQ8lxFGyMFtvfgcrJTALs6Jh5xWLeDLpAFa2uVGcdxUQrML4HRrY4E2FgoHnfpk0E0ivpxSY2NHYzsLOj9J1y39i3adQbKf4ySs/wJvtzF7iB/VLm4xnvLnQyjpDXegBGnLqervdZwla7jTVBxlKDf92B4twx4wSoDV9e3Q5/0cQxRkYoS9hG/rO6JZ9a5hvINwnXCa9JIDEvg9ArRhuoOP4xGMaOLrqRTPGbiiDNpTSHFkq6eTGQhuaIM9J2yVIrLycwZk7ufHrO6gtZfsYbi8Rl8Y/a15d84LIC3vtvKXK/A1uHbP79gj+9tkMuyYqfmvBC8ByNZ5TzWtK+VKNF2h+fd/vAXjIrVg7ndWxCmOdSFUftXgUdnzaehnbUamPvCeb5vx/SVKp1PNoj8Z84X/PgPoizpCg==\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nTresJS 3.9.0\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.",[],694,"Invalid watch source error when declaring a CatmullRomCurve3","2024-05-31T23:36:28Z","https://github.com/Tresjs/tres/issues/694",0.77241343,{"description":3194,"labels":3195,"number":3196,"owner":3146,"repository":3147,"state":3197,"title":3198,"updated_at":3199,"url":3200,"score":3201},"### Describe the bug\r\n\r\nHi, I'm using TresJs v2(@tres/core) in Nuxt3.\r\nThrough your docs and kind explanations, I succeeded in configuring the environment and displaying 3d objects in Nuxt3.\r\n\r\nHowever, if a vue component (I made) containing the TresCanvas tag is unmounted according to the page route movement or certain conditions, and then re-enters the page and is newly mounted, it seems that the object is not rendered on the canvas tag.\r\n\r\nCan you check this?\r\nYou can see an example in the reproduction link below. You can check it when you toggle v-if with the toggle button.\r\nThank you.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-36xfsn?file=nuxt.config.ts,app.vue (in Nuxt3)\r\nhttps://stackblitz.com/edit/tresjs-basic-i4h4kk?file=src%2FApp.vue (same in Vue3)\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\nnpm packages version\r\n- nuxt: 3.5.3\r\n- three: 0.153.0\r\n- @tresjs/core: 2.1.3\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nyarn\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.",[],302,"closed","Nuxt3 + Tresjs rendering issue(when remounting, not displaying)","2023-06-19T15:26:29Z","https://github.com/Tresjs/tres/issues/302",0.72763056,{"description":3203,"labels":3204,"number":3211,"owner":3146,"repository":3147,"state":3197,"title":3212,"updated_at":3213,"url":3214,"score":3215},"### Description\n\nAs a TresJS developer, I would like to have better type support and IntelliSense. The idea would be to replace the current approach of generating the types on the build.\n\n### Suggested solution\n\nCody from Pmndrs gave me a hint on how R3F is tackling the typing. https://github.com/pmndrs/react-three-fiber/blob/v9/packages/fiber/src/three-types.ts\r\n\r\n```ts\r\ntype ThreeExports = typeof THREE\r\ntype ThreeElementsImpl = {\r\n [K in keyof ThreeExports as Uncapitalize\u003CK>]: ThreeExports[K] extends ConstructorRepresentation\r\n ? ThreeElement\u003CThreeExports[K]>\r\n : never\r\n}\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.",[3205,3208],{"name":3206,"color":3207},"dx","1576AD",{"name":3209,"color":3210},"types","5C076E",268,"Refactor typescript support from build to runtime","2023-05-21T09:05:02Z","https://github.com/Tresjs/tres/issues/268",0.73929584,{"description":3217,"labels":3218,"number":3226,"owner":3146,"repository":3227,"state":3197,"title":3228,"updated_at":3229,"url":3230,"score":3231},"### Description\n\nThere are tons of props that we should be able to set in our RigidBody/collider\r\n\r\n- gravityScale\r\n- restitution\r\n- friction\r\n- mass (colliders)\n\n### Suggested solution\n\nAdding as a props and proper documentation\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.",[3219,3222,3223],{"name":3220,"color":3221},"enhancement","a2eeef",{"name":3165,"color":3166},{"name":3224,"color":3225},"v1","5B6B67",119,"rapier","Props to the RigidBody/Colliders","2024-09-26T12:31:38Z","https://github.com/Tresjs/rapier/issues/119",0.751123,{"description":3233,"labels":3234,"number":1061,"owner":3146,"repository":3147,"state":3197,"title":3241,"updated_at":3242,"url":3243,"score":3244},"**Is your feature request related to a problem? Please describe.**\r\nSince a potential user is interested in using TresJS to load FBX models and to be honest, along with Gltf is one of the most used formats let's add support for it \r\n\r\n**Describe the solution you'd like**\r\nSame thing as `useGLTF`but for `fbx` models\r\n\r\n**Suggested solution**\r\n\r\n```\r\nimport { useFBX } from '@tresjs/cientos'\r\n\r\nconst { scene } = await useFBX('/models/AkuAku.fbx')\r\n```\r\n\r\nor \r\n\r\n```\r\n\u003Cscript setup lang=\"ts\">\r\nimport { OrbitControls, FBXModel } from '@tresjs/cientos'\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CSuspense>\r\n \u003CTresCanvas clear-color=\"#82DBC5\" shadows alpha>\r\n \u003CTresPerspectiveCamera :position=\"[11, 11, 11]\" />\r\n \u003COrbitControls />\r\n \u003CTresScene>\r\n \u003CFBXModel path=\"/models/AkuAku.fbx\" />\r\n \u003CTresDirectionalLight :position=\"[-4, 8, 4]\" :intensity=\"1.5\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n \u003C/Suspense>\r\n\u003C/template>\r\n```\r\n\r\nfor the composable import the loader from `three-stdlib`\r\n\r\n- [ ] Update docs",[3235,3238],{"name":3236,"color":3237},"good first issue","7057ff",{"name":3239,"color":3240},"help wanted","008672","useFbx composable and component for cientos","2023-01-10T18:48:31Z","https://github.com/Tresjs/tres/issues/67",0.75333726,{"description":3246,"labels":3247,"number":3252,"owner":3146,"repository":3147,"state":3197,"title":3253,"updated_at":3254,"url":3255,"score":3256},"**Describe the bug**\r\nSince we are using a Custom Renderer, the main instances of Vue don't recognize the Tres components and throw these annoying warnings that will confuse users.\r\n\r\nOne way around this is to add this to the `vite.config.ts`:\r\n\r\n```\r\nplugins: [vue({\r\n template: {\r\n compilerOptions: {\r\n isCustomElement: tag => tag.startsWith('Tres') && tag !== 'TresCanvas',\r\n },\r\n },\r\n })],\r\n```\r\nBut that's not ideal.\r\n\r\n**Expected behavior**\r\nNo warnings\r\n\r\n**Screenshots**\r\n\u003Cimg width=\"803\" alt=\"Screenshot 2023-03-23 at 06 15 08\" src=\"https://user-images.githubusercontent.com/4699008/227110134-44644ecb-367b-4fe4-b071-8e3b645611ce.png\">\r\n\r\n\r\n**System Info**\r\nOutput of `npx envinfo --system --npmPackages '{vite,@tresjs/*, three, vue}' --binaries --browsers` \r\n\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[3248,3251],{"name":3249,"color":3250},"bug","d73a4a",{"name":3140,"color":3141},162,"[v2] - Failed to resolve component warnings","2023-11-23T18:35:20Z","https://github.com/Tresjs/tres/issues/162",0.75454015,["Reactive",3258],{},["Set"],["ShallowReactive",3261],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fyvj_fb-GserAPd2iYo4S7YaXRIzn2GdVeUBkWzptuBQ":-1},"/Tresjs/tres/702"]