function showHint(objName, text, color) {
    var ifObj = document.getElementById('infoHint')
    if (ifObj) {
        ifObj.innerHTML = '';
    }
    var obj = scene.getObjectByName(objName);
    var position = obj.matrixWorld.getPosition().clone();
    var vector = position.project(camera);
    var percX = (vector.x + 1) / 2;
    var percY = (-vector.y + 1) / 2;
    var leftpx = percX * window.innerWidth;
    var toppx = percY * window.innerHeight;
    var hintDiv = document.createElement('div');
    hintDiv.innerHTML = text;
    hintDiv.id = 'infoHint';
    var quater = getQuater(leftpx, toppx);

    hintDiv.style.left = leftpx + 10 + 'px';
    hintDiv.style.bottom = window.innerHeight - toppx + 'px';

    if (color) {
        hintDiv.style.background = color;
    }
    $("#webGL_container").append(hintDiv);
}

function getQuater(left, top) {
    var wh = window.innerWidth/2;
    var hh = window.innerHeight/2;
    if (left < wh && top < hh) {
        return 1;
    }
}