WebGL globe: how to get data from db and show popup over globe when click globe spot

Question

I need to make a WebGL Globe like this: https://trends.google.com/trends/zeitgeist/2013/globe#frame=314

I've started using this example: http://foreverbell.github.io/steps/

Let me explain the details of the project I'm trying to do:

I need a website, can be a Wordpress to manage data (a member can enter data like description, url's, etc for their representation in a globe). The website has a menu above, below a globe in webGL, then a news and events section, image gallery of sponsors and a footer.

The globe will show points that represents the data entered by the members from a data manager. When clicking on them, an information panel (div popup) will show the data and links of the selected member.

The web must have a search engine to search by member or sector and when a member is selected, the globe rotate to the member position.

Members must have a title, description, address and links to social networks and a photo gallery that shows in the globe panel when click.

I've made a php form to insert member information into a DB and then the same PHP file update the JSON file that have the information (lat/lon) of the dots showed on globe, readed by the javascript file of the example.

I need to show a popup but I don't know how can I do it because the script that open window in the example I show before is javascript and it load by the main web.

I don't know how to read from DB, get de ID of clicked spot and pass the info to the main web that have the webgl globe, or how can I pass only ID an the globe get info from DB using javascript... :/

I need to get the data from a json or similar file and can be able to click on each point to show information.

I also need to capture the event for clicking objects that rotate around the globe and show the same information panel, and when I rotate the globe with the mouse the objects continue rotating always on Z axis around the globe.

Can anybody help me, please? (At least part of the big question) I'm stuck.

Thank you SO MUCH.

That I have That I want

Answer 1

First you need to set to each THREE object you want to click data for calling to the real database. Lets say we create object and pass to the clickable array

var clickable_objects = [];

var clickable_object = new THREE.Mesh( new THREE.IcosahedronGeometry( 1, 2 ), new THREE.MeshBasicMaterial()); 
    clickable_object.my_data = {'id':1};


clickable_objects.push(clickable_object);

and put it to the 3D scene

scene.add(clickable_object);

use basic jQuery json with GET data, in PHP you perform authentication db login,query etc... and return result as text in JSON format, echo json_encode(array() $my_result).

function getDBdata(id) {
    $.getJSON('y_folder/my_script_with_dbquery.php?i_need_row_id='+id, //You can $_GET['i_need_row_id'] from url you use for call this script.
      function(r) {     
        // there you get "r" which is returned data (json encoded $my_result array) as object you can use to show popup window
        $('#my_div_id').html('<p>This is my database content with '+r.some_variable_form_json_returned_by_php_script+'.</p>')
      }           
    )
}

You need to click on an object in 3D scene to call function and get adequate ID of 3D object you are clicking to call getDBdata(id);

listen to click on canvas (THREE 3D scene):

canvas.addEventListener( 'mouseup', onDocumentMouseUp, false );

function onDocumentMouseUp(event) {
event.preventDefault();
 if(event.which === 3)  { /// right mouse button
  var r = new THREE.Raycaster();
  r.setFromCamera( mouse, camera ); 
  var i = r.intersectObjects( clickable_objects, true); // your intersection
  var id = i.object.my_data.id // you need to set ID to object on start (i mentonied on start)
  if(id>0) {
    getDBdata(id) // this is your pupup with actual data from DB
  }
 }
}