{"id":19815164,"url":"https://github.com/akbartus/a-frame-component-web-vps","last_synced_at":"2026-03-16T05:13:53.625Z","repository":{"id":158905750,"uuid":"631793544","full_name":"akbartus/A-Frame-Component-Web-VPS","owner":"akbartus","description":"This is an experimental A-Frame component for web based VPS powered by Immersal's REST API.","archived":false,"fork":false,"pushed_at":"2023-11-17T21:28:54.000Z","size":10925,"stargazers_count":6,"open_issues_count":1,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2024-11-19T10:37:53.655Z","etag":null,"topics":["a-frame","aframevr","augmented-reality","immersal","vps"],"latest_commit_sha":null,"homepage":"","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/akbartus.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}},"created_at":"2023-04-24T04:23:18.000Z","updated_at":"2024-09-21T05:50:50.000Z","dependencies_parsed_at":"2023-11-17T23:12:50.993Z","dependency_job_id":null,"html_url":"https://github.com/akbartus/A-Frame-Component-Web-VPS","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/akbartus%2FA-Frame-Component-Web-VPS","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Web-VPS/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Web-VPS/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/akbartus%2FA-Frame-Component-Web-VPS/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/akbartus","download_url":"https://codeload.github.com/akbartus/A-Frame-Component-Web-VPS/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233456045,"owners_count":18678964,"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":["a-frame","aframevr","augmented-reality","immersal","vps"],"created_at":"2024-11-12T10:04:56.450Z","updated_at":"2026-03-16T05:13:48.605Z","avatar_url":"https://github.com/akbartus.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# A-Frame-Component-Web-VPS\n\u003cimg src=\"img/screenshot.gif\" title=\"Video screen capture\" alt=\"Video screen capture\" height=\"400\"\u003e\n\u003cp float=\"left\"\u003e\n\u003cimg src=\"img/glb.jpg\" title=\"GLB model generated\" alt=\"GLB model generated\" height=\"250\"\u003e\n\u003cimg src=\"img/dense.jpg\" title=\"Dense map generated\" alt=\"Dense map generated\"  height=\"250\"\u003e\n\u003cimg src=\"img/sparse.jpg\" title=\"Sparse map generated\" alt=\"Sparse map generated\" height=\"250\"\u003e\n\u003c/p\u003e\n\n\n### **Description / Rationale**\nThis is an open-source A-Frame component which allows to do visual positioning on the web, written in Three.js.  \n\n### **Instructions**\n\nIn order to use the component one should: \n1. Create a free acount on \u003ca href=\"https://developers.immersal.com/\"\u003e Immersal's developer page\u003c/a\u003e.\n2. Create a map using Immersal Mapper App (available on AppStore and PlayStore; it is free).\n3. Inside of Immersal's developer page take individual token and map id.\n3. Then use this component. \n\nThe component has the following attributes: \n* modelURL: { type: \"string\" } - the url to GLTF/GLB file, which will be loaded and localized along with pointCloud. \n* scale: { type: \"vec3\", default: { x: 0.5, y: 0.5, z: 0.5 } } - the scale of GLTF/GLB model\n* position: { type: \"vec3\", default: { x: 0, y: 0, z: 0 } } - position of GLTG/GLB model\n* rotation: { type: \"vec3\", default: { x: 0, y: 0, z: 0 } } - rotation of GLTG/GLB model\n* token: { type: \"string\" } - token, taken from Immersal's developer page\n* mapID: { type: \"string\" } - map id, taken from Immersal's developer page\n* mapType: { type: \"int\", default: 0, oneOf: [0, 1] } - the type of map to display. 0 - sparse point cloud, 1- dense point cloud.\n* pointCloudSize: { type: \"int\"} - the size of sparse point cloud, for example, 0.05.\n\nIn order to make the component work the following sample could be used:\n```\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\n\u003chead\u003e\n    \u003ctitle\u003eA-Frame Component: Web VPS using Immersal\u003c/title\u003e\n    \u003cmeta charset=\"utf-8\"\u003e\n    \u003cmeta name=\"viewport\" content=\"width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0\"\u003e\n    \u003cscript src=\"https://aframe.io/releases/1.4.1/aframe.min.js\"\u003e\u003c/script\u003e\n    \u003c!-- Immersal Configuration, component and stylesheet --\u003e \n    \u003cscript src=\"js/sdkconfig.js\"\u003e\u003c/script\u003e\n    \u003cscript src=\"js/vps-component.js\" type=\"module\"\u003e\u003c/script\u003e\n    \u003clink type=\"text/css\" rel=\"stylesheet\" href=\"css/main.css\"\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n\u003c!-- This is necessary to make DOM overlays work --\u003e\n    \u003cdiv id=\"overlay\"\u003e\n        \u003cspan id=\"lochelp\"\u003eTap to localize\u003c/span\u003e\u003cbr /\u003e\n        \u003cspan id=\"locinfo\"\u003eSuccessful localizations: 0/0\u003c/span\u003e\n    \u003c/div\u003e\n\u003c!-- END --\u003e\n    \u003ca-scene vr-mode-ui=\"enabled: false\"\u003e\n        \u003ca-entity webvps=\"pointCloudSize: 0.05; modelURL: example.glb; token: abcdefghijklmnopqrstuv; mapID: 99999; mapType: 0\" visible=\"false\"\u003e\u003c/a-entity\u003e\n    \u003c/a-scene\u003e\n\u003c!-- This is necessary --\u003e\n    \u003cdiv id=\"mapview\"\u003e\n        \u003cdiv id=\"canvas-parent\"\u003e\u003c/div\u003e\n    \u003c/div\u003e\n\u003c!-- END --\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\nAfter entering camera mode (inside AR), direct your camera at the location you created your map and tap once on the screen. This will trigger localization of the point cloud and you should see the point cloud and/or GLTF model you loaded. Please note the counter for successful localizations at the top of the screen.  \n\n### **Tech Stack**\nThe project is powered by AFrame and Three.js. \n\n### **Limitations**\nIt works on Android Chrome, and you should have the chrome://flags/#webxr-incubations set to 'enabled' if Chrome ver. is below 113. The latest chrome browsers have webxr incubations by default. iOS devices, unfortunately, are not supported for now. \n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-component-web-vps","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fakbartus%2Fa-frame-component-web-vps","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fakbartus%2Fa-frame-component-web-vps/lists"}