3D Marker

-3D marker to lock the camera to the object

1. Add the following after CODING ON THE NEXT LINE.

var marker = new THREE.Object3D(); scene.add(marker);

2. Now we change the avatar so that it is added to the marker instead of adding it to the scene:

var avatar = new THREE.Mesh(body, cover);

marker.add(avatar);

3. Now, change the keyboard listener

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

if (code == 67) is_cartwheeling = !is_cartwheeling; // C

if (code == 70) is_flipping = !is_flipping; // F });

4. Copy project My Avatar: Moving Hands and Feet

5. Review what happen if change value z, y, z

6.

var clock = new THREE.Clock(true);

function animate() {

requestAnimationFrame(animate);

walk();

acrobatics();

renderer.render(scene, camera);

}

animate();

7. Turn the avatar:

var is_cartwheeling = false;

var is_flipping = false;

var is_turning = false;

function acrobatics()

{

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;

}

8. Let's move hands and feet:

function walk() { // 1 - New line // if(!isWalking()) return; // 1 - End new line var position = Math.sin(clock.getElapsedTime() * 5) * 50; right_hand.position.z = -position; left_hand.position.z = position; right_foot.position.z = position; left_foot.position.z = - position; }

10. Comment out

if(!isWalking()) return;

11. Let's create an "isWalking" function:

var is_moving_right, is_moving_left, is_moving_forward, is_moving_back; function isWalking() { if (is_moving_right) return true; if (is_moving_left) return true; if (is_moving_forward) return true; if (is_moving_back) return true; return false; }

12. Let's create the keypress event:

// #12 Listen for keypress events / Control Avatar document.addEventListener('keydown', function(event) { var code = event.keyCode; if (code == 37) { // 3 add marker marker.position.x = marker.position.x-5; is_moving_left = true; } if (code == 38) { marker.position.z = marker.position.z-5; // up

is_moving_forward = true; } if (code == 39) { marker.position.x = marker.position.x+5; // right is_moving_right = true; }

if (code == 40) { marker.position.z = marker.position.z+5; // down is_moving_back = true; } if (code == 67) is_cartwheeling = !is_cartwheeling; // C if (code == 70) is_flipping = !is_flipping; // F if (code == 84) is_turning = !is_turning; // T });

13. Let's add key up event

document.addEventListener('keyup', function(event) { var code = event.keyCode; if (code == 37) is_moving_left = false; if (code == 38) is_moving_forward = false; if (code == 39) is_moving_right = false; if (code == 40) is_moving_back = false; });

=========== Full Program Code ========

// 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 ******** // #1-- var marker = new THREE.Object3D(); scene.add(marker); // 4-- var cover = new THREE.MeshNormalMaterial(); var body = new THREE.SphereGeometry(100, 20, 20); var avatar = new THREE.Mesh(body, cover); //A # marker.add(avatar); //-- remove 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: //Add clock // #6 var clock = new THREE.Clock(true); function animate() { requestAnimationFrame(animate); walk(); acrobatics(); renderer.render(scene, camera); } animate();

// #9 Let's create the walk function - move hands and feet function walk() { // 1 - New line // # 10 Comment out if(!isWalking()) return; // 1 - End new line var position = Math.sin(clock.getElapsedTime() * 5) * 50; right_hand.position.z = -position; left_hand.position.z = position; right_foot.position.z = position; left_foot.position.z = - position; }

// Keys turn avatar var is_cartwheeling = false; var is_flipping = false; var is_turning = false; function acrobatics() { 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; } }

// #11 - Create isWalking function var is_moving_right, is_moving_left, is_moving_forward, is_moving_back; function isWalking() { if (is_moving_right) return true; if (is_moving_left) return true; if (is_moving_forward) return true; if (is_moving_back) return true; return false; } // 2 - End Create isWalking function

// #12 Listen for keypress events / Control Avatar document.addEventListener('keydown', function(event) { var code = event.keyCode; if (code == 37) { // 3 add marker marker.position.x = marker.position.x-5; is_moving_left = true; } if (code == 38) { marker.position.z = marker.position.z-5; // up

is_moving_forward = true; } if (code == 39) { marker.position.x = marker.position.x+5; // right is_moving_right = true; }

if (code == 40) { marker.position.z = marker.position.z+5; // down is_moving_back = true; } if (code == 67) is_cartwheeling = !is_cartwheeling; // C if (code == 70) is_flipping = !is_flipping; // F if (code == 84) is_turning = !is_turning; // T }); // End keypress events // #13. Let's create keyup event document.addEventListener('keyup', function(event) { var code = event.keyCode; if (code == 37) is_moving_left = false; if (code == 38) is_moving_forward = false; if (code == 39) is_moving_right = false; if (code == 40) is_moving_back = false; }); //End JavaScript

//Add Trees -- No JavaScript below this point 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); }