在铯.js中加载 GLTF 模型

load gltf model in cesium.js

本文关键字：GLTF 模型 加载 js 在铯      更新时间：2023-09-26

我正在尝试在铯中加载.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);
});
相关文章：