\n \u003CTresMeshBasicMaterial />\n\u003C/TresMesh>\n```\n\n**Describe the solution you'd like**\nShortcut component\n\n```\n\u003CSphere radius=\"1\">\n \u003CTresBasicMaterial />\n\u003C/Sphere>\n\n```\n\n- [x] Box\n- [x] Sphere\n- [x] Plane\n- [x] Torus\n- [x] TorusKnot\n- [x] Circle\n- [x] Cone\n- [x] Tube\n- [x] Ring\n- [x] Tetrahedron\n- [ ] Polyhedron\n- [x] Icosahedron\n- [x] Octahedron\n- [x] Dodecahedron\n- [ ] Extrude\n- [ ] Lathe.\n\n",[3183,3186],{"name":3184,"color":3185},"good first issue","7057ff",{"name":3157,"color":3158},60,"closed","Shapes abstractions for Cientos","2023-02-02T14:04:55Z","https://github.com/Tresjs/tres/issues/60",0.7736902,{"description":3194,"labels":3195,"number":3197,"owner":3146,"repository":3163,"state":3188,"title":3198,"updated_at":3199,"url":3200,"score":3201},"**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",[3196],{"name":3140,"color":3141},56,"BufferGeometry and BufferAttribute support","2022-12-22T10:31:58Z","https://github.com/Tresjs/tres/issues/56",0.78925294,{"description":3203,"labels":3204,"number":3213,"owner":3146,"repository":3163,"state":3188,"title":3214,"updated_at":3215,"url":3216,"score":3217},"### 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.",[3205,3206,3209,3210],{"name":3140,"color":3141},{"name":3207,"color":3208},"v4","7980EA",{"name":3143,"color":3144},{"name":3211,"color":3212},"breaking-change","5612D2",515,"Pointer EventManager state","2024-05-30T06:32:45Z","https://github.com/Tresjs/tres/issues/515",0.789448,{"description":3219,"labels":3220,"number":668,"owner":3146,"repository":3163,"state":3188,"title":3221,"updated_at":3222,"url":3223,"score":3224},"",[],"Refactor Instance Creator","2022-12-05T08:14:41Z","https://github.com/Tresjs/tres/issues/13",0.7903895,{"description":3226,"labels":3227,"number":1519,"owner":3146,"repository":3163,"state":3188,"title":3229,"updated_at":3230,"url":3231,"score":3232},"**Is your feature request related to a problem? Please describe.**\r\nAtm there is no support for [AnimationMixer](https://threejs.org/docs/#api/en/animation/AnimationMixer) \r\n\r\n**Describe the solution you'd like**\r\nA composable that leverage the work around animation management with TresJS\r\n\r\nhttps://github.com/pmndrs/drei#useanimations\r\n",[3228],{"name":3140,"color":3141},"useAnimation composable for AnimationMixer","2023-01-17T11:05:06Z","https://github.com/Tresjs/tres/issues/80",0.79994285,{"description":3234,"labels":3235,"number":3237,"owner":3146,"repository":3147,"state":3188,"title":3238,"updated_at":3239,"url":3240,"score":3241},"### Description\n\nAdd a component, stats-gl, to measure the performance of the scene\n\n### Suggested solution\n\nSee https://github.com/pmndrs/drei#statsgl\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.",[3236],{"name":3184,"color":3185},197,"Stats-gl","2023-09-21T12:58:24Z","https://github.com/Tresjs/cientos/issues/197",0.80138737,{"description":3243,"labels":3244,"number":1612,"owner":3146,"repository":3163,"state":3188,"title":3249,"updated_at":3250,"url":3251,"score":3252},"**Is your feature request related to a problem? Please describe.**\r\nAtm we are using `provide/inject` API to share the renderer state, especially to be able to extend the catalogue on cientos. \r\n\r\n`useTres` was an attempt to achieve a local state but wasn't that efficient or type-safe. Also is using `reactive` atm which can affect performance.\r\n\r\n**Describe the solution you'd like**\r\nA state that is:\r\n- Performant: doesn't affect the performance of the scene\r\n- Scalable\r\n- Typed\r\n\r\n**Suggested solution**\r\nMaybe `shallowReactive` with `readonly` for some properties. I'm also thinking a lot about pinia, especially for devtools support but I still don't know if it's possible to make the state shallowReactive to avoid issues (specially for scene)\r\n\r\n**Additional context**\r\nAdd any other context or screenshots about the feature request here.\r\n",[3245,3246],{"name":3157,"color":3158},{"name":3247,"color":3248},"performance","3F1D85","Better state management `useTres`","2023-02-16T08:09:50Z","https://github.com/Tresjs/tres/issues/37",0.8026887,["Reactive",3254],{},["Set"],["ShallowReactive",3257],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOpUINt4sfZO46GlDN-YvqCtxptdakccxJW2l7J41X_8":-1},"/Tresjs/tres/72"]