Your own Minecraft,  thanks to three.js!

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

Bert TImmermans Application Designer @Digiti About me @Berttimmermans

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

So what do you need? Generate data 1 Visualize data
2 Add interactions 3

Generate data 1

5 4 3 2 1 0

1 5 2 2 4 1 0 3 2 5
3 2 0 5 3 4

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

4 2 1 1 4 0 2 5 3

4 2 1 1 4 0 2 5 3 3

3 1 4 0 2 4 2 5 3

3 1 4 0 2 4 2 5 3 2

3 1 3 1 2 2 1 3 3 2

Visualize data 2

http:/ /threejs.org Three.js

Example.html

<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

// 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

// 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

Building a world

Adding light and shadows

“ Ambient occlusion is a shading and rendering technique used
to calculate how exposed each point in a scene is to ambient lighting. ” Ambient occlusion

So how does it look?

Add interactions 3

Ways of interaction Keyboard + Mouse Touch VS

Demo time

Collision detection

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

So what do you need? Generate data 1 Visualize data
2 Add interactions 3

Thank you http:/ /berttimmermans.com/world

Your own Minecraft, thanks to three.js!

Your own Minecraft, thanks to three.js!

More Decks by Bert Timmermans

Other Decks in Programming

Featured

Transcript

Your own Minecraft,  thanks to three.js!

Your own Minecraft,  thanks to three.js!