NOTE: Setting a Scene in A-Frame

emily leung

Published in

PROJECT REDBACK

4 min readAug 22, 2017

NOTE: 0009 — Tuesday 22 August 2017

PART 2

As stated before, you’ll need to familiarise yourself with the basics in web development (HTML + CSS + JavaScript).

In this part of the process, during week 3 I started to build the scene using A-Frame by following the documentation and references to tutorials on Youtube.

Using my previous post regarding A-Frame basics, it’s important to layout the structure of the HTML document in such a way that will be clear for others to understand.

Boilerplate Setup of A-Frame Scene:

<!DOCTYPE>
<html><head>
  <script src="https://aframe.io/releases/0.6.1/aframe.min.js"></script>
</head><body>
  <a-scene>
  </a-scene>
</body></html>

As you can see, just like any HTML document, you have:

DOCTYPE — A document type declaration
HTML tags
Head tags > Referenced scripts
Body tags

The biggest addition, would have to be including <a-scene> tags, where everything in A-Frame will sit, unless they have functionality, then they would either sit:

in their own script sections
OR are referenced as a script

If you follow the ‘A-Frame Basics’ note, you can start adding in primitive objects (box / cylinder / sphere / octahedron / etc). However, in our case, we will look into setting up a scene with the .obj files we created in the last post.

Inside an <a-scene>

What you can place inside a scene in order are:

Assets — files you preload onto the webpage. E.g. modelling files, audio / sound files, image / texture files and video files
Entities — placeholders for objects where you can add appearance / behaviours and functionalities. It is what is viewed in the scene.
Sky — a large sphere with a colour / texture mapped onto it
Lighting — to control the lighting of the scene
Cursor / Camera — positioning of the user to the scene. You can attach a cursor for WebVR to the camera and when adding animations, can allow for interactivity with objects within the scene.

PROCESS OF BUILDING THE SCENE:

STEP 1 — Organise a Structure / Folder to Store your Webpage

Diagram from my Sketchbook illustrating the organisation of my web-page prototype

As you continue to use this same structure throughout your progress (as shown above), it will be easier for others to pick up and develop on the project.

At the moment, we should have:

HTML document with the boilerplate code
A Scripts folder containing the standard A-Frame script. Otherwise, you can reference the script through a URL placed in the <head> of the HTML document:
<script src=”https://aframe.io/releases/0.6.1/aframe.min.js"></script>
A Models folder containing the .obj files from Revit > Rhinoceros

STEP 2 — Reference Assets into HTML

Using the Boilerplate template, the first things we add under the opening asset tags are the referenced objects (.obj files).

<a-scene>  <a-assets>
    <a-asset-item 
      id="obj-1" src="models/SAMPLE_C-TOPO.obj">
    </a-asset-item>
    ...
    <a-asset-item 
      id="obj-25" src="models/SAMPLE_I-FURN-PNLS.obj">
    </a-asset-item>
  </a-assets></a-scene>

As you can see, each individual file is placed in <a-asset-item> tags and requires its own id and src in order to be brought into the page.

You won’t be able to see the referenced files on the page until we set up a few more things:

Camera with Cursor attached
Sky

...
</a-assets><a-camera position="-5 3 -7" rotation="0 -45 0">
  <a-cursor id="cursor" color="#FF0000"></a-cursor>
</a-camera><a-sky color="#FFF"></a-sky></a-scene>

The position, rotation and colour for the camera / cursor is completely up to you. It relies on your playing around with the resulting placement of geometry within the scene and how you want to tell your story.

Another thing to note is that the cursor does not have to exist with the camera. You can have a camera for viewing with no interactivity.

STEP 3 — Placing Objects into the Scene

Any object that is displayed in the scene should be attached to <a-entity> tags. This also affects its ability for interactivity when combining it with external scripts.

To bring in the OBJ models, reference the id of the obj from the <a-asset-item> with a “#”. Again, I created an <a-obj-model> tag for each object. The position, scale, rotation and colour is optional and is based on your experience of experimenting with the resulting scene:

<a-sky color="#FFF"></a-sky><a-entity>  <a-obj-model 
    src="#obj-1" 
    position="5 0 -15" 
    scale="0.001 0.001 0.001" 
    rotation="-90 0 -360" 
    color="#424B54">
  </a-obj-model>
  ...
  <a-obj-model 
    src="#obj-25" 
    position="5 0 -15" 
    scale="0.001 0.001 0.001" 
    rotation="-90 0 -360" 
    color="#424B54">
  </a-obj-model></a-entity></a-scene>

Key things to note in this scenario:

A-Frame uses metres with a 1:1 ratio (WebVR API also uses metres). Therefore 5 units = 5 metres in real life.
That’s why the objects were scaled down to 0.001 because Rhinoceros had the units in millimetres.

This was my first scene in A-Frame! [170807]

The next post will explain how to add interactivity to the scene than just be a 3D web viewer.

© Emily Y Leung and Project Redback, 2017. Unauthorized use and/or duplication of this material without express and written permission from this site’s author and/or owner is strictly prohibited. Excerpts and links may be used, provided that full and clear credit is given to Emily Y Leung and Project Redback with appropriate and specific direction to the original content.

Last modified on Tuesday 22 August 2017