is not adding `scene.fog(new Fog())`\r\n\r\n**Reproduction**\r\n[Reproduction](https://stackblitz.com/edit/tresjs-basic-ntxpns?file=src%2Fcomponents%2FTheExperience.vue,src%2Fcomponents%2FThePortal.vue,vite.config.ts,src%2Fshaders%2Ffragment.glsl,src%2FApp.vue)\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Add a `\u003CTresFog />` to the scene\r\n\r\n**Expected behavior**\r\nScene should have [Fog](https://threejs.org/docs/?q=fog#api/en/scenes/Fog)\r\n\r\n**Screenshots**\r\nIf applicable, add screenshots to help explain your problem.\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 System:\r\n OS: Linux 5.0 undefined\r\n CPU: (8) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz\r\n Memory: 0 Bytes / 0 Bytes\r\n Shell: 1.0 - /bin/jsh\r\n Binaries:\r\n Node: 16.14.2 - /usr/local/bin/node\r\n Yarn: 1.22.19 - /usr/local/bin/yarn\r\n npm: 7.17.0 - /usr/local/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^1.2.2 => 1.2.2 \r\n @tresjs/core: ^1.3.2 => 1.3.2 \r\n vite: ^3.2.4 => 3.2.5 \r\n```\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2917,2920,2923],{"name":2918,"color":2919},"bug","d73a4a",{"name":2921,"color":2922},"good first issue","7057ff",{"name":2903,"color":2904},49,"TresFog is not adding fog to scene","2022-12-21T14:54:16Z","https://github.com/Tresjs/tres/issues/49",0.76265633,{"description":2930,"labels":2931,"number":2932,"owner":2875,"repository":2894,"state":2909,"title":2933,"updated_at":2934,"url":2935,"score":2936},"### 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.7657263,{"description":2938,"labels":2939,"number":2943,"owner":2875,"repository":2894,"state":2909,"title":2944,"updated_at":2945,"url":2946,"score":2947},"**Is your feature request related to a problem? Please describe.**\r\nIn the current implementation, `useTres` uses a [global state](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L100) which has some downsides.\r\n\r\n1. It prevents having multiple canvases on the same page. Fixing this issue might help solving #153 \r\n2. Fixing this issue might help solving #173 \r\n3. Global states are prone to [cross-request state pollution](https://vuejs.org/guide/scaling-up/ssr.html#cross-request-state-pollution) in the SSR context\r\n4. One could put anything inside the state by using [setState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L128), but there would be no representation of it in [TresState](https://github.com/Tresjs/tres/blob/196606faba790a81dc9b8cdf36133400bcdbb545/src/composables/useTres/index.ts#L5). DX suffers from this.\r\n\r\n**Describe the solution you'd like**\r\nWe could restructure `useTres` to make it use the [provide context pattern](https://medium.com/@maoberlehner/context-and-provider-pattern-with-the-vue-3-composition-api-17247eb7b001). `TresCanvas` would be the entity to provide things like renderer, camera and so on (see [TresState](https://github.com/Tresjs/tres/issues/new?assignees=&labels=enhancement&template=feature-request-%F0%9F%AA%90.md)). Any entity being child of `TresCanvas` could use the composable that injects those things.\r\n\r\n**Additional context**\r\nI'm not 100% sure if my proposed solution works. Let's see this issue as a opportunity for a little experiment 😊.\r\n",[2940],{"name":2941,"color":2942},"v2","FEE22E",183,"feat: restructuring useTres using the provide context pattern","2023-04-04T15:47:17Z","https://github.com/Tresjs/tres/issues/183",0.7716116,{"description":2949,"labels":2950,"number":2032,"owner":2875,"repository":2951,"state":2909,"title":2952,"updated_at":2953,"url":2954,"score":2955}," Check if demos are broken after `@tresjs/core@alpha` \r\n\r\n \r\n\r\n- [x] Animations \r\n- [x] Environment Tweaks\r\n- [x] Events\r\n- [x] GLTF Model\r\n- [x] Lights\r\n- [x] Low Poly Planet\r\n- [x] Materials\r\n- [x] Portal Journey\r\n- [x] Manual Post Processing\r\n- [x] Realistic Scene\r\n- [x] Transform Controls\r\n- [x] Tres Donut",[],"lab","v2 Playground check","2023-03-24T07:21:35Z","https://github.com/Tresjs/lab/issues/9",0.7755844,{"description":2957,"labels":2958,"number":2961,"owner":2875,"repository":2876,"state":2909,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### 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.",[2959,2960],{"name":2921,"color":2922},{"name":2903,"color":2904},147,"Enhance Environment and useEnvironment abstractions","2023-10-09T17:33:47Z","https://github.com/Tresjs/cientos/issues/147",0.77579176,{"description":2967,"labels":2968,"number":2961,"owner":2875,"repository":2976,"state":2909,"title":2977,"updated_at":2978,"url":2979,"score":2965},"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!",[2969,2970,2973],{"name":2918,"color":2919},{"name":2971,"color":2972},"p4-important-bug","D93F0B",{"name":2974,"color":2975},"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":2981,"labels":2982,"number":2983,"owner":2875,"repository":2894,"state":2909,"title":2984,"updated_at":2985,"url":2986,"score":2987},"### Describe the bug\n\nI'm trying to take a screenshot of the TresCanvas, but get always an empty PNG.\r\n\r\n \u003CTresCanvas ref=\"tresCanvasRef\" clear-color=\"#aaaaaa\" shadows id=\"modelCanvas\">\r\n \u003CCaptureScreenshot />\r\n \u003CTresPerspectiveCamera :position=\"[-150, 470, 220]\" :look-at=\"[0, 0, 0]\" />\r\n \u003CSuspense>\r\n \u003Cprimitive :position=\"[0, -100, 0]\" v-if=\"sceneLoaded\" :object=\"scene\" />\r\n \u003C/Suspense>\r\n \u003CTresAmbientLight :intensity=\"1.2\" color=\"#ffffff\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[-100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[100, 0, 100]\" />\r\n \u003CTresDirectionalLight :intensity=\"1\" color=\"#ffffff\" :position=\"[0, 200, 0]\" />\r\n \u003COrbitControls />\r\n \u003C/TresCanvas>\r\n \r\n \r\n**CaptureScreenshot:**\r\n \u003Cscript setup>\r\nimport { useTresContext } from \"@tresjs/core\";\r\n\r\nconst { renderer } = useTresContext();\r\n\r\nconst captureScreenshot = () => {\r\n const canvas = renderer.value.domElement;\r\n const url = canvas.toDataURL();\r\n const link = document.createElement(\"a\");\r\n link.href = url;\r\n link.download = \"screenshot.png\";\r\n link.click();\r\n};\r\n\u003C/script>\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-bovwvh?file=tsconfig.json\n\n### Steps to reproduce\n\nnpm i\r\nnpm run dev\n\n### System Info\n\n```shell\n\"devDependencies\": {\r\n \"@nuxt/devtools\": \"latest\",\r\n \"@nuxtjs/tailwindcss\": \"^6.8.0\",\r\n \"autoprefixer\": \"^10.4.15\",\r\n \"nuxt\": \"^3.7.3\"\r\n },\r\n \"dependencies\": {\r\n \"@tresjs/cientos\": \"^3.3.0\",\r\n \"@tresjs/nuxt\": \"^1.1.6\",\r\n \"@tresjs/post-processing\": \"^0.4.0\",\r\n \"@types/node\": \"^20.6.0\",\r\n \"dom-to-image\": \"^2.6.0\",\r\n \"html2canvas\": \"^1.4.1\",\r\n \"node\": \"^16.20.2\",\r\n \"three\": \"^0.156.1\"\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.",[],408,"TresCanvas Screenshot","2023-12-13T09:08:50Z","https://github.com/Tresjs/tres/issues/408",0.78106326,["Reactive",2989],{},["Set"],["ShallowReactive",2992],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fwApTF87SROFhed6JBnlcYAOHDFiHc4LDM15d3I0IojU":-1},"/Tresjs/tres/160"]