Three.js Pop-Up Workshop

ITP Residents Workshops - 2015

Notes

Of the workshops

Topic

• Pop-up on 11/30/15
  • Intro: Up & Run Give you ready-to-roll template.
  • Incorporate with P5js Just put two canvas, one Three.js, one P5.js, together!
• Pop-up on 12/14/15
  • What's UV Mapping? A way to flatten the 3D model so we can draw texture in 2D format, plus some interesting examples
  • Import 3D model In the workshop, we used Maya to create UVs of a downloaded Christmas tree, and used Photoshop to draw the texture
  • Texture & Video For playing video, it's easy to do in laptop Chrome and Android Chrome, but not iOS iPhone. Playing video on iPhone will be forced to enter fullscreen mode. So the turn-around here is to push the video frame by frame, instead of play the video ( eg. video.play() )
• Pop-up on 12/17/15
  • Animation Scripting, using Tween.js, also addEventListener for mouse and keyboard (click to generate trees; keydown 1,2,3,4 to toggle to cubes)
  • VR, change just few lines of codes and use DeviceOrientationControl. Voila! Some thoughts: although it's easy to convert normal render to stereo render, the whole interaction is different and needs to redesign for vr users :)

Using local server

[let's use localhost to serve the page!]

0. git clone OR download as ZIP
1. open Terminal
2. go into directory:
3. cd
4. drag folder/directory into Terminal
5. enter
6. python -m SimpleHTTPServer 8000
7. Open browser and type localhost:8000

Android Phone Debug

Debugging on Android with Chrome tutorial

Resources / Links

• Three.js: doc, example
• Udacity: Interactive 3D Graphics
• Stemkoski's github