DEV Community

Cover image for A-Frame : Web XR Isometric Node Navigation & Overview
Minty Crisp
Minty Crisp

Posted on

A-Frame : Web XR Isometric Node Navigation & Overview

Table of Contents

What to Do
Future Builds

Open Demo >

Open JS File >


The scene is split into 2 halves and configured for Isometric view only. 1 with the 3D Iso world and the other with the HTML player controller. Use the controller in blue to move your cube avatar from the starting point around the field.


Avatar Movement

  • Desktop
  • Mobile
  • Use the player controller to move Up Left, Up Right, Down Left or Down Right within the connected nodes.

Player Controller

  • Desktop - Click & Drag from the center circle to 1 of the 4 directional options.
  • Mobile - Swipe from the center circle to 1 of the 4 directional options.

Only the movement options are active.

What to Do

Using the player controller, select a direction in which your avatar would be able to travel on the node map. Avatar Travel requires a lined connection and cooresponds to the directions of Up Left, Up Right, Down Left and Down Right based on the user's location to the connected node.



  • node-grid-gen : Generates the numbered grid, lines, colors, positions, layout and animation stack for each node. Every node that has a line connecting to 1 of it's 4 sides generates an animation to that line's end position which activates from an event naming scheme of node#to-node#. As well as an accompanying entity with it's own reveal and hide animation when the user moves to and from that node specifically.
  • player-travel : Hardwired logic for traversing the node map in it's current form, animation event timings, the player controller inputs as well as event emitters for all possible movements that activate the avatar's position animation./li>



If you are a quick swiper you can move quite fast and even off the line animation grid to kind of fly through to your destination. This is an interesting side effect of the current implementation which simply animates the user to the node's current position and that animation being updated on each subsequent directional input. Otherwise it seems that you would have to create an animation queue to cycle through the selected list in a a-timeline as animations will conflict with each other if they share the same properties at the same time.


The player controller is built out of another dev's great work to recreate the Android lock screen in javascript they shared. While it provided in HTML what I had envisioned, I could not seem to integrate those functions within the XR scene to allow the same drag style in the 3D world. To many wide differences with how they utilized classes and svg's to create the effects for use with the default code. Also very helpful when I am ready to recreate it within XR too.

What I want to build upon this, in the future...

This effect in VR finally and support the normal click / swipe to start a drag, click to stop drag or drag to option for selection which seems to cover Desktop, Mobile and VR controller. Or instant / activated hover select dragging with additional control selections similar to the locomotion belt controller in the Hub scene. And allow the user to travel this node map with the teleportation mode types as well.

Thank you for your time!

  • More Dev Articles
  • My homepage
  • View my Github Repositories
  • Peruse my Tweets
  • Ko-fi tips if you enjoy my work
  • - Minty Crisp ^-^

    Oldest comments (0)