Javascript 在cesium.js中加载gltf模型_Javascript_Cesium_Gltf

Javascript 在cesium.js中加载gltf模型

javascript

Javascript 在cesium.js中加载gltf模型,javascript,cesium,gltf,Javascript,Cesium,Gltf,我正在尝试用铯加载.gltf模型文件。我按照指示做了这件事。但它不起作用。我是不是漏掉了什么？感谢您的帮助。提前谢谢 <!DOCTYPE html> <html lang="en"> <head>  <meta charset="utf-8"> <!-- Tell IE to use the latest, best version (or Chro

我正在尝试用铯加载.gltf模型文件。我按照指示做了这件事。但它不起作用。我是不是漏掉了什么？感谢您的帮助。提前谢谢

<!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>


你好我！！！
@导入url（../Build/Cesium/Widgets/Widgets.css）；
#cesiumContainer{
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
保证金：0；
溢出：隐藏；
填充：0；
字体系列：无衬线；
}
html{
身高：100%；
}
身体{
填充：0；
保证金：0；
溢出：隐藏；
身高：100%；
}
var viewer=新铯.viewer（'cesiumContainer'{
动画：错，
homeButton:错误，
baseLayerPicker:错误，
infoBox:false，
sceneModePicker：错，
时间线：假，
导航说明SINITIALLYVISIBLE:false，
navigationHelpButton:false，
});
var scene=viewer.scene；
var modelMatrix=Ce.Transforms.EastNorthUpFixedFrame（Ces.Cartesian3.fromDegrees（-75.62898254394531,40.02804946899414,0.0））；
var model=scene.primitives.add（Cesium.model.fromGltf({
url:'sample.gltf'，
modelMatrix:modelMatrix，
比例：200.0
}));

最有可能的情况是，您的模型加载良好，但即使在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);
});

您所说的“代码”不起作用是什么意思？你有错误吗，是不是渲染得很奇怪？