My application features a 3D map of a city with an "Add building" button.
Upon clicking this button, a model of a building should be inserted into the map. However, all I see is a selection marker at the intended location without the actual building appearing.
Attempt 1
I attempted to add the building using the following code snippet (refer to file
src\main\resources\static\js\myapp.jsfunction 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;
}
Since this approach did not yield the desired outcome, I decided to explore another method.
Attempt 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 alternative attempt also failed to produce the expected result.
When I access the URL
http://localhost:8080/models/CesiumAir/Cesium_Air.gltfI would greatly appreciate guidance on how to modify my program to successfully add buildings. The source code and building instructions can be found here. It's possible that AngularJS used in the application might be causing conflicts with Cesium and Angular.
This informative video demonstrates the error replication process.
Update 1: Upon loading the page, I occasionally encounter the following exception (especially when uncaught exceptions are enabled):