This is going to be a short series of articles about some experiments with WebVR Web based Virtual Reality - in this case based on the wonderful A-Frame (https://aframe.io) . Ok, a bit of context, I have been working with some MSc students on this area and we have been exploring this area together - I love learning from and with my students.
Firstly, it is great fun and nowhere near as hard as I thought it was going to be when I first started.
1. The approach
My approach is to use A-Frame (https://aframe.io) inside Thimble (https://thimble.mozilla.org ). Thimble was selected for four reasons it is an online editor, simple to use, it is free and you see the preview immediately. Its main downside is the size of images and videos has to be relatively small and not too many of them.
2. How easy is it?
You can pretty much treat it as HTML, after you have added the script file shown in bold.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
The items to be add all go between <a-scene> and </a-scene> with a parent-child relationship; for example A block of text saying Hello in black and making the sky orange are all 'children' of <a-sceme>:
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
For example
<a-scene>
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
</a-scene>
The video below shows setting up and adding a box to the scene.
This next video takes this a little further by adding rotation to an object.
In this video mapping an image to an object and changing camera position is looked at.
In later posts some further ideas will be explored.
To read more go to https://aframe.io/docs/0.7.0/introduction/
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Firstly, it is great fun and nowhere near as hard as I thought it was going to be when I first started.
1. The approach
My approach is to use A-Frame (https://aframe.io) inside Thimble (https://thimble.mozilla.org ). Thimble was selected for four reasons it is an online editor, simple to use, it is free and you see the preview immediately. Its main downside is the size of images and videos has to be relatively small and not too many of them.
2. How easy is it?
You can pretty much treat it as HTML, after you have added the script file shown in bold.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
</a-scene>
</body>
</html>
The items to be add all go between <a-scene> and </a-scene> with a parent-child relationship; for example A block of text saying Hello in black and making the sky orange are all 'children' of <a-sceme>:
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
For example
<a-scene>
<a-text value="Hello" color="black" position="0 1.8 0.5" width="10"></a-text>
<a-sky color="orange" ></a-sky>
</a-scene>
The video below shows setting up and adding a box to the scene.
This next video takes this a little further by adding rotation to an object.
In this video mapping an image to an object and changing camera position is looked at.
In later posts some further ideas will be explored.
To read more go to https://aframe.io/docs/0.7.0/introduction/
All opinions in this blog are the Author's and should not in any way be seen as reflecting the views of any organisation the Author has any association with. Twitter @scottturneruon
Very informative!!!!
ReplyDeleterobot kit
This comment has been removed by a blog administrator.
ReplyDeleteYour blog on 3D visualization is truly impressive! The way you’ve explained its impact on architecture and real estate is both insightful and engaging. I particularly appreciate your emphasis on how 360 virtual tour technology enhances buyer experiences, making property exploration more immersive and convenient. Your deep knowledge and well-structured explanations provide great value to professionals and enthusiasts alike. Looking forward to reading more of your expertise—keep up the amazing work in sharing industry-changing innovations!
ReplyDeleteNice and informative blog! Your blog provides information about many new and innovative technologies. Virtual Reality
ReplyDeleteInteresting breakdown of the WebVR setup basics—especially the way you explained handling images and simple rotations for early experimentation. Insights like this are helpful for understanding how foundational WebVR concepts later translate into more applied use cases, even within a VR training company context.
ReplyDelete