David Lyons

3D Artist / Front End Web Dev

Intro to WebGL with Three.js

Learn the basics of the popular 3D javascript library, Three.js. This presentation covers general 3D concepts and relates them back to common features available within the Three.js API. Step through the code for a simple scene with geometry, materials, lighting, and more, while exploring the options and parameters for each step along the way.

In 2014, I put together this presentation for Front Porch, a front end web developer conference in Dallas, Texas. At the time, WebGL still felt relatively new to both me and other front end devs I knew. When I was first getting into Three.js in 2012, there wasn't much documentation, and I learned a lot by reverse engineering Three.js examples. My goal for this presentation was to teach devs without any 3D experience how to get started with Three.js, quickly explain 3D graphics fundamentals in the context of Three.js and front end web development, and break things down into simple terms that would be easy to understand, supported by visual examples and code snippets. I also needed to condense the information enough to fit it within the 20 minute time limit for the conference while still being digestable and entertaining. While I had seen a few Three.js presentations prior to making mine, Steven Witten's presentation, Making things with Maths, was the biggest inspiration for me. After researching and experimenting with a few javascript presentation libraries, I ended up using the same one Steven used, deck.js. Use the "m" key to open the menu for quick navigation between slides. I also used the Gamepad API to navigate the slides with the D-pad and left and right bumpers and triggers on a wireless XBox controller.