Howdy there candidate! This programming challenge is to help us gauge your frontend software engineering skills during our hiring process. You'll be developing a simple app with Backbone (or AngularJS, or a framework X that can neatly organize resources and work seamlessly with a RESTful backend) from scratch.
For this challenge, you'll be using Backbone/AngularJS/X in conjunction with threejs to make a simple 3d object viewer and editor. Users should be able to create / edit / update / delete 3d primitives (like boxes, spheres, etc.) in their browser. It'll be similar in function to the threejs editor but far less complicated and built with Backbone/AngularJS/X instead of vanilla javascript.
###Instructions:
- Create a new repository on github and copy this README file in. DO NOT fork this repo and don't put "MUJIN" in the name of the repo.
- Complete the challenge, making commits along the way. The components and other things we're looking for are outlined below. You can use any additional dependencies / development tools you want (within reason), but at minimum you have to use Backbone/AngularJS/X and threejs.
- Deploy your completed application somewhere public on the internet and send us the link when you're done.
###Major components of the application:
- Renderer
- Should be a view that wraps the threejs renderer
- Able to navigate around the 3d environment with a mouse
- Click on drawables in the renderer and trigger a custom event that the rest of the application responds to
- Drawable
- Should be a model that represents objects in the scene
- Store model attributes in browser local storage. Should be able to refresh the page and not lose any information about the drawables.
- All changes to model attributes should be immediately reflected in the renderer when they happen
- Able to change position and orientation of drawable by modifying model attributes. You can choose what attributes you want to use to represent this (could use a 4x4
matrix
attribute, or separatetranslation
/quaternion
attributes for example). - Able to change the color of the drawable by modifying the
color
attribute - Able to change the name of the drawable by modifying the
name
attribute - Able to change various model attributes to change the properties of the dimensions of the geometry depending on the geometry type. So for example, if the drawable is a
box
, able to set thelength
,width
, andheight
.- Geometry types and dimension attributes:
box
(length
,width
,height
)sphere
(radius
)
- Geometry types and dimension attributes:
- Drawable list
- One or more views that list all the objects by name and type
- Drawable create / delete controls
- One or more views that allows the creation and deletion of drawables
- Drawable edit controls
- One or more views that allows the modification of drawable attributes
- Should be able to edit attributes common to all drawables, as well as attributes that depend on the geometry type of the drawable
- If a drawable is clicked in the renderer, focus of the controls should change to that drawable
###Bonus feature:
- Allow clicking and dragging of drawables to change their position and orientation
###Scoring: You can take a look at scoring.md for more details.
###Good luck! Feel free to email us with any questions!