Show 3D globe from a glb file at the center

CesiumJS
1

Hi,

I’m trying to show a 3D globe from a glb file, I don’t want to use the default globe of cesium, is it doable ? because i’m not seeing my glb file when hiding the cesium globe :frowning:

earth.glb (118.2 KB)

@Marco13 you said to me previously that because my glb file is centered to zero with :

      const model: Cesium.Model = await Cesium.Model.fromGltfAsync({
        gltf: new Uint8Array(buffer.slice(offset)),
        modelMatrix: Cesium.Matrix4.IDENTITY,
      });

how can i fix it ?

2

please try this

const viewer = new Cesium.Viewer("cesiumContainer");

const modelPromise = Cesium.Model.fromGltfAsync({
    url: `./earth.glb`
});

modelPromise.then((model) => {
  viewer.scene.globe.show = false;

  viewer.scene.primitives.add(model);
});

image
image1001×502 58.3 KB

3

^ What ZhefengJin said. (I did not try it out, but it might be that it was just the viewer.scene.primitives.add(model); that was missing. If this is not the case, you may have to provide more information, e.g. with a complete sandcastle)

4

ok @Marco13 and @ZhefengJin

but what about preventing clipping that generate artifact ?

image
image866×770 3.81 KB

test2.glb (7.1 MB)

void vertexMain(VertexInput vsInput, inout czm_modelVertexOutput vsOutput) {

    vec3 positionMC = vsInput.attributes.positionMC;


    // 1. Transform position to Eye Coordinates (EC)
    vec4 positionEC = czm_modelView * vec4(positionMC, 1.0);

    // --- Vertex is valid and not culled, proceed with standard outputs ---

    // 3. Store the (potentially modified) Model Coordinates in vsOutput
    // This is often used by Cesium for material properties, batchId, etc.
    vsOutput.positionMC = positionMC;

    // 5. Calculate the final Clip Space position
    gl_Position = czm_projection * positionEC;
}


void fragmentMain(FragmentInput fsInput, inout czm_modelMaterial material)  {
    vec4 color = vec4(1.,0.,0.,1.);
    material.diffuse =  color.rgb;
    material.alpha = color.a;

}

const _viewer: Cesium.Viewer = new Cesium.Viewer(cesiumContainer, {
  globe: false, // <== DISABLE globe !
  contextOptions: {
    requestWebgl1: false,
    allowTextureFilterAnisotropic: false,
    webgl: {
      alpha: false,
      depth: false,
      stencil: false,
      antialias: true,
      premultipliedAlpha: false,
      preserveDrawingBuffer: true
    }
  },
  baseLayer: false,
  shadows: false,
  terrainShadows: Cesium.ShadowMode.DISABLED,
  homeButton: false,
  sceneModePicker: false,
  baseLayerPicker: false,
  geocoder: false,
  timeline: false,
  animation: false,
  fullscreenButton: false,
  infoBox: false,
  showRenderLoopErrors: true,
  navigationHelpButton: false,
  automaticallyTrackDataSourceClocks: false,
  navigationInstructionsInitiallyVisible: false,
  requestRenderMode: requestRenderMode,
  maximumRenderTimeChange: requestRenderMode ? Infinity : undefined,
  selectionIndicator: false,
  skyBox: undefined,
  skyAtmosphere: new Cesium.SkyAtmosphere(),
  mapProjection: projection,
  scene3DOnly: false,
  mapMode2D: Cesium.MapMode2D.INFINITE_SCROLL,
  sceneMode: Cesium.SceneMode.SCENE3D
})
_viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK)

_viewer.scene.skyAtmosphere.show = false
_viewer.scene.fog.enabled = false
if(_viewer.scene.skyBox){
  _viewer.scene.skyBox.show = false
}
_viewer.scene.debugShowFramesPerSecond = false

type or paste code here
5

and I have no artifact with the tools https://sandbox.babylonjs.com/

6

You must share the full code you tried.
What are vertexMain,fragmentMain?
Where are they used?