Untitled

<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 marker = new THREE.Object3D();
scene.add(marker);

var cover = new THREE.MeshNormalMaterial();
var body  = new THREE.SphereGeometry(100);
var avatar= new THREE.Mesh(body,cover);
marker.add(avatar);

var hand = new THREE.SphereGeometry(50);

var right_hand = new THREE.Mesh(hand,cover);
right_hand.position.set(-130,0,0);
avatar.add(right_hand);

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

var foot=new THREE.CylinderGeometry(10);

var right_foot = new THREE.Mesh(foot,cover);
right_foot.position.set(-30,-120,0);
avatar.add(right_foot);

var left_foot = new THREE.Mesh(foot,cover);
left_foot.position.set(30,-120,0);
avatar.add(left_foot);
marker.add(camera);

//Bäume platzieren

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);
}


  // Now, animate what the camera sees on the screen:
  var is_cartwheeling =false;
  var is_flipping =false;
  renderer.render(scene, camera);
  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;
  }
  renderer.render(scene, camera);
  }
  animate();

  document.addEventListener('keydown',function(event) {
    var code = event.keyCode;
    if (code == 37)marker.position.x = marker.position.x-5; //nach links
    if (code == 38)marker.position.z = marker.position.z-5; //hoch
    if (code == 39)marker.position.x = marker.position.x+5; //nach rechts
    if (code == 40)marker.position.z = marker.position.z+5; // nach unten

    if (code == 67) is_cartwheeling = !is_cartwheeling;//c
    if (code == 70) is_flipping = !is_flipping;//f
  });
  </script>