Created
February 19, 2019 22:52
-
-
Save webbushka/73db9b5bd15c9ada605a103c71270514 to your computer and use it in GitHub Desktop.
Avatar: Keyboard Controls
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <body></body> | |
| <script src="/three.js"></script> | |
| <script> | |
| // The "scene" is where stuff in our game will happen: | |
| var scene = new THREE.Scene(); | |
| var flat = {flatShading: true}; | |
| var light = new THREE.AmbientLight('white', 0.8); | |
| scene.add(light); | |
| // The "camera" is what sees the stuff: | |
| var aspectRatio = window.innerWidth / window.innerHeight; | |
| var camera = new THREE.PerspectiveCamera(75, aspectRatio, 1, 10000); | |
| camera.position.z = 500; | |
| scene.add(camera); | |
| // The "renderer" draws what the camera sees onto the screen: | |
| var renderer = new THREE.WebGLRenderer({antialias: true}); | |
| renderer.setSize(window.innerWidth, window.innerHeight); | |
| document.body.appendChild(renderer.domElement); | |
| // ******** START CODING ON THE NEXT LINE ******** | |
| const cover = new THREE.MeshNormalMaterial(); | |
| const body = new THREE.CylinderGeometry(10, 100, 150); | |
| const avatar = new THREE.Mesh(body, cover); | |
| scene.add(avatar); | |
| const head = new THREE.SphereGeometry(75); | |
| const face = new THREE.Mesh(head, cover); | |
| face.position.set(0, 150, 0); | |
| avatar.add(face); | |
| const hand = new THREE.SphereGeometry(50); | |
| const rightHand = new THREE.Mesh(hand, cover); | |
| rightHand.position.set(-125, 0, 0); | |
| avatar.add(rightHand); | |
| const leftHand = new THREE.Mesh(hand, cover); | |
| leftHand.position.set(125, 0, 0); | |
| avatar.add(leftHand); | |
| const foot = new THREE.SphereGeometry(50); | |
| const rightFoot = new THREE.Mesh(foot, cover); | |
| rightFoot.position.set(-75, -125, 0); | |
| avatar.add(rightFoot); | |
| const leftFoot = new THREE.Mesh(foot, cover); | |
| leftFoot.position.set(75, -125, 0); | |
| avatar.add(leftFoot); | |
| let isCartwheeling = false; | |
| let isFlipping = false; | |
| function animate() { | |
| requestAnimationFrame(animate); | |
| if (isCartwheeling) { | |
| avatar.rotation.z = avatar.rotation.z + 0.05; | |
| } | |
| if (isFlipping) { | |
| avatar.rotation.x = avatar.rotation.x + 0.05; | |
| } | |
| renderer.render(scene, camera); | |
| } | |
| animate(); | |
| document.addEventListener('keydown', (event) => { | |
| console.log(event.key); | |
| switch(event.key) { | |
| case 'ArrowRight': | |
| avatar.position.x = avatar.position.x + 5; | |
| break; | |
| case 'ArrowLeft': | |
| avatar.position.x = avatar.position.x - 5; | |
| break; | |
| case 'ArrowUp': | |
| avatar.position.z = avatar.position.z - 5; | |
| break; | |
| case 'ArrowDown': | |
| avatar.position.z = avatar.position.z + 5; | |
| break; | |
| case 'c': | |
| isCartwheeling = !isCartwheeling; | |
| break; | |
| case 'f': | |
| isFlipping = !isFlipping; | |
| break; | |
| } | |
| }); | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment