Как применить данные из базы данных к интерактивным объектам Three.js - PullRequest
Новая
       4

Как применить данные из базы данных к интерактивным объектам Three.js

1 голос
/ 29 сентября 2019

Я пытаюсь отобразить объект для каждой записи в базе данных и прикрепить текст, такой как URL, заголовок и описание, к каждому объекту в зависимости от их относительных записей в базе данных.

Пока у меня есть куб для каждой записи в БД, отображаемой на сцене, однако данные регистрируются как неопределенные. Из того, что я вижу, мой код должен работать, но на самом деле это не так. 

  getData()

  async function getData() {
        try {
            var response = await fetch('/api/indexvr');
            var data = await response.json();


            for (var i = 0; i < data.length; i++) {
                cube = new THREE.Mesh(geometry, material.clone());
                cube.userData = {
                    id: data.id,
                    URL: `/vr/${data.id}/`,
                    title: data.title, 
                    description: data.description
                    };
                cube.position.x = i;
                scene.add(cube);
                console.log(cube.userData) 
                //group.add(data)
            }
        } catch (e) {
            console.error(e)
        }
  }

Выше приведен код для извлечения каждой записи в моей коллекции MongoDB (это список путей к файлам и таких данных, какзаголовок файла, описание и метки).

Из примеров, которые я нашел, похоже, что 'userData' - путь.

В настоящее время я могу наводить курсор на объекты, и они меняют цвет с помощью Raycasting. В будущем, когда я преодолею это препятствие, я создам способ видеть текстовые данные, такие как заголовок, когда объект находится над курсором, и приводить к URL при нажатии.

Я новичок в three.js, и это сбивает меня с толку.

1 Ответ

3 голосов
/ 30 сентября 2019

Я думаю, вы путаете структуру data. Иногда вы рассматриваете объект как объект, а иногда - как массив.

Например, если вы используете data.length в цикле for (), тогда data - это массив. Вы не можете получить доступ к .description или .title массива, но, возможно, вы можете получить к ним доступ внутри каждого элемента внутри массива с помощью: data[0].description, data[1].description и т. Д. 

// Create variable to make a reference
// to the current element while looping in the array
var arrayElement;

for (var i = 0; i < data.length; i++) {
    // Get the element for this iteration
    arrayElement = data[i];

    cube = new THREE.Mesh(geometry, material.clone());

    // Now you can acces the information in the current array element
    cube.userData = {
        id: arrayElement.id,
        URL: `/vr/${arrayElement.id}/`,
        title: arrayElement.title, 
        description: arrayElement.description
    };
    cube.position.x = i;
    scene.add(cube);
    console.log(cube.userData)
}
...