[FEATURE] Moving camera about angular-three HOT 7 CLOSED

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.

from angular-three.

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

from angular-three.

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.

from angular-three.

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

from angular-three.

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

from angular-three.

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

from angular-three.

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.

from angular-three.