WebGL 3D player
2 likes1,725 views
This document discusses using WebGL for 3D graphics on the web. It introduces basic 3D graphics concepts like scenes, cameras, and lights. It then explains how to build a 3D model viewer using the Three.js library. Key steps include loading a texture, 3D model, setting up the scene, camera and renderer, and adding animation with requestAnimationFrame to continuously render the scene. The document provides code examples for setting up the different 3D objects and rendering the scene.
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=560&fit=bounds)
Ad
More Related Content
What's hot (20)
Similar to WebGL 3D player (20)
Ad
More from Vasilika Klimova (14)
Ad
Recently uploaded (20)
![Download Wondershare Filmora Crack [2025] With Latest](https://cdn.slidesharecdn.com/ss_thumbnails/neo4j-howkgsareshapingthefutureofgenerativeaiatawssummitlondonapril2024-240426125209-2d9db05d-250419-250428115407-a04afffa-thumbnail.jpg?width=560&fit=bounds)
WebGL 3D player
- 1. WebGL 3D player Vasilika Klimova Frontend Developer Artec Group @lik04ka MoscowJS 21
- 2. Contents 2 The use of WebGL Advantages Basic concepts in 3D graphics Library Three.js Player to view 3D models
- 3. • HTML5 <canvas> • OpenGL ES 2.0 • GLSL ES • 2D/3D 3 WebGL
- 6. 6
- 7. 7
- 8. 8
- 9. 9
- 10. 10
- 15. Advantages 15
- 16. • Open standard • Cross-platform • High perfomance 16 Advantages
- 17. • Automatic memory management • No compilation 17 Advantages
- 18. 18 GLSL
- 19. Basic concepts • Scene • Light • Camera 19
- 21. Interconnection objects 21 Camera 3D objectsLight Scene
- 22. Interconnection objects 22 Camera 3D objectsLight Scene Renderer
- 23. Interconnection objects 23 Camera 3D objectsLight Scene Renderer
- 25. 3D object 25 Polygon mesh Geometry Material
- 26. 3D object 26 Polygon mesh Geometry Material Texture
- 27. Visualization • Renderer • Shader • Animation 27
- 28. Three.js 28 • three.min.js 420 kb • OBJLoader.js • TrackballControls.js 14 kb threejs.org@mrdoob 8 kb
- 30. Algorithm 30 Load texture Rendrer, canvas Load 3D object Scene, Camera, Light Animation
- 31. Scene 31 Player.container = document.getElementById("webgl-player"); Player.size = { width: Player.container.offsetWidth, height: Player.container.offsetHeight }; Player.scene = new THREE.Scene();
- 32. Algorithm 32 Load texture Renderer, canvas Load 3D object Scene, Camera, Light Animation
- 33. Camera 33 // PerspectiveCamera( fov, aspect, near, far ) aspect = Player.size.width / Player.size.height; Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);
- 34. Camera 34 Player.camera.position.z = 300; Player.scene.add(Player.camera); // PerspectiveCamera( fov, aspect, near, far ) aspect = Player.size.width / Player.size.height; Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);
- 35. 35 Perspective projection PerspectiveCamera Orthographic projection OrthographicCamera Camera types
- 36. Algorithm 36 Load texture Render, canvas Load 3D object Scene, Camera, Light Animation
- 37. Light, renderer, canvas 37 Player.light = new THREE.AmbientLight(); Player.scene.add(Player.light); // canvas Player.container.appendChild(Player.renderer.domElement); Player.renderer = new THREE.WebGLRenderer({alpha: true}); Player.renderer.setSize(Player.size.width, Player.size.height);
- 40. Algorithm 40 Load texture Renderer, canvas Load 3D object Scene, Camera, Light Animation
- 41. Texture 41 Player.textureLoader = new THREE.TextureLoader(); Player.textureLoader.load("texture.jpg", function(texture) { Player.texture = texture; Player.loadModel(); });
- 42. Algorithm 42 Load texture Renderer, canvas Load 3D object Scene, Camera, Light Animation
- 43. Load 3D model 43 loadModel: function() { objectLoader = new THREE.OBJLoader(); objectLoader.load("object.obj", function(object) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = Player.texture; } }); Player.scene.add(object); }); }
- 44. Load 3D model 44 loadModel: function() { objectLoader = new THREE.OBJLoader(); objectLoader.load("object.obj", function(object) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = Player.texture; } }); Player.scene.add(object); }); }
- 45. Load 3D model 45 loadModel: function() { objectLoader = new THREE.OBJLoader(); objectLoader.load("object.obj", function(object) { object.traverse(function(child) { if (child instanceof THREE.Mesh) { child.material.map = Player.texture; } }); Player.scene.add(object); }); }
- 46. Algorithm 46 Load texture Renderer, canvas Load 3D object Scene, Camera, Light Animation
- 47. Animation 47 animate: function() { requestAnimationFrame(Player.animate); Player.renderer.render(Player.scene, Player.camera); } Player.animate();
- 48. Animation 48 Player.controls = new THREE.TrackballControls(Player.camera, Player.container); animate: function() { requestAnimationFrame(Player.animate); Player.renderer.render(Player.scene, Player.camera); } Player.animate(); Player.controls.update();
- 49. Animation 49 Ask browser to repeat animate() Draw the model Update the camera position requestAnimationFrame animate: function() { requestAnimationFrame(Player.animate); Player.controls.update(); Player.renderer.render(Player.scene, Player.camera); }
- 50. 50 viewshape.com
- 51. WebGL libraries • Three.js • Babylon.js • Turbulenz • PhiloGL 51
- 52. Useful links davidscottlyons.com/threejs Book Learning Three.js: The JavaScript 3D Library for WebGL 52