// global variables

    var renderer;

    var scene;

    var camera;

    var geometry;

​

    var control;

​

    var count = 0;

    var animationTracker;

​

    init();

    drawSpline();

​

    function init()

    {

        // 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, window.innerWidth / window.innerHeight, 0.1, 1000);

​

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

        renderer = new THREE.WebGLRenderer();

        renderer.setClearColor('lightgray', 1.0);

        renderer.setSize(window.innerWidth, window.innerHeight);

​

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

        camera.position.x = 0;

        camera.position.y = 40;

        camera.position.z = 40;

        camera.lookAt(scene.position);

​

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

        document.body.appendChild(renderer.domElement);

    }

​

    function drawSpline(numPoints)

    {

        var numPoints = 100;

//        var start = new THREE.Vector3(-5, 0, 20);

        var start = new THREE.Vector3(-5, 0, 20);

        var middle = new THREE.Vector3(0, 35, 0);

        var end = new THREE.Vector3(5, 0, -20);

​

        var curveQuad = new THREE.QuadraticBezierCurve3(start, middle, end);

​

        var tube = new THREE.TubeGeometry(curveQuad, numPoints, 0.5, 20, false);

        var mesh = new THREE.Mesh(tube, new THREE.MeshNormalMaterial({

            opacity: 0.9,

            transparent: true

        }));

​

        scene.add(mesh);

        renderer.render(scene, camera);

    }