// global variables

    var renderer;

    var scene;

    var camera;

    var container;

​

    //controls

    var controls;

​

    //html elements

    var courtselection = "green";

​

    function init() {

        var SCREEN_WIDTH = window.innerWidth, SCREEN_HEIGHT = window.innerHeight;

        SCREEN_WIDTH-=200;

//        SCREEN_HEIGHT -= 100;

​

        // create a scene, that will hold all our elements such as objects, cameras and lights.

        scene = new THREE.Scene();

​

        // create a camera, which defines where we're looking at.

        camera = new THREE.PerspectiveCamera(45, SCREEN_WIDTH / SCREEN_HEIGHT, 0.1, 1000);

​

        // create a render, sets the background color and the size

        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor(0x000000, 1.0);

        renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);

​

        // position and point the camera to the center of the scene

        camera.position.x = 0;

        camera.position.y = 30;

        camera.position.z = 40;

        camera.lookAt(scene.position);

​

        // add the output of the renderer to the html element

        document.body.appendChild(renderer.domElement);

​

        // attach div element to variable to contain the renderer

        container = document.getElementById( 'ThreeJS' );

​

        // attach renderer to the container div

        container.appendChild( renderer.domElement );

    }

​

    function floor()

    {

        ///////////

        // FLOOR //

        ///////////

​

        // note: 4x4 checkboard pattern scaled so that each square is 25 by 25 pixels.

        //var floorTexture = new THREE.ImageUtils.loadTexture( 'images/checkerboard.jpg' );

        if(courtselection == "green")

            var floorTexture = new THREE.ImageUtils.loadTexture( 'green.jpg' );

        else if(courtselection == "brown")/*go with 2 for now*/

            var floorTexture = new THREE.ImageUtils.loadTexture( 'brown.png' );

        floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;

        floorTexture.repeat.set( 20, 20 );

        // DoubleSide: render texture on both sides of mesh

        var floorMaterial = new THREE.MeshBasicMaterial( { map: floorTexture, side: THREE.DoubleSide } );

        var floorGeometry = new THREE.PlaneGeometry(110, 110, 1, 1);

        var floor = new THREE.Mesh(floorGeometry, floorMaterial);

        floor.position.y = -0.5;

        floor.rotation.x = Math.PI / 2;

        scene.add(floor);

​

        animate();

    }

​

    //scheduler loop

    function animate() {

        renderer.render(scene,camera);

        requestAnimationFrame(animate);

    }

​

    function myfunction()

    {

        courtselection = document.getElementById("mydropdownlist").value;

        console.log("clicked on '"+ courtselection + "'");

        floor();

    }

​

    // calls the init function when the window is done loading.

    window.onload = init;