Build your own Relaxing and Meditation Place
A-Frame Example Code for Relax
Here you will find simple example code for building your own A-Frame Relaxing and Meditation Place similiar for https://towermax.fitness/relax-zones/
Relaxing Place with 360 Panorama Image
A simple place with the Sky Element and 360 Panorama Images .
Live View on Glitch: https://towermaxfitness-aframe-sky-sample.glitch.me
Here you can remix it on Glitch: https://glitch.com/edit/#!/towermaxfitness-aframe-sky-sample
Link to the A-Frame Sky Element: https://aframe.io/docs/1.2.0/primitives/a-sky.html
The Code:
<html> <head> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> </head> <body> <a-scene> <a-assets> <img id="sky" src="sky.jpg"> </a-assets> <a-sky src="#sky" rotation="0 -90 0"></a-sky> </a-scene> </body> </html>
Relaxing Place with A-Frame Environment Component
A simple place with the A-Frame Environment Component.
Live View on Glitch: https://towermaxfitness-aframe-environment-sample.glitch.me
Here you can remix it on Glitch: https://glitch.com/edit/#!/towermaxfitness-aframe-environment-sample
Link to the A-Frame Environment Component: https://github.com/supermedium/aframe-environment-component
Link to the Cylinder Primitive: https://aframe.io/docs/1.2.0/primitives/a-cylinder.html
Link to the Ring Primitive: https://aframe.io/docs/1.2.0/primitives/a-ring.html
The Code:
<html> <head> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script> </head> <body> <a-scene> <a-entity id="rig" position="0 2 0"> <a-entity id="camera" position="0 1.6 0" camera look-controls></a-entity> </a-entity> <a-cylinder color="black" position="0 2 0" height="0.1" radius="1.5" segments-theta="64"></a-cylinder> <a-ring color="black" position="0 2.2 0" radius-inner="1.4" radius-outer="1.5" rotation="-90 0 0" segments-theta="64"></a-ring> <a-entity environment="preset: starry; grid: none"></a-entity> </a-scene> </body> </html>
Relaxing Place with A-Frame Environment Component and Sound
A simple place with A-Frame Environment Component and Sound.
We recommend using the sound easier in this way https://towermax.fitness/how-you-play-own-sound/
Link to the Sound Primitve: https://aframe.io/docs/1.2.0/primitives/a-sound.html
The Code:
<html> <head> <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script> <script src="https://unpkg.com/aframe-environment-component@1.2.0/dist/aframe-environment-component.min.js"></script> </head> <body> <a-scene> <a-sound src="src: url(youraudio.mp3)" autoplay="true" position="0 2 5"></a-sound> <a-entity id="rig" position="0 2 0"> <a-entity id="camera" position="0 1.6 0" camera look-controls></a-entity> </a-entity> <a-cylinder color="black" position="0 2 0" height="0.1" radius="1.5" segments-theta="64"></a-cylinder> <a-ring color="black" position="0 2.2 0" radius-inner="1.4" radius-outer="1.5" rotation="-90 0 0" segments-theta="64"></a-ring> <a-entity environment="preset: starry; grid: none"></a-entity> </a-scene> </body> </html>