Load 3D tile on mobile App of Cesium

[yoh...@gmail.com]

1. A concise explanation of the problem you're experiencing.
I'm working on a mobile app with Cesium and cordova.

i'm trying to load 3D model (made with Contextcapture, file format:json) from my mobile (data are in the memory of the phone) but, no ways, it doesn't work.

Is there a link, a written code or a tool that can be use to load the model on a mobile?


I tried with some data (that aren't complet model) and the code works. Solution?
-------------------------------------

fr.onloadend = function () {
var extension = Cesium.getExtensionFromUri(document.getElementById('input').value);

switch (extension) {
case 'geojson':
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
break;
case 'topojson':
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
break;
case 'czml':
viewer.dataSources.add(Cesium.CzmlDataSource.load(this.result));
break;
case 'kml':
viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
break;
case 'kmz':
viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
break;


case 'json':

var heightOffsetB1B2=15.8
var longOffsetB1B2 = 0.00000091;
var latOffsetB1B2=0.00000035;
var uri =this.result;
viewer.entities.add({
url : uri,
position :Cesium.Cartesian3.fromDegrees (4.33763, 50.69359,20),
billboard : {
image : pinBuilder.fromText('test', Cesium.Color.RED, 48),
verticalOrigin : Cesium.VerticalOrigin.BOTTOM
}
});




break;
case 'gltf':
viewer.trackedEntity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
model: {
uri: this.result
}
});
break;
default:
alert('[' + extension + '] n"est pas supporté.')
}
};

----------------------------------
The cesium version is 1.42 and my mobile is an OnePlus 5T with Android(oreo).

Thanks a lot.
Yohann

[Gabby Getz]

We have a blog post An Introduction to Cesium Android Apps with Cordova that may help!

Thanks,

Gabby

[yoh...@gmail.com]

Hello Gabby,

Thanks for your answer.

The problem is that i've based my code from your blog "An Introduction to Cesium Android Apps with Cordova" but i didn't work. By the way, the code that i've post juste upper in my first message come from there.

That's why i've asked the question on the forum ;)

Yohann

[Gabby Getz]

Sorry for the misunderstanding!

I'm guessing since this is a `.json` file from contextCapture this is exporting a 3D Tileset. You'll load it like this example, instead of the following block:

var heightOffsetB1B2=15.8
                                                var longOffsetB1B2 = 0.00000091;
                                                var latOffsetB1B2=0.00000035;
                                                var uri =this.result;
                                                viewer.entities.add({
                                                url : uri,
                                                position :Cesium.Cartesian3.fromDegrees (4.33763, 50.69359,20),
                                                billboard : {
                                                                image : pinBuilder.fromText('test', Cesium.Color.RED, 48),
                                                                verticalOrigin : Cesium.VerticalOrigin.BOTTOM
                                                        }
                                                        });

Thanks,

Gabby

[yoh...@gmail.com]

Hello Gabby,

I've tried your code in the example. It seems that it didn't work, nothing appears (not even error log file if there where a problem).

Yes it's a json file from context capture. Currently, it's reference system is Lambert 72 (EPSG 31370) and not WGS 84. So i've tried to modify the code like on the computer software.

And more, i want to select/import the file manually (not charge automatically the file when the program run).

Here is the code of the import:
-----------------------------------------

fr.onloadend = function () {
var extension = Cesium.getExtensionFromUri(document.getElementById('input').value);

switch (extension) {
case 'geojson':
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
break;
case 'topojson':
viewer.dataSources.add(Cesium.GeoJsonDataSource.load(this.result));
break;
case 'czml':
viewer.dataSources.add(Cesium.CzmlDataSource.load(this.result));
break;
case 'kml':
viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
break;
case 'kmz':
viewer.dataSources.add(Cesium.KmlDataSource.load(this.result, options));
break;


case 'json':

url=this.result;
var heightOffsetr3 =20.79;
var longOffsetr3 = 0.00000091;
var latOffsetr3=0.00000035;

var tileset = new Cesium.Cesium3DTileset({ url });
viewer.scene.primitives.add(tileset);

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,cartographic.height);
var cartographic_longitude= cartographic.longitude -longOffsetr3;
var cartographic_latitude= cartographic.latitude -latOffsetr3;
var offset = Cesium.Cartesian3.fromRadians(cartographic_longitude, cartographic_latitude, heightOffsetr3);
var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
console.log(tileset.modelMatrix);



viewer.zoomTo(tileset);
}).otherwise(function(error) {
console.log(error);

});


break;
case 'gltf':
viewer.trackedEntity = viewer.entities.add({
position: Cesium.Cartesian3.fromDegrees(-123.0744619, 44.0503706, 5000),
model: {
uri: this.result
}
});
break;
default:
alert('[' + extension + '] n"est pas supporté.')
}
};

function fileLoaded() {
var file = document.getElementById('input').files[0];
fr.readAsDataURL(file);
};

[yoh...@gmail.com]

