Introduction to Three.js

Transcript

1. INTRODUCTION TO THREE.JS Brian Lu
2. THREE.JS AND WEBGL • Three.js is a JavaScript library of WebGL • WebGL is the JavaScript API for interactive 2D/3D graphic • WebGL renders on HTML5 canvas • WebGL utilize GPU for high performance
3. WHAT DOES IT DO? • Creating simple and complex 3D geometries • Animating and moving objects through a 3D scene • Applying textures and materials to your objects • loading objects from 3D modeling software • Creating 2D sprite-based graphics Source: Learning Three.js: The Javascript 3D Library for WebGL
4. RENDERING 3D SCENE • Camera • Lights • Object • Geometry: collection of points in 3D space and faces connecting all those points together • Material: defines how it looks outside of geometry
5. DEMO!
6. USEFUL LIBRARIES • dat.GUI
 simple user interface component for changing variable in your code
 demo • convert_obj_three.py
 convert Wavefront OBJ file into JSON
 doc • OrbitalControls.js
 simple way to add rotate and pan around an object.
 demo • stats.js
 add Frame Per Second (FPS) reading
7. SUPPORT BROWSERS
8. RESOURCE • Learn Three.js: The JavaScript 3D Library for WebGL
 
 • https://github.com/mrdoob/three.js/