\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.7247584,{"description":2896,"labels":2897,"number":2898,"owner":2871,"repository":2872,"state":2882,"title":2899,"updated_at":2900,"url":2901,"score":2902},"### 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.738147,{"description":2904,"labels":2905,"number":2909,"owner":2871,"repository":2872,"state":2882,"title":2910,"updated_at":2911,"url":2912,"score":2913},"### Description\r\n\r\nAs the author and maintainer of TresJS, I would like to simplify and clean the custom renderer `nodeOps` to make the code more readable and easier to maintain.\r\n\r\nAt, we are using overpopulation the property [userData](https://threejs.org/docs/#api/en/core/Object3D.userData) for the scene and objects on the scene graph as a workaround for accessing state or adding extra properties and methods that we need for TresJS nodeOps like this:\r\n\r\n` scene.userData.tres__registerAtPointerEventHandler = registerObject`\r\n\r\n`userData` is a property that the end-user can also use, we need to add the `.tres__` prefix to avoid naming collisions, adding an extra cognitive load to the code.\r\n\r\nCode ends up being kind of difficult to read:\r\n\r\n```ts\r\nremove(node) {\r\n if (!node) return\r\n // remove is only called on the node being removed and not on child nodes.\r\n\r\n if (node.isObject3D) {\r\n const object3D = node as unknown as Object3D\r\n\r\n const disposeMaterialsAndGeometries = (object3D: Object3D) => {\r\n const tresObject3D = object3D as TresObject3D\r\n\r\n if (!object3D.userData.tres__materialViaProp) {\r\n tresObject3D.material?.dispose()\r\n tresObject3D.material = undefined\r\n }\r\n\r\n if (!object3D.userData.tres__geometryViaProp) {\r\n tresObject3D.geometry?.dispose()\r\n tresObject3D.geometry = undefined\r\n }\r\n }\r\n\r\n const deregisterAtPointerEventHandler = scene?.userData.tres__deregisterAtPointerEventHandler\r\n const deregisterBlockingObjectAtPointerEventHandler\r\n = scene?.userData.tres__deregisterBlockingObjectAtPointerEventHandler\r\n\r\n const deregisterAtPointerEventHandlerIfRequired = (object: TresObject) => {\r\n\r\n if (!deregisterBlockingObjectAtPointerEventHandler)\r\n throw 'could not find tres__deregisterBlockingObjectAtPointerEventHandler on scene\\'s userData'\r\n\r\n scene?.userData.tres__deregisterBlockingObjectAtPointerEventHandler?.(object as Object3D)\r\n\r\n if (!deregisterAtPointerEventHandler)\r\n throw 'could not find tres__deregisterAtPointerEventHandler on scene\\'s userData'\r\n\r\n if (\r\n object && supportedPointerEvents.some(eventName => object[eventName])\r\n )\r\n deregisterAtPointerEventHandler?.(object as Object3D)\r\n }\r\n\r\n const deregisterCameraIfRequired = (object: Object3D) => {\r\n const deregisterCamera = scene?.userData.tres__deregisterCamera\r\n\r\n if (!deregisterCamera)\r\n throw 'could not find tres__deregisterCamera on scene\\'s userData'\r\n\r\n if ((object as Camera).isCamera)\r\n deregisterCamera?.(object as Camera)\r\n }\r\n\r\n node.removeFromParent?.()\r\n object3D.traverse((child: Object3D) => {\r\n disposeMaterialsAndGeometries(child)\r\n deregisterCameraIfRequired(child)\r\n deregisterAtPointerEventHandlerIfRequired?.(child as TresObject)\r\n })\r\n\r\n disposeMaterialsAndGeometries(object3D)\r\n deregisterCameraIfRequired(object3D)\r\n deregisterAtPointerEventHandlerIfRequired?.(object3D as TresObject)\r\n }\r\n\r\n node.dispose?.()\r\n },\r\n ``` \r\n\r\n### Suggested solution\r\n\r\nAdd a local state for each instance called `__tres` which contains:\r\n\r\n```ts\r\nexport interface LocalState = {\r\n type: string\r\n // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph\r\n objects: Instance[]\r\n parent: Instance | null\r\n primitive?: boolean\r\n eventCount: number\r\n handlers: Partial\u003CEventHandlers>\r\n memoizedProps: { [key: string]: any }\r\n}\r\n```\r\n\r\n```ts\r\nexport interface TresObject3D extends THREE.Object3D\u003CTHREE.Object3DEventMap> {\r\n geometry?: THREE.BufferGeometry & TresBaseObject\r\n material?: THREE.Material & TresBaseObject\r\n __tres: LocalState\r\n}\r\n```\r\n\r\nWe could include the context of TresContextProvider on the scene object to handle the register of cameras and event handlers or even inside each LocalState on a potential property `root`\r\n\r\n```ts\r\nexport type LocalState = {\r\n type: string\r\n // objects and parent are used when children are added with `attach` instead of being added to the Object3D scene graph\r\n root: TresContext,\r\n objects: Instance[]\r\n parent: Instance | null\r\n primitive?: boolean\r\n eventCount: number\r\n handlers: Partial\u003CEventHandlers>\r\n memoizedProps: { [key: string]: any }\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.",[2906],{"name":2907,"color":2908},"v4","7980EA",516,"LocalState for custom renderer node instances instead of userData","2024-04-03T06:58:19Z","https://github.com/Tresjs/tres/issues/516",0.74391097,{"description":2915,"labels":2916,"number":2917,"owner":2871,"repository":2872,"state":2882,"title":2918,"updated_at":2919,"url":2920,"score":2921},"## Problem\r\n\r\nAs of PR ([80f8a2e](https://github.com/Tresjs/tres/commit/80f8a2e664e2100f9d0dabf507a213aae524f1de)), some playgrounds are broken. And user code is likely also broken.\r\n\r\nBroken playground example:\r\n\r\nhttp://localhost:5173/events/dynamic-objects\r\n\r\n### Error:\r\n\r\n```ts\r\nUncaught (in promise) TypeError: props is null\r\n createElement nodeOps.ts:34\r\n```\r\n\r\nHere's the problem line in `src/nodeOps.ts`:\r\n\r\n```ts\r\n function createElement(tag: string, _isSVG: undefined, _anchor: any, props: Partial\u003CWithMathProps\u003CTresObject>> = {}): TresObject | null {\r\n```\r\n\r\nThe signature was changed from the [signature in the Vue docs](https://vuejs.org/api/custom-renderer.html):\r\n\r\n```ts\r\n createElement(\r\n type: string,\r\n isSVG?: boolean,\r\n isCustomizedBuiltIn?: string,\r\n vnodeProps?: (VNodeProps & { [key: string]: any }) | null\r\n ): HostElement\r\n```\r\n\r\nThe new signature isn't equivalent. The docs' version says Vue can pass `null` for `props`. \r\n\r\nBut if `nodeOps.createElement` gets an explicit `null`, it throws on the next line when checking `if (!props.args)`.\r\n\r\n## Solution\r\n\r\nRevert the signature and readd the check for null `props`.\r\n\r\n### Reproduction\r\n\r\nN/A - see above\r\n\r\n### Steps to reproduce\r\n\r\n* Check out [80f8a2e](https://github.com/Tresjs/tres/commit/80f8a2e664e2100f9d0dabf507a213aae524f1de) – or, at the moment, check out the `main` Tres branch.\r\n* `pnpm dev`\r\n* Navigate to http://localhost:5173/events/dynamic-objects\r\n* See error in console:\r\n\r\n### System Info\r\n\r\n```shell\r\nN/A\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.",[],827,"`nodeOps.createElement` throws when `props === null`","2024-09-08T12:49:26Z","https://github.com/Tresjs/tres/issues/827",0.74560153,{"description":2923,"labels":2924,"number":2925,"owner":2871,"repository":2926,"state":2882,"title":2927,"updated_at":2928,"url":2929,"score":2930},"**Describe the bug**\r\nEffectComposer in Nuxt3 ,canvas is no color.\r\n\r\n**Reproduction**\r\nhttps://stackblitz.com/edit/github-fbtfij?file=app.vue\r\n\r\n\r\n**Expected behavior**\r\n\r\n\r\n**Screenshots**\r\n\r\n\r\n\r\n**System Info**\r\nnuxt:3.12.4\r\n\r\n",[],118,"post-processing","EffectComposer in Nuxt3 ,canvas is no color","2024-10-13T16:21:50Z","https://github.com/Tresjs/post-processing/issues/118",0.7478114,{"description":2932,"labels":2933,"number":2943,"owner":2871,"repository":2872,"state":2882,"title":2944,"updated_at":2945,"url":2946,"score":2947},"### Description\r\n\r\n## Problem\r\n\r\nUpdates/renders share the same unordered-from-the-components-perspective callback \"slot\", leading to out-of-sync visuals.\r\n\r\n## Example\r\n\r\nHere's the Cientos' playground demo for `MeshReflectionMaterial`. Notice the extra \"jumps\" in the reflection:\r\n\r\nhttps://github.com/Tresjs/tres/assets/20469369/314a4154-7cef-47d0-977e-e98fd53c8c13\r\n\r\nHere are two adjacent frames. Notice that the \"real\" elements haven't moved, but the reflection \"jumps\" from one frame to the next:\r\n\r\n\u003Cimg width=\"1044\" alt=\"Screenshot 2024-03-29 at 15 13 35\" src=\"https://github.com/Tresjs/tres/assets/20469369/47a6f2d1-817c-4bf1-a164-70969fb3aa7d\">\r\n\r\n## Why it happens\r\n\r\nThe \"jumps\" occur because the updates/renders are all firing in `onLoop`, but out-of-order from the perspective of the FBO reflection. So for a file like this ...\r\n\r\n```vue\r\n\u003Cscript setup lang=\"ts\">\r\nimport { TresCanvas, useRenderLoop } from '@tresjs/core'\r\nimport DemoComponent from './DemoComponent.vue'\r\n\r\nconst { onLoop } = useRenderLoop()\r\n\r\nonLoop(({ elapsed }) => {\r\n console.log(\"Demo update\", elapsed)\r\n})\r\n\u003C/script>\r\n\r\n\u003Ctemplate>\r\n \u003CTresCanvas>\r\n \u003CTresPerspectiveCamera />\r\n \u003CDemoComponent>\u003C/DemoComponent>\r\n \u003C/TresCanvas>\r\n\u003C/template>\r\n\r\n```\r\n\r\n... a single \"tick\" of `onLoop` looks like this:\r\n\r\n\u003Cimg width=\"238\" alt=\"Screenshot 2024-03-29 at 16 41 44\" src=\"https://github.com/Tresjs/tres/assets/20469369/63d33e65-de88-48dc-859d-709863672227\">\r\n\r\nWith this ordering, if `DemoComponent` renders the scene to an FBO, and is then rendered to the screen, it'll always be 1 frame behind `Demo`.\r\n\r\n\r\n\r\n### Suggested solution\r\n\r\nWe could follow R3F's lead here:\r\n\r\n* [Guarantee that rendering happens after `onLoop`](https://docs.pmnd.rs/react-three-fiber/api/hooks#useframe)\r\n* Implement these:\r\n** https://docs.pmnd.rs/react-three-fiber/api/hooks#taking-over-the-render-loop\r\n** https://docs.pmnd.rs/react-three-fiber/api/hooks#negative-indices\r\n\r\nFor example, R3F's `OrbitControls` uses a negative index:\r\n\r\nhttps://github.com/pmndrs/drei/blob/c147c2b1064bc4b457150f995bf714c2e43cf56f/src/core/OrbitControls.tsx#L58C1-L61C13\r\n\r\nIf I understand correctly, that means that the OrbitControls camera is updated before the rest of the scene, which is important in the case of FBOs like in the reflection material.\r\n\r\n### Alternative\r\n\r\nAs a simpler – though less flexible – solution, we could add a few callbacks:\r\n\r\n* `useRenderLoop().onBeforeRender()` – for FBOs\r\n* `useRenderLoop().onRender()` – for actually rendering to the screen\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.",[2934,2937,2940],{"name":2935,"color":2936},"bug","d73a4a",{"name":2938,"color":2939},"feature","c2e0c6",{"name":2941,"color":2942},"p2-to-be-discussed","97C1B1",607,"`useRenderLoop`: render after updates","2024-05-30T06:58:57Z","https://github.com/Tresjs/tres/issues/607",0.7483349,{"description":2949,"labels":2950,"number":2952,"owner":2871,"repository":2926,"state":2882,"title":2953,"updated_at":2954,"url":2955,"score":2956},"**Describe the bug**\r\nA clear and concise description of what the bug is. If you intend to submit a PR for this issue, tell us in the description. Thanks!\r\n\r\nHi! Fist of all, What a great library! I'm playing with it, and so far... I LOVE IT! now... to the error, I am currently trying to use the post-processing package on a scene and I get the following error when I use it:\r\n\r\n\r\n\r\n**Reproduction**\r\nThis same happens whenever you check the examples:\r\nhttps://playground.tresjs.org/experiments/nuxt-stones\r\n\r\n\r\n\r\n\r\n**Steps**\r\nSteps to reproduce the behavior:\r\n1. Just adding the EffectComposer with a default bloom effect.\r\n\r\n**Expected behavior**\r\nFor the effect composer component to work\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\nSystem:\r\n OS: macOS 13.4.1\r\n CPU: (8) arm64 Apple M1\r\n Memory: 323.22 MB / 16.00 GB\r\n Shell: 5.9 - /bin/zsh\r\n Binaries:\r\n Node: 18.15.0 - ~/.nvm/versions/node/v18.15.0/bin/node\r\n npm: 9.5.0 - ~/.nvm/versions/node/v18.15.0/bin/npm\r\n Browsers:\r\n Chrome: 116.0.5845.110\r\n Safari: 16.5.2\r\n npmPackages:\r\n @tresjs/cientos: ^3.1.0 => 3.1.0 \r\n @tresjs/core: ^3.1.0 => 3.1.0 \r\n @tresjs/post-processing: ^0.3.0 => 0.3.0 \r\n vite: ^2.8.0 => 2.9.16 \r\n```\r\n\r\n**Additional context**\r\nAdd any other context about the problem here.\r\n",[2951],{"name":2935,"color":2936},49,"Cannot read properties of undefined (reading 'canvas')","2023-10-19T15:07:15Z","https://github.com/Tresjs/post-processing/issues/49",0.74922776,{"description":2958,"labels":2959,"number":2960,"owner":2871,"repository":2961,"state":2882,"title":2962,"updated_at":2963,"url":2964,"score":2965},"### Describe the bug\n\nI am trying to use a TresCanvas that is known to work when using in a staticly declared way\r\nbut if I use it in a component that is dynamicly loaded using \r\n\r\n`defineAsyncComponent(() => import('@/components/pageBuilder/component.vue'))`\r\n\r\nit doesn't render the canvas the most I can get is the following\r\n\r\n`\u003Cdiv window-size=\"\" clear-color=\"#241246\" shadows=\"\" data-v-3789b801=\"\">\u003Ccanvas style=\"\">\u003C/canvas>\u003C/div>`\r\n\r\n## Recent findings\r\n\r\njust having the TresCanvas in a component that is nested 2 levels deep doesn't work.\r\nno idea why or what is causing this. \r\n\r\nI've provided a reproduction of this\r\n\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-z2g8yk?file=src%2Fcomponents%2FTheExperience.vue\n\n### Steps to reproduce\n\n_No response_\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.",[],79,"nuxt","TresCanvas doesn't render in Dynamicly loaded components or deeply nested components","2024-01-26T12:08:01Z","https://github.com/Tresjs/nuxt/issues/79",0.7502773,["Reactive",2967],{},["Set"],["ShallowReactive",2970],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f4DcmFMXVZLU-QX9gd51GUPuZ_FMBr-D7RV5MEuN1jcs":-1},"/Tresjs/cientos/507"]