About two months ago I had the pleasure of attending a one day workshop at the School of Journalism that was an introduction to A-Frame. It was my first foray into this immersive world and really what drew me to the idea of working with A Frame for my final project was that they made it all seem so accessible to beginners.
AND… for the most part it is. There are tons of tutorials showing you how to build a basic 360 world with a box and a sphere and a cylinder. It was easy to get started in A-Frame but more difficult for me to get things how I wanted them.
Challenge 1: Getting the assets. I used my iphone and took 360 images using a google street map. This worked well, overall. However, I would have liked to be able to be able to be to create 3D images you could walk around. Maybe there is a way to do this. I haven’t been able to figure it out. I went on Sketchpad and found the perfect tree model that was a free download. I downloaded the file but I could’t get it to work properly. There is <a- glTF tag that the A-Frame website recommends using for adding models, but it when I used that, the textures from the model were absent, leaving it looking, well, strange. After some time tinkering and not able to get work it like I wanted, I decided not to use it, besides the fact that it took a lot to load into the page. It was an awesome model, however. This is a screenshot of it below. Kudos to nedo for designing it. Maybe one day I will be able to figure it out and include it in a project.
I took some images in Florida of those wonderful looking sprawling fig trees. They’ve always looked like they were going to reach out and grab me. I walked past a beautiful tree orchard on my way home from work. I think I got the pink flowers on the trees in full bloom. A few days later they were already looking greener, still beautiful, but greener. I knew I wanted to combine real with fake with this project. I wanted it to be about faded and broken memories so the images could have errors, animation, etc. I used Photoshop to smudge the images so that the background cars, people, homes were obfuscated. I spent some time working on the 360 images I already had and waited for the next sunny day to go shoot some locations I knew had some beautiful trees. And then I waited and waited some more because there was a long period of time where there was no sun and always rain. This resulted in me having to change my storyline a bit.
Challenge 2: The actual storyline and order of pages. In retrospect, I had too much going on here. I should have started with a clearer story map that was simpler and not 9 pages long. A solid 5 would have been more than sufficient. Had I gone smaller, I think I would have had more time to focus on each individual page and more importantly a through-line. Creatively, its the roughest of drafts. In fact, if I continue to work on this site, this is the main thing I will focus on – story. I feel like technical can be forgiven (depends on how much technical keeps you from story) if the story is there. I knew where I wanted to go with it, but I kept getting myself sidetracked collecting assets whether I knew for sure if I was going to use them or not.
Challenge 3: And this one should seem obvious – the actual coding itself. A-Frame is kind of like HTML, but not really and knowledge of JS is definitely a plus! I made the mistake of not using a Simple server at first. That was a day wasted wondering what syntax I was getting wrong in my code. It was a throwaway line in a tutorial that gave it away. I loaded it into the server and voila! I was simultaneously ecstatic and annoyed with myself for wasting time. After that was settled, I was able to get my first basic page up with fig trees as my sky and I added text. I felt I was on my way, but alas – text. A Frame has just a few fonts you can use. Fine, once you know where to find their names (there’s no Arial or Times or Helvetica). The website was very helpful in getting text where and how I wanted on the page. I had hoped to make the text clickable or to highlight on hover. Neither of which is possible by using <a-text>. You have to use <a-entity> and then name your component as text. Honestly, doing that is not so difficult or time consuming once you know you have to do it. It took me quite awhile to figure that out. The A Frame site goes through every <a-> you can think of, but basically if you are going to play around with any of these components you need to use <a-entity>. Lesson learned. I was able to find an example of what I was looking for and used the example code to make my text fade out. I was getting somewhere! I was able to copy and paste that code into all 9 pages and made some adjustments in each for the text.
I also had some trouble with my image placement, dealing with flat vs curved images. Now that I understand and can see how things are placed on a 360 page, it seems like there is no other way for it to be. X Y Z axis. I don’t know why I had so much trouble with this, but I get it now. Also, unlike position, rotation is measured in degrees. I didn’t get why changing my rotation by 2 or 3 wasn’t yielding any changes. Then the lightbulb went off! I am loathe to admit, this happened pretty late in the game. I struggled.
Okay, and then in order to click on objects you have to add your cursor or should I say camera? <a-camera><a-cursor></a-cursor></a-camera> I could make my cursor a different color but I couldn’t figure out how to make it glow when it hovered over a clickable object. In the end I used a JS command to make the object grow in size when the mouse hovered. I was actually happy with this solution.
Unresolved to date: I’m not sure if there is a leaf command in A-Frame of some sort because my pages did not want to see a leaf.png. I finally got it to work by using an id but it took some effort. Sometimes a page would time out when it was loading assets in other folders and the asset would not appear on my page. I solved this by nesting images in multiple folders as needed. Also, I haven’t been able to get sound to work. I believe I have to create an event to make the sound play, but this seems contrary to some of the other information I found on the site. Still, half my project creatively was supposed to be sound. I would have liked to at least get the sounds of the wind playing on each page. This was a disappointment to me and probably the thing that gnaws at my brain. I want to get this to work and figure it out. Just so I can say that I can.
Challenge 4: Time! A-Frame newcomers will find a glorious world of support online. Most of it, however, is a bit advanced for newbies. Finding a steady progression of tutorials I liked that could start from the beginning take me through the different functions and possibilities was not easy. I found a few videos that helped (like the one with Simple server notice) but many were already using outdated A-Frame syntax or were beyond what I was already doing or were staying in the most basic of models. That being said, there is a ton of stuff to sort through on A-Frame’s website if you have the time to go through step by step and go back and review your JavaScript commands. In addition to time, perhaps what I need is a little added patience to waft through it all.
Conclusion: So, in the end I did produce a 9 page 360 story. I achieved my goal of having a 9 page story with clickable elements that lead you from page to page in a round robin fashion. As long you don’t click on the same image twice, you will go to every page. I learned how to manipulate the text and flat images within my page. I also got an understanding of the gaze and cursor control and how positioning works. I was able to get all my links to work the way I wanted them to work and share assets from different folders. I learned how to take 360 images with my phone. Overall, I am probably about 60% satisfied. There are a couple of pages I would change the images and I would find a way to include instructions for the user on what they are experiencing and how to enhance their experience. I also miss sound design as I do believe that would be a vital addition to the story element.
Would I use A-Frame again? Yes. Would I work on this project more? Yes. Although more likely, is that I would take my lessons from this and develop something else with some borrowed ideas. I’m just not rushing into it. A-Frame swallowed my life for about a month. At the kitchen table, walking around the house with my laptop, cursing or exclaiming, even on vacation watching tutorials. I need an AFrame break. I need a coding break. But I will come back to websites and AFrame. Now that I know they are there, they area impossible to ignore!
Alina Learns to Code 