Interacting with a WebGL globe: accessing database information and displaying pop-up windows when clicking on specific locations on the globe

Question

Interacting with a WebGL globe: accessing database information and displaying pop-up windows when clicking on specific locations on the globe

I am working on creating a WebGL Globe similar to the one found at this link:

Currently, I have been using this example as a reference point:

Here are the specific project requirements that I am aiming to achieve:

The website needs to be able to manage data, allowing members to input information such as descriptions, URLs, and more for their representation on the globe. The layout should consist of a menu bar above, followed by the WebGL globe, news and events section, an image gallery of sponsors, and a footer.

The globe should display points representing the data entered by members through a data manager. Upon clicking on these points, an information panel (div popup) will appear showing the details and links of the selected member.

A search engine feature is necessary to enable searching by member or sector. When a member is selected, the globe should automatically rotate to their position.

Each member profile should include a title, description, address, links to social networks, and a photo gallery that is accessible through the globe panel when clicked on.

I have already created a PHP form for entering member information into a database. This PHP file also updates a JSON file containing the lat/lon coordinates of the dots displayed on the globe, which is then read by the JavaScript file in the example.

My main challenge lies in implementing a popup window feature. The script for opening windows in the previous example is written in JavaScript and loaded by the main webpage.

I am uncertain about how to retrieve data from the database, obtain the ID of a clicked spot, and pass this information back to the main webpage with the WebGL globe. Alternatively, I am exploring options for passing only the ID and having the globe retrieve the information from the database using JavaScript.

In addition, I need to extract data from a JSON or similar file and enable users to click on each point to view detailed information.

Furthermore, I aim to capture events such as clicking on objects that orbit the globe and show the same information panel. Additionally, I want these objects to continue rotating along the Z-axis around the globe as it is manually rotated with the mouse.

If anyone can provide assistance, even just addressing a portion of this complex question, I would greatly appreciate it. I feel stuck at this stage of development.

Thank you immensely for any help offered.

Current Status: https://i.sstatic.net/Qs4eG.jpg Desired Outcome: https://i.sstatic.net/OxreZ.jpg

javascript json three.js webgl-globe

Answer 1

Answer №1

Start by assigning data to each of the THREE objects that you want to be clickable in order to retrieve information from the database. Let's assume we create an object and add it 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);

Then, place the object within the 3D scene

scene.add(clickable_object);

You can use basic jQuery JSON with GET method to fetch data. In PHP, perform authentication, database login, query, etc., and return the result as text in JSON format using echo json_encode(array() $my_result).

function getDBdata(id) {
    $.getJSON('y_folder/my_script_with_dbquery.php?i_need_row_id='+id, //Retrieve $_GET['i_need_row_id'] from the URL used to call this script.
      function(r) {     
        // Access the "r" returned data (JSON encoded $my_result array) to display in a popup window
        $('#my_div_id').html('<p>This is my database content with '+r.some_variable_form_json_returned_by_php_script+'.</p;')
      }           
    )
}

To trigger the function and obtain the appropriate ID of the 3D object you click on, simply click on an object in the 3D scene to execute getDBdata(id);

Listen for clicks on the 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); // Determine the intersection point
  var id = i.object.my_data.id // Ensure that the ID is assigned to the object initially (as mentioned earlier)
  if(id>0) {
    getDBdata(id) // Display the popup with actual data from the database
  }
 }
}

Answer 2

Start by assigning data to each of the THREE objects that you want to be clickable in order to retrieve information from the database. Let's assume we create an object and add it 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);

Then, place the object within the 3D scene

scene.add(clickable_object);

You can use basic jQuery JSON with GET method to fetch data. In PHP, perform authentication, database login, query, etc., and return the result as text in JSON format using echo json_encode(array() $my_result).

function getDBdata(id) {
    $.getJSON('y_folder/my_script_with_dbquery.php?i_need_row_id='+id, //Retrieve $_GET['i_need_row_id'] from the URL used to call this script.
      function(r) {     
        // Access the "r" returned data (JSON encoded $my_result array) to display in a popup window
        $('#my_div_id').html('<p>This is my database content with '+r.some_variable_form_json_returned_by_php_script+'.</p;')
      }           
    )
}

To trigger the function and obtain the appropriate ID of the 3D object you click on, simply click on an object in the 3D scene to execute getDBdata(id);

Listen for clicks on the 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); // Determine the intersection point
  var id = i.object.my_data.id // Ensure that the ID is assigned to the object initially (as mentioned earlier)
  if(id>0) {
    getDBdata(id) // Display the popup with actual data from the database
  }
 }
}

Interacting with a WebGL globe: accessing database information and displaying pop-up windows when clicking on specific locations on the globe

Answer №1

Similar questions

updating a div with URL redirection instead of global redirect

Decoding a nested JSON array in C#

Typescript is experiencing an error due to the use of attr("disabled", false) causing a disruption

What is causing the lack of response in the select box on Mac Chrome when I try to click on it?

Checkbox value not being accurately retrieved by Struts2 page

Firebug detected an error with the regular expression flag "h" after executing the YUI Compressor

Having difficulty automatically populating a textarea with the chosen option from a datalist

Retrieving the final element from a TypeScript JSON array

Unable to successfully display AJAX data on success

Error occurred while trying to call android.app.Service() without any arguments provided

If the key is not found in the JSON data, assign a value of null and add it to the

When launching JQuery UI Tabs in a new browser tab using ajax, the HTML from the ajax response will be immediately shown

Everything was working perfectly with the Javascript code until I attempted to encapsulate it within

Unable to access the "target" property while transferring a value from child to parent component

Triggering the AJAX function in the main window

Utilizing i18n's useTranslation and Redux's connect Higher Order Components to export components efficiently

Unusual increase in the Date() function hour on March 12, 2017

Use CredentialsProvider to enable Next Auth login functionality

The property 'body' cannot be read because it is undefined

Making sure to consistently utilize the service API each time the form control is reset within Angular 4