More Related Content
![[부스트캠프 Tech Talk] 고지형_내 자식 하나쯤은 있어야죠](https://cdn.slidesharecdn.com/ss_thumbnails/boostcampaitechtechtalkkojihyeong-210515042800-thumbnail.jpg?width=560&fit=bounds)
Similar to How to start WebGL easily? (20)
How to start WebGL easily?
- 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
- 7. 2.Write basic code • Write simple HTML • Load library file • Create scene • Create camera • Create spotlight • Render
- 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
- 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!