我正在尝试在铯中加载 .gltf 模型文件。我按照 http://cesiumjs.org/2014/03/03/Cesium-3D-Models-Tutorial/ 上的说明进行操作完成这项工作。但它不起作用。我在这里错过了什么吗？任何帮助表示赞赏。提前致谢。
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Use correct character set. -->
<meta charset="utf-8">
<!-- Tell IE to use the latest, best version (or Chrome Frame if pre-IE11). -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<!-- Make the application on mobile take up the full browser screen and disable user scaling. -->
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Hello Me!!!</title>
<script src="../Build/Cesium/Cesium.js"></script>
<style>
@import url(../Build/Cesium/Widgets/widgets.css);
#cesiumContainer {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
margin: 0;
overflow: hidden;
padding: 0;
font-family: sans-serif;
}
html {
height: 100%;
}
body {
padding: 0;
margin: 0;
overflow: hidden;
height: 100%;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<script>
var viewer = new Cesium.Viewer('cesiumContainer', {
animation : false,
homeButton : false,
baseLayerPicker : false,
infoBox : false,
sceneModePicker : false,
timeline : false,
navigationInstructionsInitiallyVisible : false,
navigationHelpButton : false,
});
var scene = viewer.scene;
var modelMatrix = Cesium.Transforms.eastNorthUpToFixedFrame(Cesium.Cartesian3.fromDegrees(-75.62898254394531, 40.02804946899414, 0.0));
var model = scene.primitives.add(Cesium.Model.fromGltf({
url : 'sample.gltf',
modelMatrix : modelMatrix,
scale : 200.0
}));
</script>
</body>
</html>
最佳答案
很可能，您的模型加载正常，但即使在 200 的比例下，从空间上看也太小了，您可以将以下代码块添加到文件末尾以缩放一次模型它已加载。
model.readyToRender.addEventListener(function(){
var center = Cesium.Matrix4.multiplyByPoint(model.modelMatrix, model.boundingSphere.center, new Cesium.Cartesian3());
var transform = Cesium.Transforms.eastNorthUpToFixedFrame(center);
var camera = scene.camera;
camera.transform = transform;
var controller = scene.screenSpaceCameraController;
var r = 2.0 * Math.max(model.boundingSphere.radius, camera.frustum.near);
controller.minimumZoomDistance = r * 0.5;
camera.lookAt(new Cesium.Cartesian3(r, r, r), Cesium.Cartesian3.ZERO, Cesium.Cartesian3.UNIT_Z);
});
关于javascript - 在 cesium.js 中加载 gltf 模型，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/27473327/