May be that the device is too slow to load the file (3D tile weight : 300Mo)..

or it doesn't supported primtives and 3DCesiumTiles.

[Sean Lilley]

Maybe it was just a copy-paste error, but the line above should be:

var tileset = new Cesium.Cesium3DTileset({ url : url });

[yoh...@gmail.com]

Ahah yes i've corrected in my code after having posted the message! But it didn't change the result.

[Gabby Getz]

Try remove this block:

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,cartographic.height);
                                var cartographic_longitude= cartographic.longitude -longOffsetr3;
                                var cartographic_latitude= cartographic.latitude -latOffsetr3;
                                var offset = Cesium.Cartesian3.fromRadians(cartographic_longitude, cartographic_latitude, heightOffsetr3);
                                var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
                                tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
                                console.log(tileset.modelMatrix);

And perhaps log the tileset to make sure it's loading. If nothing, not even the error message, is being outputted to the console, it sounds like you are having a silent failure in your then function.

[yoh...@gmail.com]

Hello Gabby,

I've removed the block as you wrote upper. I have a silent failure when i want to load json files...

With android studio, i've found that this error: "Uncaught TypeError: Cesium.Cesium3DTileset is not a constructor".

Have you already heared about it?

[yoh...@gmail.com]

Yop, i've changed cesium program. I was in 1.42 and now i'm in 1.43.

With the 1.43 version, i don't have the same problem. Here it is:

03-28 16:22:39.529 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/index.html: Line 1439 : [object Object]
03-28 16:22:39.529 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(1439)] "[object Object]", source: file:///android_asset/www/index.html (1439)
03-28 16:22:39.557 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : A 3D tile failed to load: data:Data/Tile_p014_p004/Tile_p014_p004.json
03-28 16:22:39.557 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "A 3D tile failed to load: data:Data/Tile_p014_p004/Tile_p014_p004.json", source: file:///android_asset/www/Cesium/Cesium.js (531)
03-28 16:22:39.558 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : Error: Request has failed.
03-28 16:22:39.558 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "Error: Request has failed.", source: file:///android_asset/www/Cesium/Cesium.js (531)
03-28 16:22:39.558 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : A 3D tile failed to load: data:Data/Tile_p015_p004/Tile_p015_p004.json
03-28 16:22:39.558 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "A 3D tile failed to load: data:Data/Tile_p015_p004/Tile_p015_p004.json", source: file:///android_asset/www/Cesium/Cesium.js (531)
03-28 16:22:39.559 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : Error: Request has failed.
03-28 16:22:39.559 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "Error: Request has failed.", source: file:///android_asset/www/Cesium/Cesium.js (531)
03-28 16:22:39.559 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : A 3D tile failed to load: data:Data/Tile_p014_p007/Tile_p014_p007.json
03-28 16:22:39.559 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "A 3D tile failed to load: data:Data/Tile_p014_p007/Tile_p014_p007.json", source: file:///android_asset/www/Cesium/Cesium.js (531)
03-28 16:22:39.560 13896-13896/io.cordova.hellocordova D/SystemWebChromeClient: file:///android_asset/www/Cesium/Cesium.js: Line 531 : Error: Request has failed.
03-28 16:22:39.560 13896-13896/io.cordova.hellocordova I/chromium: [INFO:CONSOLE(531)] "Error: Request has failed.", source: file:///android_asset/www/Cesium/Cesium.js (531)

I don't have any idea of what this means ( except it didn't load.. lol).

[Gabby Getz]

All I can tell you is that Cesium3DTileset was a constructor in both 1.42 and 1.43. Perhaps files aren't getting included correctly?

I'm not familiar with setting up Cesium apps in Cordova, but it looks like you are incorrectly requiring the Cesium.js file.

[yoh...@gmail.com]

Hello Gabby,

Thanks for the answer.

Yes i'm in accord with you. Seems to have a problem to load the 3D json file.

However, the "load" manner that i used is the same then the one to upload 3D tile with Cesium on Firefox. It's a bit strange..

Do you (or anyone else of your team) know a way (which supposed to work) to import 3D tile? Using another file extension perhaps? (or convert JSON in gltf maybe?)

Greetings,
Yohann

[Gabby Getz]

Hi Yohann,

Take a look at server.js, that's what we use for our own local development to serve up tilesets.

Thanks,

Gabby

[yoh...@gmail.com]

Hello Gabby,

Thanks for the answer. I've looked but there is no great change with the server.js that i've used. It seems to have some more tileset file format accepted.

The rest is identical :/ I think it won't change the import of 3D tiles on mobile, but i gonna try.

Greetings,
Yohann

[Gabby Getz]

I think the only difference may be that the way server.js serves 3d-tiles json files supports gzipped tilesets, and there's a good chance your tileset is gzipped.

[Mauro]

Hello Yohann, i have the same problem with the 3d tile, i solved by loading the model in gltf, but in this format the model is too heavy and the app crashes.

Mauro