Control camera using mouse click and drag?

Questions
1

Hi, I am new at threejs, I want to built a city scene that using a Ortographic Camera, so it will look like an isometric view. So far what I already achieve is:

  • the camera view already in isometric
  • add a button to control camera using gsap animation to view a different portion of the city, I only change the x and y position of the camera

My question is:

  1. how can I move the camera freely with using click and drag function? The one I aim is like https://www.bruno-simon.com/ ,as you can see in that websitethe camera can be control by click and drag as well, is there any javascript library I can use to achieve it as well?

  2. how can i limit the click and drag (e.g to the edge of my .glb)?

Thanks

2

Take a look at the way this example is implemented. It’s a Orbit Control with a specific configuration that removes rotation. It might be all you need. There’s a relevant thread here as well.

In terms of limiting the movement of the camera, you could simply introduce a check in your animation loop so the camera is never outside a range you define?

Another option altogether would be to use an external library: Camera-controls by yomotsu has all you need and allows you to set boundaries as well.

1 Like
3

Hi @jacopocolo,The Camera-controls by yomotsu is the one I need, already implement it and everything work great with a complete documentation.

Thanks a lot!