This is the presentation about creating WebGL products & using three.js

1. How to start WebGL easily?

2. Profile
Seito Horiguchi
• LIG Philippines inc.
• President / Developer
• https://github.com/seito2014

3. What is WebGL & Three.js?

4. Today's goal = Rendering a cool 3D model
https://github.com/seito2014/three-tutorial/tree/master

5. Try 1st Demo
https://github.com/seito2014/three-tutorial/tree/master/cube-study
1.Get Three.js library
2.Write basic code
3.Add Animation & TrackballControls

6. 1.Get Three.js library
https://threejs.org/
./three.js-master/build/three.js

7. 2.Write basic code
• Write simple HTML
• Load library file
• Create scene
• Create camera
• Create spotlight
• Render

8. 3.Add Animation &
TrackballControls
three.js-master/examples/js/controls/TrackballControls.js

9. Try 2nd Demo
https://github.com/seito2014/three-tutorial/tree/master/city-study
1.Get 3D model
2.Call 3d model files

10. Three.js supports vaious formats.
• JSON
• OBJ, MTL
• Collada
• STL
• CTM
• ...etc

11. 1.Get 3D model
http://tf3dm.com/
https://www.cgtrader.com/

12. 2. Call 3d model files
• load method
• three.js-master/examples/js/loaders/
MTLLoader.js
• three.js-master/examples/js/loaders/
OBJLoader.js

13. Thank you!