Глобус WebGL: как получить данные из базы данных и показать всплывающее окно по всему миру, когда вы щелкнете по глобусу

Question

Мне нужно сделать 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, и он загружается основной сетью.

Я не знаю, как читать из БД, получить де-идентификатор кликаемого места и передать информацию в основной веб-сайт, имеющий глобус webgl, или как я могу передать только идентификатор и пароль?lobe получить информацию из БД, используя 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 вы выполняете аутентификацию dbлогин, запрос и т. д. ... и возвращать результат в виде текста в формате 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-сцене, чтобы вызвать функцию и получитьадекватный идентификатор 3D-объекта, который вы нажимаете, чтобы вызвать 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
  }
 }
}