webbushka/index.js

## index.js
<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>
	<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>