3D Tiles Building positioned underneath the world

CesiumJS
1

Using 3D tiles generated from Context Capture, the tiles are positioned below the world. As demonstrated here: http://i.imgur.com/pajeCeI.png

I've tried playing with the z axis bounding sphere in the root.json, but that doesn't have much of an effect.

How can I make sure the model is positioned on top of the terrain?

    var viewer = new Cesium.Viewer('cesiumContainer', {
      timeline:false,
      animation:false,
      vrButton:true,
      sceneModePicker:false,
      infoBox:true
    });

    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: '/3dmodel/root.json',
      maximumScreenSpaceError: 2,
      maximumNumberOfLoadedTiles: 1000
    }));

2

Hello,

The default Cesium globe is using a WGS84 ellipsoid. It looks like your tiles have a different height.

You can try turning on the STK World Terrain. Maybe your tiles are supposed to be relative to that height? You can see an example for how to enable terrain here: http://cesiumjs.org/Cesium/Apps/Sandcastle/index.html?src=Terrain.html&label=All

Best,

Hannah

3

Also if more tweaking is required you can modify the tileset’s height with code like below:

var viewer = new Cesium.Viewer('cesiumContainer', {
    scene3DOnly : true
});

var scene = viewer.scene;

var heightOffset = 23.0;
var url = '../../../Specs/Data/Cesium3DTiles/Tilesets/Tileset';
var tileset = scene.primitives.add(new Cesium.Cesium3DTileset({
    url : url
}));

tileset.readyPromise.then(function(tileset) {
    var boundingSphere = tileset.boundingSphere;
    viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
    viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
    // Position tileset
    var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
    var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
    var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
    var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
    tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
    console.log(tileset.modelMatrix);
});

``

4

Thank you for that Sean!

I've tried your code, and it doesn't seem to making a difference to the height, even if I make the number something crazy like 2000. Am I missing something?

    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({
      url: '/3dmodel/root.json'
      // maximumScreenSpaceError: 2,
      // maximumNumberOfLoadedTiles: 1000
    }));

    var heightOffset = 250.0;

    tileset.readyPromise.then(function(tileset) {
        console.log("STARTING!!")
        var boundingSphere = tileset.boundingSphere;
        viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));
        viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);
        // Position tileset
        var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
        var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
        var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
        var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
        tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
        console.log(tileset.modelMatrix);
    });

5

That is strange… when I run the code with the sample tilesets it works ok

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

var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({

url: ‘…/…/…/Specs/Data/Cesium3DTiles/Tilesets/Tileset/’

// maximumScreenSpaceError: 2,

// maximumNumberOfLoadedTiles: 1000

}));

var heightOffset = 500.0;

tileset.readyPromise.then(function(tileset) {

console.log(“STARTING!!”);

var boundingSphere = tileset.boundingSphere;

viewer.camera.viewBoundingSphere(boundingSphere, new Cesium.HeadingPitchRange(0, -2.0, 0));

viewer.camera.lookAtTransform(Cesium.Matrix4.IDENTITY);

// Position tileset

var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);

var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);

var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);

var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());

tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);

console.log(tileset.modelMatrix);

});

``

What does console.log(tileset.modelMatrix); print for you?

height_500.png

no-height.png

6

Definitely no movement at all :confused:

Here is the out put from modelMatrix:

0:1
1:0
2:0
3:0
4:0
5:1
6:0
7:0
8:0
9:0
10:1
11:0
12:-184.08340326650068
13:381.49443915858865
14:-265.6601090361364
15:1

7

Would you mind sharing the tileset? If you don’t want to post in publicly feel free to email me at slilley@agi.com

8

Thanks for sending it over. The issue is that the Cesium build exported from Context Capture into your project is a bit out-of-date, and doesn’t include the tileset.modelMatrix property or the ability to transform tiles in general. When I loaded your tileset in Sancastle on the 3d-tiles branch it worked fine.

To get around this in the meantime you can build Cesium yourself by cloning Cesium, checking out the 3d-tiles branch, and running npm run minifyRelease from the root directory. Then replace the Cesium folder in your App folder with the Build/Cesium folder that was just generated.

By the way, I also noticed that your tileset looks best with viewer.scene.globe.depthTestAgainstTerrain = true instead of false.

9

That’s fantastic! Thank you so much for your help.

10

I don't know how to run `npm run minifyRelease` from the root directory,can you tell me? I also have the same problem. can you give me some more details?

//
在 2017年1月28日星期六 UTC+8下午11:42:50，Sean Lilley写道：

11

The build guide should help with getting started: https://github.com/AnalyticalGraphicsInc/cesium/tree/master/Documentation/Contributors/BuildGuide.

Once set up you can run npm run minifyRelease on the command line.