\r\n```\r\n\r\nWould set the following properties to the render\r\n\r\n```\r\nrenderer.physicallyCorrectLights = true // real lights\r\nrenderer.outputEncoding = THREE.sRGBEncoding // gama correction\r\nrenderer.toneMapping = THREE.ACESFilmicToneMapping\r\nrenderer.toneMappingExposure = 3\r\nrenderer.shadowMap.enabled = true\r\nrenderer.shadowMap.type = THREE.PCFSoftShadowMap\r\n```\r\n\r\n",[2906],{"name":2868,"color":2869},109,"Renderer presets","2023-02-19T13:59:01Z","https://github.com/Tresjs/tres/issues/109",0.7085748,{"description":2913,"labels":2914,"number":2915,"owner":2874,"repository":2899,"state":2876,"title":2916,"updated_at":2917,"url":2918,"score":2919},"# 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.7096788,{"description":2921,"labels":2922,"number":2923,"owner":2874,"repository":2899,"state":2876,"title":2924,"updated_at":2925,"url":2926,"score":2927},"### 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.72574115,{"description":2929,"labels":2930,"number":2933,"owner":2874,"repository":2899,"state":2876,"title":2934,"updated_at":2935,"url":2936,"score":2937},"**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",[2931,2932],{"name":2868,"color":2869},{"name":2871,"color":2872},67,"useFbx composable and component for cientos","2023-01-10T18:48:31Z","https://github.com/Tresjs/tres/issues/67",0.73046607,{"description":2939,"labels":2940,"number":2941,"owner":2874,"repository":2875,"state":2876,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### 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.73232466,{"description":2947,"labels":2948,"number":2949,"owner":2874,"repository":2899,"state":2876,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### 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.7335296,{"description":2955,"labels":2956,"number":2960,"owner":2874,"repository":2899,"state":2876,"title":2961,"updated_at":2962,"url":2963,"score":2964},"**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",[2957],{"name":2958,"color":2959},"v2","FEE22E",183,"feat: restructuring useTres using the provide context pattern","2023-04-04T15:47:17Z","https://github.com/Tresjs/tres/issues/183",0.73395634,["Reactive",2966],{},["Set"],["ShallowReactive",2969],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fJUw1XrHoUgjf_qg2fQNF3xrP3jnvVs7P9JUV3xf9nyg":-1},"/Tresjs/post-processing/147"]