HEIGHT = window.innerHeight;

var scene = new THREE.Scene();

var mouse = new THREE.Vector2();

var targetList = [];

var camera = new THREE.PerspectiveCamera(75, WIDTH / HEIGHT, 1, 10000);

var raycaster = new THREE.Raycaster();

var renderer = new THREE.WebGLRenderer({/*alpha: true*/ antialias: true});

​

var INTERSECTED;

​

init();

render();

​

function newCircle(radius, color, pos) {

    segments = 64;

    material = new THREE.LineBasicMaterial({color: color});

    geometry = new THREE.CircleGeometry(radius, segments);

​

    geometry.vertices.shift();

​

    var circle = new THREE.Line(geometry, material);

    circle.position.set(pos.x, pos.y, pos.z);

    return circle;

}

​

function init() {

    scene.background = new THREE.Color(0xff00ff);

    camera.position.z = 1000;

​

    renderer.setSize(WIDTH, HEIGHT);

    //renderer.setClearColor(0xffffff, 0);

    document.body.appendChild(renderer.domElement);

​

    var c1 = newCircle(20, 0x0000ff, new THREE.Vector3(-50, 0, 0));

    scene.add(c1);

    scene.updateMatrixWorld(true);

    var c1Pos = new THREE.Vector3();

    c1Pos.setFromMatrixPosition(c1.matrixWorld);

​

    var geometry = new THREE.Geometry();

    geometry.vertices.push(c1Pos);

    geometry.vertices.push(new THREE.Vector3(100, 50, 0));

    var material = new THREE.LineBasicMaterial({

        color: 0x000000,

        linewidth: 2

    });

​

    var line = new THREE.Line(geometry, material);

​

    scene.add(line);

    document.addEventListener('mousemove', onMouseMove, false);

    window.addEventListener( 'resize', onWindowResize, false );

}

​

function render() {

    raycaster.setFromCamera(mouse.clone(), camera);

​

    // create an array containing all objects in the scene with which the raycaster intersects

    var intersects = raycaster.intersectObjects(scene.children);

​

    if ( intersects.length > 0 )

    {

        // if the closest object intersected is not the currently stored intersection object

        if ( intersects[ 0 ].object != INTERSECTED )

        {

            // restore previous intersection object (if it exists) to its original color

            if ( INTERSECTED )

                INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

            // store reference to closest object as current intersection object

            INTERSECTED = intersects[ 0 ].object;

            // store color of closest object (for later restoration)

            INTERSECTED.currentHex = INTERSECTED.material.color.getHex();

            // set a new color for closest object

            INTERSECTED.material.color.setHex( 0xffffff );

        }

    }

    else // there are no intersections

    {

        // restore previous intersection object (if it exists) to its original color

        if ( INTERSECTED )

            INTERSECTED.material.color.setHex( INTERSECTED.currentHex );

        // remove previous intersection object reference

        //     by setting current intersection object to "nothing"

        INTERSECTED = null;

    }

​

    renderer.render(scene, camera);

}

​

function onMouseMove(event) {

    // update the mouse variable

    mouse.x = ( event.clientX / WIDTH ) * 2 - 1;

    mouse.y = - ( event.clientY / HEIGHT ) * 2 + 1;

​

    render();

}

​

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;

    camera.updateProjectionMatrix();

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

}