\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",[2911,2914],{"name":2912,"color":2913},"good first issue","7057ff",{"name":2885,"color":2886},60,"closed","Shapes abstractions for Cientos","2023-02-02T14:04:55Z","https://github.com/Tresjs/tres/issues/60",0.7736902,{"description":2922,"labels":2923,"number":2925,"owner":2874,"repository":2891,"state":2916,"title":2926,"updated_at":2927,"url":2928,"score":2929},"**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",[2924],{"name":2868,"color":2869},56,"BufferGeometry and BufferAttribute support","2022-12-22T10:31:58Z","https://github.com/Tresjs/tres/issues/56",0.7892529,{"description":2931,"labels":2932,"number":2941,"owner":2874,"repository":2891,"state":2916,"title":2942,"updated_at":2943,"url":2944,"score":2945},"### 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.",[2933,2934,2937,2938],{"name":2868,"color":2869},{"name":2935,"color":2936},"v4","7980EA",{"name":2871,"color":2872},{"name":2939,"color":2940},"breaking-change","5612D2",515,"Pointer EventManager state","2024-05-30T06:32:45Z","https://github.com/Tresjs/tres/issues/515",0.789448,{"description":2947,"labels":2948,"number":1577,"owner":2874,"repository":2891,"state":2916,"title":2949,"updated_at":2950,"url":2951,"score":2952},"",[],"Refactor Instance Creator","2022-12-05T08:14:41Z","https://github.com/Tresjs/tres/issues/13",0.7903895,{"description":2954,"labels":2955,"number":1508,"owner":2874,"repository":2891,"state":2916,"title":2957,"updated_at":2958,"url":2959,"score":2960},"**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",[2956],{"name":2868,"color":2869},"useAnimation composable for AnimationMixer","2023-01-17T11:05:06Z","https://github.com/Tresjs/tres/issues/80",0.7999429,{"description":2962,"labels":2963,"number":2965,"owner":2874,"repository":2875,"state":2916,"title":2966,"updated_at":2967,"url":2968,"score":2969},"### 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.",[2964],{"name":2912,"color":2913},197,"Stats-gl","2023-09-21T12:58:24Z","https://github.com/Tresjs/cientos/issues/197",0.80138737,{"description":2971,"labels":2972,"number":2977,"owner":2874,"repository":2891,"state":2916,"title":2978,"updated_at":2979,"url":2980,"score":2981},"**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",[2973,2974],{"name":2885,"color":2886},{"name":2975,"color":2976},"performance","3F1D85",37,"Better state management `useTres`","2023-02-16T08:09:50Z","https://github.com/Tresjs/tres/issues/37",0.8026887,["Reactive",2983],{},["Set"],["ShallowReactive",2986],{"$fTRc1wZytZ_XrK4EfJfei_Sz-An4H4Yy6syhVxH_PVJc":-1,"$fOpUINt4sfZO46GlDN-YvqCtxptdakccxJW2l7J41X_8":-1},"/Tresjs/tres/72"]