Only display 3D model without globe

CesiumJS
1

I would like to only display the 3d model, without displaying the globe, sun, and all other elements that come with the globe.
How does one remove all those elements from the cesium display?

I’ve looked through all the sandcastle examples, but found nothing of help.

2

To turn off globe rendering, you can use this code snippet.
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
globe: false
});

or
viewer.scene.globe.show = false;

To turn off sky and atmosphere rendering

viewer.scene.skyAtmosphere.show = false;
viewer.scene.skyBox.show = false;

To hide timeline widget
const viewer = new Cesium.Viewer(“cesiumContainer”, {
timeline : false
});

To hide clock
const viewer = new Cesium.Viewer(“cesiumContainer”, {
animation : false,
});

To hide all toolbar button
var viewer = new Cesium.Viewer(‘cesiumContainer’, {
baseLayerPicker : false,
homeButton : false,
sceneModePicker : false,
navigationHelpButton : false,
geocoder : false
});

To hide the ion credit display widget
viewer.bottomContainer.style.display = “none”;

To hide the the fullcreen button
viewer.fullscreenButton.container.style.display = “none”;

For further detail please read below link

https://cesium.com/docs/cesiumjs-ref-doc/Viewer.html#.ConstructorOptions

Hope this help you!

4 Likes
3

Here are the things that ZehfengJin & Scott stated with direct settings (not through viewer parameter object attributes.)

var viewer = new Cesium.Viewer("cesiumContainer");
viewer.scene.globe.show = false;
viewer.scene.skyAtmosphere.show = false;
viewer.scene.skyBox.show = false;
viewer.scene.sun.show=false;
viewer.scene.moon.show=false;

viewer.bottomContainer.style.display = "NONE"; //capitalized
viewer.fullscreenButton.container.style.display = "none"; //not capitalized
viewer.homeButton.container.style.display="none";
viewer.navigationHelpButton.container.style.display="none";
viewer.timeline.container.style.display="none";
1 Like
4

Without the sun and moon and showing a model. Double-click the model to be able to rotate around it.

// https://community.cesium.com/t/only-display-3d-model-without-globe/10545
var viewer = new Cesium.Viewer('cesiumContainer', {
  globe: false,
  timeline : false,
  animation : false,
  baseLayerPicker : false,
  homeButton : false,
  sceneModePicker : false,
  navigationHelpButton : false,
  geocoder : false
});

var scene = viewer.scene;

scene.sun = new Cesium.Sun();
scene.sun.show = false;

scene.moon = new Cesium.Moon({
  show: false});

// To turn off sky and atmosphere rendering

scene.skyAtmosphere.show = false;
scene.skyBox.show = false;

// To hide the ion credit display widget
viewer.bottomContainer.style.display = 'none';

// To hide the the fullcreen button
viewer.fullscreenButton.container.style.display = 'none';

// Create an entity
var cesiumAir = viewer.entities.add({
  name: "Cesium Air",
  position: new Cesium.Cartesian3.fromRadians(-1.31968, 0.698874, 74.14210186070714),
  model: {
    uri: "../../SampleData/models/CesiumAir/Cesium_Air.glb",
  },
});

viewer.zoomTo(cesiumAir);
<\code><\pre>
1 Like
5

Hi @ZhefengJin
any clue about a way to switch the globe on and off programmatically? Say I have a checkbox input true/false

viewer.scene.globe.show = inputVariable;

Cesium Sandcastle example

The above does not have any effects when the inputVariable changes from true to false and viceversa. Any suggestion?
thank you in advance
fm

6

In your flip function, you switch just the value of the variable bool, not viewer.scene.globe.show.

Change your filp function as follows.

function flip(){
  viewer.scene.globe.show = !viewer.scene.globe.show;
}
1 Like