Chaining a sequence of POIs

[acycliq]

That's a really nice toolkit, thanks for sharing it. I have some predetermined points on my scene and my camera goes through them using the StoryPointControls schema. Is there a way to chain-up all POIs and transition the camera between these POIs without user intervention (no mouse or keyboard) please? I want to record a short movie of my project for a demo. Thanks

[noisyneuron]

Hi @acycliq! While the library doesn't provide an explicit way to do this, you can use the nextPOI and prevPOI functions to programmatically transition between points. Calling these functions with timeouts should give you what you're looking for. (The demo calls these functions in response to click events, but that's not necessary)

For eg, to start at the first POI, followed by a 3s transition to POI no.2, followed by a 4s transition to POI no.3 :

controls.goToPOI(0)
setTimeout( controls.nextPOI, 3000)
setTimeout( controls.nextPOI, 7000)

(the timing is cumulative) Let me know if that works for your use-case or if you run into any issues with that

[acycliq]

Thanks for your prompt reply. For some reason I couldnt make it work. It does execute the first call (controls.goToPOI(0)) and then my screen turns black. Pretty weird, it must be something specific to my project I guess. I also tried to do it with a promise, like:

async function flyToPOI(num){
    controls.goToPOI(num)
}

flyToPOI(0).then(()=>flyToPOI(1)).then(()=>console.log('All done'))

but i get almost the same unsuccessful results.

I ended-up doing it by the manual way, using the arrows keys while recording the scene

Thanks anyway

[noisyneuron]

Hey @acycliq , that's odd as I'm assuming your manual approach would also call controls.goToPOI(0) at some point? Are you using ThreeDOFControls along with StoryPointControls ? If possible, it would be great to see a bit of code to understand what the issue might be -- quite possibly could be a bug in the library :)

Thanks!

[acycliq]

Hmm, no I am not actually using ThreeDOFControls I guess I should, shouldnt I?? The main piece of code relating to the animation is between this line and that one. The animation itself is here. I recorded that while using the keyboard arrows keys.

My code is kinda messy, let me know if you want me to clarify anything. Many thanks for this amazing tool!

[noisyneuron]

Hey @acycliq! Figured out the issue - it was in the code example I shared 😅

setTimeout( controls.nextPOI, 3000) would imply that this is the window object when controls.nextPOI is called - which is what leads to the error. The correct way to do this would be setTimeout( () => controls.nextPOI(), 3000) !

Sorry for that oversight! Closing this out :)

Also, ThreeDOFControls isn't required - it just allows the user to slightly move the camera around with their mouse - but for recording a video it's absolutely not required :) Was just wondering if that might be the source of the issue

[acycliq]

Great! many thanks for looking into this. No idea why my promise also failed, but it doesnt matter now anyway,,,,

[noisyneuron]

Hey @acycliq

The async calls don't actually transform the function to a promise, instead one would do it like so - creating a new promise object that accepts a function as a parameter - and that function in turn has resolve and reject functions as parameters :

function goToPoint(point, delay) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      controls.goToPOI(point)
      resolve()
    }, delay)
  })
}

goToPoint(0, 0)
  .then(() => goToPoint(1, 2000))
  .then(() => goToPoint(2, 2000))

[acycliq]

Oh! That was totally beyond me! Many thanks it is extremely helpful, I will digest it so that I get a better understanding on the async/promise topic.