Untitled

<!DOCTYPE html>
<html>

<head>
    <meta charset=utf-8>
    <title>S110646 Assignment Unit 2</title>
    <style>
        body {
            margin: 0;
        }

        canvas {
            width: 100%;
            height: 100%
        }
    </style>
</head>

<body>

    <!-- Load three.min.js-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/96/three.min.js"></script>

    <script>

        //Prepares scene and camera
        var scene = new THREE.Scene();
        var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

        var renderer = new THREE.WebGLRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        document.body.appendChild(renderer.domElement);


        //Material snippet from example code
        var sphereMaterial = new THREE.MeshLambertMaterial(
            {
                color: 0xBBCC00, wireframe: false, side: THREE.DoubleSide
            });


        // create the sphere's material
        var sphereMaterial = new THREE.MeshNormalMaterial( {color: 0x3794cf, wireframe: false });

        // set up the sphere vars
        var radius = 15, segments = 20, rings = 20;

        // create a new mesh with sphere geometry -
        // we will cover the sphereMaterial next!
        var sphere = new THREE.Mesh(
	    new THREE.SphereGeometry(radius, segments, rings),
	    sphereMaterial);

        // add the sphere to the scene
        scene.add(sphere);
        console.log ("y:", sphere.position.y)

        //Add ambient light (red / blue) to scene
        var directionalLight = new THREE.DirectionalLightShadow(0xff0000);
        //directionalLight.position.set( 0, 0, 2 ); 			//default; light shining from top
        directionalLight.castShadow = true;
        scene.add(directionalLight);

        //Set camera very far away so to visualize the scaling, rotation and translation of the polygon
        camera.position.z = 100;
      // Set the dimensions of the screen
      var top = window.innerHeight/2;
      var right = window.innerWidth/2;
      var bottom = -1 * window.innerHeight/2;
      var left = -1 * window.innerWidth/2;

      var xdirection = 1;
      var ydirection = 1;
      var speed = 4;

        function animate() {
            requestAnimationFrame(animate);

            //Translate the sphere
          // Update the position of the shape
            var xpos = sphere.position.x + ( speed * xdirection );
            sphere.position.x = xpos;
            var ypos = sphere.position.y + ( speed * ydirection );
            sphere.position.y = ypos;


  // Test to see if the shape exceeds the boundaries of the screen
  // If it does, reverse its direction by multiplying by -1

    if (xpos + radius > right || xpos - radius < left) {
    xdirection *= -1;
      }
  if (ypos + radius > top || ypos - radius < bottom) {
    ydirection *= -1;
  }

     renderer.render(scene, camera);

        }

        animate();
    </script>
</body>

</html>