Your own Minecraft, thanks to three.js!

Everything is possible thanks to JavaScript. The only limit is your imagination!

1. Your own Minecraft, 
 thanks to three.js! By Bert Timmermans
2. Bert TImmermans Application Designer @Digiti About me @Berttimmermans
6. Your own Minecraft, 
 thanks to three.js! By Bert Timmermans
7. So what do you need? Generate data 1 Visualize data 2 Add interactions 3
8. Generate data 1
11. 5 4 3 2 1 0
12. 1 5 2 2 4 1 0 3 2 5 3 2 0 5 3 4
13. 5 4 4 5 3 1 2 1 1 1 2 3 2 3 4 3 3 2 0 1 0 0 1 1 2 2 3 4 5 5 4 3 1 1 4 4 3 3 2 2 2 2 4 3 3 4 3 2 1 1 0 0 0 4 3 3 2 2 3 2 4 5 3 3
14. 5 4 4 5 3 1 2 1 1 1 2 3 2 3 4 3 3 2 0 1 0 0 1 1 2 2 3 4 5 5 4 3 1 1 4 4 3 3 2 2 2 2 4 3 3 4 3 2 1 1 0 0 0 4 3 3 2 2 3 2 4 5 3 3
17. 4 2 1 1 4 0 2 5 3
18. 4 2 1 1 4 0 2 5 3
19. 4 2 1 1 4 0 2 5 3 3
20. 3 1 4 0 2 4 2 5 3
21. 3 1 4 0 2 4 2 5 3
22. 3 1 4 0 2 4 2 5 3 2
23. 3 1 4 0 2 4 2 5 3 2
24. 3 1 3 1 2 2 1 3 3 2
26. Visualize data 2
31. http:/ /threejs.org Three.js
32. Example.html
33. <html> <head> <title>My first Three.js app</title> <style> body { margin: 0px; } canvas { width: 100%; height: 100%; } </style> </head> <body> <script src=“js/three.js"></script> <script> // Our code goes here </script> </body> </html> Example.html
34. // Scene var scene = new THREE.Scene(); // Renderer var renderer = new THREE.WebGLRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // Camera var camera = new THREE.PerspectiveCamera(75, window.innerWidth/ window.innerHeight, 1, 10000); camera.position.z = 4; scene.add(camera); // Cube var geometry = new THREE.BoxGeometry(1, 1, 1); var material = new THREE.MeshLambertMaterial({ color: 'blue' }); var cube = new THREE.Mesh(geometry, material); scene.add(cube); // Ambient lighting var ambientLight = new THREE.AmbientLight(0x000044); scene.add(ambientLight); Example.html
35. // Directional lighting var directionalLight = new THREE.DirectionalLight(0xffffff); directionalLight.position.set(1, 1, 1); scene.add(directionalLight); // Render function function render() { requestAnimationFrame(render); cube.rotation.x += 0.01; cube.rotation.y += 0.01; renderer.render(scene, camera); }; render(); Example.html
36. Building a world
42. Adding light and shadows
49. “ Ambient occlusion is a shading and rendering technique used to calculate how exposed each point in a scene is to ambient lighting. ” Ambient occlusion
50. So how does it look?
52. Add interactions 3
53. Ways of interaction Keyboard + Mouse Touch VS
54. Demo time
55. Collision detection
56. 5 4 4 5 3 1 2 1 1 1 2 3 2 3 4 3 3 2 0 1 0 0 1 1 2 2 3 4 5 5 4 3 1 1 4 4 3 3 2 2 2 2 4 3 3 4 3 2 1 1 0 0 0 4 3 3 2 2 3 2 4 5 3 3
57. 5 4 4 5 3 1 2 1 1 1 2 3 2 3 4 3 3 2 0 1 0 0 1 1 2 2 3 4 5 5 4 3 1 1 4 4 3 3 2 2 2 2 4 3 3 4 3 2 1 1 0 0 0 4 3 3 2 2 3 2 4 5 3 3
58. So what do you need? Generate data 1 Visualize data 2 Add interactions 3
59. Thank you http:/ /berttimmermans.com/world