Trying to animate camera zoom while looking at an object

Questions
1

I am trying to animate a camera zoom to a location while looking at an object.

I have been working on this problem for a few days now. My first test was to create a coneGeo and animate that to the location I wanted so I can visually see if my math works. It works.

I start for the camera’s position and use CubucBezierCurve3 to plot a path to follow. I use LineCurve3 to create a smooth lookAt.

        let loc = hex.loc
    loc.y = hex.height - 40
    let camera = this.camera.curObj
    let start = camera.position
    let c0 = new THREE.Vector3(loc.x, loc.y + 50, loc.z)
    let c1 = new THREE.Vector3(loc.x, loc.y + 10, loc.z)
    let end = new THREE.Vector3(loc.x, loc.y, loc.z)
    let curve = new THREE.CubicBezierCurve3(start, c0, c1, end)
    let pts = curve.getSpacedPoints(6)

    let look = new THREE.LineCurve3(start, end)
    let lks = look.getSpacedPoints(6)

I then create a setInterval routine to “animate” the movement. each time the position and look at changes

    let loc = lookPath[idx]
    ptr.lookAt(loc.x, loc.y, loc.z)
    let whr = camPath[idx]
    ptr.position.set(whr.x, whr.y, whr.z)
    idx += 1
    self.render.animate()

The cone wirk just fine but when I try it with the camera, lookAt always looks at 0, 0, 0 and the final position is much different that what I set it at

I verify both visually and math

`  console.log('REN', this.camera.curObj.position)
  this.curObj.render(this.scene.curObj, this.camera.curObj)

`
I disable orbit controls before I start this operation.

1> First, How do I printout what the camera is really looking at? getWorldDirection returns NaN, NaN, NaN
2> Second, What can I do to debug this problem? I am lost

2

Maybe this three.js example helps you further: https://threejs.org/examples/#webgl_geometry_extrude_splines

Activate the checkboxes of the camera section to see how the camera is animated along the curve. The corresponding code might give you some ideas how to solve your problem.

3

Yes that is what I want. I will need to study it more to really understand it. Here is another followup question. I am updating the camera in a set interval function then calling the render. Or do I need to do the math inside the render function?

which is better

animate () {
requestAnimationFrame( render )
}
or
animate () {
requestAnimationFrame( animate )
render()
}

the first only renders during a change, the second always is animating

4

Do it like in the example. The update of the camera animation happens inside .render().

function animate() {

   requestAnimationFrame( animate );
   render();

}
5

I understand most of the example. I have been having performance issues with requestAnimationFrame( animate );
that is why I went to the other. In the example the lookat is a continuous loop. with mine I need to start and stop.
I have a Vue container wrapper around every three object. the true threejs object is curObj
This is where is get confused.
Below is the code path of moving the camera and lookAt. I need to execute zoomStep every N millisceonds and at the end I need the camera to create a view that I match a animated SVG while I redraw 3D field. I will have a new demo at taxnvote.org today.

is lookAt is a absolute point or a vector direction?
How do I time the zoomStep?

render () {
  if (this.orbit) {
    this.orbit.animate()  //  which is this.curObj.update() in the orbit container
  }
  if (this.wormhole) {
    this.wormhole.update(this.camera.curObj)
  }
  this.renderer.curObj.render(this.scene.curObj, this.camera.curObj)
}

update (camera) {
  if (this.cnt >= 0) {

// this.zoomStep(this.cnt, this.pts, this.lks, camera) // broken now
this.cnt -= 1
}
}

zoomStep (cnt, camPath, lookPath, camera) {
  let loc = lookPath
  let whr = camPath[cnt]
  camera.up = new THREE.Vector3(0, 1, 0)
  camera.lookAt(new THREE.Vector3(loc.x, loc.y, loc.z))
  camera.position.set(whr.x, whr.y, whr.z)
},