Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Your own Minecraft, 
thanks to three.js!

Your own Minecraft, 
thanks to three.js!

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

E59e27a8b7d16fbb05dbdbd7c4b50c8e?s=128

Bert Timmermans

March 15, 2015
Tweet

More Decks by Bert Timmermans

Other Decks in Programming

Transcript

  1. Your own Minecraft, 
 thanks to three.js! By Bert Timmermans

  2. Bert TImmermans Application Designer @Digiti About me @Berttimmermans

  3. None
  4. None
  5. None
  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

  9. None
  10. None
  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
  15. None
  16. 1

  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

  25. None
  26. Visualize data 2

  27. None
  28. None
  29. None
  30. None
  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

  37. None
  38. None
  39. None
  40. None
  41. None
  42. Adding light and shadows

  43. None
  44. None
  45. None
  46. None
  47. None
  48. None
  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?

  51. None
  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