Correctly Positioning Coordinates from Imported glTF File

[jturners]

Hello Cesium Community,

I am currently facing an issue with positioning a glTF model using CesiumJS and would greatly appreciate any assistance you could provide.

Issue Description: I am trying to load a glTF model into my scene using Cesium.IonResource.fromAssetId. However, the model does not appear at the correct geographic coordinates and is also not oriented properly. Here are the key points:

1. Model Loading: I am using Cesium.IonResource.fromAssetId to load a model with the asset ID 2600805. The model loads without errors but does not appear at the intended location.
2. Coordinate Issues: I attempted to position the model at specific geographic coordinates (25N, 80W), which corresponds to -80.0 longitude and 25.0 latitude in decimal degrees. However, the model appears off-site, and I suspect there might be an issue with how I’m translating these coordinates in Cesium (using WGS84 currently).
3. Orientation Problems: The model is also appearing sideways, which suggests there might be an issue with how the model’s orientation is being handled.
4. Height Problems: Even when height parameter is set to 0, the rendering shows up in the stratosphere.

Even upon changing the coordinates in Celcius JS, the rendering does not map to the correct coordinates.

Code:

// Grant CesiumJS access to your ion assets
Cesium.Ion.defaultAccessToken = “eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiIxZGI1NWM5ZC02YmJjLTRjOGItOGIzNi0yMTExMGQ3NDhlOGYiLCJpZCI6MjE4OTY3LCJpYXQiOjE3MTcwNzk3NzJ9.8579GUuzssWhb-C_rrhPoU0h5-qnWhcINc61kBDWCLc”;

const viewer = new Cesium.Viewer(“cesiumContainer”);

try {
const resource = await Cesium.IonResource.fromAssetId(2600805);

const longitude = -80.194521; // Longitude in degrees, e.g., near Philadelphia
const latitude = -25.322150; // Latitude in degrees, e.g., near Ottawa
const height = 0; // Height in meters above the ground

const position = Cesium.Cartesian3.fromDegrees(longitude, latitude, height);

const entity = viewer.entities.add({
position: position,
model: {
uri: resource,
},
});

viewer.trackedEntity = entity;
} catch (error) {
console.log(error);
}

Questions:

1. How can I ensure that the model is positioned accurately at the given coordinates?
2. What steps should I take to correct the orientation of the glTF model in the scene?
3. Are there any best practices for handling the scaling and orientation of glTF models in CesiumJS that I should be aware of?
4. Is there a better way to upload glTF files so they contain the geolocation metadata so I can avoid all of this mess?

Thank you in advance for your help and guidance. I look forward to your suggestions and recommendations.

Best regards,
JLTS

[Gabby_Getz]

Hi there JLTS,

To answer your questions:

1. How can I ensure that the model is positioned accurately at the given coordinates?

It looks like you are looking to place the model at a latitude of 25ºN. To do that, make sure you use positive 25.322150 instead of negative -25.322150 as I see in your example. Does that fix the location discrepancy?

2. What steps should I take to correct the orientation of the glTF model in the scene?

You can adjust the orientation a model entity with the orientation property, as shown in this example.

3. Are there any best practices for handling the scaling and orientation of glTF models in CesiumJS that I should be aware of?

There are different standards for the up-axis across different formats and software. This could be contributing to the confusion.

4. Is there a better way to upload glTF files so they contain the geolocation metadata so I can avoid all of this mess?

If you are uploading the model to Cesium ion, you can chose to convert it to 3D Tiles. This will allow you to interactively edit the geolocation and orientation such that it will be imported automatically into CesiumJS.

Hope that helps!