Minimalist Web XR Location Based Markers for A-Frame 1.3.0

Overview

LBAR.js

“I understand how the engines work now. It came to me in a dream. The engines don't move the ship at all. The ship stays where it is and the engines move the universe around it.” ―Cubert Farnsworth, from Futurama S02E10, A Clone of My Own 1

Based on the location-based marker portion of AR.js, LBAR.js is a minimalist library for creating WebXR location-based markers 📍 with A-Frame 1.3.0. It targets WebXR-enabled browsers and contains one system (gps-position) and three components (faces-north; gps-position; pitch-roll-look-controls). LBAR.js’s last version is 0.2, and is published under the MIT Licence.

Made with ♡ at the Media Engineering Institute.

Usage

Example

<!DOCTYPE  html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>LBAR.js</title>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
    <script src="https://raw.githack.com/MediaComem/LBAR.js/main/dist/lbar-v0.2.min.js"></script>
  </head>
  <body>
    <a-scene gps-position webxr="referenceSpaceType: unbounded; requiredFeatures: unbounded;">
      <a-entity faces-north>
        <a-box gps-position="latitude: 46.2265228; longitude: 6.1413027" color="red"></a-box>
      </a-entity>
      <a-entity position="0 0 0" camera pitch-roll-look-controls></a-entity>
    </a-scene>
  </body>
</html>

This will place a red cube on the Palace of Nations. Demo and source are available here: https://glitch.com/edit/#!/torch-cyber-conga?path=index.html Test it on a WebXR-enabled browser, with a location-enabled (GPS) device (ie. an Android smartphone).

In production, switch LBAR.js’s script url to:

<script src="https://rawcdn.githack.com/MediaComem/LBAR.js/5001fa7e4a9f6141d34a83213ce4a6a813673559/dist/lbar-v0.2.min.js"></script>

gps-position system

The gps-position system can be configured with three parameters:

<a-scene  gps-position="minAccuracy: 100; minDistance: 2; cam3DoF: true">

Any GPS/location data above minAccuracy will be discarded. minDistance controls how frequently GPS updates are processed. With a defaul value of 2, the markers are repositioned when the user has travelled at least two meters. In 3DoF mode, the camera can be disabled by setting cam3DoF to false (default value is true). In WebXR AR (6DoF), the camera is enabled (and handled) by A-Frame’s AR mode.

faces-north component

An entity with the faces-north component will always faces north (based on the device’s magnetometer data). All location-based markers must be children of an entity with this component.

gps-position component

Latitude and longitude of the location-based marker/entity must be specified. The entity will be placed on the faces-north plane, relatively to the device’s location data (GPS).

pitch-roll-look-controls component

This component will only enable the pitch and roll controls of the 3DoF camera (thus disabling yaw control). Since the faces-north component rotates its yaw (based on the device’s magnetometer), the camera must not rotate on the yaw axis anymore. This component will not handle the camera in the WebXR AR (6DoF) mode, since A-Frame’s AR mode will take over.

Footnotes

  1. Verrone, P. M. (Writer), Westbrook, J. (Staff writer), Moore, R. (Director), Haaland, B. (Supervising director). (2000, April 9). A Clone of My Own (Season 2, Episode 10) [TV series episode]. In D. X. Cohen, M. Groening (Executive Producers), Futurama. Twentieth Century Fox Film Productions.

You might also like...

Sharerbox - Free, minimalist and lightweight JavaScript-based social-media sharer for websites

Sharerbox Free minimalist and lightweight JavaScript-based social-media sharer for websites. Version: 0.8.1 Description SharerBox is a free, minimalis

Aug 22, 2022

A minimalist web app for the daily morning and night athkar.

Morning & Night Athkar | أذكار الصباح والمساء Local Development Recommended: Use nvm to manage npm dependencies and versions. This app uses node versi

Dec 2, 2022

⚡️ A fast, minimalist web framework for the Bun JavaScript runtime

🥟 Bao.js A fast, minimalist web framework for the Bun JavaScript runtime. ⚡️ Bao.js is 3.7x faster than Express.js and has similar syntax for an easy

Dec 26, 2022

Look up a city and get back weather forecast for searched city and top News headline related to that city and an interactive map which shows the location of that city.

Look up a city and get back weather forecast for searched city and top News headline related to that city and an interactive map which shows the location of that city.

WeatheredVibes Description As a user I want to look up a city to get the current weather and suggested current news articles based on the location sea

Mar 12, 2022

This app offers users a quick way to check the current temperature and humidity of any location in the world.

This app offers users a quick way to check the current temperature and humidity of any location in the world.

Pretty Weather App This app offers users a quick way to check weather data for any location in the world. The specific data provided by the app includ

Jun 7, 2022

You can detect requested client full IP details with this package. (isp, organization, location, residential/data center, proxy, etc)

requested client ip details Install the package npm npm install @sarequl/client-ip-details yarn yarn add @sarequl/client-ip-details example with expr

Oct 13, 2022

A tool for collecting data and access camera, microphone and location and clipboard via link.

Snow Build malicious links. A tool for collecting data and access camera, microphone and location and clipboard via link.

Dec 12, 2022

A free and open source api server for app "Fake Location @ 1.3.0.2"

FakeLocation-Server 中文 Introduction A fake api server for FakeLocation App Unlock all apps limitation and you can use pro version permanently for free

Dec 13, 2022

This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

This is the backend of Wherechat, which is a chat application that allows users to find and meet each other through their location on the map.

wherechat-backend About the project This is the backend of Wherechat, which is a chat application that allows users to find and meet each other throug

Nov 23, 2022
Owner
Media Engineering Institute
Media Engineering Institute
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 14 Jan 3, 2023
An application where a user can search a location by name and specify a genre of music. Based on the parameters entered, a list of radio stations generate based on genre selected in that area.

Signs of the Times Description An application that allows for the user to enter a date and see the horoscope for that day, and famous people born on t

null 3 Nov 3, 2022
A-Frame Element is a simple library for building fast, lightweight web components for 3D development

aframe-element is a library inspired from the very nice library Polymer lit to map A-Frame AR / VR / 3D elements on typescript classes like Angular/React/Lit.

null 6 May 31, 2022
A-Frame components for smooth locomotion and snap turning

A-Frame locomotion A collection of A-Frame components, systems and primitives that enable all sorts of locomotion in VR. It't built to be modular, fle

Noeri Huisman 18 Sep 1, 2022
A collection of A-Frame components

Fern A-Frame Components Collection This is a collection of A-Frame components. Check the individual components for their usages and corresponding exam

Noeri Huisman 16 Dec 12, 2022
Frame Animation Manager

Clockz.js (demo) Clockz is a Super-smooth Frame Animation manager to help you manage multiples animations in same time. Installation Just include this

Tierry Danquin 7 Mar 27, 2021
Simple rate-limiter NPM Module used for blocking IPs that exceeds certain number of requests per second in a specific time frame.

API Rate Limiter Zero-Dependencies Simple rate-limiter NPM Module used for blocking IPs that exceeds certain number of requests per second in a specif

Khaldon 7 Oct 7, 2022
Hashmat Noorani 4 Mar 21, 2023