Download as PDF, PPTX
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=640&height=640&fit=bounds)
Create Basic 3D Scenes Using Three.js
- 1. Creating basic 3D scenesfor Web using ThreeJS. wednesday.is
- 2. 2 Content What we’ll becovering What isThreeJS? What are some tools that can help you with 3D stuff? Creating a basic Scene using ThreeJS. Some optimizations that you can do while creating 3D assets. Resources.
- 3. wednesday.is What is ThreeJS? Makingthe Complex easy! Problem The web requires OpenGLES or WebGL to render anything 3D on the screen. However WebGLcan only put points, faces, and other primitive stuff which require a lot of code. Solution ThreeJS handles stuff like scenes, lights, shadows, materials, textures, 3D math, all things that you'd have to write yourself if you were to use WebGLdirectly.
- 4. wednesday.is Before we evenstartThreeJS, we need 3DAssets. So here are some 3D tools that you can use!
- 5. wednesday.is Creating a basic3D Scene in ThreeJS!
- 6. wednesday.is General stuff thatyou gotta know about how the workflow goes in 3D.
- 7. wednesday.is Start by creatinga generic markup with a canvas.
- 8.
- 9.
- 10. wednesday.is Setup mesh, materials,and add them to the scene.
- 11.
- 12. wednesday.is Animating the cubeto get the perception of 3 Dimension.
- 13.
- 14. wednesday.is Are we 3Dyet? https://codepen.io/ihatelactose/pen/poLwmKY?editors=101
- 15. wednesday.is So, what arewe lacking?
- 16.
- 17. wednesday.is Let’s add lighting!Andchange the material.
- 18.
- 19.
- 20.
- 21.
- 22. 22 Key Takeaways What welearned What isThreeJS? Why is it needed! What are some 3D tools that you can use! Setting up a basic scene inThreeJS! What makes 3D, 3D! Its LIGHTS! Some optimizations!
- 23.