\r\n\r\n \u003C!-- There will be a type problem here -->\r\n\t\t\t\u003CTresPerspectiveCamera :position=\"[3, 3, 3]\" :look-at=\"[0, 0, 0]\" />\r\n\r\n\t\t\t\u003CSuspense>\r\n\t\t\t\t\u003CTexture_02 />\r\n\t\t\t\u003C/Suspense>\r\n\r\n \u003C!-- OK -->\r\n\t\t\t\u003CTresDirectionalLight :intensity=\"1\" :position=\"new THREE.Vector3(0, 3, 3)\" v-light-helper />\r\n\t\t\u003C/TresCanvas>\r\n\t\u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cstyle lang=\"scss\" scoped>\r\n\t.container {\r\n\t\twidth: 100%;\r\n\t\theight: 100%;\r\n\t\tdisplay: flex;\r\n\t\talign-items: center;\r\n\t\tjustify-content: center;\r\n\t}\r\n\u003C/style>\r\n\r\n```\n\n### Alternative\n\nAt first I thought: position=\"new THREE.Vector3(0, 3, 3)\" is a better way to understand the original parameters of threejs, but after reading the documentation, I found: position=\"[0,3,3]\" is simpler ;But the recommended writing method in the document is: position=\"[0,3,3]\"\r\n\r\n\r\n\n\n### Additional context\n\n\r\n\r\n\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.",[],696,"Tresjs","tres","open","position type is incorrect","2024-05-27T03:45:05Z","https://github.com/Tresjs/tres/issues/696",0.7137576,{"description":2876,"labels":2877,"number":2878,"owner":2868,"repository":2879,"state":2870,"title":2880,"updated_at":2881,"url":2882,"score":2883},"### Describe the bug\r\n\r\nI am import `OrbitControls` by using TypeScript, but the typedef of `OrbitControls` is any\r\n\r\n```ts\r\nimport { OrbitControls } from '@tresjs/cientos'\r\n\r\ntype ComponentInstance = InstanceType\u003Ctypeof OrbitControls>\r\ntype ControlsInstance = ComponentInstance['instance']\r\n// ^? This is any\r\n```\r\n\r\nI found the build source doesn't include the file `OrbitControls.vue.d.ts`.\r\n\r\n\r\n\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/tresjs-basic-grkvtv?file=package.json,src%2Fmain.ts\r\n\r\n### Steps to reproduce\r\n\r\nOpen `main.ts`, then check `ControlsInstance`'s typedef.\r\n\r\n### System Info\r\n\r\n```shell\r\n@tresjs/cientos is v4.0.3\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/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.",[],520,"cientos","Miss typedef for CameraControls/MapControls/OrbitControls","2024-11-08T03:20:44Z","https://github.com/Tresjs/cientos/issues/520",0.71745515,{"description":2885,"labels":2886,"number":2890,"owner":2868,"repository":2869,"state":2870,"title":2891,"updated_at":2892,"url":2893,"score":2894},"## 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.",[2887],{"name":2888,"color":2889},"p3-significant","2C78E3",923,"Error Boundary for TresCanvas","2025-02-06T13:45:39Z","https://github.com/Tresjs/tres/issues/923",0.7374048,{"description":2896,"labels":2897,"number":2901,"owner":2868,"repository":2869,"state":2870,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### Description\n\nAs a developer of TresJS I want to have a separation of concerns in the composables.\n\n### Suggested solution\n\nMove `perf` it out of the file.\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.",[2898],{"name":2899,"color":2900},"dx","1576AD",1001,"Move performance state out of useTresContextProvider","2025-04-23T11:25:34Z","https://github.com/Tresjs/tres/issues/1001",0.7465446,{"description":2907,"labels":2908,"number":2913,"owner":2868,"repository":2869,"state":2914,"title":2915,"updated_at":2916,"url":2917,"score":2918},"### 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.",[2909,2910],{"name":2899,"color":2900},{"name":2911,"color":2912},"types","5C076E",268,"closed","Refactor typescript support from build to runtime","2023-05-21T09:05:02Z","https://github.com/Tresjs/tres/issues/268",0.67535913,{"description":2920,"labels":2921,"number":2922,"owner":2868,"repository":2869,"state":2914,"title":2923,"updated_at":2924,"url":2925,"score":2926},"### Describe the bug\n\nI'm use simple code:\r\n\r\n```vue\r\n\u003Cscript lang=\"ts\" setup>\r\nimport { TresCanvas } from \"@tresjs/core\";\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas window-size>\r\n \u003CTresPerspectiveCamera />\r\n \u003CTresMesh>\r\n \u003CTresTorusGeometry :args=\"[1, 0.5, 16, 32]\" />\r\n \u003CTresMeshToonMaterial color=\"orange\" />\r\n \u003C/TresMesh>\r\n \u003CTresAmbientLight :intensity=\"1\" />\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\nWhen I press ctrl + space, it should show TS hints, but they don't:\r\n\r\n\r\n\r\n\r\n\r\nEditor:\r\n- VSCode\r\n- `Vue.volar`\r\n- `Vue.vscode-typescript-vue-plugin`\r\n\r\nPackages versions:\r\n- `@tresjs/core`: `^2.1.1`\r\n- `three`: `^0.152.2`\r\n- `typescript`: `^5.0.4`\r\n\r\nGithub requires reproduction link, but stackblitz don't checks TS in vue sfc. Download and run reproduction project locally.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-aqkqrl?file=src%2FApp.vue\n\n### Steps to reproduce\n\n_No response_\n\n### System Info\n\n```shell\nSystem:\r\n OS: Windows 10 10.0.18363\r\n CPU: (4) x64 Intel(R) Pentium(R) CPU G4560 @ 3.50GHz\r\n Memory: 540.46 MB / 3.92 GB\r\n Binaries:\r\n Node: 18.16.0 - C:\\Program Files\\nodejs\\node.EXE\r\n npm: 9.5.1 - C:\\Program Files\\nodejs\\npm.CMD\r\n Browsers:\r\n Chrome: master_preferences\r\n Internet Explorer: 11.0.18362.1\r\n npmPackages:\r\n @tresjs/cientos: ^2.0.0 => 2.0.0 \r\n @tresjs/core: ^2.1.1 => 2.1.1 \r\n vite: ^4.3.8 => 4.3.8\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.",[],279,"Typescript autocompletion doesn't work","2023-05-23T09:37:59Z","https://github.com/Tresjs/tres/issues/279",0.6884024,{"description":2928,"labels":2929,"number":2930,"owner":2868,"repository":2869,"state":2914,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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.7287829,{"description":2936,"labels":2937,"number":2938,"owner":2868,"repository":2869,"state":2914,"title":2939,"updated_at":2940,"url":2941,"score":2942},"### Describe the bug\r\n\r\nBad types, unpredictable code, and false positives prevent me from using load-on-demand.Consider removing the global type declaration unless I actively add it?\r\n\r\n```\r\n'TresPrimitive' is a type and must be imported using a type-only import when 'verbatimModuleSyntax' is enabled.ts-plugin(1484)\r\n\r\n(alias) type TresPrimitive = TresInstance & {\r\n object: TresInstance;\r\n isPrimitive: true;\r\n}\r\nimport TresPrimitive\r\n```\r\n\r\n### Reproduction\r\n\r\nnone\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\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.",[],800,"Type error","2024-09-09T07:05:02Z","https://github.com/Tresjs/tres/issues/800",0.72985286,{"description":2944,"labels":2945,"number":2955,"owner":2868,"repository":2956,"state":2914,"title":2957,"updated_at":2958,"url":2959,"score":2960},"### Description\n\nI think the structure (following also the other pkgs on the Tres ecosystem) should be something like:\r\n\r\n/src\r\n --> composables\r\n --> core\r\n --> components \r\n --> types\r\netc \r\n\r\n\r\nSo in the future we can expand to abstractions, wdyt @Neosoulink would you like to take this one?\n\n### Suggested solution\n\nFollowing the Tres standard folder\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.",[2946,2949,2952],{"name":2947,"color":2948},"enhancement","a2eeef",{"name":2950,"color":2951},"p1-chore","BFD4F2",{"name":2953,"color":2954},"v1","5B6B67",121,"rapier","Improve structure of the library","2024-09-17T16:02:03Z","https://github.com/Tresjs/rapier/issues/121",0.73224247,{"description":2962,"labels":2963,"number":2967,"owner":2868,"repository":2869,"state":2914,"title":2968,"updated_at":2969,"url":2970,"score":2971},"### Describe the bug\n\nThe official [Vue devtools](https://github.com/vuejs/devtools) is broken since v2. Most probably related to the edge case of the use of a custom renderer.\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/stackblitz-starters-sa3ruk?file=README.md\n\n### Steps to reproduce\n\nOpen in a new tab\r\nCheck dev tools\r\nCheck error in console\r\n\r\n```\r\nTypeError: Cannot read properties of undefined (reading 'ownerDocument')\r\n```\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.",[2964],{"name":2965,"color":2966},"bug","d73a4a",317,"Vue-devtools broken since v2 custom renderer","2023-08-23T05:12:31Z","https://github.com/Tresjs/tres/issues/317",0.73413527,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fv7klDoL4UAHvfy7KA1FlCeUWO1NpdWwQiDsuS9qBCQc":-1},"/Tresjs/tres/301"]