Table of Contents
Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds
Open Demo >
Open JS File >
Summary
A minor procedurally generated Thunder Storm scene with Teleportation Nodes for quick movements within the 3D world and different types of motions to help avoid vr sickness.
Controls
View Cursor Movement
- Desktop - Mouse
- Mobile - Gyro / Swipe
- VR - Headset
Click & Selection
- Desktop - Click
- Mobile - Tap
- VR - Controller Click
Locomotion Controls (Hover Only)
- Top Thick Bar Go Forward
- Mid Skinny Bar Go Backward
- Bottom Bar Chunks Swap Speed Modes (Fast / Slow)
What to Do
Use the View Cursor to look around the 360 environment and Hover over the transparent locomotion controls surronding you to move around the world. When moving, assets will respawn when you move too far away from them. You can also interact with the Settings, Theme Screen and Play/Pause buttons via clicks. You can click to change the basic theme from the Settings button and Theme Screen. There's no real special configuration for the scene links, but I also added a few connections between other various scenes to travel between.
Locomotion Operation
In it's default mode, the 2 main control bars will be near level to the user's eyesight. Hover over either bar with the cursor to activate it. The top thick bar will move the user forward in the direction the cursor is facing. The thinner bar right below will move the user in reverse of the cursor's direction. At the very bottom are 4 small blocks which when Hovered over will swap the speeds from Fast to Slow as well as move the forward / reverse bars out of the main viewport. Hover over the bars to move slowly and fine tune your position. Hover now over 1 of the 4 now red blocks to to swap speeds and bar position again.
Components
Built
- variable-init : Sets a global variable on the user's entity for the current theme color selection.
- attach : Allows attaching of any entity in the scene to another entity in the scene by id. Used to attach the below belt component to the user.
- belt : All controls to handle the locomotion movement of a player with only hover needing to activate. Can move the player forward or backward at 1 default speed or the user can switch the belt layout to a slower speed and have it adjusted out of the main view area, but still allow slow movement for fine tuning.
- spawnmediabuttons : Grabs various assets declared in the scene specifically obj models to be combined with A-Frame materials to recreate a media player.
- themechangebutton : Media buttons spawned with A-Frame materials as well as other marked materials allow their colors to be changed through the Setting Icon clicked and from the Theme Screen popped up to adjust the selections there.
- playpausebutton : Changes the visibility of the companion assets that would act a media player responding to the available commands for play and pause.
- settingsbutton : Enables the visibility of the Theme Screen on and off.
- canvas-test : A Basic test using the HTML Canvas as a material within XR. Entities with this material are also tests for a public A-Frame Mesh Instance component.
- environmentspawnwithuser : The true monster component of them all. This handles the most updated version of my asset generation and placement within A-Frame via Javascript as well as now respawning with the user as they move out of range from the originally spawned location to where the user is heading.
Public
- A-Frame 1.3.0
- A-Frame Extras 6.1.0
- A-Frame Timeline 2.0.0
- A-Frame Gradient Sky
- A-Frame Three Color Gradient Shader
- A-Frame Look At
- A-Frame Instanced Mesh 0.5.0
Favorites
The belt locomotion machine and animations were super fun to play with. Just a simple hover almost like a swipe to transform your mech for various functions is just too cool. XR could even be used as a good way to prototype IRL improvements for the handicapped and physically disabled. Hell, simply integrating an AR version of movement control via various inputs could be a life changer for some.
Difficulties
Having the assets generally respawn in the user's view and current travel direction took a lot of re-iteration. Had many approaches setup depending on the XZ grid the user is looking through and/or which direction they are traveling.
What I want to build upon this, in the future...
A user component to handle all of their preferences within a larger hub of linked A-Frame scenes. Storing the user preferences and transferring them from 1 page to the next. Much easier on the same domain, but could be accomplished otherwise with a shared api connection or with a common cookie etc... This will allow scenes that pre-approve of this component add-on to have users visit the page and not have to reconfigure their interaction setup. Are they a hover / fuse click user that needs swiped based teleportation or are they a full vr user with 2 6DoF controllers who slowly glides around. Components like these will help lower the entry bar for both devs and new potential users.
Thank you for your time!
- Minty Crisp ^-^
Top comments (0)