DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 964,423 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
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

Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds

Open Demo >

Open JS File >


Summary

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.


Controls

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.


Components

Built

  • 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>

Public


Favorites

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.


Difficulties

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 mintycrisp.com
  • View my Github Repositories
  • Peruse my Tweets
  • Ko-fi tips if you enjoy my work
  • - Minty Crisp ^-^

    Latest comments (0)

    This post blew up on DEV in 2020:

    js visualized

    πŸš€βš™οΈ JavaScript Visualized: the JavaScript Engine

    As JavaScript devs, we usually don't have to deal with compilers ourselves. However, it's definitely good to know the basics of the JavaScript engine and see how it handles our human-friendly JS code, and turns it into something machines understand! πŸ₯³

    Happy coding!