Table of Contents
Summary
Controls
What to Do
Components
Favorites
Difficulties
Future Builds
Open Demo >
Open JS File >
Summary
A minorly procedurally generated Thunder Storm scene with Teleportation nodes for quick movements within the 3D world and different mode types 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
What to Do
Use the View Cursor to look around the 360 environment and interact with a few various items in scene, most notably the colored circles on the ground. Click to a node to ready it for travel. Once ready, you may select Cancel to stop or select Teleport Here to move to that location with the currently selected move effects: instant, fade, locomotion, sphere or blink. Cycle through move effects in the center area on the blue screen by clicking it.
There are also a total of 4 assets in the scene that are each clickable. When all are found, it unlocks a secret locomotion teleport from the center ground to high up in the sky and back.
Components
Built
- rain : Generates a set of entities to recreate the visual effects of rain and ground splatter along with it's inherit randomness.
- raindrop : Controls the rain's main animation of falling and resetting to a new random position within a set radius from the user to help simulate endless rain on movement. Aka, it's the universe doesn't like you rain cloud that follows you everywhere.
- lightningbolt : Generates a complex set of entities that make up a Lightning Bolt visual that hits randomly within a set interval. The random hits start an animation chain to more realistically simulate the type of effect with varied blink phases and the scene lighting being affected as well.
- scenespawner : Spawn randomized versions of and positions of a lily pond, gltf animated rigged grass, gltf tree w/ a-frame animations, rocks, fireflys w/ a-frame animations, flowers w/ a-frame animations and clouds w/ a-frame animations. All other scene objects and animations are in HTML like the sky and ground.
- teleportation : Handles the various move types of instant, fade, locomotion, sphere and blink to move the user to the location of their choice.
- teleport-button : Allows the user to adjust the Move Type via a blue-screen at center using an entity's properties as an accessible global variable.
- secret-init : Sets up the Secret Teleport animations as well as the entity Global Variable for manaing Secrets Found.
- secret-button : The required component to make an asset a clickable secret. Added to 4 total assets with feedback and when all are found, they show a new button at the center to access the secret teleport.
- secret-teleport1 : Event Emitter for the Up animation.
- secret-teleport2 : Event Emitter for the Down animation.
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
Favorites
The rain, lightning and sounds all coming together really helps sell the immersion. And The rotating alpha sky with gradient animated background as well is amazing. Created that 360 star alpha'd image in Blender and wrapped that sky entity within another color gradient sky. It animates in a rotation similar to platery star rotations as well as the gradient animates through varies colors for a cosmic light show.
Difficulties
Manually moving the user and getting a multiple controls set up, everything else felt like cake in comparision. I spent a lot of time playing with configurations for the user, their rig and all sub entities. I was able to get a solid set up for Click, Fuse and Controller based controls that worked well on the 3 setups for desktop, mobile & vr.
What I want to build upon this, in the future...
Generating entites is amazing fun stuff and so much potential there. What this scene really helped spark in me was the importance of how the user navigates their environment or how the environment navigates around the user. This is a seemingly unlimited and non-physically restricted reality, why limit ourselves to real world travel limitations? Granted, ease of use, accessibility and someone not making that better idea yet have kept use here. We just need more experimentation.
Thank you for your time!
- Minty Crisp ^-^
Top comments (0)