https://github.com/akbartus/a-frame-component-web-vps

This is an experimental A-Frame component for web based VPS powered by Immersal's REST API.
https://github.com/akbartus/a-frame-component-web-vps

a-frame aframevr augmented-reality immersal vps

Last synced: about 2 months ago
JSON representation

This is an experimental A-Frame component for web based VPS powered by Immersal's REST API.

• Host: GitHub
• URL: https://github.com/akbartus/a-frame-component-web-vps
• Owner: akbartus
• License: mit
• Created: 2023-04-24T04:23:18.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-11-17T21:28:54.000Z (about 1 year ago)
• Last Synced: 2023-11-17T23:03:29.792Z (about 1 year ago)
• Topics: a-frame, aframevr, augmented-reality, immersal, vps
• Language: JavaScript
• Homepage:
• Size: 10.4 MB
• Stars: 3
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# A-Frame-Component-Web-VPS













### **Description / Rationale**

This is an open-source A-Frame component which allows to do visual positioning on the web, written in Three.js.  

### **Instructions**

In order to use the component one should: 

1. Create a free acount on  Immersal's developer page.

2. Create a map using Immersal Mapper App (available on AppStore and PlayStore; it is free).

3. Inside of Immersal's developer page take individual token and map id.

3. Then use this component. 

The component has the following attributes: 

* modelURL: { type: "string" } - the url to GLTF/GLB file, which will be loaded and localized along with pointCloud. 

* scale: { type: "vec3", default: { x: 0.5, y: 0.5, z: 0.5 } } - the scale of GLTF/GLB model

* position: { type: "vec3", default: { x: 0, y: 0, z: 0 } } - position of GLTG/GLB model

* rotation: { type: "vec3", default: { x: 0, y: 0, z: 0 } } - rotation of GLTG/GLB model

* token: { type: "string" } - token, taken from Immersal's developer page

* mapID: { type: "string" } - map id, taken from Immersal's developer page

* mapType: { type: "int", default: 0, oneOf: [0, 1] } - the type of map to display. 0 - sparse point cloud, 1- dense point cloud.

* pointCloudSize: { type: "int"} - the size of sparse point cloud, for example, 0.05.

In order to make the component work the following sample could be used:

```

    A-Frame Component: Web VPS using Immersal

    

    

    

     

    

    

    

    


        Tap to localize


        Successful localizations: 0/0

    


    

        

    

    


        


    


```

After 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.  

### **Tech Stack**

The project is powered by AFrame and Three.js. 

### **Limitations**

It 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.