WebGL Globe：如何在单击Globe Spot时从数据库获取数据并在Globe上显示弹出式窗口

Question

我需要像这样制作一个WebGL Globe： https://trends.google.com/trends/zeitgeist/2013/globe#frame=314

我已经开始使用以下示例： http://foreverbell.github.io/steps/

让我解释一下我要做的项目的详细信息：

我需要一个网站，可以是一个Wordpress来管理数据（成员可以输入描述，URL之类的数据来表示其在全球范围内的表示形式）。该网站的菜单在webGL的上方，下方，然后是新闻和事件部分，赞助商图片库和页脚。

地球仪将显示代表成员从数据管理器输入的数据的点。单击它们时，信息面板（div弹出窗口）将显示所选成员的数据和链接。

网络必须具有搜索引擎，才能按成员或部门进行搜索，并且当选定成员时，地球仪将旋转到成员位置。

会员必须具有标题，描述，地址，指向社交网络的链接以及单击时会在Globe面板中显示的图片库。

我制作了一个php表单，将成员信息插入数据库，然后同一PHP文件更新JSON文件，该文件具有地球上显示的点的信息（纬度/经度），由的javascript文件读取例子。

我需要显示一个弹出窗口，但我不知道该怎么办，因为在我之前显示的示例中，打开窗口的脚本是javascript，并由主网站加载。 < / p>

我不知道如何从数据库中读取数据，获取点击位置的ID并将信息传递给具有webgl globe的主网站，或者我如何仅传递ID和globe来获取信息数据库使用javascript ...：/

我需要从json或类似文件中获取数据，并且能够单击每个点以显示信息。

我还需要捕获单击围绕地球旋转并显示相同信息面板的对象的事件，并且当我用鼠标旋转地球时，对象将始终绕着地球的Z轴继续旋转。 / strong>

请问有人可以帮助我吗？ （至少是大问题的一部分）我被困住了。

非常感谢。

我有 我想要的

Answer 1

首先，您需要将要单击数据的每个三个对象设置为调用真实数据库。 可以说我们创建对象并传递给clickable数组

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);

并将其放到3D场景中

scene.add(clickable_object);

使用具有GET数据的基本jQuery json，在PHP中执行身份验证数据库登录，查询等...，并以JSON格式的文本形式返回结果，回显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>')
      }           
    )
}

您需要在3D场景中单击一个对象以调用函数，并获取要单击以调用getDBdata（id）的3D对象的足够ID；

收听以单击画布（三个3D场景）：

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
  }
 }
}