\r\n \u003CTresMeshNormalMaterial />\r\n \u003CHtml\r\n center\r\n transform\r\n :distance-factor=\"4\"\r\n :position=\"[0, 0, 0.65]\"\r\n :scale=\"[0.75, 0.75, 0.75]\"\r\n >\r\n \u003Cdiv>\r\n \u003Cp>This should not scroll\u003C/p>\r\n \u003C/div>\r\n \u003C/Html>\r\n \u003C/TresMesh>\r\n```\r\nI expect the first element to scroll, and the second to stay.\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\r\n OS: Linux 5.15 Ubuntu 22.04.3 LTS 22.04.3 LTS (Jammy Jellyfish)\r\n CPU: (8) x64 11th Gen Intel(R) Core(TM) i7-1165G7 @ 2.80GHz\r\n Memory: 3.82 GB / 11.69 GB\r\n Container: Yes\r\n Shell: 3.6.1 - /usr/bin/fish\r\n Binaries:\r\n Node: 21.5.0 - ~/.local/share/nvm/v21.5.0/bin/node\r\n Yarn: 1.22.19 - /usr/bin/yarn\r\n npm: 10.2.4 - ~/.local/share/nvm/v21.5.0/bin/npm\r\n pnpm: 8.14.1 - ~/.local/share/pnpm/pnpm\r\n bun: 1.0.7 - ~/.bun/bin/bun\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\npnpm\r\n\r\n### Code of Conduct\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- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[2873,2876],{"name":2874,"color":2875},"pending-triage","97A4FE",{"name":2877,"color":2878},"waiting for author","B145BC",507,"Native html scroll and @tresjs/cientos Html component behaviour","2024-03-30T15:37:07Z","https://github.com/Tresjs/tres/issues/507",0.74451673,{"description":2885,"labels":2886,"number":2888,"owner":2863,"repository":2864,"state":2889,"title":2890,"updated_at":2891,"url":2892,"score":2893},"**Is your feature request related to a problem? Please describe.**\r\nAt the moment there is no working way of implementing particles using `\u003CTresBufferGeometry />`, especially attributes.\r\n\r\n**Describe the solution you'd like**\r\nA way of replicate this\r\n\r\n```\r\nconst firefliesGeometry = new THREE.BufferGeometry()\r\nconst firefliesCount = 30\r\nconst positionArray = new Float32Array(firefliesCount * 3)\r\n\r\nfor(let i = 0; i \u003C firefliesCount; i++)\r\n{\r\n positionArray[i * 3 + 0] = Math.random() * 4\r\n positionArray[i * 3 + 1] = Math.random() * 4\r\n positionArray[i * 3 + 2] = Math.random() * 4\r\n}\r\n\r\nfirefliesGeometry.setAttribute('position', new THREE.BufferAttribute(positionArray, 3))\r\n\r\n// Material\r\nconst firefliesMaterial = new THREE.PointsMaterial({ size: 0.1, sizeAttenuation: true })\r\n\r\nconst fireflies = new THREE.Points(firefliesGeometry, firefliesMaterial)\r\nscene.add(fireflies)\r\n``` \r\n\r\n\r\n**Suggested solution**\r\nSimilar to R3F \r\n\r\n```\r\n \u003Cpoints ref={geom} position={[0, 10, 0]} rotation={[-Math.PI / 4, 0, Math.PI / 6]}>\r\n \u003CbufferGeometry>\r\n \u003CbufferAttribute attachObject={[\"attributes\", \"position\"]} count={coords.length / 3} array={coords} itemSize={3} />\r\n \u003CbufferAttribute attachObject={[\"attributes\", \"size\"]} count={sizes.length} array={sizes} itemSize={1} />\r\n \u003C/bufferGeometry>\r\n \u003CdotMaterial />\r\n \u003C/points>\r\n```\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[2887],{"name":2857,"color":2858},56,"closed","BufferGeometry and BufferAttribute support","2022-12-22T10:31:58Z","https://github.com/Tresjs/tres/issues/56",0.6816781,{"description":2895,"labels":2896,"number":2897,"owner":2863,"repository":2864,"state":2889,"title":2898,"updated_at":2899,"url":2900,"score":2901},"### Describe the bug\r\n\r\nHi, I'm using TresJs v2(@tres/core) in Nuxt3.\r\nThrough your docs and kind explanations, I succeeded in configuring the environment and displaying 3d objects in Nuxt3.\r\n\r\nHowever, if a vue component (I made) containing the TresCanvas tag is unmounted according to the page route movement or certain conditions, and then re-enters the page and is newly mounted, it seems that the object is not rendered on the canvas tag.\r\n\r\nCan you check this?\r\nYou can see an example in the reproduction link below. You can check it when you toggle v-if with the toggle button.\r\nThank you.\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-36xfsn?file=nuxt.config.ts,app.vue (in Nuxt3)\r\nhttps://stackblitz.com/edit/tresjs-basic-i4h4kk?file=src%2FApp.vue (same in Vue3)\r\n\r\n### Steps to reproduce\r\n\r\n_No response_\r\n\r\n### System Info\r\n\r\n```shell\r\nnpm packages version\r\n- nuxt: 3.5.3\r\n- three: 0.153.0\r\n- @tresjs/core: 2.1.3\r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nyarn\r\n\r\n### Code of Conduct\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- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],302,"Nuxt3 + Tresjs rendering issue(when remounting, not displaying)","2023-06-19T15:26:29Z","https://github.com/Tresjs/tres/issues/302",0.71008617,{"description":2903,"labels":2904,"number":2908,"owner":2863,"repository":2864,"state":2889,"title":2909,"updated_at":2910,"url":2911,"score":2912},"**Describe the bug**\r\nI update the new TresJs beta version, and each canvas throw a problem with the onPointerEvent\r\n\r\nNote: I Don't have onPointerEvent, in any canvas, but I do have one PointerMove event in the \r\nhttps://serene-mousse-562782.netlify.app/MouseShaderEffect \r\nWhich is not working properly (do not update the uniforms) but also is the only page that don't throw a pointer error\r\n\r\nThe other experiments (you can navigate using the navbar) all have the onPointerEvent error\r\n\r\n**Reproduction**\r\nFollow the steps\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to [my-tresJs-playground](https://serene-mousse-562782.netlify.app/)\r\n2. Move the mouse through the canvas\r\n3. Each canvas on the routes contain this problem (except /MouseShaderEffect which do not update the uniforms)\r\n4. You can go to a different site to see\r\n\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**Additional context**\r\nIf I'm doing something wrong, please let me know\r\n",[2905],{"name":2906,"color":2907},"bug","d73a4a",189,"Problems with pointerevents","2023-04-12T14:07:01Z","https://github.com/Tresjs/tres/issues/189",0.7379145,{"description":2914,"labels":2915,"number":2917,"owner":2863,"repository":2864,"state":2889,"title":2918,"updated_at":2919,"url":2920,"score":2921},"### Description\n\nAs a developer using TresJS, I would like to change reactively the constructor params via args prop, which is not possible at the moment.\r\n\r\n```ts\r\n\u003Cscript lang=\"ts\" setup>\r\n// renderer.domElement is undefined at the beginning. \r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresOrbitControls :args=\"[activeCamera || camera, renderer?.domElement || domElement]\" />\r\n \u003C/template>\r\n ```\n\n### Suggested solution\n\nAdd logic to `nodeOps` to re-instance the THREE object when `args` change\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.",[2916],{"name":2906,"color":2907},366,"Re-instance THREE instances via args prop reactivity","2023-08-17T13:53:39Z","https://github.com/Tresjs/tres/issues/366",0.73867774,{"description":2923,"labels":2924,"number":1229,"owner":2863,"repository":2926,"state":2889,"title":2927,"updated_at":2928,"url":2929,"score":2930},"**Describe the bug**\r\nSetting `position` on GLTFModel doesn't seem to work. Must probably forgot to pass down the props to the mesh\r\n\r\n**Reproduction**\r\nPlease provide a link using this template on [Stackblitz](https://stackblitz.com/edit/tresjs-basic?file=README.md) \r\n\r\n[Repro](https://stackblitz.com/edit/tresjs-gltf-model?file=src%2Fcomponents%2FTheExperience.vue)\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Go to 'Experience.vue'\r\n2. Add `position` to the \u003CGTLFModel />\r\n\r\n**Expected behavior**\r\nThe model should translate to the provided position\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.0.0 => 1.0.0 \r\n @tresjs/core: ^1.0.0 => 1.0.0 \r\n vite: ^3.2.4 => 3.2.4 \r\n```\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2925],{"name":2906,"color":2907},"cientos","GLTFModel component doesn't inherit props ","2023-05-04T07:12:27Z","https://github.com/Tresjs/cientos/issues/6",0.7402849,{"description":2932,"labels":2933,"number":1229,"owner":2863,"repository":2934,"state":2889,"title":2935,"updated_at":2936,"url":2937,"score":2930},"### Describe the bug\r\n\r\nWhen used on a clean nuxt app, this error is prompted\r\n\r\n```bash\r\nImporting directly from module entry points is not allowed. \r\n[importing @tresjs/nuxt from virtual:nuxt:/Users/alvarosabu/Projects/tres/playground/.nuxt/plugins/client.mjs]\r\n```\r\n\r\n### Reproduction\r\n\r\nhttps://stackblitz.com/edit/nuxt-starter-bnznqb?file=nuxt.config.ts,app.vue\r\n\r\n### Steps to reproduce\r\n\r\nRun `npm i` and then `npm run dev`\r\n\r\n### System Info\r\n\r\n```shell\r\nSystem:\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: 9.4.2 - /usr/local/bin/npm\r\n npmPackages:\r\n @tresjs/cientos: ^2.1.3 => 2.1.3 \r\n @tresjs/nuxt: ^1.0.0-alpha.0 => 1.0.0-alpha.0 \r\n nuxt: ^3.5.2 => 3.5.3 \r\n three: ^0.153.0 => 0.153.0 \r\n```\r\n\r\n\r\n### Used Package Manager\r\n\r\nnpm\r\n\r\n### Code of Conduct\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- [X] The provided reproduction is a [minimal reproducible example](https://stackoverflow.com/help/minimal-reproducible-example) of the bug.",[],"nuxt","Importing directly from module entry points is not allowed. ","2023-06-16T12:11:07Z","https://github.com/Tresjs/nuxt/issues/6",{"description":2939,"labels":2940,"number":2941,"owner":2863,"repository":2864,"state":2889,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### 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.74411345,{"description":2947,"labels":2948,"number":2949,"owner":2863,"repository":2926,"state":2889,"title":2950,"updated_at":2951,"url":2952,"score":2953},"### 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.7464108,["Reactive",2955],{},["Set"],["ShallowReactive",2958],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$flMB2MSJ0DnCweCqDjLGJlkVfEwT4CGJpUbskhXQsZvc":-1},"/Tresjs/tres/229"]