Intro to WebGL and Three.js

Presented by David Lyons at the 2014 Front Porch Front End Web Developer Conference in Dallas, Texas.

@davidscottlyons davidscottlyons.com/threejs

WebGL
JavaScript API for rendering interactive 2d and 3d graphics in the browser element.

three.js
3D JavaScript Library
100’s of lines of raw WebGL code can be written in just a few lines with three.js

All three.js objects will have 3 pieces

  • Scene
  • Camera
  • Renderer

Object3D transforms

  • rotations are in radians

Cameras

  • Perspective
  • Orthographic

Cameras Controls

  • add orbit controls from repo

Geometry

  • Box
  • Sphere
  • Cylinder
  • Taurus

Materials

  • Basic Material
  • Lambert material - matte
  • Phong material - shiny
    • Shading = Smooth or flat
  • Normal material - rgb

UVs

  • Texture Maapping
  • Normal Map
  • Specular Map

Lights

  • Directional - position & target
  • Point - specific position in all directions
  • Ambient - all objects in the scene globally
  • Three point lighting (key, fill, rim)

Model Converter

  • OBJ to JSON converter python tool
  • JSONLoader() object

Interaction

  • Picking

This post is from the Front Porch Conference Series. If you enjoyed it, please check out the others below.