\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.75539297,{"description":2885,"labels":2886,"number":2887,"owner":2863,"repository":2864,"state":2888,"title":2889,"updated_at":2890,"url":2891,"score":2892},"### 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,"closed","pointer event blocking objects","2023-09-05T08:19:33Z","https://github.com/Tresjs/tres/issues/357",0.65228397,{"description":2894,"labels":2895,"number":1229,"owner":2863,"repository":2864,"state":2888,"title":2897,"updated_at":2898,"url":2899,"score":2900},"Similar of [R3F Events](https://docs.pmnd.rs/react-three-fiber/api/events) would be nice to add Raytracing support",[2896],{"name":2857,"color":2858},"Events","2023-01-20T11:31:08Z","https://github.com/Tresjs/tres/issues/6",0.6930074,{"description":2902,"labels":2903,"number":2907,"owner":2863,"repository":2864,"state":2888,"title":2908,"updated_at":2909,"url":2910,"score":2911},"**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",[2904],{"name":2905,"color":2906},"bug","d73a4a",189,"Problems with pointerevents","2023-04-12T14:07:01Z","https://github.com/Tresjs/tres/issues/189",0.70665324,{"description":2913,"labels":2914,"number":2918,"owner":2863,"repository":2864,"state":2888,"title":2919,"updated_at":2920,"url":2921,"score":2922},"### 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.",[2915],{"name":2916,"color":2917},"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.71485007,{"description":2924,"labels":2925,"number":2927,"owner":2863,"repository":2864,"state":2888,"title":2928,"updated_at":2929,"url":2930,"score":2931},"### 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.",[2926],{"name":2905,"color":2906},366,"Re-instance THREE instances via args prop reactivity","2023-08-17T13:53:39Z","https://github.com/Tresjs/tres/issues/366",0.72611964,{"description":2933,"labels":2934,"number":2935,"owner":2863,"repository":2864,"state":2888,"title":2936,"updated_at":2937,"url":2938,"score":2939},"### Describe the bug\n\nThe click-event on meshes does not properly work when the scene is not shown full screen.\n\n### Reproduction\n\nhttps://stackblitz.com/edit/tresjs-basic-hjvh64?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\npnpm\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.",[],282,"Raycaster does not work properly when scene is not in full screen","2023-06-19T06:42:39Z","https://github.com/Tresjs/tres/issues/282",0.72942156,{"description":2941,"labels":2942,"number":2944,"owner":2863,"repository":2864,"state":2888,"title":2945,"updated_at":2946,"url":2947,"score":2948},"# Description\r\n\r\n[example](https://assets.codepen.io/4698468/usePamMouse.gif)\r\n\r\n\r\n## Why TresJs need this feature\r\nCreating the abstraction \u003CusePamMouse /> open doors for creating beautiful scenes (like showcase) easily. with a really nice effect.\r\n\r\nMight have a factor props and a disabled.\r\n\r\nWe could discuss names\r\n\r\n\r\n",[2943],{"name":2857,"color":2858},122,"Pam camera mouse effect [Feature Request]","2023-02-28T15:08:03Z","https://github.com/Tresjs/tres/issues/122",0.7467044,{"description":2950,"labels":2951,"number":2955,"owner":2863,"repository":2864,"state":2888,"title":2956,"updated_at":2957,"url":2958,"score":2959},"**Describe the bug**\r\n\r\nDocumentation for events emitted by this component are missing\r\n\r\n- `dragging` event\r\n- `change` event\r\n- `mouseDown` event\r\n- `mouseUp` event\r\n- `objectChange` event\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. Go to '...'\r\n2. Click on '....'\r\n3. Scroll down to '....'\r\n4. See error\r\n",[2952],{"name":2953,"color":2954},"docs","0075ca",64,"Add events to TransformControls documentation","2023-01-07T18:45:57Z","https://github.com/Tresjs/tres/issues/64",0.7521909,["Reactive",2961],{},["Set"],["ShallowReactive",2964],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$f8MkiphzR38wSUkm5feaT7dv0uR129gDOIMqI1wA_AM0":-1},"/Tresjs/tres/515"]