为什么 Cesium 查看器在我添加时不显示模型?
Why does Cesium viewer not display a model, when I add it?
我有一个应用程序,它显示城市的 3D 地图和 "Add building" 按钮。
当用户按下该按钮时,必须将建筑物模型插入到地图中。
但事实并非如此 - 我在正确的位置看到了一个选择标记,但没有实际的建筑物。
方法一
我使用以下代码添加建筑物(参见文件 src\main\resources\static\js\myapp.js
源代码):
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;
}
这个方法不行,所以我尝试了另一种方法。
方法二
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);
这也没有用。
如果我在浏览器中打开 URL http://localhost:8080/models/CesiumAir/Cesium_Air.gltf
,我可以看到一些 JSON 输出,所以损坏的 link 不是原因。
如果您能告诉我我必须在我的程序中修改哪些内容才能使添加建筑物正常工作,我将不胜感激。源代码和构建说明可用 here。该应用程序使用 AngularJS,也许 Cesium 和 Angular 会以某种方式干扰。
此 video 说明如何重现此错误。
更新 1: 当我打开页面时,有时(但不总是)出现以下异常(当我启用未捕获异常时停止):
在 myapp.js 中创建查看器时,将 Cesium.SceneMode.COLUMBUS_VIEW
更改为 Cesium.SceneMode.SCENE3D
。 Model rendering is currently not supported outside of 3D mode.
我有一个应用程序,它显示城市的 3D 地图和 "Add building" 按钮。
当用户按下该按钮时,必须将建筑物模型插入到地图中。
但事实并非如此 - 我在正确的位置看到了一个选择标记,但没有实际的建筑物。
方法一
我使用以下代码添加建筑物(参见文件 src\main\resources\static\js\myapp.js
源代码):
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;
}
这个方法不行,所以我尝试了另一种方法。
方法二
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);
这也没有用。
如果我在浏览器中打开 URL http://localhost:8080/models/CesiumAir/Cesium_Air.gltf
,我可以看到一些 JSON 输出,所以损坏的 link 不是原因。
如果您能告诉我我必须在我的程序中修改哪些内容才能使添加建筑物正常工作,我将不胜感激。源代码和构建说明可用 here。该应用程序使用 AngularJS,也许 Cesium 和 Angular 会以某种方式干扰。
此 video 说明如何重现此错误。
更新 1: 当我打开页面时,有时(但不总是)出现以下异常(当我启用未捕获异常时停止):
在 myapp.js 中创建查看器时,将 Cesium.SceneMode.COLUMBUS_VIEW
更改为 Cesium.SceneMode.SCENE3D
。 Model rendering is currently not supported outside of 3D mode.