Let's Move the Avatar

Class Code

// Listen for keypress events

document.addEventListener('keydown', function(event) {alert(event.keyCode);});

---------------------------------

Add keyboard control:

document.addEventListener('keydown', function(event) { var code = event.keyCode; if (code == 37) avatar.position.x = avatar.position.x-5; // left if (code == 38) avatar.position.z = avatar.position.z-5; // up if (code == 39) avatar.position.x = avatar.position.x+5; // right if (code == 40) avatar.position.z = avatar.position.z+5; // down });

------------------------------

//Add Trees makeTreeAt( 500, 0); makeTreeAt(-500, 0); makeTreeAt( 750, -1000); makeTreeAt(-750, -1000); function makeTreeAt(x, z) { var trunk = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 200), new THREE.MeshBasicMaterial({color: 0xA0522D}) ); var top = new THREE.Mesh( new THREE.SphereGeometry(150), new THREE.MeshBasicMaterial({color: 0x228B22}) ); top.position.y = 175; trunk.add(top); trunk.position.set(x, -75, z); scene.add(trunk); } -----------------------------

// Pick color of your choice

https://en.wikipedia.org/wiki/X11_color_names

- Replace the # symbol on the web page with 0x so that JavaScript can read it.

----------------------------

Class Code:

<body></body> <script src="http://gamingJS.com/Three.js"></script> <script src="http://gamingJS.com/ChromeFixes.js"></script> <script> // This is where stuff in our game will happen: var scene = new THREE.Scene(); // This is what sees the stuff: var aspect_ratio = window.innerWidth / window.innerHeight; var camera = new THREE.PerspectiveCamera(75, aspect_ratio, 1, 10000); camera.position.z = 500; //scene.add(camera);

// This will draw what the camera sees onto the screen: var renderer = new THREE.CanvasRenderer(); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement);

// ******** START CODING ON THE NEXT LINE ******** var cover = new THREE.MeshNormalMaterial(); var body = new THREE.SphereGeometry(100, 20, 20); var avatar = new THREE.Mesh(body, cover); scene.add(avatar); avatar.add(camera);

var hand = new THREE.SphereGeometry(50,20,20); var right_hand = new THREE.Mesh(hand, cover); right_hand.position.set(-150, 0, 0); avatar.add(right_hand);

var left_hand = new THREE.Mesh(hand, cover); left_hand.position.set(150, 0, 0); avatar.add(left_hand);

var foot = new THREE.SphereGeometry(50, 20, 20); var right_foot = new THREE.Mesh(foot, cover); right_foot.position.set(-100, -125, 0); avatar.add(right_foot);

var left_foot = new THREE.Mesh(foot, cover); left_foot.position.set(100, -125, 0); avatar.add(left_foot);

// Now, animate what the camera sees on the screen: var is_cartwheeling = false; var is_flipping = false; var is_turning = false; function animate() { requestAnimationFrame(animate); if (is_cartwheeling) { avatar.rotation.z = avatar.rotation.z + 0.05; } if (is_flipping) { avatar.rotation.x = avatar.rotation.x + 0.05; } if (is_turning) { avatar.rotation.y = avatar.rotation.y + -0.05; } renderer.render(scene, camera); } animate();

//Add Trees makeTreeAt( 500, 0); makeTreeAt(-500, 0); makeTreeAt( 750, -1000); makeTreeAt(-750, -1000); function makeTreeAt(x, z) { var trunk = new THREE.Mesh( new THREE.CylinderGeometry(50, 50, 200), new THREE.MeshBasicMaterial({color: 0xA0522D}) ); var top = new THREE.Mesh( new THREE.SphereGeometry(150), new THREE.MeshBasicMaterial({color: 0x00FF00}) ); top.position.y = 175; trunk.add(top); trunk.position.set(x, -75, z); scene.add(trunk); }

// Listen for keypress events document.addEventListener('keydown', function(event) { var code = event.keyCode; if (code == 37) avatar.position.x = avatar.position.x-5; // left if (code == 38) avatar.position.z = avatar.position.z-5; // up if (code == 39) avatar.position.x = avatar.position.x+5; // right if (code == 40) avatar.position.z = avatar.position.z+5; // down