How to switch between 2d and 3d scene mode

CesiumJS
1

I use viewer.scene.mode = Cesium.SceneMode.SCENE2D to switch from 3d to 2d,
and viewer.scene.mode = Cesium.SceneMode.SCENE3D to switch back. My scene in default is in 3d and I am able to switch to 2d, but not able to switch back afterwards. Any thoughts on this is appreciated!

2

Hi @yuhaoecopia,

I’d love to help, but I need more information. What does your code overall look like? Can you put together a Sandcastle that demonstrates this issue?

Best,
Janine

3

Hi Janine,

Thank you so much for the reply. I was able to figure the scene mode issue out myself, but I have another question. As you can see from this sandcastle I made Cesium Sandcastle, the scene initially is in 3d mode and looking at the barrel, but when switch to 2d mode, the camera just looking down on the ground, is there a way to recenter the camera to look on the barrel as well? More generally speaking, is there a way to make camera centerred at the position it was looking at in 3d mode not the position the camera was at?

Best,
Yuhao

4

Hi @yuhaoecopia,

In your sandcastle, once you switch the viewer.scene.mode you need to add a call to viewer.zoomTo(tileset) to recenter the camera on the barrels. I modified your Sandcastle to do this here.

I’m still experimenting with a general solution, such that the camera can get the position it is looking at and zoom to it when it switches modes, but I haven’t figured one out yet. I will update if I manage to get it to work.

Best,
Janine

5

ok thank you so much for the help!

6

Hi @yuhaoecopia,

I think the pickEllipsoid function in the Camera API should work as a general solution. You can call this function to get a Cartesian3 position, then call viewer.camera.lookAt to make the camera to look at that position. You may need to adjust the offset parameter in lookAt so that the barrels are correctly placed on the screen.

Hope that works for you!

Best,
Janine

1 Like
7

Hi janine, I have also implemented switch functionality in my application and it’s working fine. The issue is, When I am switching from 3d to 2d then buildings are displacing from their original location. Can you help me to solve this issue?

Thank you

8

Hi @basant1431,

This is a known limitation with 2D mode – models are not accurately projected to 2D and will show up displaced from the original locations. However, we recently added an option to ModelExperimental to load things in 2D with accurate positions.

When creating a Cesium3DTileset, make sure to include these options in the constructor:

const tileset = new Cesium.Cesium3DTileset({
  url: // url here,
  enableModelExperimental: true,
  projectTo2D: true
});
viewer.scene.primitives.add(tileset);

Then, whenever the mode is switched to 2D / Columbus View, its positions should be properly projected. You can also see the links on Github below for more info. Let me know if you have any questions!

9

Hi @janine,

Thanks you for your quick reply. As per your suggestion I added both mentioned options in my tileset and tried it in my application but when I am adding both options in tileset buildings are getting disappeared. My application is not laoding any building on at map. I have added code below, please have a look and let me know what wrong I am doing.

var tileset = viewer.scene.primitives.add(
new Cesium.Cesium3DTileset({
url:‘./3DTilesData/300Build/tileset/tileset.json’,
picking:false,
maximumScreenSpaceError:512,
maximumMemoryUsage:1024,
skipLevelOfDetail:true,
preferLeaves:true,

   dynamicScreenSpaceError : true,
    dynamicScreenSpaceErrorDensity : 0.00278,
   dynamicScreenSpaceErrorFactor : 4.0,
   dynamicScreenSpaceErrorHeightFalloff : 0.25,
   enableModelExperimental:true,
   projectTo2D:true
  })
);

Also attached screenshot of map below for your reference.

AfterAddingoptions.PNG
AfterAddingoptions.PNG1364×584 116 KB

beforeaddingoptions.PNG
beforeaddingoptions.PNG1346×596 101 KB

Thank you

10

The first screenshot is after adding options that you have mentioned. second is before adding options.

11

Hi @basant1431,

From a glance, I don’t see anything wrong with your code, so I wonder if this is related to the bug here:

In short, we think there is a bug with the system that determines whether or not to render tiles in 2D / CV, and this may be affected by it. I’ll make a note of your post in the Github issue so we can keep track of the problem.