Question

我正在尝试在cesium中加载.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>

Answer 1

最有可能的是，你的模型正在加载正常，但即使在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);
});

在cesium.js中加载gltf模型

1 个答案: