Camera tour points refresh in 3d.io

Question

I made sortable menu of camera tour points (only 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>

For swap the camera points and menu's items i use dom manipulation functions like here:

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

For add new way-point i made this:

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);
});

but it's not working! after swap cameraTour i want to change order and when i add new point, and trying to go to him 'onclick', i get this message:

tour.js:80 The given waypoint clearPoint does not exist. Available waypoints: (4) ["frontView", "northSideView", "southExit", "southAngleView"]

So, how can I refresh tour points after swapping or adding new point?

aframe 0.8.0
3d.io 1.1.x
aframe-animation-component 3.2.5

a-frame-animation-component 3.2.5 should be used with the corresponding aframe version 0.7.x — Frederic, Jun 20 '18 at 11:18
wow! thanks! it's alive! but model is lost... (dl from archilogic) — ghett, Jun 20 '18 at 11:45

score 2 · Accepted Answer · answered Jun 20 '18 at 11:43

2

probably you forgot to update the tour component take a look at the source https://github.com/archilogic-com/3dio-js/blob/master/src/aframe/component/tour.js

and maybe you didn't wait for the new waypoint element to be created https://aframe.io/docs/0.7.0/core/entity.html#events

this works:

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)

answered Jun 20 '18 at 11:43

Frederic

326
1
5

aha, my model was without .*, only name, now it;s ok! looks like points works fine without w8ing, i will check tour.update(). Sir, plz, tell me, how i can catch end of move to not:last-child way-point, if i wan't to change camera's settings on end of some way-point move from '.label. click? – ghett Jun 20 '18 at 12:03
please check out the aframe-animation-component documentation https://github.com/ngokevin/kframe/blob/5a5112edaf33a74dd5963a33a9b96697def39243/components/animation/README.md#events this component has custom events on animation start and end – Frederic Jun 20 '18 at 12:55
this is how it is used in the tour component: https://github.com/archilogic-com/3dio-js/blob/master/src/aframe/component/tour.js#L135 – Frederic Jun 20 '18 at 12:56
okay, master, i can't catch data from tour.js and i need to duplicate calculations of way-time for setTimeout? – ghett Jun 20 '18 at 15:12
you need to catch the proper events according to how the underlying aframe-animation-component works – Frederic Jun 23 '18 at 12:53
unfortunately, my skill not so hight, so, in my solution i have duplicate of "t" calculations. – ghett Jun 23 '18 at 13:11
start simple by using aframe-animation-component without 3dio.js and take a look at the examples they provide - if you figured out how that works in detail you can move on. you can also join the a-frame slack channel. it's a great resource for learning the core concepts of a-frame – Frederic Jun 23 '18 at 13:18
now, I'm on probation, my task is to master the tour and the inspector. We already have deadline, so I will definitely return to the basics at the first opportunity. I care about the implementation of an aframe in the context of an enity-component system. How does it work, attributes are the components of the entity? So, is there a render system like in the game? – ghett Jun 23 '18 at 13:23

Camera tour points refresh in 3d.io

1 Answers1