Цикл массива и добавление объекта в сцену для каждой записи добавляет объекты в одну и ту же позицию - PullRequest
1 голос
/ 25 сентября 2019

Я пытаюсь добавить объект в мою сцену three.js для каждого элемента в массиве.Я не могу сказать, все ли объекты добавляются в сцену, потому что они добавляют в одну и ту же позицию, и я не могу понять, как изменить положение каждого объекта.

Вот код зацикливания и добавления куба для каждого элемента в массиве:

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );

getData()
async function getData() {
    const response = await fetch('/api/indexvr');
    const data = await response.json();
    console.log(data)

    for (var i=0; i<data.length; i++) {
        try {
        scene.add( cube );
        // cube.position.y = i //1++
        } catch (e) {
            console.error(e)
        }
    }
}   

camera.position.z = 5;

Я также пытался объявить кубы и их положение в цикле for, но этого не произошлоработать тоже.Мне нужно, чтобы все объекты были видимыми и чтобы их положение было динамичным в зависимости от количества в массиве, например, что-то вроде круга вокруг камеры и, если их больше 10/15, увеличьте ось y на 4 ипродолжить круг снова ... Я не могу понять, как или найти документацию, чтобы помочь.Любые идеи или ссылки, чтобы помочь?Заранее спасибо.

РЕДАКТИРОВАТЬ: кубы теперь выглядят так с кодом, полученным от Mugen87.enter image description here

1 Ответ

2 голосов
/ 25 сентября 2019

Попробуйте так (реализует обратную связь, если @gman):

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );

getData()
async function getData() {
    const response = await fetch('/api/indexvr');
    const data = await response.json();
    console.log(data)

    for (var i=0; i<data.length; i++) {

        var cube = new THREE.Mesh( geometry, material );
        cube.position.y = i;
        scene.add( cube );

    }
}   

camera.position.z = 5;
...