A-frame is a Mozilla web framework for building Virtual Reality scenes. In this tutorial , we’ll develop a web page that displays the weather’s conditions and change the scene sky according to weather. (We will choose Ariana , Tunisia as an example).
What is Aframe ?
A-Frame is an open-source web framework by Mozilla that makes building virtual reality (VR) experiences easier , with just HTML tags. It’s build using three.js framework.
How to use it ?
You can develop a VR scene and open the web page you created with your browser .If you are using your computer you move inside the scene by your mouse. If you are using your smartphone , install a VR compatible web browser like Firefox and move inside the scene by moving your phone (using your phone accelerometer ).
Let’s start developing
We’ll create a PHP file , and insert HTML tags according to the weather
First , we should import the A-frame library , add this in your head tag
https://aframe.io/releases/0.5.0/aframe.min.js
As of writing this tutorial , this is the latest A-frame version.
The head tag will be like
<head> <meta charset="utf-8"> <title>Workshop webVR</title> <meta name="description" content="VR weather"> <meta name="author" content="Marwen Doukh"> <!--get the Aframe library--> https://aframe.io/releases/0.5.0/aframe.min.js </head>
Now , we’ll call the weather web service , get the result and transform it to a JSON object.
We’ll get the weather from openweathermap.org , I already got an API key (you can use it, don’t bother yourself by creating an account and requesting a new one)
The web service link would be
http://api.openweathermap.org/data/2.5/weather?q=ariana,tn&appid=2156e2dd5b92590ab69c0ae1b2d24586&units=metric
it will display the weather for Ariana , Tunisia (q=ariana,tn) , and return the temperature in Celsius (units=metric).
Open this link if your browser , and you’ll see what the web service returns.
To do so , we have to add this inside the body tag
<?php
///////////////////////////////// weather ////////////////////////////////////////////////
/// get the response from the weather web service/////////
$response = file_get_contents('http://api.openweathermap.org/data/2.5/weather?q=ariana,tn&appid=2156e2dd5b92590ab69c0ae1b2d24586&units=metric');
//// transform the web service response to a JSON object
$weatherObject = json_decode($response);
?>
the weatherObject is the JSON object that contains all the weather information.
To print the temperature and weather condition inside our web page , we’ll use
the following A-frame tag
<!--print the weather in a Aframe text --> <a-entity text="width: 20; value:<?php echo $weatherObject->name?> \n \n <?php echo $weatherObject->main->temp?> °C \n \n <?php echo $weatherObject->weather[0]->description?>"></a-entity>
Inside the text attribute , we’ll echo (print) the country,temperature and the weather description.
Once , we did that , let’s change the sky color (background) according to weather’s conditions. add this to your PHP file
<?php
// change the sky ("background") according to the weather's conditions
if($weatherObject->weather[0]->main=="Clouds")
{
echo" <a-sky color=\"#424242\"></a-sky>";
}
else if($weatherObject->weather[0]->main=="Rain")
{
echo" <a-sky color=\"#039be5\"></a-sky>";
}
else if($weatherObject->weather[0]->main=="Snow")
{
echo" <a-sky color=\"#e0e0e0\"></a-sky>";
}
?>
Finally , we position the camera (the point of view)
<a-entity position="-8 -2 3.8"> <a-camera></a-camera> </a-entity>
The final source code for body tag , is
<body>
<?php
///////////////////////////////// weather ////////////////////////////////////////////////
/// get the response from the weather web service/////////
$response = file_get_contents('http://api.openweathermap.org/data/2.5/weather?q=ariana,tn&appid=2156e2dd5b92590ab69c0ae1b2d24586&units=metric');
//// transform the web service response to a JSON object
$weatherObject = json_decode($response);
?>
<a-scene>
<!--print the weather in a Aframe text -->
<a-entity text="width: 20; value:<?php echo $weatherObject->name?> \n \n <?php echo $weatherObject->main->temp?> °C \n \n <?php echo $weatherObject->weather[0]->description?>"></a-entity>
<?php
// change the sky ("background") according to the weather's conditions
if($weatherObject->weather[0]->main=="Clouds")
{
echo" <a-sky color=\"#424242\"></a-sky>";
}
else if($weatherObject->weather[0]->main=="Rain")
{
echo" <a-sky color=\"#039be5\"></a-sky>";
}
else if($weatherObject->weather[0]->main=="Snow")
{
echo" <a-sky color=\"#e0e0e0\"></a-sky>";
}
?>
<a-entity position="-8 -2 3.8">
<a-camera></a-camera>
</a-entity>
</a-scene>
</body>
Let’s test it
To test what we’ve done , put the PHP file in WWW folder (you should install WAMP if you are on Windows)
Then open it from your browser
Move inside the scene , by moving your mouse (if you’re using a computer) , or by moving your phone .
4 replies on “VR weather with A-frame”
It’s remarkable to go to see this site and reading the views of all mates concerning this post, while I am also eager of getting knowledge.|
I have to thank you for the efforts you’ve put in penning this blog. I’m hoping to check out the same high-grade blog posts by you later on as well. In truth, your creative writing abilities has encouraged me to get my own, personal blog now ;)|
Glad to hear that 🙂
Please send me the link as soon as it’s ready.Can’t wait to read your blog posts.
I have read so many posts concerning the blogger lovers but this paragraph is really a good paragraph, keep it up.|