0

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

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

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

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

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

网络必须有一个搜索引擎来按成员或部门搜索，当一个成员被选中时，地球会旋转到该成员的位置。

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

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

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

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

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

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

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

太感谢了。

我有 我有 我想要 的我想要的

4

1 回答 1

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
  }
 }
}
于 2018-10-24T15:33:58.443 回答