` currently only accepts 1 string flag from the user. Using only flags means the system relies solely on us predicting users' needs and implementing a \"mode\" for them.\r\nAccepting only a single flag means we can't have a compound policy, e.g., \"rerender if advance or invalidate were called or the window resized. Afaik, this currently leads to cases where manual is the mode – the canvas will be blank if the window is resized, until invalidate is called.\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nEncapsulate the logic for \"Should the next tick update/render?\" in a module – maybe `src/core/renderPolicy.ts`?\r\nLet the render policy be specified via functions/objects as follows:\r\n\r\n```ts\r\nimport { createRenderPolicy, manual } from '...'\r\nconst policy = createRenderPolicy(manual)\r\nconst { invalidate } = policy\r\n...\r\n\u003CTresCanvas :render-policy=\"policy\" />\r\n```\r\n\r\nAbove, \r\n\r\n- manual is \"rule\" function that contains its own state, tracking if invalidate() was called since the last update.\r\n- policy is an object that relays calls to invalidate and advance to its rules, then asks the rules if the next tick should update/render or not.\r\n\r\nIn this way, we could have compound policies. E.g.,\r\n\r\n```ts\r\n// NOTE: This policy will approve the next tick of jobs if ...\r\n// - `invalidate()` was called\r\n// - the window was resized\r\n// but cancel if ...\r\n// - the canvas is off-screen\r\nconst { shouldUpdate, invalidate } = createRenderPolicy([manual, windowResize, cancelIfOffScreen])\r\nshouldUpdate() // false\r\ninvalidate()\r\nshouldUpdate() // true\r\n```\r\n\r\nRules would be evaluated in FILO order, with the result of lower ranking rules being passed to higher ranking rules, so this ...\r\n\r\n```\r\ncreateRenderPolicy([manual, cancelIfOffScreen, windowResize])\r\n```\r\n\r\n... cancels true from windowResize if the canvas is offscreen. But if the canvas is off-screen, manual's advance(n) will still take precedence.\r\n\r\nWhereas here ...\r\n\r\n```\r\ncreateRenderPolicy([cancelIfOffScreen, manual, windowResize])\r\n```\r\n\r\n... `cancelIfOffScreen` takes precedence over the other 2 rules and cancels both if the canvas is off-screen. \r\n----\r\n\r\nRules are relatively simple to write and users could supply their own rules, if we surface that in the API. Here's a \"complicated\" rule – `windowResize` – in its current form:\r\n\r\n```ts\r\nexport const windowResize: CreateUpdateRule = () => {\r\n let invalidated = true\r\n const invalidate = () => { invalidated = true }\r\n window.addEventListener('resize', invalidate)\r\n return {\r\n shouldUpdate: (lowRankResult: boolean) => {\r\n const result = invalidated\r\n invalidated = false\r\n return result || lowRankResult\r\n },\r\n dispose: () => {\r\n window.removeEventListener('resize', invalidate)\r\n }\r\n }\r\n}\r\n```\r\nHere's manual:\r\n\r\n```ts\r\nexport const manual: CreateUpdateRule = () => {\r\n let numFramesToAdvance = 0\r\n return {\r\n advance: (numFrames = 1) => {\r\n numFramesToAdvance = Math.max(numFramesToAdvance, numFrames)\r\n },\r\n shouldUpdate: (lowRankResult: boolean) => {\r\n const result = numFramesToAdvance > 0\r\n numFramesToAdvance = Math.max(0, numFramesToAdvance - 1)\r\n return result || lowRankResult\r\n }\r\n }\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/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\r\nEdit (andretchen0): fixed formatting ",[2897,2898],{"name":2868,"color":2869},{"name":2899,"color":2900},"pending-triage","97A4FE",689,"Render mode policies","2024-05-24T14:21:03Z","https://github.com/Tresjs/tres/issues/689",0.7705293,{"description":2907,"labels":2908,"number":2915,"owner":2874,"repository":2889,"state":2916,"title":2917,"updated_at":2918,"url":2919,"score":2920},"### 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.",[2909,2912],{"name":2910,"color":2911},"good first issue","7057ff",{"name":2913,"color":2914},"help wanted","008672",147,"closed","Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.7036442,{"description":2922,"labels":2923,"number":2915,"owner":2874,"repository":2933,"state":2916,"title":2934,"updated_at":2935,"url":2936,"score":2920},"Attempting to use the 1.0.0 release with Nuxt, I get an error on the `nuxt prepare` step. This is reproducible within this repo's nuxt playground if you update the dependency to 1.0.0.\r\n\r\n```\r\n ERROR ENOENT: no such file or directory, open '/Users/.../.../post-processing/playground-nuxt/@tresjs/post-processing' 10:29:39 AM\r\n ```\r\n\r\nThis does not happen when using `1.0.0-next.1`.\r\n\r\n```\r\n- Operating System: Darwin\r\n- Node Version: v20.10.0\r\n- Nuxt Version: 3.14.1592\r\n- CLI Version: 3.15.0\r\n- Nitro Version: 2.10.4\r\n- Package Manager: npm@10.8.3\r\n- Builder: -\r\n- User Config: default\r\n- Runtime Modules: @nuxt/eslint@0.7.2, @pinia/nuxt@0.7.0, @nuxtjs/supabase@1.4.3, @primevue/nuxt-module@4.2.4, @nuxtjs/tailwindcss@6.12.2, nuxt-lodash@2.5.3, @nuxt/icon@1.8.2, @tresjs/nuxt@3.0.7\r\n- Build Modules: -\r\n```\r\n\r\nThanks for maintaining this project!",[2924,2927,2930],{"name":2925,"color":2926},"bug","d73a4a",{"name":2928,"color":2929},"p4-important-bug","D93F0B",{"name":2931,"color":2932},"types","5C076E","post-processing","Broken imports in v1.0.0 w/ Nuxt","2025-01-03T09:37:19Z","https://github.com/Tresjs/post-processing/issues/147",{"description":2938,"labels":2939,"number":1059,"owner":2874,"repository":2875,"state":2916,"title":2940,"updated_at":2941,"url":2942,"score":2943},"**Is your feature request related to a problem? Please describe.**\r\nRight now `\u003CTresCanvas :alpha=\"true\" />` will not change if `alpha` is updated using `tweakpane` for example.\r\n\r\n**Describe the solution you'd like**\r\nWatch mutable props and use the correct **setMethod**, for example:\r\n\r\nA change on `clear-color` prop would trigger a `renderer.value.setClearColor(props.clearColor)` \r\n\r\n**Suggested solution**\r\nCreate a utility do dynamically generate the setMethod based on the name of the prop\r\n\r\n**Docs**\r\n\r\nhttps://threejs.org/docs/?q=we#api/en/renderers/WebGLRenderer\r\n\r\n",[],"Update renderer TresCanvas via props using set methods","2022-12-21T11:12:42Z","https://github.com/Tresjs/tres/issues/52",0.7186666,{"description":2945,"labels":2946,"number":2947,"owner":2874,"repository":2875,"state":2916,"title":2948,"updated_at":2949,"url":2950,"score":2951},"### 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,"provide default slot props in TresCanvas","2024-03-05T19:47:12Z","https://github.com/Tresjs/tres/issues/573",0.7204196,{"description":2953,"labels":2954,"number":2955,"owner":2874,"repository":2889,"state":2916,"title":2956,"updated_at":2957,"url":2958,"score":2959},"### Describe the bug\n\nHi! \r\nTLDR;\r\nI was wondering if there is a way to make the Precipitation component animate after using disableRender on the main TresCanvas.\r\n\r\nWhole story:\r\nI currently playing with custom shaders and wanted to try them inside Tres, I created a function that extracts the context of the TresCanvas component from a ref to create the RenderPass:\r\n\r\n```const addRenderPasses = () => {\r\n // render pass\r\n const renderPass = new RenderPass(\r\n tresCanvas.value.context.scene.value,\r\n tresCanvas.value.context.camera.value\r\n )\r\n\r\n // Distortion pass\r\n distortPass.value = new ShaderPass(LensDistortionShader)\r\n distortPass.value.material.defines.CHROMA_SAMPLES = 10\r\n\r\n // compopser\r\n composer.value = new EffectComposer(tresCanvas.value.context.renderer.value)\r\n composer.value.setSize(window.innerWidth, window.innerHeight)\r\n composer.value.setPixelRatio(window.devicePixelRatio * 1.3)\r\n\r\n // output pass\r\n const outputPass = new OutputPass()\r\n\r\n // add the passes\r\n composer.value.addPass(renderPass)\r\n composer.value.addPass(distortPass.value)\r\n composer.value.addPass(outputPass)\r\n}\r\n```\r\n\r\nThe thing here is that for me to apply the RenderPass to the TresCanvas we need to disable the default renderer, which means that the Precipitation component from cientos no longer animates, I'm no master at three.js, but if you can guide me on where to thinker, I might be able to sort this. If you have any ideas or advice on how to make this run I am all ears! Other than that, I'm loving Tres.js and its companion libraries (Cientos, Leches and Post Processing)!\r\n\r\nLet me know if you need more context or info!\r\n\r\nCheers!\r\n\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-5sm94z\n\n### Steps to reproduce\n\nDescribed above and clear on the stackblitz example\n\n### System Info\n\n```shell\nUsing Stackblitz\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/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.\n- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],276,"How to animate the Precipitation component when using \"disableRender\" on the TresCanvas","2023-11-03T19:38:52Z","https://github.com/Tresjs/cientos/issues/276",0.7329758,{"description":2961,"labels":2962,"number":2963,"owner":2874,"repository":2875,"state":2916,"title":2964,"updated_at":2965,"url":2966,"score":2967},"# Goal\r\nGenerate three-shakeable components on build time to avoid the need for a catalog of global components. This will be probably a BREAKING CHANGE, especially for cientos.\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\n\r\nimport { TresCanvas, TresPerspectiveCamera, TresScene, TresAmbienLight, useRenderLoop } from '@tresjs/core' \r\nimport { OrbitControls, TransformControls } from '@tresjs/cientos'\r\n\r\nconst sphereRef = ref()\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n sphereRef.value.position.y += Math.sin(elapsed * 0.01) * 0.1\r\n})\r\n\u003C/script>\r\n\u003Ctemplate>\r\n \u003CTresCanvas v-bind=\"state\">\r\n \u003CTresPerspectiveCamera :position=\"[5, 5, 5]\" :fov=\"45\" :near=\"0.1\" :far=\"1000\" :look-at=\"[-8, 3, -3]\" />\r\n \u003COrbitControls make-default />\r\n \u003CTresScene>\r\n \u003CTresAmbientLight :intensity=\"0.5\" />\r\n \u003CTransformControls mode=\"scale\" :object=\"sphereRef\" />\r\n\r\n \u003CTresMesh ref=\"sphereRef\" :position=\"[0, 4, 0]\" cast-shadow>\r\n \u003CTresSphereGeometry />\r\n \u003CTresMeshToonMaterial color=\"#FBB03B\" />\r\n \u003C!-- \u003CTresMeshToonMaterial color=\"#FBB03B\" /> -->\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 8, 4]\" :intensity=\"0.7\" cast-shadow />\r\n \u003CTresMesh :rotation=\"[-Math.PI / 2, 0, 0]\" receive-shadow>\r\n \u003CTresPlaneGeometry :args=\"[10, 10, 10, 10]\" />\r\n \u003CTresMeshToonMaterial />\r\n \u003C/TresMesh>\r\n \u003CTresDirectionalLight :position=\"[0, 2, 4]\" :intensity=\"1\" cast-shadow />\r\n \u003C/TresScene>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n- [ ] Using a vite plugin to generate all the components from THREE instances (Except Scene)\r\n- [ ] Each component should locally register components on the slots (is possible?)\r\n- [ ] Typescript Definition for the components generated from the ThreeJS instance\r\n- [ ] Include them in the final bundle\r\n- [ ] Strategy for replacing catalog `extend` \r\n- [ ] Update the way `cientos` extends the catalog\r\n",[],104,"Generate instances on build-time rather than run-time","2023-03-13T14:26:46Z","https://github.com/Tresjs/tres/issues/104",0.73450994,{"description":2969,"labels":2970,"number":2973,"owner":2874,"repository":2875,"state":2916,"title":2974,"updated_at":2975,"url":2976,"score":2977},"**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",[2971,2972],{"name":2910,"color":2911},{"name":2913,"color":2914},67,"useFbx composable and component for cientos","2023-01-10T18:48:31Z","https://github.com/Tresjs/tres/issues/67",0.7400591,["Reactive",2979],{},["Set"],["ShallowReactive",2982],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fxbzvDkcvTFkPYpEVFTENT9XZDXTKdl6SNnfQ7QYuDIc":-1},"/Tresjs/tres/109"]