1

セシウムで .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>
4

1 に答える 1

2

ほとんどの場合、モデルは問題なくロードされていますが、スケールが 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);
});
于 2014-12-15T03:19:53.617 に答える