This document provides an overview of the Three.js library for creating 3D graphics in web browsers using WebGL. It discusses key Three.js concepts like scenes, cameras, lights, materials, and textures. It also provides examples of how to load 3D models and textures, set up animations, and add interactivity using controls. Useful links are included for learning more about Three.js and WebGL fundamentals.

1. Vasilika Klimova
Frontend Team Lead
Three.js basics

2. 2
vasilika.ru
Vasilika Klimova
vasilika.klimova
Lik04ka
• travelling
• computer games
• to help people

3. 3
Frontend in Artec3D

4. 4
Schools

5. 5
Artec3D scanners
www.artec3d.com

6. 6
Artec3D Booth
shapify.com
viewshape.com

7. 7
Contents
WebGL application
Advantages
Three.js library
Basics of 3D graphics
3D viewer

8. 8

9. 9
Interactive maps
rainforest link

10. 10
WebVR
WebVR link

11. 11
Mapbox GL JS
mapbox link

12. GL-React
gl-react link

13. 13
Unity 3D

14. 14
3D tour link
3D tour

15. Blend4Web
15
blend4web link

16. 16
Colosseo link
Panorama

17. 17
• HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES 1.10
• 2D/3D
WebGL

18. 18
Components of WebGL
<canvas/>
OpenGL
Shading Language

19. 19
Browser Support

20. 20
get.webgl.org

21. Linear algebra
21

22. 22

23. Three.js
23
threejs.org

24. Babylon.js community
Three.js community
24

25. threejs/editor
Three.js Editor
25

26. threejs/examples
Three.js Examples
26

27. Files
Export files
27

28. 3D basics
28

29. 3D basics
• Point
• Polygon
• Object (mesh)
• Geometry
• Material
• Texture
3D basics
29
Vertex Vertex
Vertex
Polygon
Point

30. Object
30

31. 3D термины
• Scene
• Light
• Camera
• Renderer
3D terms
31

32. Set up a scene
32

33. @mrdoob
33
Three.js
• three.min.js
• OBJLoader.js
• TrackballControls.js

34. 3434

35. texture.jpg
35
Data-in

36. object.obj
Vertex list with coords (x,y,z) Texture coordinates (u,v)
Faces (v/vt)
Data-in
36

37. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
37
Algorithm

38. Player.container = document.getElementById("webgl-player");
Player.size = {
width: Player.container.offsetWidth,
height: Player.container.offsetHeight
};
Player.scene = new THREE.Scene();
38
Scene

39. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
Algorithm
39

40. PerspectiveCamera
OrthographicCamera
40
Camera types

41. 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);
41
Camera

42. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
42
Algorithm

43. Player.light = new THREE.AmbientLight();
Player.scene.add(Player.light);
43
Light

44. // Player.scene.add(Player.light)
Player.scene.add(Player.light)
44
Light

45. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
45
Algorithm

46. // canvas
Player.container.appendChild(Player.renderer.domElement);
Player.renderer = new THREE.WebGLRenderer({alpha: true});
Player.renderer.setSize(Player.size.width, Player.size.height);
Renderer
46

47. THREE.WebGLRenderer({alpha: true})
THREE.WebGLRenderer()
47
Renderer

48. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
48
Algorithm

49. Player.textureLoader = new THREE.TextureLoader();
Player.textureLoader.load("texture.jpg", function(texture)
{
Player.texture = texture;
Player.loadModel();
});
49
Load texture

50. Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
50
Algorithm

51. objectLoader.load("object.obj", function(object) {
object.traverse(function(child) {
if (child instanceof THREE.Mesh) {
child.material.map = Player.texture;
}
});
Player.scene.add(object);
});
}
loadModel: function() {
objectLoader = new THREE.OBJLoader();
51
Load model

52. 52
Load Texture
Renderer, canvas
Load 3D object
Scene, Camera, Light
Animation
Algorithm

53. 53
Request a browser to repeat
animate()
Draw model
Update camera position
requestAnimationFrame
animate: function() {
requestAnimationFrame(Player.animate);
Player.controls.update();
Player.renderer.render(Player.scene, Player.camera);
}
Animation loop

54. 54
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();
Controls

55. 55
requestId = requestAnimationFrame(animate)
cancelAnimationFrame(requestId)
Cancel animation

56. 5656
3D viewer
3D viewer link

57. Wireframe
57

58. 58
geometry = new THREE.SphereGeometry(100, 50, 50);
material = new THREE.MeshPhongMaterial({map: texture});
Player.mesh = new THREE.Mesh(geometry, material);
Player.scene.add(Player.mesh);
Sphere

59. 59
Sphere texture

60. vasilika.ru/wireframe
Wireframe
60

61. Wireframe Code
61

62. WebGL 2.0
WebGL 2.0
62

63. 63
Advantages
• High GPU Performance
• No compilation
• Cross-platform
• Automatic memory management
• Open standard

64. 64
Disavantages
• Raster graphics
• Optimization required
• Poly-polygonal scenes

65. 65
Where can I use it?
• Raster graphics rendering
• Image editing and analysis
• Filtering video
• Interactive graphics
• Games
• Statistics in the form of graphs

66. Interactivity

67. 67
Gamification

68. 68
Useful links
WebGL Fundamentals
WebGL Academy
Learning Three.js: The JavaScript 3D Library for WebGL
Mozilla
Three.js Books
learningwebgl.com
davidscottlyons.com/threejs

69. Thanks for listening!
vasilika.ru
Vasilika Klimova
vasilika.klimova
Lik04ka