The Challenge:

Create a 3D Room that tells a story.

  • Use at least two components from the AFrame registry that we did not discuss in class to add to your scene. 
  • Don’t forget to add lighting!
  • Must include at least 1 textured object
  • Must include at least 1 imported model
  • VR is optional

The ATLAS Creative Technology class of 2121 celebrate in the huge Swanson Advanced Technology Lab after the completion of Design Challenge 9, a group project to recreate the human home system. The original Earth and Moon were consumed by a freak black hole experiment created by the ATLAS Design Methods class of 2099 who were studying the newly confirmed dark matter material. For Design Challenge 10, shown in detail on the back wall, the class must reintroduce clouds and the weather cycle.

I have a real love of huge cavernous sci fi rooms. The sense of space in these large control rooms, bridges and spacecraft bays really completes a sense of design on a grand scale. So, to commemorate our final Design Challenge, I created this huge hangar for a fictitious ATLAS cohort. I created the floor and front wall in Photoshop and imported it as a PNG. Adding transparent to the element makes this work. The image of space in the background is one of my Milky Way shots. I draped NASA images of Earth and Moon on spheres and added another cloudy NASA Blue Marble image to a curvedimage element to create a huge curved screen. A light source gives the Moon more of a crescent. There is an Easter Egg here in the form of a model of a UFO that must be sitting invisibly in the middle of the floor. Ultimately, I could not get this model to show. I really need to spend more time exploring this cool prototyping tool.


Millenium Falcon in Death Star Bay

raw code

<!DOCTYPE html>
<html lang=”en”>
<meta charset=”utf-8″>
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>

<!– import the webpage’s stylesheet –>
<link rel=”stylesheet” href=”/style.css”>

<!– import the webpage’s javascript file –>
<script src=””></script>

<a-scene shadow=”type: pcfsoft”>
<img id=”final-frontier” src=”″>
<img id=”earth” src=”″>
<img id=”earth_clouds” src=”″>
<img id=”moon” src=”″>
<img id=”floor” src=”″>
<img id=”ground” src=”″>
<img id=”hangarwall” src=”″>
<img id=”woman1″ src=”″>
<img id=”woman2″ src=”″>
<img id=”woman3″ src=”″>
<img id=”woman4″ src=”″>
<img id=”woman5″ src=”″>
<img id=”woman6″ src=”″>
<img id=”woman7″ src=”″>
<img id=”woman8″ src=”″>
<img id=”woman9″ src=”″>
<img id=”woman10″ src=”″>
<img id=”woman11″ src=”″>
<img id=”woman12″ src=”″>
<img id=”man1″ src=”″>
<img id=”man2″ src=”″>
<img id=”man3″ src=”″>
<img id=”man4″ src=”″>
<img id=”man5″ src=”″>
<img id=”man6″ src=”″>
<img id=”man7″ src=”″>
<img id=”man8″ src=”″>
<a-asset-item id=”ufo” src=”″></a-asset-item>
<a-asset-item id=”imp” src=”″></a-asset-item>


<!– lIGHTS! –>
<a-entity light=”type: directional; shadowCameraVisible: true; castShadow:true; color: #EEE; intensity: 1.5″ position=”2 3 0.5″></a-entity>

<a-entity camera look-controls position=”0 -2 0″></a-entity>

<a-sphere position=”-13 -10 -20″ radius=”14.25″ src=”#earth”></a-sphere>
<a-sphere position=”10 4 -35″ radius=”4″ src=”#moon”></a-sphere>
<a-curvedimage src=”#earth_clouds” height=”7.0″ radius=”8″ theta-length=”190″
rotation=”0 -80 0″ position=”0 -1 -1.3″ scale=”1 1 -.5″></a-curvedimage>
<!– Textured plane parallel to ground. –>
<a-plane src=”#hangarwall” height=”3″ width=”8″ position=”-0.4 -2 -1.7″ rotation=”0 0 0″ transparent=”true” shadow=”receive:false”></a-plane>
<a-plane src=”#ground” shadow:receive=”true” height=”7″ width=”10″ position=”0 -3 1.5″ rotation=”-90 0 0″></a-plane>

<!– all the people position x,y,z–>
<a-image src=”#woman1″ width=”.03″ height=”.07″ position=”1 -2.9 -1.6″ shadow=”cast:true”></a-image>
<a-image src=”#woman2″ width=”.03″ height=”.07″ position=”-1.9 -2.9 -1.6″ ></a-image>
<a-image src=”#woman3″ width=”.03″ height=”.07″ position=”-1.85 -2.9 -1.6″ ></a-image>
<a-image src=”#woman4″ width=”.03″ height=”.07″ position=”-2.27 -2.91 -1.6″ ></a-image>
<a-image src=”#woman5″ width=”.03″ height=”.07″ position=”-1 -2.9 -1.6″ ></a-image>
<a-image src=”#woman6″ width=”.03″ height=”.07″ position=”-.8 -2.9 -1.6″ ></a-image>
<a-image src=”#woman5″ width=”.03″ height=”.07″ position=”-.98 -2.9 -1.6″ ></a-image>
<a-image src=”#woman8″ width=”.03″ height=”.07″ position=”-1.2 -2.9 -1.6″ ></a-image>
<a-image src=”#woman9″ width=”.03″ height=”.07″ position=”.9 -2.9 -1.6″ ></a-image>
<a-image src=”#woman10″ width=”.03″ height=”.07″ position=”1.1 -2.9 -1.6″ ></a-image>
<a-image src=”#woman11″ width=”.03″ height=”.07″ position=”.5 -2.9 -1.6″></a-image>
<a-image src=”#woman12″ width=”.03″ height=”.07″ position=”-.5 -2.9 -1.6″ ></a-image>
<a-image src=”#man1″ width=”.03″ height=”.07″ position=”-1.87 -2.9 -1.6″ ></a-image>
<a-image src=”#man2″ width=”.03″ height=”.07″ position=”-.55 -2.9 -1.6″ ></a-image>
<a-image src=”#man3″ width=”.03″ height=”.07″ position=”-1.4 -2.9 -1.6″ ></a-image>
<a-image src=”#man4″ width=”.03″ height=”.07″ position=”-.6 -2.9 -1.6″ ></a-image>
<a-image src=”#man5″ width=”.03″ height=”.07″ position=”-1.65 -2.9 -1.6″ ></a-image>
<a-image src=”#man6″ width=”.03″ height=”.07″ position=”-1.24 -2.9 -1.6″ ></a-image>
<a-image src=”#man7″ width=”.03″ height=”.07″ position=”-1.13 -2.9 -1.6″ ></a-image>
<a-image src=”#man8″ width=”.03″ height=”.07″ position=”-.9 -2.9 -1.6″ ></a-image>
<a-entity gltf-model=”#ufo” scale=”1 1 1″ position=”0 0 15″></a-entity>

<a-sky src=”#final-frontier”></a-sky>