More Related Content Similar to WebGL 3D player (20) More from Vasilika Klimova (13) WebGL 3D player2. Contents
2
The use of WebGL
Advantages
Basic concepts in 3D graphics
Library Three.js
Player to view 3D models
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);
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);
});
}
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);
}