How to control the camera to achieve this slanted 3D view

Questions
1

Hello everyone, how do I control the camera to achieve this slanted 3D view when it’s close to the ground, like Google Maps does in the video

2

You can use Orbit controls, by moving the position of the area of interest to (0,0,0). You can prevent the camera from crashing through the terrain by making the terrain level at rotation (0,0,0) and limiting the minimum height of the camera above the ground. See lines 138-140 of this example. (There may be better ways, but that is what I have used.)

If you need to have the camera look at areas of interest which are not (0,0,0) or with terrain rotations different than (0,0,0), you can easily create your own camera rotator. See, e.g., this example where the object happens to be at (0,0,0), but could be anywhere.

1 Like
3

Thanks. The effect I want is a 3D oblique view of the camera towards the spherical ground. The camera is not looking vertically at the ground, but at an Angle, and the mouse can control the camera to move on the ground at this Angle

4

There are actually two parts to the problem:

  1. Identifying the location of your point of interest on the globe.
  2. Moving the camera around that point of interest.

You might be able to use Orbit controls to address both parts of that problem.

For the first part, you could begin by setting the center of the sphere at the center position (0,0,0) and the camera z-distance at a value greater than the radius of the sphere. You could then use Orbit controls to rotate around the sphere to find your point of interest. When you are over your point of interest you could “dolly in” (using your mouse wheel) to a point that is just short of the radius of the sphere (Z). You can set the min/max distance for the dolly function.

Once you have reached this minimum height, you can have the user press a key to enter the second phase (or you can enter this phase automatically when the user reaches the minimum height). When you enter this phase, you would move the sphere center outwards by Z, which will move the center of rotation to the surface of the sphere [EDIT: You will probably have to also move it by some X and Y distance since Z will be directly ahead of you only at the prime meridian on the equator]. (Since Orbit controls moves around the center point, it should not move with the sphere.) Then you can use Orbit controls to move around your new center point. Ideally, you will be able to tell Orbit controls that you are at 90 degrees of latitude (looking straight down from the north pole) and to tell Orbit controls not to rotate below, say a latitude of 5 degrees (using minPolarAngle)

I know that Phase 1 will work. I have not tried Phase 2. If Orbit controls does not handle that, we can easily use a custom camera rotator to do the same thing.

If you are not familiar with how Orbit controls works, you can look at this example. Although this uses WebGPU, the Orbit controls should work the same for regular three.js. The official documents contain additional information on Orbit controls.

I like using Orbit controls were possible because you know it will always be supported by three.js.

5

There are MapControls ootb in three, they perform very similarly to the expected behaviour three.js webgl - map controls