[FEATURE] Moving camera

[BenLune]

Is your feature request related to a problem? Please describe.
I would like to move the camera. I tried several approaches but I didn't find the right way to do it.

Describe the solution you'd like
I tried to update the position value in the [camera] @input of the ngt-canvas without success.
I tried to create a like that :
<ngt-perspective-camera #camera='ngtPerspectiveCamera' [args]='[40]'>

and attach it to ngt-canvas like that :
[camera]='camera.camera'

And trying in my component to translateX(myValue) the camera thanks to @ViewChild reference, but it doesn't work neither.

I tried also to create a 'CameraControllerDirective' to get the camera thanks to NgtCanvasInputsStore. I can retrieve the camera, but the translateX(myValue) doesn't work too.

[nartc]

What is translateX that you're talking about? Can you provide some example? (in vanilla THREE.js is fine)

[BenLune]

Hi Chau,
translateX is a common function in Object3D ThreeJS class :
https://github.com/mrdoob/three.js/blob/342946c8392639028da439b6dc0597e58209c696/src/core/Object3D.js#L225

PerspectiveCamera extends Camera extends Object3D

Even if I update the camera position properties with a Vector3D I don't see the update on the scene.
I'll go deeper in your code to understand it better. Maybe it would be great to have an example with two buttons moving the camera on click.

[BenLune]

Ok, I found a way to do it. I updated my CameraControllerDirective.
Rather than checking the NgtCanvasInputsStore (I used the cameraOptions$ Observable), I check NgtStore and I retrieve the camera$ Observable instead, and it works well.

Initially, I want to use the NgtStore inside my main component (which creates the NgtCanvas), but I had a Provider error, which is normal, while I'm not in the NgtCanvas context yet. That's why I wanted to create a Camera Controller Directive.
This directive will be able to listen for state or route change, in a way or another, to update the camera position.

This way :

@Directive({
  selector: 'camera-controller'
})
export class CameraControllerDirective {

  constructor(
    private store: NgtStore
  ) {
    this.store.selectors.camera$
      .subscribe(camera => {
        if (camera) {
          camera.translateX(20);
        }
      });
  }

}

I'll add greensock in my project to update smoothly the position.

I you want I can create a simple new example in angular-three to show how to update camera position.

[nartc]

Nice! Go for it. Check out the demo to see how you can work with a demo and get a story going for it. I'd love to see it

[BenLune]

What do you think if I add greensock as a dependency to get animated things ?

[nartc]

if you add it to the root package.json, it will be added as a dependency to the monorepo which is fine. Only the demo app uses it right? The libraries' package.json should keep clean.

Now, the thing with greensock, I've been evaluating whether to use greensock or popmotion to support spring animation to Angular Three. Maybe you have better experience in this space than mine :D What do you think? We can make a new issue/discussion to discuss that piece

[BenLune]

Yes I plan to use it only in the demo app.
I know Greensock very well, I use it since years while I was working with Flash/Flex, on Real Time 3D projects too (an example, 2011, YouTube screen capture), with Stage3D. I didn't try to use popmotion yet but Greensock allows to do huge things.
I think the animation lib choice is up to the final user. Maybe we could get some examples with greensock, others with a challenger.