function onMouseDown(event) {

    event.preventDefault();

​

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

    container.addEventListener('mouseup', onMouseUp);

​

    // clear previous path

    clearPathPoints();

​

    if (event.shiftKey) {

​

      container.style.cursor = 'move';

      selecting = true;

​

      startMouse.x = event.clientX;

      startMouse.y = event.clientY;

​

      addPathPoints(startMouse.x, startMouse.y);

​

      var x1 = startMouse.x;

      var x2 = x1 + 1;

      var y1 = startMouse.y;

      var y2 = y1 + 1;

​

      selectionDiv.style.left = x1 + "px";

      selectionDiv.style.top = y1 + "px";

      selectionDiv.style.width = (x2 - x1) + "px";

      selectionDiv.style.height = (y2 - y1) + "px";

      selectionDiv.style.visibility = "hidden";

​

    } else {

        // irrelevant

    }

​

  }

​

  function onMouseMove(event) {

​

    if (event.shiftKey) {

​

      selectionFlag = true;

      selectionDiv.style.visibility = "visible";

​

      mouse.x = event.clientX;

      mouse.y = event.clientY;

​

      var x1 = startMouse.x;

      var x2 = mouse.x;

      var y1 = startMouse.y;

      var y2 = mouse.y;

​

      if (x1 > x2) {

        var tmp1 = x1;

        x1 = x2;

        x2 = tmp1;

      }

​

      if (y1 > y2) {

        var tmp2 = y1;

        y1 = y2;

        y2 = tmp2;

      }

​

      selectionDiv.style.left = x1 + "px";

      selectionDiv.style.top = y1 + "px";

      selectionDiv.style.width = (x2 - x1) + "px";

      selectionDiv.style.height = (y2 - y1) + "px";

​

      addPathPoints(x2,y2);

​

    } else if (moving) {

        // irrelevant

    }

  }

​

  function onMouseUp(event) {

    container.removeEventListener('mousemove', onMouseMove, false);

​

    container.style.cursor = 'auto';

    selectionDiv.style.visibility = "hidden";

​

    selecting = false;

    moving = false;

​

    if (selectionFlag) {

      var shape = getPlaneGeometry(getPathPoints());

​

      var selections = getSelectionsFromShape(shape);

​

      if (selections.length !== 0) {

​

        for (var i in selections) {

          highlightSelected(selections[i]);

        }

      }

​

    }

​

  }

​

 function getPlaneGeometry(points) {

​

    // FIXME it selects BUT seems like not fully correct.

​

    console.log(points);

​

    var startX = points[0].x;

    var startY = points[0].y;

​

    var endX = points[points.length-1].x;

    var endY = points[points.length-1].y;

​

    var rx1 = (startX / window.innerWidth) * 2 - 1;

    var rx2 = (endX / window.innerWidth) * 2 - 1;

    var ry1 = -(startY / window.innerHeight) * 2 + 1;

    var ry2 = -(endY / window.innerHeight) * 2 + 1;

​

    console.log(rx1+"-"+rx2+"-"+ry1+"-"+ry2);

​

    var projectionMatrix = new THREE.Matrix4();

    projectionMatrix.makePerspective( rx1, rx2, ry1, ry2, camera.near, camera.far );

​

    camera.updateMatrix(); // make sure camera's local matrix is updated

    camera.updateMatrixWorld();  // make sure plane's world matrix is updated

    camera.matrixWorldInverse.getInverse( camera.matrixWorld );

​

    var viewProjectionMatrix = new THREE.Matrix4();

    viewProjectionMatrix.multiplyMatrices( projectionMatrix, camera.matrixWorldInverse );

​

    var frustum = new THREE.Frustum();

    frustum.setFromMatrix(viewProjectionMatrix);

​

    return frustum;

​

 }

​

  function getSelectionsFromShape(frustum) {

​

    var meshes = [];

​

    for ( var i in globeBars) {

​

      var mesh = globeBars[i];

​

      if (frustum.intersectsObject(mesh)) {

        meshes.push(mesh);

      }

    }

​

    return meshes;

}

​

​

​

​