3D model rendered below ground?

CesiumJS
1

Hi,

I’m trying to load a model into cesium. Its a model of a wind turbine. The problem is that even though I have set it to Clamp_to_grounf, I still have to provide a ‘height’ value for it to render above the terrain. From reading another few posts, I figured this might have been due to a negative reference frame in the model, but if I move the location to a different place with different terrain height, the ‘height’ value is wrong, and it either renders above or below the terrain.

I’m load the model with this code

scene.globe.depthTestAgainstTerrain = true;

var addModel = function(long, lat){

var model = scene.primitives.add(Cesium.Model.fromGltf({

url: ‘/cesium/model/WindTurbine.gltf’,

modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(long,lat, 115)),

scale: 3,

heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND

}));

Cesium.when(model.readyPromise).then(function(model) {

model.activeAnimations.addAll({

loop: Cesium.ModelAnimationLoop.REPEAT

});

});

}

addModel(-7.0110, 53.2883);

I’ve highlighted the value I have to change to get the model to sit on the ground.

My understanding is that with the relative_to_ground reference set, it should ‘clamp’ the model to the ground, regardless of the terrain height, but I’m not seeing this behavior.

I’ve attached a picture that shows them rendered almost correctly, but they are still a bit ‘low’, i.e. the base of them is hidden.

I’ve also attached the model that I’ve used.

Is there someway to set a value that will always offset the model relative to the terrain?

Thanks for the help.

Thanks

WindTurbine.gltf (28.3 KB)

Capture.PNG
Capture.PNG884×496 671 KB

2

I think what’s happening is clamp to ground expects the base of the model to be at (0,0,0) in local space, as if the model is placed on the floor plane. The model you sent is centered about the origin so half of it ends up being cut off. It might be a good idea to edit the model.

I attached some screenshots - middle.png is what you have now and floor.png is what you should aim for.

middle.PNG

floor.png

3

Hi,

Thanks for the feedback. I figured it might have been something to do with that. Although that doesn’t account for the need to change the height value, if the model is moved to a location with different terrain height.

Whats the best (free) software to I edit that in?

4

I’ve tried changing the way I load the models to use the entity framework rather than primitives.

cesium3d.getDataSourceDisplay().defaultDataSource.entities.add({

position : Cesium.Cartesian3.fromDegrees(long,lat),

model : {

uri : ‘/cesium/model/WindTurbine.gltf’,

heightReference : Cesium.HeightReference.CLAMP_TO_GROUND,

minimumPixelSize : 128,

maximumScale : 3,

scale:3

}

});

This now loads the models how I expect them to look. So I guess the model must have been OK, and somehow using it as an entity loads it differently?

Thanks

good version.PNG.jpg
good version.PNG.jpg1423×705 374 KB

5

Hm I just tried it with the Model API and it works as well, the code is relatively similar to what you originally posted.

var viewer = new Cesium.Viewer(‘cesiumContainer’);

var scene = viewer.scene;

scene.globe.depthTestAgainstTerrain = true;

var addModel = function(long, lat){

var model = scene.primitives.add(Cesium.Model.fromGltf({

url: '../../SampleData/test/WindTurbine.gltf',

modelMatrix: Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(long,lat)),

scale: 3,

scene : scene,

heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND

}));

Cesium.when(model.readyPromise).then(function(model) {

model.activeAnimations.addAll({

  loop: Cesium.ModelAnimationLoop.REPEAT

});

// Zoom to model

var camera = viewer.camera;

var controller = scene.screenSpaceCameraController;

var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);

controller.minimumZoomDistance = r * 0.5;

var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());

var heading = Cesium.Math.toRadians(230.0);

var pitch = Cesium.Math.toRadians(-20.0);

camera.lookAt(center, new Cesium.HeadingPitchRange(heading, pitch, r * 2.0));

});

};

addModel(-7.0110, 53.2883);

``

wind.png