{"id":28628033,"url":"https://github.com/mmiscool/threejseventsystem","last_synced_at":"2025-06-12T10:11:07.089Z","repository":{"id":286063489,"uuid":"960236633","full_name":"mmiscool/ThreejsEventSystem","owner":"mmiscool","description":"A DOM style event system for threeJS","archived":false,"fork":false,"pushed_at":"2025-04-05T01:07:27.000Z","size":31,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-06-11T01:46:58.005Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/mmiscool.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":"2025-04-04T04:59:00.000Z","updated_at":"2025-04-06T06:41:02.000Z","dependencies_parsed_at":"2025-04-04T06:24:13.300Z","dependency_job_id":"6dd98989-24c7-48bf-959a-ef5c0980f981","html_url":"https://github.com/mmiscool/ThreejsEventSystem","commit_stats":null,"previous_names":["mmiscool/threejseventsystem"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/mmiscool/ThreejsEventSystem","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiscool%2FThreejsEventSystem","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiscool%2FThreejsEventSystem/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiscool%2FThreejsEventSystem/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiscool%2FThreejsEventSystem/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mmiscool","download_url":"https://codeload.github.com/mmiscool/ThreejsEventSystem/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mmiscool%2FThreejsEventSystem/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":259444967,"owners_count":22858549,"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":[],"created_at":"2025-06-12T10:11:02.284Z","updated_at":"2025-06-12T10:11:07.079Z","avatar_url":"https://github.com/mmiscool.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# `threeEnvironment.js`\n\n## Overview\n\n`threeEnvironment.js` defines a self-contained 3D rendering and interaction system using [THREE.js](https://threejs.org/). It wraps common scene management tasks into a `threeEnvironment` class and defines an `object_3d` class that supports color changes, visibility toggling, and custom pointer event handling.\n\n---\n\n## `threeEnvironment` Class\n\n### Constructor\n\n```js\nconst env = new threeEnvironment(targetElement)\n```\n\nInitializes a Three.js orthographic camera, scene, renderer, and interaction controls.\n\n- `targetElement`: The DOM element in which to render the scene.\n\n---\n\n### Methods\n\n#### `addObject(geometry)`\n\nCreates a new interactive 3D object and adds it to the scene.\n\n```js\nconst object = env.addObject(new THREE.SphereGeometry(10));\n```\n\n- **geometry**: A valid instance of `THREE.BufferGeometry` or `THREE.Geometry`.\n- **returns**: An `object_3d` instance with built-in mesh and interaction support.\n\n#### `removeObject(object)`\n\nRemoves a previously added `object_3d` instance from the scene.\n\n```js\nenv.removeObject(myObject);\n```\n\n- **object**: Must be an instance of `object_3d`.\n- Disposes of the mesh, geometry, and material to free memory.\n\n#### `listObjects()`\n\nReturns an array of all `object_3d` instances currently in the scene.\n\n```js\nconst objects = env.listObjects();\n```\n\n- **returns**: `Array\u003cobject_3d\u003e`\n\n---\n\n## `object_3d` Class\n\nA wrapper for a THREE.js mesh with extended interactivity via event listeners.\n\n### Constructor\n\n```js\nnew object_3d(geometry, scene)\n```\n\nUsed internally by `threeEnvironment`. Creates a mesh, assigns it a basic material, and stores a reference in `userData.object3d`.\n\n---\n\n### Methods\n\n#### `addEventListener(event, callback)`\n\nRegisters an interaction handler on this object.\n\n```js\nobject.addEventListener('pointerdown', () =\u003e console.log('Clicked!'));\n```\n\n#### `removeEventListener(event)`\n\nRemoves all handlers associated with the event type.\n\n#### `callEvent(event)`\n\nCalls all listeners for the given event name. Typically called by `threeEnvironment`.\n\n#### `show()`\n\nMakes the object visible in the scene.\n\n#### `hide()`\n\nHides the object from view.\n\n#### `setColor(color)`\n\nSets the color of the object's material.\n\n```js\nobject.setColor('blue');\n```\n\n---\n\n## Supported Event Types\n\nThe `threeEnvironment` handles and dispatches the following event types for `object_3d` instances:\n\n| Event         | Description                                                                 |\n|---------------|-----------------------------------------------------------------------------|\n| `pointerenter`| Triggered when the pointer enters the object for the first time.            |\n| `pointerover` | Triggered continuously while the pointer stays over the object.             |\n| `pointermove` | Triggered whenever the pointer moves while over the object.                 |\n| `pointerout`  | Triggered when the pointer exits the object.                                |\n| `pointerdown` | Triggered when a pointer press occurs on the object.                        |\n| `pointerup`   | Triggered when a pointer press is released on the object.                   |\n| `dblclick`    | Triggered when a double click occurs on the object.                         |\n| `contextmenu` | Triggered when the right-click context menu is requested.                   |\n| `wheel`       | Triggered when the mouse wheel is scrolled over the object.                 |\n| `dragstart`   | Triggered when the object is first dragged (pointer down + move).           |\n| `drag`        | Continuously triggered as the object is dragged.                            |\n| `dragend`     | Triggered when the drag operation ends.                                     |\n\nThese events are automatically handled through raycasting and pointer tracking in the `threeEnvironment` system.\n\n---\n\n## Example Usage\n\n```js\nconst env = new threeEnvironment(document.getElementById('container'));\n\nconst cube = env.addObject(new THREE.BoxGeometry(10, 10, 10));\ncube.setColor('red');\n\ncube.addEventListener('pointerenter', () =\u003e {\n    cube.setColor('yellow');\n});\n\ncube.addEventListener('drag', () =\u003e {\n    cube.mesh.rotation.y += 0.05;\n});\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmiscool%2Fthreejseventsystem","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmmiscool%2Fthreejseventsystem","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmmiscool%2Fthreejseventsystem/lists"}