`","2024-08-21T10:29:21Z","https://github.com/Tresjs/tres/issues/418",0.7044838,{"description":3036,"labels":3037,"number":3038,"owner":3028,"repository":3029,"state":3030,"title":3039,"updated_at":3040,"url":3041,"score":3042},"### Description\n\nI defined a camera and a light and used the :position attribute, but the type error was displayed in vscode; so I changed :position=\"[3, 3,3]\" to:position=\"new THREE. Vector3(0, 3, 3)\" results in no type error;\r\n\r\nI don't know if it's a version problem or a package version problem.\n\n### Suggested solution\n\n``` vue\r\n\u003Cscript setup lang=\"ts\">\r\n\timport * as THREE from 'three'\r\n\timport { TresCanvas } from '@tresjs/core'\r\n\timport { OrbitControls, vLightHelper } from '@tresjs/cientos'\r\n\r\n\timport Texture_02 from '@/components/texture/texture_02/index.vue'\r\n\tdefineOptions({\r\n\t\tdir_name: 'stickers',\r\n\t})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n\t\u003Cdiv class=\"container\">\r\n\t\t\u003CTresCanvas shadows clear-color=\"#82DBC5\" preset=\"realistic\" alpha power-preference=\"high-performance\">\r\n\t\t\t\u003COrbitControls />\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,"position type is incorrect","2024-05-27T03:45:05Z","https://github.com/Tresjs/tres/issues/696",0.73466545,{"description":3044,"labels":3045,"number":3046,"owner":3028,"repository":3047,"state":3048,"title":3049,"updated_at":3050,"url":3051,"score":3052},"### 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,"nuxt","closed","Nuxtjs: OrbitControls.js encountered an unknown camera type","2023-11-08T09:28:32Z","https://github.com/Tresjs/nuxt/issues/49",0.6710201,{"description":3054,"labels":3055,"number":104,"owner":3028,"repository":3062,"state":3048,"title":3063,"updated_at":3064,"url":3065,"score":3066},"**Is your feature request related to a problem? Please describe.**\r\n`packages/cientos/core/OrbitControls.vue` offers limited props\r\n\r\n```ts\r\nexport interface OrbitControlsProps {\r\n /**\r\n * Whether to make this the default controls.\r\n *\r\n * @default false\r\n * @type {boolean}\r\n * @memberof OrbitControlsProps\r\n * @see https://threejs.org/docs/#examples/en/controls/OrbitControls\r\n */\r\n makeDefault?: boolean\r\n /**\r\n * The camera to control.\r\n *\r\n * @type {Camera}\r\n * @memberof OrbitControlsProps\r\n * @see https://threejs.org/docs/#examples/en/controls/OrbitControls\r\n */\r\n camera?: Camera\r\n /**\r\n * The dom element to listen to.\r\n *\r\n * @type {HTMLElement}\r\n * @memberof OrbitControlsProps\r\n * @see https://threejs.org/docs/#examples/en/controls/OrbitControls\r\n */\r\n domElement?: HTMLElement\r\n /**\r\n * The target to orbit around.\r\n *\r\n * @type {Ref\u003CVector3>}\r\n * @memberof OrbitControlsProps\r\n * @see https://threejs.org/docs/#examples/en/controls/OrbitControls\r\n */\r\n target?: Ref\u003CVector3>\r\n /**\r\n * Whether to enable damping.\r\n *\r\n * @default false\r\n * @type {boolean}\r\n * @memberof OrbitControlsProps\r\n * @see https://threejs.org/docs/#examples/en/controls/OrbitControls\r\n */\r\n enableDamping?: boolean\r\n}\r\n```\r\n\r\n\r\n**Describe the solution you'd like**\r\nThe ThreeJS [OrbitControls](https://threejs.org/docs/#examples/en/controls/OrbitControls) has way more features and properties we could support\r\n\r\n**Suggested solution**\r\nAdd rest of the properties to abstraction\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[3056,3059],{"name":3057,"color":3058},"good first issue","7057ff",{"name":3060,"color":3061},"help wanted","008672","cientos","Enhance OrbitControls cientos abstraction","2023-05-18T13:44:09Z","https://github.com/Tresjs/cientos/issues/3",0.67253435,{"description":3068,"labels":3069,"number":104,"owner":3028,"repository":3070,"state":3048,"title":3071,"updated_at":3072,"url":3073,"score":3066},"```Vue\r\n\u003CTresCanvas clear-color=\"#000000\">\r\n \u003CTresPerspectiveCamera\r\n :position=\"[0, 0, 5000]\"\r\n :fov=\"50\"\r\n :aspect=\"1\"\r\n :near=\"1\"\r\n :far=\"10000\"\r\n />\r\n \u003CTresScene>\r\n \u003CTresPoints>\r\n \u003CTresBufferGeometry :position=\"[vertices, 3]\" />\r\n \u003CTresPointsMaterial :color=\"0x888888\" />\r\n \u003C/TresPoints>\r\n \u003C/TresScene>\r\n\u003C/TresCanvas>\r\n```\r\nNo matter how i change `aspect`, for exampe **0.5** or **2**, there is no change in view.\r\n\r\naspect = 0.5\r\n\u003Cimg width=\"656\" alt=\"image\" src=\"https://user-images.githubusercontent.com/11868294/219375921-50474cdc-39bf-4248-bca7-1dd2ee6fe873.png\">\r\n\r\n\r\naspect = 1\r\n\u003Cimg width=\"582\" alt=\"image\" src=\"https://user-images.githubusercontent.com/11868294/219375756-00dc3849-7ec3-4428-bd6c-5ebdb00d8381.png\">\r\n\r\n\r\n\r\n\r\n\r\naspect = 2\r\n\u003Cimg width=\"634\" alt=\"image\" src=\"https://user-images.githubusercontent.com/11868294/219375639-72380307-a3f5-455f-8d7a-ef44a0e880cd.png\">\r\n\r\nMaybe i miss something?\r\n\r\n\r\n",[],"lab","TresPerspectiveCamera: aspect not work?","2023-08-26T15:28:15Z","https://github.com/Tresjs/lab/issues/3",{"description":3075,"labels":3076,"number":3083,"owner":3028,"repository":3029,"state":3048,"title":3084,"updated_at":3085,"url":3086,"score":3087},"### 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.",[3077,3080],{"name":3078,"color":3079},"dx","1576AD",{"name":3081,"color":3082},"types","5C076E",268,"Refactor typescript support from build to runtime","2023-05-21T09:05:02Z","https://github.com/Tresjs/tres/issues/268",0.7088249,{"description":3089,"labels":3090,"number":3092,"owner":3028,"repository":3047,"state":3048,"title":3093,"updated_at":3094,"url":3095,"score":3096},"### 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.",[3091],{"name":3019,"color":3020},46,"Multiple Instances of ThreeJS - Orbitcontrols broken","2023-10-06T03:55:26Z","https://github.com/Tresjs/nuxt/issues/46",0.7100975,{"description":3098,"labels":3099,"number":3105,"owner":3028,"repository":3029,"state":3048,"title":3106,"updated_at":3107,"url":3108,"score":3109},"### Describe the bug\n\nI am using tresjs and would like to reference my newly loaded .glb and a directional light.\r\nI should say, the page actually functions as expected, however the red squiggly line appears in my local VSCode with an error, and so would like to nail it down if possible.\r\n\r\n\r\nFinal note: this typescript compiler error only occurs on my local VSCode system, as can be seen from the StackBlitz link below, it doesn't occur there.\r\nSo I'm not sure if this is even a bug, but I'd like to ask for help to remove the red squiggly line from my local system, thanks if possible.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/vitejs-vite-qn7w4v\n\n### Steps to reproduce\n\nI've tried changing the type of ref to a few things, eg: \u003CTHREE.DirectionalLight>, however nothing seems to remove this error:\r\n\r\n(property) ref?: ((Ref\u003CTHREE.DirectionalLight> | Readonly\u003CRef\u003CTHREE.DirectionalLight>>) & VNodeRef) | undefined\r\n\n\n### System Info\n\n```shell\nHere is my package.json for that project:\r\n\r\n{\r\n \"name\": \"tresjs_1\",\r\n \"private\": true,\r\n \"version\": \"0.0.0\",\r\n \"type\": \"module\",\r\n \"scripts\": {\r\n \"dev\": \"vite\",\r\n \"build\": \"vue-tsc && vite build\",\r\n \"preview\": \"vite preview\"\r\n },\r\n \"dependencies\": {\r\n \"@tresjs/cientos\": \"^2.1.3\",\r\n \"@tresjs/core\": \"^2.1.2\",\r\n \r\n \"three\": \"^0.153.0\",\r\n \"three-stdlib\": \"^2.23.9\",\r\n \"vue\": \"^3.2.47\"\r\n },\r\n \"devDependencies\": {\r\n \r\n \"@types/three\": \"^0.152.1\",\r\n \"@vitejs/plugin-vue\": \"^4.1.0\",\r\n \"typescript\": \"^5.0.2\",\r\n \"vite\": \"^4.3.9\",\r\n \"vue-tsc\": \"^1.4.2\"\r\n }\r\n}\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.",[3100,3101,3102,3103,3104],{"name":3019,"color":3020},{"name":3057,"color":3058},{"name":3060,"color":3061},{"name":3078,"color":3079},{"name":3081,"color":3082},301,"Typescript compiler error for refs with tresjs","2023-07-11T11:38:59Z","https://github.com/Tresjs/tres/issues/301",0.7202448,{"description":3111,"labels":3112,"number":3113,"owner":3028,"repository":3029,"state":3048,"title":3114,"updated_at":3115,"url":3116,"score":3117},"### Describe the bug\n\nThis error hapend when I write ` const state = useTres()` or `const { state } = useTres()` In devtools, and the scene is not loaded.\r\nThis is my code (in App.vue):\r\n```\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas, extend, useTres } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls.js'\r\nimport { watchEffect } from 'vue'\r\n\r\nconst state = useTres()\r\n\r\nlet controls: OrbitControls | null = null\r\n\r\nwatchEffect(()=>{\r\n if (state.renderer && state.camera) {\r\n controls = new OrbitControls(state.camera.value!, state.renderer.value.domElement )\r\n }\r\n})\r\n\r\nextend({OrbitControls})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas window-size>\r\n \u003CTresPerspectiveCamera />\r\n\r\n \u003CTresScene>\r\n \u003CTresMesh>\r\n \u003CTresBoxGeometry />\r\n \u003CTresMeshNormalMaterial />\r\n \u003C/TresMesh>\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\r\nI did it like in this tutorial: [The tutorial](https://youtu.be/QP3gCY5_dds)\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-fg1y4w?file=src%2FApp.vue\n\n### Steps to reproduce\n\nAdd \r\n```\r\nimport { useTres } from '@tresjs/core';\r\nconst state = useTres()\r\n```\r\nto your code\n\n### System Info\n\n_No response_\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.",[],410,"Uncaught Error: useTresContext must be used together with useTresContextProvider","2023-09-30T07:00:08Z","https://github.com/Tresjs/tres/issues/410",0.72287124,{"description":3119,"labels":3120,"number":3121,"owner":3028,"repository":3029,"state":3048,"title":3122,"updated_at":3123,"url":3124,"score":3125},"### 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.724049,["Reactive",3127],{},["Set"],["ShallowReactive",3130],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fM5Eg4usuvrePVEjf7_CPOnTAdOaP7LiqUlpeXQ9rEcM":-1},"/Tresjs/cientos/520"]