Download as PDF, PPTX
Uploaded byVasilika Klimova
Three.js basics
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.
More Related Content
![[NDC17] 물리 기반 대기와 구름 만들기](https://cdn.slidesharecdn.com/ss_thumbnails/i2tcvqcbqsqf61glxqlq-signature-55756bd64a35cb3246b96d60a9e2797a447c2cb766454960d564aaadb5b23d96-poli-170524053948-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![3D Web Programming [Thanh Loc Vo , CTO Epsilon Mobile ]](https://cdn.slidesharecdn.com/ss_thumbnails/thanhlocvo-3dprogramming-131125060122-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Three.js basics
- 1. Vasilika Klimova Frontend TeamLead Three.js basics
- 2. 2 vasilika.ru Vasilika Klimova vasilika.klimova Lik04ka • travelling •computer games • to help people
- 3.
- 4.
- 5.
- 6.
- 7. 7 Contents WebGL application Advantages Three.js library Basicsof 3D graphics 3D viewer
- 8.
- 9.
- 10.
- 11.
- 12.
- 13.
- 14.
- 15.
- 16.
- 17. 17 • HTML5 <canvas> •OpenGL ES 2.0 • GLSL ES 1.10 • 2D/3D WebGL
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29. 3D basics • Point •Polygon • Object (mesh) • Geometry • Material • Texture 3D basics 29 Vertex Vertex Vertex Polygon Point
- 30.
- 31. 3D термины • Scene •Light • Camera • Renderer 3D terms 31
- 32. Set up ascene 32
- 33. @mrdoob 33 Three.js • three.min.js • OBJLoader.js •TrackballControls.js
- 34.
- 35.
- 36. object.obj Vertex list withcoords (x,y,z) Texture coordinates (u,v) Faces (v/vt) Data-in 36
- 37. Load Texture Renderer, canvas Load3D 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 Load3D object Scene, Camera, Light Animation Algorithm 39
- 40.
- 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 Load3D object Scene, Camera, Light Animation 42 Algorithm
- 43. Player.light = newTHREE.AmbientLight(); Player.scene.add(Player.light); 43 Light
- 44.
- 45. Load Texture Renderer, canvas Load3D 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.
- 48. Load Texture Renderer, canvas Load3D object Scene, Camera, Light Animation 48 Algorithm
- 49. Player.textureLoader = newTHREE.TextureLoader(); Player.textureLoader.load("texture.jpg", function(texture) { Player.texture = texture; Player.loadModel(); }); 49 Load texture
- 50. Load Texture Renderer, canvas Load3D 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 Load3D object Scene, Camera, Light Animation Algorithm
- 53. 53 Request a browserto 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 = newTHREE.TrackballControls(Player.camera, Player.container); animate: function() { requestAnimationFrame(Player.animate); Player.renderer.render(Player.scene, Player.camera); } Player.animate(); Player.controls.update(); Controls
- 55.
- 56.
- 57.
- 58. 58 geometry = newTHREE.SphereGeometry(100, 50, 50); material = new THREE.MeshPhongMaterial({map: texture}); Player.mesh = new THREE.Mesh(geometry, material); Player.scene.add(Player.mesh); Sphere
- 59.
- 60.
- 61.
- 62.
- 63. 63 Advantages • High GPUPerformance • No compilation • Cross-platform • Automatic memory management • Open standard
- 64. 64 Disavantages • Raster graphics •Optimization required • Poly-polygonal scenes
- 65. 65 Where can Iuse it? • Raster graphics rendering • Image editing and analysis • Filtering video • Interactive graphics • Games • Statistics in the form of graphs
- 66.
- 67.
- 68. 68 Useful links WebGL Fundamentals WebGLAcademy Learning Three.js: The JavaScript 3D Library for WebGL Mozilla Three.js Books learningwebgl.com davidscottlyons.com/threejs
- 69. Thanks for listening! vasilika.ru VasilikaKlimova vasilika.klimova Lik04ka