How to start WebGL easily?

ProfileSeito Horiguchi

• LIG Philippines inc.

• President / Developer

• https://github.com/seito2014

What is WebGL & Three.js?

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

Try 1st Demohttps://github.com/seito2014/three-tutorial/tree/master/cube-study

1.Get Three.js library

2.Write basic code

3.Add Animation & TrackballControls

1.Get Three.js libraryhttps://threejs.org/

./three.js-master/build/three.js

2.Write basic code

• Write simple HTML

• Load library file

• Create scene

• Create camera

• Create spotlight

• Render

3.Add Animation & TrackballControls

three.js-master/examples/js/controls/TrackballControls.js

Try 2nd Demohttps://github.com/seito2014/three-tutorial/tree/master/city-study

1.Get 3D model

2.Call 3d model files

Three.js supports vaious formats.

• JSON

• OBJ, MTL

• Collada

• STL

• CTM

• ...etc

1.Get 3D model

http://tf3dm.com/https://www.cgtrader.com/

2. Call 3d model files

• load method

• three.js-master/examples/js/loaders/MTLLoader.js

• three.js-master/examples/js/loaders/OBJLoader.js

Thank you!