I have an application, which displays a 3D map of a city and the "Add building" button.
When the user presses that button, a model of a building must be inserted into the map.
But it doesn't - I see a selection marker at the correct place, but no actual building.
Method 1
I add the building using following code (see file src\main\resources\static\js\myapp.js
the source code):
function addBuilding() {
var position = Cesium.Cartesian3.fromDegrees(132.159633, 43.350116, 0.);
createModel('/models/CesiumAir/Cesium_Air.gltf', position);
}
function createModel(url, position) {
var heading = Cesium.Math.toRadians(135);
var pitch = 0;
var roll = 0;
var orientation = Cesium.Transforms.headingPitchRollQuaternion(
position, heading, pitch, roll);
var entity = viewer.entities.add({
name : url,
position : position,
orientation : orientation,
model : {
uri : url,
minimumPixelSize : 128
}
});
console.log("entity.model = " + entity.model);
viewer.selectedEntity = entity;
}
This didn't work, so I tried another method.
Method 2
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(132.159633, 43.350116, 0.0));
var primitive = Cesium.Model.fromGltf({
url : '/models/CesiumAir/Cesium_Air.gltf',
modelMatrix : modelMatrix,
minimumPixelSize : 128,
appearance : new Cesium.DebugAppearance({
attributeName : 'normal'
})
});
scene.primitives.add(primitive);
This didn't work, either.
If I open the URL http://localhost:8080/models/CesiumAir/Cesium_Air.gltf
in the browser, I can see some JSON output, so a broken link isn't the cause.
I'd appreciate, if you told me, what I have to modify in my program to make adding of buildings work. The source code and the building instructions are available here. The application uses AngularJS, maybe Cesium and Angular interfere somehow.
This video shows, how to reproduce this error.
Update 1: When I open the page I sometimes (but not always) get the following exception (when I enable stopping on uncaught exceptions):
When creating your viewer in myapp.js, change Cesium.SceneMode.COLUMBUS_VIEW
to Cesium.SceneMode.SCENE3D
. Model rendering is currently not supported outside of 3D mode.