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

Question

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

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

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

我需要一个网站，可以是一个 WordPress 来管理数据(成员可以输入描述、网址等数据来表示他们在地球上的情况)。该网站上方有一个菜单，下方有一个 webGL 地球仪，然后是新闻和事件部分、赞助商图片库和页脚。

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

网络必须有一个搜索引擎来按成员或部门进行搜索，并且当选择成员时，地球仪会旋转到成员位置。

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

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

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

我不知道如何从数据库读取，获取点击点的 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);

使用基本的 jQuery json 和 GET 数据，在 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);

聆听 Canvas 上的点击(三个 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
  }
 }
}