Robots and Physical Computing: Make yourself a virtual gallery

Saturday 6 March 2021

Make yourself a virtual gallery

This short post builds on the previous posts (below), unless you have used A-Frame before please have a look at these:

WebVR playtime 1: Basics of setting up, images and rotating blocks.

WebVR playtime 2: video, 360 video and objects

Using Glitch (https://glitch.com/) as a web development and hosting tool. We are going to create the start of a virtual Gallery, essentially 4 rectangles that images can be posted on, a cylinder that also images can be wrapped around and the floor and the sky.

To do it following is posted into the index.hml

<html>

<head>

</head>

<body>

<a-scene>

<a-box position="-1 2 -1"

rotation="0 -30 0" color="white" depth="2"

height="4" width="0.5"

src="https://cdn.glitch.com/febf6408-3c33-4608-ac90-b087753e5792%2Fpanic.png?v=1573395380360"></a-box>

<a-box position="-4.5 2 -1"

rotation="0 -30 0" color="white" depth="2" height="4"

width="0.5"

src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2Fdiginorth1.PNG?v=1615066351771"></a-box>

<a-box position="-1 2 -6"

rotation="0 -30 0" color="yellow" depth="2"

height="4" width="0.5"

src="https://cdn.glitch.com/425c1a98-7ba9-463d-817d-6b491a516246%2F97b3bf6d-ced1-4041-80d4-b6c9a98ba43d.jfif?v=1614341330757"></a-box>

<a-box position="-4.5 2 -6"

rotation="0 -30 0" color="white" depth="2"

height="4" width="0.5"

src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2Fvex2.gif?v=1615066487037"></a-box>

<a-cylinder position="1 0.75 -3"

radius="0.5" height="1.5" color="#FFC65D" src="https://cdn.glitch.com/e7ab4c95-5e85-4dc0-9bee-da6f7e87efcf%2FPicture1.png?v=1615066388587"></a-cylinder>

<a-plane position="0 0 -4"

rotation="-90 0 0" width="20" height="20" color="#7BC8A4"></a-plane>

<a-sky color="white"></a-sky>

</a-scene>

</body>

</html>

Now to change the images all you need to do is change the URL in the src="". If you are doing this in Glitch it is easier often to copy the images into the asset folder and copy the URL produced.

Ideas to take this further

Rotate the cylinder so the image can be seen completely from a standing position.
Wrap an image on the floor, sky or on a new shape.

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