Project 03 — Augmenting Virtual Worlds


Create a virtual world that affects and is affected by the physical one.


3/21: Kickoff & Three.js Workshop
3/23: Three.js VR Workshop
3/28: & Johnny-Five Workshop
3/30: Work Day
4/4: Crit


This project has three main components:
* Create a custom Google Cardboard that fits your personal phone, and potentially incorporates sensors, actuators, an Arduino, and/or a Raspberry Pi.
* Create a Node.js server capable of reading sensors/writing to actuators on an Arduino/Raspberry Pi.
* Create a Three.js Virtual Reality world capable of conversing with the server.


Github Repo

Node.js Documentation
Express Documentation
Pug Documentation Documentation
Johnny Five Documentation

Intro to Three.js


  1. Download three.js from three.js website.

  2. Follow the Getting Started tutorial. We’ll go over this together.

  3. Import an external model into your project:

Save the file from here into a file called OBJMTLLoader.js, within your three.js folder.

Include this code to import an OBJ with materials:

var objMtlLoader = new THREE.OBJMTLLoader(); // create the OBJ loader

objMtlLoader.load("filename.obj", "filename.mtl", function(object, url) { // load the OBJ and companion MTL
    scene.add(object); // add it to the scene