ImageMaterialProperty material auto rotated

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.

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

Cheers,

Alex


sky.jpg default direction is normal


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

Hmm, a bit out of my league, but maybe try to use https://cesium.com/docs/cesiumjs-ref-doc/MaterialAppearance.html 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

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