\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.",[2866,2869],{"name":2867,"color":2868},"pending-triage","97A4FE",{"name":2870,"color":2871},"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.72614217,{"description":2878,"labels":2879,"number":2888,"owner":2856,"repository":2889,"state":2858,"title":2890,"updated_at":2891,"url":2892,"score":2893},"### Description\n\nAs a developer using Cientos, it would be useful to have a function available that allows to capture a screenshot of the scene canvas.\n\n### Suggested solution\n\nProvide a function that allows capturing screenshots.\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.",[2880,2882,2885],{"name":2870,"color":2881},"DEEAB8",{"name":2883,"color":2884},"has-workaround","aea9c4",{"name":2886,"color":2887},"p2-nice-to-have","D4C5F9",229,"cientos","Taking screenshots of the canvas","2024-04-05T14:54:01Z","https://github.com/Tresjs/cientos/issues/229",0.7424119,{"description":2895,"labels":2896,"number":2903,"owner":2856,"repository":2857,"state":2858,"title":2904,"updated_at":2905,"url":2906,"score":2907},"As a developer using Tres, I would like a to have a render mode that pauses rendering when:\r\n\r\n* the window/app containing the Tres Scene is blurred/backgrounded\r\n* OR the tab/page containing the Tres Scene is blurred/backgrounded\r\n\r\nAnd resumes rendering when:\r\n\r\n* the window/app containing the Tres Scene is focused/foregrounded\r\n* AND the tab/page containing the Tres Scene is focused/foregrounded\r\n\r\n### Context\r\n\r\n> @andretchen0 @alvarosabu In my tests with `babylonjs` (other engine but should be similar) this worked well, when the tab was in the background yes. But using multiple windows where the window running the engine is visible but not focused left it running at 60 FPS. Given many 3d websites/applications are very resource intensive I'd still consider adding the option to pause rendering when the tab/window is not focused.\r\n\r\n_Originally posted by @thomasaull in https://github.com/Tresjs/tres/issues/497#issuecomment-1900650512_\r\n ",[2897,2900],{"name":2898,"color":2899},"feature","c2e0c6",{"name":2901,"color":2902},"p2-to-be-discussed","97C1B1",517,"feat: render mode to pause rendering when window is blurred","2024-03-30T15:41:46Z","https://github.com/Tresjs/tres/issues/517",0.75680476,{"description":2909,"labels":2910,"number":2914,"owner":2856,"repository":2857,"state":2915,"title":2916,"updated_at":2917,"url":2918,"score":2919},"**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",[2911],{"name":2912,"color":2913},"bug","d73a4a",189,"closed","Problems with pointerevents","2023-04-12T14:07:01Z","https://github.com/Tresjs/tres/issues/189",0.66425544,{"description":2921,"labels":2922,"number":2931,"owner":2856,"repository":2857,"state":2915,"title":2932,"updated_at":2933,"url":2934,"score":2935},"### Description\n\nAs a developer using TresJS, I would like to have an Event Management solution with the following features:\r\n\r\n- Support for:\r\n - onClick\r\n - onContextMenu (rightClick)\r\n - onDoubleClick\r\n - onWheel\r\n - onPointerDown\r\n - onPointerUp\r\n - onPointerLeave\r\n - onPointerMove\r\n - onPointerCancel\r\n - onLostPointerCapture\r\n- Event prioritization \r\n- primitive pointer events\r\n- Event bubbling and propagation #501 #426 \r\n\r\n# Propagation through intersected objects\r\n\r\nRaycasting-Based Interaction: Tres should use Three.js's raycasting to determine which objects are interacted with. A ray is cast from the camera through the mouse position into the 3D space, and intersections with objects are calculated.\r\n\r\nSimulated Bubbling: When an event occurs, Tres might propagate it through objects based on their spatial arrangement (like from child to parent), but this is based on the raycast hits and not a strict parent-child hierarchy as in the DOM.\r\n\r\nMeaning that stop propagation is based on occlusion\r\n\r\n\r\n\r\nIf the object is a Group or a model consistent with several meshes, the same concept applies, the closest mesh to the camera stops the propagation\r\n\r\n\r\n\n\n### Suggested solution\n\n# Current solution uses:\r\n\r\n- `useRaycaster` https://github.com/Tresjs/tres/blob/main/src/composables/useRaycaster/index.ts\r\n- `usePointerEventHandler` https://github.com/Tresjs/tres/tree/main/src/composables/usePointerEventHandler\r\n\r\nRegister of events is being done here \r\nhttps://github.com/Tresjs/tres/blob/main/src/composables/usePointerEventHandler/index.ts#L57-L62\r\n\r\n```ts\r\nconst registerObject = (object: Object3D & EventProps) => {\r\n const { onClick, onPointerMove, onPointerEnter, onPointerLeave } = object\r\n\r\n if (onClick) objectsWithEventListeners.click.set(object, onClick)\r\n if (onPointerMove) objectsWithEventListeners.pointerMove.set(object, onPointerMove)\r\n if (onPointerEnter) objectsWithEventListeners.pointerEnter.set(object, onPointerEnter)\r\n if (onPointerLeave) objectsWithEventListeners.pointerLeave.set(object, onPointerLeave)\r\n}\r\n\r\n // to make the registerObject available in the custom renderer (nodeOps), it is attached to the scene\r\n scene.userData.tres__registerAtPointerEventHandler = registerObject\r\n scene.userData.tres__deregisterAtPointerEventHandler = deregisterObject\r\n\r\n scene.userData.tres__registerBlockingObjectAtPointerEventHandler = registerBlockingObject\r\n scene.userData.tres__deregisterBlockingObjectAtPointerEventHandler = deregisterBlockingObject\r\n```\r\n\r\nThese are then used on the renderer by saving them on the `userData` of the scene object\r\n\r\n```ts\r\ninsert(child, parent) {\r\n if (parent && parent.isScene) scene = parent as unknown as TresScene\r\n\r\n const parentObject = parent || scene\r\n\r\n if (child?.isObject3D) {\r\n if (\r\n child && supportedPointerEvents.some(eventName => child[eventName])\r\n ) {\r\n if (!scene?.userData.tres__registerAtPointerEventHandler)\r\n throw 'could not find tres__registerAtPointerEventHandler on scene\\'s userData'\r\n\r\n scene?.userData.tres__registerAtPointerEventHandler?.(child as Object3D)\r\n }\r\n }\r\n```\r\n\r\nhttps://github.com/Tresjs/tres/blob/main/src/core/nodeOps.ts#L102\r\n\r\n# Desired solution\r\n\r\nA state/store to manage the events\r\n\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.",[2923,2924,2927,2928],{"name":2898,"color":2899},{"name":2925,"color":2926},"v4","7980EA",{"name":2853,"color":2854},{"name":2929,"color":2930},"breaking-change","5612D2",515,"Pointer EventManager state","2024-05-30T06:32:45Z","https://github.com/Tresjs/tres/issues/515",0.68181425,{"description":2937,"labels":2938,"number":2939,"owner":2856,"repository":2857,"state":2915,"title":2940,"updated_at":2941,"url":2942,"score":2943},"### Description\n\nThe context is available in TresCanvas and it's childs by using [useTresContext](https://github.com/Tresjs/tres/blob/e3603f3bb1e569546f147721d2f0b6562dac4418/src/composables/useTresContextProvider/index.ts#L92). The context should also be available in parent components of TresCanvas.\n\n### Suggested solution\n\nExpose the context in TresCanvas.\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.",[],403,"Expose context (TresContext) in TresCanvas","2023-09-22T17:02:44Z","https://github.com/Tresjs/tres/issues/403",0.72966594,{"description":2945,"labels":2946,"number":2888,"owner":2856,"repository":2857,"state":2915,"title":2951,"updated_at":2952,"url":2953,"score":2954},"**Describe the bug**\r\nWith the new updates of TresJs/Core you can assign the setAttributes('position', BufferGeo)...\r\nLike this...\r\n``` \r\n \u003CTresPoints>\r\n \u003CTresBufferGeometry :position=\"[positionArray, 3]\" :a-scale=\"[scaleArray, 1]\" />\r\n \u003CTresShaderMaterial v-bind=\"shader\" />\r\n \u003C/TresPoints>\r\n\r\n```\r\nBefore this work, this broke the \"Stars\" abstraction in cientos, and also other examples (with the TresPoints)\r\n\r\nI am doing ... What I expect is ... What actually happening is\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**Steps**\r\nSteps to reproduce the behavior:\r\n1. Install the last version of cientos and tres\r\n2. Try to use \u003CStars /> component\r\n\r\n**Expected behavior**\r\nCorrect assign of the attributes in TresBufferGeometry \r\n\r\n**Screenshots**\r\nThis is the current error (screenshots take for playground portal-journey experiment) last version Tresjs\r\n\r\n\r\n",[2947,2948],{"name":2912,"color":2913},{"name":2949,"color":2950},"needs reproduction","511ECF","TresBufferGeometry get broken with the last Tresjs update (Attributes assign)","2023-04-25T07:11:58Z","https://github.com/Tresjs/tres/issues/229",0.7343171,{"description":2956,"labels":2957,"number":2958,"owner":2856,"repository":2857,"state":2915,"title":2959,"updated_at":2960,"url":2961,"score":2962},"### Description\r\n\r\nLet's say we have two objects. object A is closer to the camera and is in front of object B. Only object B has an `onClick` event handler. The user now clicks where object A is. The event handler on object B triggers, which (depending on the use case) might not be desirable.\r\n\r\nThere is currently no way to mark an object A as \"blocking\" other than attaching pointer event listeners to it.\r\n\r\n### Suggested solution\r\n\r\nAdd the possibility to mark objects/meshes to be ray-blocking like so:\r\n\r\n`\u003CTresMesh ... blocks-pointer-events>`\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.",[],357,"pointer event blocking objects","2023-09-05T08:19:33Z","https://github.com/Tresjs/tres/issues/357",0.7356752,{"description":2964,"labels":2965,"number":2966,"owner":2856,"repository":2967,"state":2915,"title":2968,"updated_at":2969,"url":2970,"score":2971},"The Manual Post Processing demo doesn't change when changing the various post-processing options.\r\n\r\n\u003Cimg width=\"1489\" alt=\"Screenshot 2023-09-20 at 01 10 01\" src=\"https://github.com/Tresjs/playground/assets/20469369/f9fb0fee-e6a7-45d8-afeb-4788da9b04b2\">\r\n\r\n----\r\n\r\n## Description\r\n\r\n* Expected: When changing the [post-processing dropdown here](https://deploy-preview-62--tresjs-playground.netlify.app/experiments/post-processing-manual), the content of the canvas should show the post-processing effect.\r\n* What happens: Nothing happens. The post-processing effect is not shown.\r\n\r\n----\r\n\r\n## Diagnosis\r\n\r\nThe demo watches a ref called `context`. It expects that the ref here `\u003CTresCanvas ref=\"content\">` will have a renderer in its value, when its updated:\r\n\r\n```\r\nwatchEffect(() => {\r\n if (context.value) {\r\n context.value.renderer.setSize(width.value, height.value)\r\n context.value.renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2))\r\n effectComposer = new EffectComposer(context.value.renderer)\r\n effectComposer.addPass(new RenderPass(context.value.scene, context.value.camera))\r\n\r\n onLoop(() => {\r\n effectComposer.render()\r\n })\r\n }\r\n})\r\n```\r\n\r\n[Source](https://github.com/Tresjs/playground/blob/215b94708fe765c80b073f75798fc441db913fd6/components/content/post-processing-manual/index.vue#L62)\r\n\r\n... but it doesn't. Here's the browser error message:\r\n\r\n```\r\nTypeError: a.value.renderer is undefined\r\n```\r\n\r\n----\r\n\r\nChecking the [Tres documentation for `Renderer`](https://tresjs.org/api/renderer.html), it doesn't appear that adding a ref on `\u003CTresCanvas />` is a documented way to access the renderer, so I didn't file an issue there.\r\n\r\n----\r\n\r\n## System Info\r\n\r\nMac M1\r\nMac OS 13.1\r\nFirefox 117.0.1 ",[],68,"lab","Manual Post Processing demo: canvas ref doesn't contain renderer","2023-09-23T14:22:58Z","https://github.com/Tresjs/lab/issues/68",0.7455447,["Reactive",2973],{},["Set"],["ShallowReactive",2976],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f2UhMXSehSrzAJ7N4zKQhU4Xvb5Qe08j0DCC6x8PsdJM":-1},"/Tresjs/tres/581"]