(Maneesh Tewani was a summer intern at Oasis Digital in 2014, and returned to lead the Summer Intern Program in 2015. As of this posting, he currently attends Purdue University. Maneesh recently wrote this technical description of a 3D project which was started by interns, and first documented, in 2013.)
“Swingset” is a custom rules-based configurator. It allows users to customize their own swingset given a set of options to choose from. When an option is selected, the change can be seen on on the 3D swingset shown.
Swingset uses Broccoli.js, a build tool provided by the npm registry. Broccoli is very similar to Grunt and Gulp. Instead of working with “globs”, Broccoli has its equivalent “trees”. Initially we believed Grunt.js was the ideal choice, but as time progressed, we experimented with new tools and picked up Broccoli. Our use was relatively simple: process all our files, move them to a directory, and serve them statically.
Broccoli served this purpose very well. For example, Broccoli is known for its automatic “watching” feature. Watching is when a build tool keeps checking a specific directory for changes such as updates, additions and removals. This is very useful because as developers are writing code, they want to see the changes live on their local server. This can usually be quite a hassle, but Broccoli has this unique feature built-in.
Directives are a key feature in AngularJS. Directives allow you to take a common snippet of code and extract it for future use. Directives are represented by their names and every instance of one represents a template or HTML code. Directives are very flexible and therefore can be used practically anywhere.
One of the most important components of the application is the scene. The scene consists of the swingset and the components around it. The main parts of a scene are the position and lighting, in addition to any object you would like to add. In our case, that was the swingset optimized with different textures laid upon it.
The model directive sets up ThreeJS model to make the 3D swingset appear. First, an ObjectLoader is initialized with an image. Next, a scene is created with the image and a camera as well as multiple types of light. Then, the controls are created that allow the user to manipulate the scene/view. The renderer basically renders the scene along with the controls, lighting, etc. Upon initializing, a Canvas HTML element is returned. In our case, most of the boilerplate code was written in the directive. So, we append the canvas element to the directive element.
An ideal part of this was updating the scene to match the user’s selections. This was where we used AngularJS. As everything was set up, many variables were bound to the scope, meaning that as anything on the scope changed, the corresponding changes would be provided to ThreeJS.