Change Sun Light to White Light

[whoisstan]

I use cesium 1.127. I have a clamped glb 3d object in the scene and want to change sun light to be less yellow. I tried all kinds of light adjustments but I can’t get to be more chrome with a white light.

import * as Cesium from "cesium";

Cesium.RequestScheduler.requestsByServer["tile.googleapis.com:443"] = 18;
Cesium.Ion.defaultAccessToken = import.meta.env.VITE_CESIUM_TOKEN;

export const createViewer = (id:string): Cesium.Viewer => {
  const viewer = new Cesium.Viewer(id, {
    baseLayerPicker: false,
    shouldAnimate: true,
    timeline: false,
    animation: false,
    homeButton: false,
    geocoder: false,
    fullscreenButton: false,
    scene3DOnly: true,
    navigationHelpButton: false
  });

  viewer.scene.skyAtmosphere.show = false;
  viewer.scene.globe.enableLighting = false;

  viewer.scene.imageryLayers.removeAll();
  viewer.shadows = false;
  Cesium.Cesium3DTileset.fromUrl(
    `https://tile.googleapis.com/v1/3dtiles/root.json?key=${import.meta.env.VITE_GOOGLE_API_KEY}`,
    { showCreditsOnScreen: true }
  ).then(tileset => {
    viewer.scene.primitives.add(tileset);
  }).catch(error => {
    console.error('Error loading Cesium 3D Tileset:', error);
  });


  return viewer;
}

[Gabby_Getz]

Hi @whoisstan,

Those colors are coming from the Imaged Based Lighting (IBL) (and if you’re interested in more technical details, checkout this blog post).

It’s possible to configure model.environmentMapManager to adjust the lighting on each model. There are a few options depending on the look you are going for. I’ll use this test model for comparison:

1. You could disable procedural IBL entirely:

    model.environmentMapManager.enabled =
      false;

2. You could change the ground color to a dark gray:

    model.environmentMapManager.groundColor =
      Cesium.Color.fromCssColorString("#262626");

3. You could adjust the saturation and brightness:

    model.environmentMapManager.groundColor =
      Cesium.Color.fromCssColorString("#262626");

    model.environmentMapManager.saturation = 0.1;
    model.environmentMapManager.brightness = 1.5;

[whoisstan]

Thanks @Gabby_Getz

Yes, I read that before in the cesiumJS changes but I was struggling first to apply it. I am using 1.127.0 and I wasn’t able to use model.environmentMapManager, it seems to be 'model. environmentMapOptions. That was my issue and now I can adjust it nicely to be less green.

    this.entity = viewer.entities.add({
      position: this.location(),
      orientation: new Cesium.VelocityOrientationProperty(this.positionProperty),
      model: {
        uri: "./models/toaster.glb",
        scale: 0.035,
        environmentMapOptions: {
          groundColor:Cesium.Color.fromCssColorString("#454545"),
          brightness: 1.5,
          groundAlbedo:0.2
        }
      },

    });