component","2025-04-24T09:26:06Z","https://github.com/Tresjs/tres/issues/1002",0.8076407,{"description":2875,"labels":2876,"number":2878,"owner":2855,"repository":2879,"state":2880,"title":2881,"updated_at":2882,"url":2883,"score":2884},"**Describe the bug**\r\nWhen resizing the viewport with an active effect composer, the scene gets distorted.\r\n\r\n**Reproduction**\r\n**Steps**\r\n1. open demo (in playground for example)\r\n2. change canvas size\r\n\r\n**Expected behavior**\r\nThe scene should not become distorted\r\n\r\n**Screenshots**\r\n\r\n\r\n",[2877],{"name":2866,"color":2867},29,"post-processing","closed","EffectComposer does not correctly react to canvas resizing","2023-06-26T12:57:39Z","https://github.com/Tresjs/post-processing/issues/29",0.46469134,{"description":2886,"labels":2887,"number":2889,"owner":2855,"repository":2879,"state":2880,"title":2890,"updated_at":2891,"url":2892,"score":2893},"I would like to have a vignette effect available for this library\r\n\r\nSimilar to https://docs.pmnd.rs/react-postprocessing/effects/vignette",[2888],{"name":2853,"color":2854},65,"vignette effect","2023-11-14T13:35:53Z","https://github.com/Tresjs/post-processing/issues/65",0.76322216,{"description":2895,"labels":2896,"number":1521,"owner":2855,"repository":2900,"state":2880,"title":2901,"updated_at":2902,"url":2903,"score":2861},"\r\n\u003Cimg width=\"623\" alt=\"Screenshot 2023-03-01 at 08 05 55\" src=\"https://user-images.githubusercontent.com/4699008/222068182-92bd8c64-8551-4df5-a78b-8917a40f5867.png\">\r\n\r\n\r\n**Is your feature request related to a problem? Please describe.**\r\nA [contact shadow](https://threejs.org/examples/#webgl_shadow_contact) implementation, facing upwards (positive Y) by default. scale can be a positive number or a 2D array [x: number, y: number].\r\n\r\n```\u003CContactShadows opacity=\"1\" scale=\"10\" blur=\"1\" far=\"10\" resolution=\"256\" color=\"#000000\" />```\r\n\r\nSince this is a rather expensive effect you can limit the number of frames it renders when your objects are static. For instance, making it render only once:\r\n\r\n```\u003CContactShadows frames=\"1\" />```\r\n\r\n**Describe the solution you'd like**\r\nAbstraction in cientos\r\n\r\n**Suggested solution**\r\nCheck drei [implementation](https://github.com/pmndrs/drei/blob/master/src/core/ContactShadows.tsx)\r\n\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[2897],{"name":2898,"color":2899},"feature","c2e0c6","cientos","Contact Shadows ","2023-05-17T13:56:58Z","https://github.com/Tresjs/cientos/issues/4",{"description":2905,"labels":2906,"number":2908,"owner":2855,"repository":2879,"state":2880,"title":2909,"updated_at":2910,"url":2911,"score":2912},"**Describe the solution you'd like**\r\nThe library should support the pixelation effect of [postprocessing](https://github.com/pmndrs/postprocessing).",[2907],{"name":2853,"color":2854},62,"pixelation effect","2023-10-21T15:49:58Z","https://github.com/Tresjs/post-processing/issues/62",0.77894545,{"description":2914,"labels":2915,"number":2916,"owner":2855,"repository":2869,"state":2880,"title":2917,"updated_at":2918,"url":2919,"score":2920},"**Is your feature request related to a problem? Please describe.**\r\n\r\nAdd a component that would easily create an environment map for background using HDR or cubeTextLoader and set the `scene.background` to it\r\n\r\nSimilar implementation to https://github.com/pmndrs/drei#environment\r\n\r\n**Describe the solution you'd like**\r\nSets up a global cubemap, which affects the default scene.environment, and optionally scene.background, unless a custom scene has been passed. A selection of [presets](https://github.com/pmndrs/drei/blob/master/src/helpers/environment-assets.ts) from [HDRI Haven](https://hdrihaven.com/) are available for convenience. If you pass an array of files it will use THREE.CubeTextureLoader.\r\n\r\n**Suggested solution**\r\n```\r\n\u003CEnvironment\r\n background=\"false\" // can be true, false or \"only\" (which only sets the background) (default: false)\r\n blur=\"0\" // blur factor between 0 and 1 (default: 0, only works with three 0.146 and up)\r\n files=\"['px.png', 'nx.png', 'py.png', 'ny.png', 'pz.png', 'nz.png']\"\r\n path=\"/\"\r\n preset=\"null\"\r\n encoding=\"undefined\" // adds the ability to pass a custom THREE.TextureEncoding (default: THREE.sRGBEncoding for an array of files and THREE.LinearEncoding for a single texture)\r\n/>\r\n```\r\n\r\nIf you provide a single string it will use THREE.RGBELoader.\r\n\r\n```\r\n\u003CEnvironment files=\"file.hdr\" />\r\n```\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[],110,"Environment component cientos","2023-02-19T10:11:25Z","https://github.com/Tresjs/tres/issues/110",0.7854369,{"description":2922,"labels":2923,"number":2924,"owner":2855,"repository":2900,"state":2880,"title":2925,"updated_at":2926,"url":2927,"score":2928},"### 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.79241234,{"description":2930,"labels":2931,"number":2933,"owner":2855,"repository":2900,"state":2880,"title":2934,"updated_at":2935,"url":2936,"score":2937},"### Description\n\nMask use the Stencil Buffer to create the illusion of a second scene without the performance of a second render like with the renderTargets.\r\n\r\nTo illustrate this, you can check: https://youtu.be/X93GxW84t84\r\n\r\n\n\n### Suggested solution\n\nCould be base on: https://github.com/pmndrs/drei?tab=readme-ov-file#mask\r\n\r\nYou can check others stencil options directly in the official docs: https://threejs.org/docs/index.html?q=materi#api/en/constants/Materials\r\n\r\nBut feel free to suggest any other alternative\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/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.",[2932],{"name":2898,"color":2899},304,"Mask component for cientos","2024-12-11T13:48:24Z","https://github.com/Tresjs/cientos/issues/304",0.79534864,{"description":2939,"labels":2940,"number":1562,"owner":2855,"repository":2900,"state":2880,"title":2944,"updated_at":2945,"url":2946,"score":2947},"**Is your feature request related to a problem? Please describe.**\r\nShining floors everywhere!!\r\n\r\n**Describe the solution you'd like**\r\nSame concept as R3F Drei https://github.com/pmndrs/drei#meshreflectormaterial \r\n\r\n**Suggested solution**\r\nShaders\r\n\r\n",[2941],{"name":2942,"color":2943},"duplicate","cfd3d7","Mesh Reflector Material ","2024-04-05T20:22:44Z","https://github.com/Tresjs/cientos/issues/5",0.80239606,["Reactive",2949],{},["Set"],["ShallowReactive",2952],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4SnK7eXaEvmPjdD-GvLMa41yCxJ3FbkSDazMFnQwYBA":-1},"/Tresjs/lab/29"]