​

    // global variables

    var renderer;

    var scene;

    var camera;

    var splineGeometry;

​

    var control;

​

    var count = 0;

    var animationTracker;

​

//    var sphereCamera;

    var sphere;

    var light;

​

    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(0x000000, 1.0);

        renderer.setClearColor( 0xffffff, 1 );

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

​

//        //init for sphere

//        sphereCamera = new THREE.PerspectiveCamera(45, window.innerWidth / window.innerHeight, 1, 1000);

//        sphereCamera.position.y = -400;

//        sphereCamera.position.z = 400;

//        sphereCamera.rotation.x = .70;

​

        sphere = new THREE.Mesh(new THREE.SphereGeometry(0.8,31,31), new THREE.MeshLambertMaterial({

            color: 'yellow',

        }));

​

        light = new THREE.DirectionalLight('white', 1);

//        light.position.set(0,-400,400).normalize();

        light.position.set(0,10,10).normalize();

​

        //get points covered by Spline

        getSplineData();

    }

​

    //save points in geometry.vertices

    function getSplineData() {

        var curve = new THREE.CubicBezierCurve3(

                new THREE.Vector3( -5, 0, 10 ),

                new THREE.Vector3(0, 20, 0 ),

                new THREE.Vector3(0, 20, 0 ),

                new THREE.Vector3( 2, 0, -25 )

        );

​

        splineGeometry = new THREE.Geometry();

        splineGeometry.vertices = curve.getPoints( 50 );

​

        animate();

    }

​

    //scheduler loop

    function animate() {

        if(count == 50)

        {

            cancelAnimationFrame(animationTracker);

            return;

        }

​

        //add line to the scene

        drawLine();

​

        renderer.render(scene, camera);

  //      renderer.render(scene, sphereCamera);

​

        count += 1;

//        camera.position.z -= 0.25;

//        camera.position.y -= 0.25;

        animationTracker = requestAnimationFrame(animate);

    }

​

    function drawLine() {

        var lineGeometry = new THREE.Geometry();

        var lineMaterial = new THREE.LineBasicMaterial({

            color: 0x0000ff

        });

        console.log(splineGeometry.vertices[count]);

        console.log(splineGeometry.vertices[count+1]);

        lineGeometry.vertices.push(

                splineGeometry.vertices[count],

                splineGeometry.vertices[count+1]

        );

​

        var line = new THREE.Line( lineGeometry, lineMaterial );

        scene.add( line );

    }

​

init();

​