{"id":21129897,"url":"https://github.com/markuslerner/three.interactive","last_synced_at":"2025-04-04T20:14:44.067Z","repository":{"id":40265406,"uuid":"309974315","full_name":"markuslerner/THREE.Interactive","owner":"markuslerner","description":"Fast and simple interaction manager for three.js for enabling mouse and touch events on 3D objects","archived":false,"fork":false,"pushed_at":"2024-08-08T09:05:01.000Z","size":9133,"stargazers_count":194,"open_issues_count":3,"forks_count":26,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-28T19:11:21.675Z","etag":null,"topics":["3d","event-system","events","interaction","interactive","javascript","mouse-events","pointer-events","threejs","touch-events","webgl"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/markuslerner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-11-04T10:51:24.000Z","updated_at":"2025-03-11T13:31:02.000Z","dependencies_parsed_at":"2023-01-22T23:15:59.855Z","dependency_job_id":"fe270096-8032-4b1d-bc70-b77c29226d41","html_url":"https://github.com/markuslerner/THREE.Interactive","commit_stats":{"total_commits":85,"total_committers":5,"mean_commits":17.0,"dds":0.09411764705882353,"last_synced_commit":"7db7518f80137dfe55b3f13895759d783f37c6db"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markuslerner%2FTHREE.Interactive","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markuslerner%2FTHREE.Interactive/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markuslerner%2FTHREE.Interactive/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/markuslerner%2FTHREE.Interactive/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/markuslerner","download_url":"https://codeload.github.com/markuslerner/THREE.Interactive/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247242680,"owners_count":20907134,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["3d","event-system","events","interaction","interactive","javascript","mouse-events","pointer-events","threejs","touch-events","webgl"],"created_at":"2024-11-20T05:30:49.143Z","updated_at":"2025-04-04T20:14:44.044Z","avatar_url":"https://github.com/markuslerner.png","language":"TypeScript","readme":"# THREE.Interactive\n\n[![NPM Package](https://img.shields.io/npm/v/three.interactive.svg?style=flat)](https://www.npmjs.com/package/three.interactive)\n\nFast and simple interaction manager for [THREE.js](https://github.com/mrdoob/three.js/) for enabling pointer, mouse and touch events on 3D objects.\n\n_Note: When using ReactJS I can highly recommend [react-three-fiber](https://github.com/pmndrs/react-three-fiber), which has built-in interaction support. For pure THREE.js projects, this little library can be very useful though._\n\n_ESM only. Currently no CJS version is built._\n\n### How it works:\n\n- Interactive Objects (THREE.Object3D) are added to the InteractionManager, which fires instances of InteractiveEvent.\n\n- Differenciates between mouseover/mouseout (closest objects) and mouseenter/mouseleave (all objects) events.\n\n- Intersections are sorted by distance to the camera and the events are dispatched in that order (closest first). If InteractiveEvent.stopPropagation() is called, the event won't fire again on other objects.\n\nAlternative to [three.interaction](https://github.com/jasonChen1982/three.interaction.js).\n\nCollaborations and improvements are welcome.\n\n### Examples\n\n- [Simple](https://dev.markuslerner.com/three.interactive/examples/simple.html): Basic example\n- [Auto Add](https://dev.markuslerner.com/three.interactive/examples/auto-add.html): Auto-add example, still beta\n- [Depth](https://dev.markuslerner.com/three.interactive/examples/depth.html): Overlapping objects example\n- [glTF](https://dev.markuslerner.com/three.interactive/examples/gltf.html): Hover/click gltf objects example\n\n### Usage\n\n```console\nyarn add three.interactive\n```\n\nor\n\n```console\nnpm install three.interactive\n```\n\n1. Include script:\n\n```js\nimport { InteractionManager } from 'three.interactive';\n```\n\n2. Create an InteractionManager instance\n\n```js\nconst interactionManager = new InteractionManager(\n  renderer,\n  camera,\n  renderer.domElement\n);\n```\n\n3. Add object to InteractionManager\n\n```js\ninteractionManager.add(cube);\n```\n\n4. Add event listener to object\n\n```js\ncube.addEventListener('click', (event) =\u003e {});\n```\n\n5. Call InteractionManager.update() on each render\n\n```jsjs\ninteractionManager.update();\n```\n\n### Simple example\n\n```js\nimport * as THREE from 'three';\nimport { InteractionManager } from 'three.interactive';\n\nconst container = document.createElement('div');\ncontainer.setAttribute('id', 'container');\ndocument.body.appendChild(container);\n\nconst renderer = new THREE.WebGLRenderer();\nrenderer.setPixelRatio(window.devicePixelRatio);\nrenderer.setSize(window.innerWidth, window.innerHeight);\ncontainer.appendChild(renderer.domElement);\n\nconst scene = new THREE.Scene();\n\nconst camera = new THREE.PerspectiveCamera(\n  45,\n  window.innerWidth / window.innerHeight,\n  0.1,\n  1000\n);\ncamera.position.set(0.0, 0.0, 10.0);\n\nconst interactionManager = new InteractionManager(\n  renderer,\n  camera,\n  renderer.domElement\n);\n\nconst geometry = new THREE.BoxGeometry(1, 1, 1);\nconst material = new THREE.MeshBasicMaterial();\n\nconst cube = new THREE.Mesh(geometry, material);\ncube.addEventListener('mouseover', (event) =\u003e {\n  event.target.material.color.set(0xff0000);\n  document.body.style.cursor = 'pointer';\n});\ncube.addEventListener('mouseout', (event) =\u003e {\n  event.target.material.color.set(0xffffff);\n  document.body.style.cursor = 'default';\n});\ncube.addEventListener('mousedown', (event) =\u003e {\n  event.target.scale.set(1.1, 1.1, 1.1);\n});\ncube.addEventListener('mouseup', (event) =\u003e {\n  event.target.scale.set(1.1, 1.1, 1.1);\n  if (event.wasIntersectedOnMouseDown) {\n    // Object was intersected when mouse down fired, so this is essentially a click event\n  } else {\n    // Object was not intersected when mouse down fired\n  }\n});\ncube.addEventListener('click', (event) =\u003e {\n  event.target.scale.set(1.0, 1.0, 1.0);\n});\nscene.add(cube);\ninteractionManager.add(cube);\n\nconst animate = (time) =\u003e {\n  requestAnimationFrame(animate);\n\n  interactionManager.update();\n\n  renderer.render(scene, camera);\n};\n\nanimate();\n```\n\n### API\n\n#### InteractionManager class\n\n`new InteractionManager(renderer, camera, renderer.domElement [, { autoAdd: false, scene, bindEventsOnBodyElement: true } ])`\n\nConstructor of InteractionManager instance; if the autoAdd option (still beta) is used, there is no need for adding objects to InteractionManager manually and calling interactionManager.update(); In this mode, the scene needs to be provided in the options.\n\n**Members:**\n\n| Member                          | Type    |  Default |  Description                                     |\n| :------------------------------ | :------ | :------- | :----------------------------------------------- |\n| `treatTouchEventsAsMouseEvents` | boolean | true     | Whether touch events should fire as mouse events |\n\n**Methods:**\n\n| Method                            | Description                                                                  |\n| :-------------------------------- | :--------------------------------------------------------------------------- |\n| `add(object, childNames = [])`    | Add object(s), optionally select only children of `object` by their names    |\n| `remove(object, childNames = [])` | Remove object(s), optionally select only children of `object` by their names |\n| `update()`                        | Update InteractionManager on each render                                     |\n| `dispose()`                       | Dispose InteractionManager                                                   |\n\n#### InteractionManagerOptions class\n\n`new InteractionManagerOptions({ autoAdd: false, scene, bindEventsOnBodyElement: true })`\n\nConstructor of InteractionManagerOptions instance\n\n#### InteractiveEvent class\n\n**Members:**\n\n| Member                      | Type           |  Default |  Description                                                                                                                                                                                    |\n| :-------------------------- | :------------- | :------- | :---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `cancelBubble`              | boolean        | false    | Whether events should continue to bubble                                                                                                                                                        |\n| `coords`                    | THREE.Vector2  |          | Mouse/touch coords                                                                                                                                                                              |\n| `distance`                  | Number         |          | Distance of intersected point from camera                                                                                                                                                       |\n| `intersected`               | boolean        |          | Whether object is still intersected                                                                                                                                                             |\n| `wasIntersected`            | boolean        |          | Whether object was intersected during the last event or last render                                                                                                                             |\n| `wasIntersectedOnMouseDown` | boolean        |          | Whether object was intersected during mousedown event                                                                                                                                           |\n| `originalEvent`             | Event object   |          | Original event, if available (MouseEvent, TouchEvent or PointerEvent)                                                                                                                           |\n| `target`                    | THREE.Object3D |          | Target object                                                                                                                                                                                   |\n| `type`                      | string         |          | event type: 'click', 'mouseover', 'mouseout', 'mouseenter', 'mouseleave', 'mousedown', 'mousemove', 'mouseup', 'touchstart', 'touchmove', 'touchend', 'pointerdown', 'pointerup', 'pointermove' |\n\n**Methods:**\n\n| Method            | Description                                                                                                         |\n| :---------------- | :------------------------------------------------------------------------------------------------------------------ |\n| `stopPropagation` | Stop bubbling of event (cancelBubble), e.g. when only the object closest to the camera is supposed to fire an event |\n\n### Editing source\n\nIn order to edit the source code, run:\n\n```console\nyarn start\n```\n\nAnd open http://127.0.0.1:8000/ in your browers.\n\nThe files in the `build` folder will automatically be rebuilt when the files in the `src` folder are modified.\n\n### License\n\nMIT licensed\n\nCreated by [Markus Lerner](http://www.markuslerner.com) \u0026 contributors\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkuslerner%2Fthree.interactive","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarkuslerner%2Fthree.interactive","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarkuslerner%2Fthree.interactive/lists"}