\r\n \u003C/div>\r\n\u003C/template>\r\n\r\n\u003Cscript setup>\r\nimport { useStore } from './store'\r\nconst store = useStore()\r\n\u003C/script>`\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.",[2880,2883,2886,2889],{"name":2881,"color":2882},"help wanted","008672",{"name":2884,"color":2885},"investigation","D03599",{"name":2887,"color":2888},"PR welcome","2D76B0",{"name":2890,"color":2891},"p2-nice-to-have","D4C5F9",312,"tres","Vue Tunnel rat","2024-08-21T20:24:24Z","https://github.com/Tresjs/tres/issues/312",0.7302702,{"description":2899,"labels":2900,"number":2901,"owner":2870,"repository":2893,"state":2872,"title":2902,"updated_at":2903,"url":2904,"score":2905},"### 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.738622,{"description":2907,"labels":2908,"number":2909,"owner":2870,"repository":2893,"state":2910,"title":2911,"updated_at":2912,"url":2913,"score":2914},"### Description\r\n\r\nRight now there is no way to access the TresCanvas context without hacking the script setup using TresCanvas:\r\n\r\n\u003Cdetails>\r\n\u003Csummary>\u003Cstrong>Hack\u003C/strong>\u003C/summary>\r\n\r\n```html\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas } from '@tresjs/core';\r\nimport { computed, ref, onMounted } from 'vue';\r\n\r\nimport { extend, useTresContext } from '@tresjs/core';\r\nimport { OrbitControls } from 'three/addons/controls/OrbitControls';\r\nimport { TextGeometry } from 'three/addons/geometries/TextGeometry';\r\n\r\nconst trescanvas = ref();\r\nconst state = ref();\r\n\r\nonMounted(() => {\r\n setTimeout(() => {\r\n state.value = trescanvas.value?.context;\r\n }, 0);\r\n});\r\n\r\n// Add the element to the catalogue\r\nextend({ TextGeometry, OrbitControls });\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas ref=\"trescanvas\" shadows alpha>\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"state?.renderer\"\r\n :args=\"[state?.camera, state?.renderer?.domElement]\"\r\n />\r\n \u003CTresMesh>\r\n \u003CTresTextGeometry :args=\"['TresJS', { font, ...fontOptions }]\" center />\r\n \u003CTresMeshMatcapMaterial :matcap=\"matcapTexture\" />\r\n \u003C/TresMesh>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n```\r\n\u003C/details>\r\n\r\n### Suggested solution\r\n\r\nAdd default slot props, we¡ve the default slot there without any binding:\r\n```ts\r\n\u003Ccanvas\r\n ref=\"canvas\"\r\n :data-scene=\"scene.uuid\"\r\n :class=\"$attrs.class\"\r\n :data-tres=\"`tresjs ${pkg.version}`\"\r\n :style=\"{\r\n display: 'block',\r\n width: '100%',\r\n height: '100%',\r\n position: windowSize ? 'fixed' : 'relative',\r\n top: 0,\r\n left: 0,\r\n pointerEvents: 'auto',\r\n touchAction: 'none',\r\n ...$attrs.style as Object,\r\n }\"\r\n >\r\n \u003Cslot v-bind=\"context\" />\r\n\u003C/canvas>\r\n```\r\n\r\nthen in the sfc template:\r\n\r\n```html\r\n\u003CTresCanvas shadows alpha v-slot=\"{ camera, renderer }\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" />\r\n \u003CTresOrbitControls\r\n v-if=\"renderer\"\r\n :args=\"[camera, renderer.domElement]\"\r\n />\r\n\u003C/TresCanvas>\r\n```\r\n\r\n### Alternative\r\n\r\ncheck the hack in the description\r\n\r\n### Additional context\r\n\r\nrelated #565\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.",[],573,"closed","provide default slot props in TresCanvas","2024-03-05T19:47:12Z","https://github.com/Tresjs/tres/issues/573",0.6869315,{"description":2916,"labels":2917,"number":2922,"owner":2870,"repository":2893,"state":2910,"title":2923,"updated_at":2924,"url":2925,"score":2926},"**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",[2918,2921],{"name":2919,"color":2920},"good first issue","7057ff",{"name":2881,"color":2882},67,"useFbx composable and component for cientos","2023-01-10T18:48:31Z","https://github.com/Tresjs/tres/issues/67",0.6931488,{"description":2928,"labels":2929,"number":2930,"owner":2870,"repository":2893,"state":2910,"title":2931,"updated_at":2932,"url":2933,"score":2934},"### 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.7043506,{"description":2936,"labels":2937,"number":2945,"owner":2870,"repository":2893,"state":2910,"title":2946,"updated_at":2947,"url":2948,"score":2949},"### Description\r\n\r\n## Problem\r\n\r\nUpdates/renders share the same unordered-from-the-components-perspective callback \"slot\", leading to out-of-sync visuals.\r\n\r\n## Example\r\n\r\nHere's the Cientos' playground demo for `MeshReflectionMaterial`. Notice the extra \"jumps\" in the reflection:\r\n\r\nhttps://github.com/Tresjs/tres/assets/20469369/314a4154-7cef-47d0-977e-e98fd53c8c13\r\n\r\nHere are two adjacent frames. Notice that the \"real\" elements haven't moved, but the reflection \"jumps\" from one frame to the next:\r\n\r\n\u003Cimg width=\"1044\" alt=\"Screenshot 2024-03-29 at 15 13 35\" src=\"https://github.com/Tresjs/tres/assets/20469369/47a6f2d1-817c-4bf1-a164-70969fb3aa7d\">\r\n\r\n## Why it happens\r\n\r\nThe \"jumps\" occur because the updates/renders are all firing in `onLoop`, but out-of-order from the perspective of the FBO reflection. So for a file like this ...\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas, useRenderLoop } from '@tresjs/core'\r\nimport DemoComponent from './DemoComponent.vue'\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n console.log(\"Demo update\", elapsed)\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera />\r\n \u003CDemoComponent>\u003C/DemoComponent>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n... a single \"tick\" of `onLoop` looks like this:\r\n\r\n\u003Cimg width=\"238\" alt=\"Screenshot 2024-03-29 at 16 41 44\" src=\"https://github.com/Tresjs/tres/assets/20469369/63d33e65-de88-48dc-859d-709863672227\">\r\n\r\nWith this ordering, if `DemoComponent` renders the scene to an FBO, and is then rendered to the screen, it'll always be 1 frame behind `Demo`.\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nWe could follow R3F's lead here:\r\n\r\n* [Guarantee that rendering happens after `onLoop`](https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe)\r\n* Implement these:\r\n** https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop\r\n** https://docs.pmnd.rs/react-three-fiber/api/hooks#negative-indices\r\n\r\nFor example, R3F's `OrbitControls` uses a negative index:\r\n\r\nhttps://github.com/pmndrs/drei/blob/c147c2b1064bc4b457150f995bf714c2e43cf56f/src/core/OrbitControls.tsx#L58C1-L61C13\r\n\r\nIf I understand correctly, that means that the OrbitControls camera is updated before the rest of the scene, which is important in the case of FBOs like in the reflection material.\r\n\r\n### Alternative\r\n\r\nAs a simpler – though less flexible – solution, we could add a few callbacks:\r\n\r\n* `useRenderLoop().onBeforeRender()` – for FBOs\r\n* `useRenderLoop().onRender()` – for actually rendering to the screen\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.",[2938,2939,2942],{"name":2868,"color":2869},{"name":2940,"color":2941},"feature","c2e0c6",{"name":2943,"color":2944},"p2-to-be-discussed","97C1B1",607,"`useRenderLoop`: render after updates","2024-05-30T06:58:57Z","https://github.com/Tresjs/tres/issues/607",0.7129933,{"description":2951,"labels":2952,"number":1660,"owner":2870,"repository":2956,"state":2910,"title":2957,"updated_at":2958,"url":2959,"score":2960},"**Is your feature request related to a problem? Please describe.**\r\nAs of now, effects are typescript `.ts` files with `defineComponent`.\r\n\r\n```ts\r\nexport const Glitch = defineComponent\u003CGlitchProps>({\r\n name: 'Glitch',\r\n props: [\r\n 'delay',\r\n 'duration',\r\n 'strength',\r\n 'mode',\r\n 'active',\r\n 'ratio',\r\n 'columns',\r\n 'chromaticAberrationOffset',\r\n 'peturbationMap',\r\n 'dtSize',\r\n ] as unknown as undefined,\r\n\r\n async setup(props, { expose }) {\r\n const { state } = useCore()\r\n const composer = inject\u003Cany>('effectComposer')\r\n const pass = ref\u003CEffectPass | null>(null)\r\n\r\n expose({ getPass: () => pass.value })\r\n\r\n watchEffect(() => {\r\n if (state.camera && composer && composer.value) {\r\n pass.value = new EffectPass(unref(state.camera), new GlitchEffect(props))\r\n composer.value?.addPass(toRaw(pass.value))\r\n }\r\n })\r\n\r\n watch(\r\n () => props.active,\r\n value => {\r\n if (pass.value) {\r\n pass.value.enabled = value as boolean\r\n }\r\n },\r\n )\r\n\r\n return () => {\r\n pass\r\n }\r\n },\r\n})\r\n\r\n```\r\n\r\n**Describe the solution you'd like**\r\n\r\nUse a similar approach as cientos and use vue SFC components \r\n\r\n",[2953],{"name":2954,"color":2955},"enhancement","a2eeef","post-processing","Refactor Effects to .vue files","2023-06-23T16:06:50Z","https://github.com/Tresjs/post-processing/issues/23",0.7134089,{"description":2962,"labels":2963,"number":1660,"owner":2870,"repository":2893,"state":2910,"title":2968,"updated_at":2969,"url":2970,"score":2960},"Atm HMR disposal is not working as expected. Meshes are duplicated and this could lead to performance issues on large scenes.\n\nAlso not nice for DX. User needs to reload everytime.\n\nThis one is pretty tricky.\n\n# Desired solution.\n\nRenderer, scene and object follow a disposal flow when HMR hits",[2964,2965],{"name":2881,"color":2882},{"name":2966,"color":2967},"discussion 💭","AE4C80","HMR disposal","2023-09-12T18:58:32Z","https://github.com/Tresjs/tres/issues/23",{"description":2972,"labels":2973,"number":2976,"owner":2870,"repository":2977,"state":2910,"title":2978,"updated_at":2979,"url":2980,"score":2981},"### Description\r\n\r\nAs a developer using TresJS, I want \r\n- Environment props to be reactive\r\n- More presets other than 'sunset' (city, etc)\r\n\r\n so that:\r\n- I can dynamically configure the preset or toggle the `background` property\r\n\r\n### Suggested solution\r\n\r\nModify the `useEnvironment/component.ts` component so:\r\n\r\n- Convert to vue file SFC\r\n- texture should be a ref\r\n- Set the default for the props here.\r\n\r\nModify the `useEnvironment/index.ts` composable so:\r\n\r\n- Reacts to prop changes (Using watchers and computed)\r\n- Return the texture as a ref\r\n\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.",[2974,2975],{"name":2919,"color":2920},{"name":2881,"color":2882},147,"cientos","Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.71441567,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fqxWes4PwMNBrXh3VQ_1nTWEe9KQLJzcIvYHx5qamHqY":-1},"/Tresjs/tres/104"]