Upload
vasilika-klimova
View
436
Download
5
Tags:
Embed Size (px)
Citation preview
Contents
2
The use of WebGL
Advantages
Basic concepts in 3D graphics
Library Three.js
Player to view 3D models
Three.js
28
• three.min.js 420 kb
• OBJLoader.js
• TrackballControls.js 14 kb
threejs.org @mrdoob
8 kb
Scene
31
Player.container = document.getElementById("webgl-player");
Player.size = {
width: Player.container.offsetWidth,
height: Player.container.offsetHeight
};
Player.scene = new THREE.Scene();
Camera
33
// PerspectiveCamera( fov, aspect, near, far )
aspect = Player.size.width / Player.size.height;
Player.camera = new THREE.PerspectiveCamera(45.0, aspect, 2, 8000);
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);
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);
Texture
41
Player.textureLoader = new THREE.TextureLoader();
Player.textureLoader.load("texture.jpg", function(texture) {
Player.texture = texture;
Player.loadModel();
});
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);
});
}
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);
});
}
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);
});
}
Animation
47
animate: function() {
requestAnimationFrame(Player.animate);
Player.renderer.render(Player.scene, Player.camera);
}
Player.animate();
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();
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);
}
WebGL libraries
• Three.js
• Babylon.js
• Turbulenz
• PhiloGL
51
Useful links
davidscottlyons.com/threejs
Book Learning Three.js: The JavaScript 3D Library for WebGL
52