Рандомайзер х Web AR x JavaScript x AR.js x A-Frame

Question

Рандомайзер х Web AR x JavaScript x AR.js x A-Frame

Alexandra Ученик (228), на голосовании 1 год назад

Требуется помощь в дополнении алгоритма:
Рандомайзер (Web). Имеется N-ное количество моделей в формате GLTF (например 10). При сканировании метки необходимо рандомно отобразить одну из общего количества моделей.
Предоставлю сам скрипт (в моем случае реализовано посредством библиотеки AR.js) благодаря которому при сканировании метки подгружается модель. Все что мне нужно - дополнить скрипт рандомайзером. Чтобы во время очередного сканирования метки - модель подгружалась не по порядку, а хаотично. Среди имеющихся 10 - отображалась какая-то из. Фактически - сгенерировать случайное имя одной из моделей (среди имеющихся). Для каждой модели GLTF можно присвоить имена например, по типу: "1", "2", "3" и т.д. И использовать Math.random. Сгенерировать рандомное целое число в нужном диапазоне и таким способом объединив мой алгоритм сделать вывод необходимой модели среди общего списка.
Благодарю за обратную связь!

Answer 1

Для реализации рандомайзера с использованием AR.js, A-Frame и JavaScript, вы можете следовать следующим шагам:
1. Создайте массив с именами ваших GLTF-моделей. В этом примере имена моделей будут '1.gltf', '2.gltf', '3.gltf' и т.д.

 const modelNames = ['1.gltf', '2.gltf', '3.gltf', '4.gltf', '5.gltf', '6.gltf', '7.gltf', '8.gltf', '9.gltf', '10.gltf'];

2. Создайте функцию для генерации случайного числа в заданном диапазоне:

 function getRandomInt(min, max) { 
  min = Math.ceil(min); 
  max = Math.floor(max); 
  return Math.floor(Math.random() * (max - min + 1)) + min; 
}

3. Создайте функцию для загрузки случайной модели из массива modelNames:

 function loadRandomModel() { 
  const randomIndex = getRandomInt(0, modelNames.length - 1); 
  const randomModelName = modelNames[randomIndex]; 
  const entity = document.querySelector('a-entity'); 
 
  entity.setAttribute('gltf-model', `url(${randomModelName})`); 
}

4. Ваш HTML-код с меткой и сущностью A-Frame должен выглядеть примерно так:

5. Теперь вам нужно вызвать функцию loadRandomModel каждый раз, когда метка обнаруживается. Для этого используйте событие markerFound:

 document.querySelector('a-marker').addEventListener('markerFound', () => { 
  loadRandomModel(); 
});

Объединив все части, ваш полный код будет выглядеть так: