WebGL 地球：如何从数据库中获取数据并在单击地球点时在地球上显示弹出窗口

Question

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

我已经开始使用这个例子： http://foreverbell.github.io/steps/

让我解释一下我正在尝试做的项目的细节：

我需要一个网站，可以是一个 Wordpress 来管理数据（会员可以输入描述、网址等数据，以便在全球范围内表示他们）。该网站的上方有一个菜单，下方是 webGL 中的地球仪，然后是新闻和活动部分、赞助商图片库和页脚。

地球将显示代表成员从数据管理器输入的数据的点。当点击它们时，一个信息面板（div popup）将显示所选成员的数据和链接。

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.

成员必须有标题、描述、地址和社交网络链接以及点击时显示在地球面板中的照片库。

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

我需要显示一个弹出窗口，但我不知道该怎么做，因为在我之前展示的示例中打开窗口的脚本是 javascript，它由主网络加载。

我不知道如何从 DB 中读取、获取点击点的 ID 并将信息传递到具有 webgl 地球的主网络，或者我如何只传递 ID 并从地球获取信息使用 javascript 的数据库...：/

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

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

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

非常感谢。

我有 我想要的

Answer 1

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

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 格式的文本返回结果，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>')
      }           
    )
}

您需要在 3D 场景中点击一个对象来调用函数并获得您点击的 3D 对象的足够 ID 以调用 getDBdata(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
  }
 }
}