Обновление точек обзора камеры в 3d.io

Question

Я сделал сортируемое меню пунктов тура камеры (только jquery)

<a-entity id='cameraTour' camera tour='autoStart:false' position='21 12 -15' rotation='-35 30 0' style='display:none;'>
  <a-entity class='cameraTourPoint' tour-waypoint='Front View' io3d-uuid='frontView' position='2 10 -13' rotation='-25 0 -1.5'></a-entity>
  <a-entity class='cameraTourPoint' tour-waypoint='North Side View' io3d-uuid='northSideView' position='-25 8 -42' rotation='-45 -93 -1'></a-entity>
  <a-entity class='cameraTourPoint' tour-waypoint='South Exit' io3d-uuid='southExit' position='24 -.8 -37.7' rotation='-2 -90 0'></a-entity>
  <a-entity class='cameraTourPoint' tour-waypoint='South Angle View' io3d-uuid='southAngleView' position='21 12 -15' rotation='-35 30 0'></a-entity>
</a-entity>

Для смены точек камеры и пунктов меню я использую функции манипулирования DOM, как здесь:

var el = document.getElementsByClassName('cameraTourPoint')[currentItemIndex],
    elBefore = document.getElementsByClassName('cameraTourPoint')[currentItemIndex+1];
document.getElementById('cameraTour').insertBefore(el,elBefore.nextSibling);

Для добавления новой точки пути я сделал это:

var cameraTourPoint = document.createElement('a-entity'),
    cameraPointAttributes = {
      "id": generatePointId(),
      "class": "cameraTourPoint",
      "tour-waypoint": "CLEAR POINT",
      "io3d-uuid": "clearPoint",
      "position": function() {},
      "rotation": ""
    },
    lastChild = document.getElementById('cameraTour').lastChild;

document.getElementById('cameraTour').insertBefore(cameraTourPoint,lastChild.nextSibling);
var clearPoint = document.getElementById('cameraTour').lastChild;
$.each(cameraPointAttributes,function(key,value){
  clearPoint.setAttribute(key,value);
});

но это не работает! после смены камеры, я хочу изменить порядок, и когда я добавляю новую точку и пытаюсь перейти к нему "onclick", я получаю это сообщение:

tour.js: 80 Указанная путевая точка clearPoint не существует. Доступные путевые точки: (4) ["frontView", "northSideView", "southExit", "southAngleView"]

Итак, как я могу обновить баллы тура после замены или добавления новой точки?

кадр 0.8.0
3d.io 1.1.x
aframe-animation-component 3.2.5

Answer 1

Вероятно, вы забыли обновить компонент тура, взгляните на источник https://github.com/archilogic-com/3dio-js/blob/master/src/aframe/component/tour.js

и, возможно, вы не дождались создания нового элемента путевой точки https://aframe.io/docs/0.7.0/core/entity.html

это работает:

var cameraTourPoint = document.createElement('a-entity'),
cameraPointAttributes = {
  "id": 'asd',
  "class": "cameraTourPoint",
  "tour-waypoint": "CLEAR POINT",
  "io3d-uuid": "clearPoint",
  "position": "-5 2 0",
  "rotation": "0 0 0"
},
cameraEl = document.querySelector('[camera]'),
lastChild = cameraEl.lastChild;

cameraEl.insertBefore(cameraTourPoint,lastChild.nextSibling);
var clearPoint = cameraEl.lastChild;
$.each(cameraPointAttributes,function(key,value){
  clearPoint.setAttribute(key,value);
});
// the waypoint dom element needs to be created
clearPoint.addEventListener('loaded', () => {
  // update the tour component
  cameraEl.components['tour'].update()
  // move to target
  cameraEl.components['tour'].goTo('clearPoint')
}, 100)