Camera control similar to Blender or Sketchfab

Hey!

I’ve decided to start learning WebGL for an app I have in mind and I’m kinda torn between threejs and babylonjs. I’ll need to be able to have fine orbiting camera controls with dynamic reference/center points, since the app will be used to inspect architecture scans taken via 3d photogrammetry, and it’s not alway viable to rotate the entire scene around the model’s center point.

Sketchfab seems to do this wonderfully: Valdebárzana Church, 12th century - Asturias - 3D model by Raiz (@RaizVR) [d63e000] - Sketchfab I don’t completely understand what’s being done here but it feels like at the same time I can orbit around the center, move around like in a game and doubleclick to focus and orbit around a specific point in the mesh.

Since I want to start with one framework and not dabble with both simultaneously, I went over all the demos and examples to see which would be a better fit. A heads up: I’ve got zero 3D experience except for a few hours in Blender.

The thing I noticed that I liked far more in threejs projects and examples is the camera control for fine navigation. It feels snappy and proportional, much like Blender. On the other hand, bablyon’s feels off, no matter which demo I’ve tried. I’ve tried playing with the camera code in the playground but I’m missing a lot of basics to understand what I’m doing. So, sorry if all of this sounds a bit misguided and that I’m missing basics, because I actually am :slight_smile:

Some of the things I’ve noticed about babylonjs’ camera:

  • There is a lot of interpolation going on when orbiting and when zooming, with a weird acceleration curve. I couldn’t find any option to tweak the tween duration or the curve.
  • Disabling the acceleration makes the camera become either too responsive, or unresponsive when panning and orbiting.
  • Zooming in seems to accelerate the closer you are to the center of the scene in some examples, making it impossible to make fine adjustments, or in some examples it deccelerates getting you “stuck” in the max zoom level. In threejs and in Blender the zoom feels proportional to the current zoom level.
  • Panning the camera feels unresponsive in most examples
  • I haven’t seen an option where it’s possible to zoom in on the cursor’s position, or orbit around the current selection, but I guess this is possible to do programatically.

So the question here is — am I likely to hit a wall with babylonjs (or threejs for that matter) when it comes to implementing camera controls?

Hi @baxuz and welcome to the forum. Though they might not fully solve your issue here are some of my thoughts from similar problems that have been discussed before.

From animated camera paths these playgrounds may be useful https://www.babylonjs-playground.com/#SQFG0Q#12 move camera as car follows track (note small radius for camera); https://www.babylonjs-playground.com/#DXE1CV#1 click on box to move to different place. See also track building

Animate camera along a curved path

Others forum users will bring their expertise to help soon, I am sure.

What about this PG I created for you: Babylon.js Playground (for proportional zooming for instance)

We may need more precise or elaborate explanation of what seems off to you so we can point you to the right parameter

Thanks for the playground @Deltakosh!

I’ll try to be more precise. In the playground you sent me it is possible to zoom in until nothing is visible. I’m not sure what’s going on at that point, since I can’t see the camera behaviour from another angle, but you can get it “stuck” in that point. I guess that I was dollying the camera by increasingly smaller fractional amounts. For instance if I were to scroll 1000 mousewheel ticks into the geometry, and not seeing any changes for 800+ of them, it would take me 800 mousewheel ticks to “get out” of it.

I’ve also tried playing with the camera properties in the inspector:
image
Only the delta percentage seems to do anything. Setting it to 0 makes me enter hyperspace and see a mirror dimension :joy:

In Blender, once you hit a certain treshold to the center point of rotation, it’s done, you can’t zoom in further (not talking about colliding with another mesh, you can still clip through). This is a behaviour I’d like to implement.

Another behaviour I like is what SketchFab does.
It seems that when dollying the camera through the rotation center, you can keep going and actually turn around. Not sure what’s happening there.

PS:
I tried the examples in the sandbox (which are really hard to find. There’s just an incospicuous document stack icon in the top right)
The camera example doesn’t seem to be working properly. Changing scene.activeCamera to the other cams just breaks it.

I do not repro. Can you share a Playground? (You can also change the active camera from the inspector).

Examples are also on the doc: Babylon.js Documentation

To limit the camera on the radius you can set camera.lowerRadiusLimit / upperRadiusLimit: https://www.babylonjs-playground.com/#XVW3U5#1

it works as well for alpha and beta angles

@baxuz You might want to check out this feature request: Addition of Camera type that matches 3D applications