{"id":17962289,"url":"https://github.com/richtr/threevr","last_synced_at":"2025-04-06T23:17:25.818Z","repository":{"id":15443493,"uuid":"18176303","full_name":"richtr/threeVR","owner":"richtr","description":"An orientation-aware Virtual Reality controller for web browsers built on top of three.js","archived":false,"fork":false,"pushed_at":"2017-04-08T01:26:22.000Z","size":4081,"stargazers_count":442,"open_issues_count":15,"forks_count":96,"subscribers_count":29,"default_branch":"master","last_synced_at":"2025-03-30T21:11:14.483Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"http://richtr.github.io/threeVR/examples/vr_basic.html","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/richtr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2014-03-27T13:15:53.000Z","updated_at":"2025-02-25T19:38:31.000Z","dependencies_parsed_at":"2022-07-13T23:40:42.674Z","dependency_job_id":null,"html_url":"https://github.com/richtr/threeVR","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2FthreeVR","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2FthreeVR/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2FthreeVR/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/richtr%2FthreeVR/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/richtr","download_url":"https://codeload.github.com/richtr/threeVR/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247563941,"owners_count":20958971,"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":"2024-10-29T11:18:29.076Z","updated_at":"2025-04-06T23:17:25.795Z","avatar_url":"https://github.com/richtr.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"threeVR\n=======\n\n####An orientation-aware Virtual Reality controller for [three.js](http://threejs.org) ####\n\nthreeVR is a virtual reality controller that makes it easy to build device-orientation aware applications on top of the three.js library.\n\nthreeVR listens for device orientation event changes and orients a three.js scene in the direction the user is facing. This library also provides manual user override controls so users can drag to look around a scene and pinch to zoom in on scene features. Once user interaction is complete, the threeVR library snaps the scene's camera back to the current device orientation position. threeVR also provides a set of custom event callbacks that web applications can use to build their own compelling user interfaces.\n\n[Live Demo](http://richtr.github.io/threeVR/examples/vr_basic.html) | [Basic Usage](#basic-usage) | [API](#api) | [Reference Material](#reference-material) | [License](#license)\n\n### Basic Usage ###\n\nAdd [three.js](https://github.com/mrdoob/three.js/) and [DeviceOrientationController.js](https://github.com/richtr/threeVR/blob/master/js/DeviceOrientationController.js) to your project:\n\n    \u003cscript src=\"/lib/three.min.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"/js/DeviceOrientationController.js\"\u003e\u003c/script\u003e\n\nCreate a new `DeviceOrientationController` object in JavaScript passing in your scene's `camera` (required) and the target `domElement` object (optional, defaults to  the `document` object).\n\nThen call `connect()` to start the controller.\n\n    \u003cscript\u003e\n      controls = new DeviceOrientationController( camera, renderer.domElement );\n      controls.connect();\n    \u003c/script\u003e\n\n### API ###\n\n##### connect() #####\n\nStart the controller and register all required deviceorientation and manual interaction override event listeners\n\nExample:\n\n    controls.connect(); // start listening for device orientation changes\n\n##### disconnect() #####\n\nStop the controller and de-register all required deviceorientation and manual interaction override event listeners\n\nExample:\n\n    controls.disconnect(); // stop listening for device orientation changes\n\n##### addEventListener(type, callback) #####\n\nRegister an event handler when events fire in the `DeviceOrientationController` object.\n\nAvailable event types are:\n\n* `compassneedscalibration` - when the system compass indicates that it needs calibration\n* `orientationchange` - when the screen orientation changes (e.g. the user rotates their screen from portrait to landscape or vice-versa). The current screen orientation can subsequently be read from `controls.screenOrientation`.\n- `userinteractionstart` - when the user starts manually overriding deviceorientation controls by interacting with the renderer DOM element.\n- `userinteractionend` - when the user ends manually overriding deviceorientation controls by interacting with the renderer DOM element.\n- `zoomstart` - when the user manually starts zooming the scene in the renderer DOM element.\n- `zoomend` - when the user manually ends zooming the scene in the renderer DOM element.\n- `rotatestart` - when the user manually starts rotating the scene in the renderer DOM element.\n- `rotateend` - when the user manually ends rotating the scene in the renderer DOM element.\n\nExample usage:\n\n    controls.addEventListener('userinteractionstart', function() {\n      controls.element.style.cursor = 'move';\n    });\n\n    controls.addEventListener('userinteractionend', function() {\n      controls.element.style.cursor = 'normal';\n    });\n\n##### removeEventListener(type, callback) #####\n\nDe-register an event handler previously registered with `addEventListener(type, callback)`.\n\n##### freeze #####\n\nPrevent device orientation from updating the `camera` position.\n\nExample:\n\n    controls.freeze = true; // pause deviceorientation affecting camera rotation\n\n##### enableManualDrag #####\n\nWhether to allow the user to manually override the automatic deviceorientation controls by dragging the scene to rotate the camera manually.\n\nThe camera will automatically snap back to the deviceorientation when the user stops interacting with the scene.\n\nDefault is `true`.\n\nExample:\n\n    controls.enableManualDrag = false; // disable user manual scene drag-to-rotate override\n\n##### enableManualZoom #####\n\nWhether to allow the user to manually override the automatic deviceorientation controls by pinching the scene to zoom manually.\n\nThe camera will automatically snap back to the deviceorientation when the user stops interacting with the scene.\n\nDefault is `true`.\n\nExample:\n\n    controls.enableManualZoom = false; // disable user manual scene pinch-to-zoom override\n\n##### useQuaternions #####\n\nWhether to use quaternions to calculate the device orientation (`true`) or rotation matrices (`false`).\n\nDefault is `true`.\n\nExample:\n\n    controls.useQuaternions = false; // use rotation matrix math\n\n### Reference Material ###\n\n* Article: [Practical application and usage of the W3C Device Orientation API](http://dev.opera.com/articles/view/w3c-device-orientation-usage/)\n* [W3C Spec](http://w3c.github.io/deviceorientation/spec-source-orientation.html)\n\n### License ###\n\nMIT. Copyright (c) Rich Tibbett\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichtr%2Fthreevr","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frichtr%2Fthreevr","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frichtr%2Fthreevr/lists"}