ImageMaterialProperty material auto rotated

CesiumJS
1

polyon setting ImageMaterialProperty material, but img init rotated
demo：https://codesandbox.io/s/romantic-shockley-39dyp?file=/index.html
this is my demo.
when load test.geojson ，img is rotated
when load normal.geojson, img is normal
i want img is normal, not rotate.

4

How can you tell if the image is rotated or not?

Cheers,

Alex

5

image
image1644×836 78.2 KB

sky.jpg default direction is normal

image
image1172×558 170 KB

loaded geojson , set material , but rotated -90deg

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>cesium 图片旋转</title>
    <script src="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Cesium.js"></script>
    <link
      href="https://cesium.com/downloads/cesiumjs/releases/1.75/Build/Cesium/Widgets/widgets.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="cesiumContainer"></div>
    <script>
      // Your access token can be found at: https://cesium.com/ion/tokens.
      Cesium.Ion.defaultAccessToken =
        "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiI2NzgxNTM2Yi1mMmI2LTQyNTEtODNlMy1iZGM0YzQ4Y2NjNjAiLCJpZCI6Mzc1OTAsImlhdCI6MTYwNTIzODc0NX0.iM_CeyJn07Z1U4gpMP8EVaSIGY2DFSyIEf_IKjq4Kxk";
      // Initialize the Cesium Viewer in the HTML element with the `cesiumContainer` ID.
      const viewer = new Cesium.Viewer("cesiumContainer", {
        terrainProvider: Cesium.createWorldTerrain()
      });
      let geojsonOptions = {
        clampToGround: false,
        strokeWidth: 5
      };

      let neighborhoodsPromise = Cesium.GeoJsonDataSource.load(
        "./test.geojson",
        geojsonOptions
      );
      neighborhoodsPromise.then(function (dataSource) {
        viewer.dataSources.add(dataSource);
        neighborhoods = dataSource.entities;
        let neighborhoodEntities = dataSource.entities.values;
        for (let i = 0; i < neighborhoodEntities.length; i++) {
          let entity = neighborhoodEntities[i];
          let target = entity.polygon;
          target.zIndex = 0;
          target.outline = false;
          let img = new Image();
          img.crossOrigin = "anonymous";
          img.src = "https://39dyp.csb.app/sky.jpg";
          img.onload = function () {
            target.material = new Cesium.ImageMaterialProperty({
              image: img,
              transparent: true
            });
            viewer.zoomTo(dataSource.entities);
          };
        }
      });
    </script>
  </body>
</html>

Cheers,

Chai

6

Hmm, a bit out of my league, but maybe try to use MaterialAppearance - Cesium Documentation with the faceForward = true. I think the material engine does some automatic rotation for the benefit of a better render of textures. Give it a spin.

Cheers,

Alex

7

Hello @chaijinsong,

When Cesium renders a polygon, it doesn’t have a reference for which direction that polygon is oriented in space, so we do our best guess for how to fit an image onto that polygon.
In order to achieve the effect you’re going for, I think a Wall would be a better fit: Cesium Sandcastle
This should render the texture in the correct direction.

Best regards,

Hannah