无人机倾斜三维摄影模型展示浏览器实操记录

一、问题说明

手里有一套无人机倾斜摄影生成的 OSGB 三维模型，体积较大（约 6 GB、近 8 千个瓦片文件），浏览器无法直接加载。需要把它转成 3D Tiles 标准格式，再用 Cesium 在浏览器里查看效果。下面是完整操作记录。

二、路径说明

本流程涉及三个核心路径，统一说明其含义与来源。本机用户名为 Administrator，以下路径均位于桌面目录 D:\Users\Administrator\Desktop\ 下。

1. 源模型目录 `terra_osgbs`

无人机倾斜摄影生成的原始 OSGB 模型。该目录为下载后直接解压到桌面所得，未做任何改名或结构调整，内容如下：

terra_osgbs
├── metadata.xml          # 模型元数据
├── Block.osgb            # 顶层总入口
└── BlockBABA / BlockBABX / ...   # 16 个分块目录
    └── Tile_+000_+000 / ...      # 各分块下的瓦片
        └── L18_0000.osgb         # OSGB 瓦片文件

2. 工作目录 `3d`

手动创建 3d 目录用于存放转换工具。转换工具使用来自 GitHub 项目 fanvanzh/3dtiles ，下载后解压至本目录：

该目录下将依次产生以下内容：

3d
├── gdal_data/      
├── osgPlugins-3.4.0/ 
├── 3dtile.exe 
├── gdal201.dll
├── libpng.dll
└── osg130-osg.dll
└── osg130-osgDB.dll
└── osg130-osgUtil.dll
└── ot20-OpenThreads.dll
└── proj.dll
└── zlib.dll

三、复制完整模型

先做一个”完整副本”，把源目录整个复制到一个干净的分级目录结构（Data 子目录）里，方便后续转换器正确识别。

$sourceRoot  = "D:\Users\Administrator\Desktop\terra_osgbs"
$stagingRoot = "D:\Users\Administrator\Desktop\3d\full_osgb_copy"
## 上面的地址需要根据自己的实际情况来填写；只需要替换D:\Users\Administrator\Desktop\部分即可

New-Item `
  -ItemType Directory `
  -Path "$stagingRoot\Data"

Copy-Item `
  "$sourceRoot\metadata.xml" `
  "$stagingRoot\metadata.xml"

Get-ChildItem "$sourceRoot" -Directory | ForEach-Object {
    Copy-Item `
      -LiteralPath $_.FullName `
      -Destination "$stagingRoot\Data\$($_.Name)" `
      -Recurse
}

复制过程中 PowerShell 可能不显示进度，等命令提示符重新出现即完成。

四、检查复制结果

复制完先自查一遍，确认数据没有遗漏。

$copiedFiles = Get-ChildItem `
  "$stagingRoot\Data" `
  -Recurse -File

[PSCustomObject]@{
    分块目录数 = (
        Get-ChildItem "$stagingRoot\Data" -Directory
    ).Count

    OSGB数量 = (
        $copiedFiles |
        Where-Object Extension -eq ".osgb"
    ).Count

    总大小GB = [math]::Round(
        ($copiedFiles | Measure-Object Length -Sum).Sum / 1GB,
        3
    )

    元数据存在 = Test-Path "$stagingRoot\metadata.xml"
}

预期结果：

项目	值
分块目录数	16
OSGB 数量	约 7,791 个（不含原始目录顶层的总入口 Block.osgb）
总大小	约 6.09 GB
元数据存在	True

full_osgb_copy
├── metadata.xml
└── Data
    ├── BlockBABA
    ├── BlockBABX
    ├── ...
    └── BlockYXYX

五、完整转换

用 3dtile.exe 把 OSGB 转成 3D Tiles，输出到 terra_3dtiles 目录，并把日志保存下来。

cd "D:\Users\Administrator\Desktop\3d"
## 上面的地址需要根据自己的实际情况来填写；只需要替换D:\Users\Administrator\Desktop\部分即可

.\3dtile.exe -v `
  -f osgb `
  -i "D:\Users\Administrator\Desktop\3d\full_osgb_copy" `
  -o "D:\Users\Administrator\Desktop\3d\terra_3dtiles" `
  2>&1 | Tee-Object -FilePath ".\full-convert.log"
## 上面的地址需要根据自己的实际情况来填写；只需要替换D:\Users\Administrator\Desktop\部分即可

出现 task over, cost ... s. 即完成。
转换期间不要关闭窗口，并确保磁盘至少还有约 12～15 GB 可用空间。

六、查看效果

转换完成后，准备一个 Cesium 页面来看效果。

6.1 替换 viewer.html

在 D:\Users\Administrator\Desktop\3d\ 的文件夹下创建viewer.html 文件并粘贴下面的代码。模型入口已经改成完整转换结果：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">

  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >

  <title>无人机三维模型查看器</title>

  <script src="https://cesium.com/downloads/cesiumjs/releases/1.124/Build/Cesium/Cesium.js"></script>

  <link
    rel="stylesheet"
    href="https://cesium.com/downloads/cesiumjs/releases/1.124/Build/Cesium/Widgets/widgets.css"
  >

  <style>
    html,
    body,
    #viewer {
      width: 100%;
      height: 100%;
      margin: 0;
      padding: 0;
      overflow: hidden;
      font-family: "Microsoft YaHei", Arial, sans-serif;
    }

    #viewer {
      background: #20242b;
    }

    #toolbar {
      position: absolute;
      top: 12px;
      left: 12px;
      z-index: 10;
      min-width: 330px;
      padding: 12px;
      color: white;
      background: rgba(20, 24, 30, 0.88);
      border: 1px solid rgba(255, 255, 255, 0.15);
      border-radius: 7px;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
      user-select: none;
    }

    #title {
      margin-bottom: 10px;
      font-size: 16px;
      font-weight: bold;
    }

    .toolbar-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 8px;
    }

    button,
    select {
      padding: 7px 11px;
      color: white;
      background: #1769aa;
      border: 1px solid rgba(255, 255, 255, 0.18);
      border-radius: 4px;
      cursor: pointer;
      font-family: inherit;
    }

    button:hover,
    select:hover {
      background: #2388d9;
    }

    button.active {
      background: #d97706;
    }

    select option {
      color: black;
      background: white;
    }

    #status {
      margin-top: 6px;
      color: #9fe7ff;
      font-size: 13px;
      line-height: 1.6;
      word-break: break-all;
    }

    #error {
      display: none;
      margin-top: 7px;
      padding: 7px;
      color: #ffd6d6;
      background: rgba(170, 20, 20, 0.75);
      border-radius: 4px;
      font-size: 13px;
      line-height: 1.5;
      word-break: break-all;
    }

    #help {
      margin-top: 6px;
      color: #bbbbbb;
      font-size: 12px;
      line-height: 1.5;
    }
  </style>
</head>

<body>
  <div id="viewer"></div>

  <div id="toolbar">
    <div id="title">无人机三维模型</div>

    <div class="toolbar-row">
      <button id="locateButton">重新定位</button>
      <button id="freezeButton">冻结LOD：关闭</button>
      <button id="boundsButton">包围盒：关闭</button>
      <button id="fpsButton">帧率：关闭</button>
    </div>

    <div class="toolbar-row">
      <label for="qualitySelect">显示质量：</label>

      <select id="qualitySelect">
        <option value="64">流畅</option>
        <option value="32" selected>平衡</option>
        <option value="16">清晰</option>
        <option value="8">高清</option>
      </select>
    </div>

    <div id="status">正在初始化……</div>
    <div id="error"></div>

    <div id="help">
      左键旋转 · 滚轮缩放 · 中键平移
    </div>
  </div>

  <script>
    let viewer = null;
    let tileset = null;

    const statusElement =
      document.getElementById("status");

    const errorElement =
      document.getElementById("error");

    const locateButton =
      document.getElementById("locateButton");

    const freezeButton =
      document.getElementById("freezeButton");

    const boundsButton =
      document.getElementById("boundsButton");

    const fpsButton =
      document.getElementById("fpsButton");

    const qualitySelect =
      document.getElementById("qualitySelect");

    function setStatus(message) {
      statusElement.textContent = message;
      console.log(message);
    }

    function clearError() {
      errorElement.style.display = "none";
      errorElement.textContent = "";
    }

    function showError(error) {
      let message;

      if (error && error.message) {
        message = error.message;
      } else {
        message = String(error);
      }

      errorElement.style.display = "block";
      errorElement.textContent = "错误：" + message;

      console.error(error);
    }

    async function locateModel() {
      if (!viewer || !tileset) {
        return;
      }

      try {
        setStatus("正在定位到模型……");

        const result = await viewer.zoomTo(tileset);

        if (result) {
          setStatus("模型定位完成。");
        } else {
          setStatus("模型已加载，但自动定位没有成功。");
        }
      } catch (error) {
        showError(error);
      }
    }

    async function start() {
      try {
        clearError();

        viewer = new Cesium.Viewer("viewer", {
          baseLayer: false,
          animation: false,
          timeline: false,
          geocoder: false,
          baseLayerPicker: false,
          navigationHelpButton: true,
          sceneModePicker: false,
          homeButton: false,
          fullscreenButton: true,
          selectionIndicator: false,
          infoBox: false,
          requestRenderMode: false
        });

        // 调试和纯模型查看模式下关闭地球，
        // 避免模型因高程基准差异被地球表面遮挡。
        viewer.scene.globe.show = false;
        viewer.scene.skyAtmosphere.show = false;

        viewer.scene.backgroundColor =
          Cesium.Color.fromCssColorString("#20242b");

        viewer.scene.screenSpaceCameraController.minimumZoomDistance =
          0.1;

        setStatus("正在读取完整模型的 tileset.json……");

        tileset =
          await Cesium.Cesium3DTileset.fromUrl(
            "./terra_3dtiles/tileset.json",
            {
              maximumScreenSpaceError: 32,

              // 避免转换器生成的子节点包围盒
              // 导致模型被错误剔除。
              cullWithChildrenBounds: false,

              skipLevelOfDetail: false,
              preloadWhenHidden: false,
              preloadFlightDestinations: true,
              preferLeaves: false
            }
          );

        viewer.scene.primitives.add(tileset);

        tileset.tileFailed.addEventListener(
          function (event) {
            const message =
              "瓦片加载失败：" +
              (event.url || "未知地址") +
              "；" +
              (event.message || "未知原因");

            showError(message);
          }
        );

        tileset.loadProgress.addEventListener(
          function (
            pendingRequests,
            tilesProcessing
          ) {
            if (
              pendingRequests === 0 &&
              tilesProcessing === 0
            ) {
              setStatus(
                "当前视野瓦片加载完成。显示质量：" +
                qualitySelect.options[
                  qualitySelect.selectedIndex
                ].text
              );
            } else {
              setStatus(
                "正在加载模型：等待请求 " +
                pendingRequests +
                "，处理中 " +
                tilesProcessing
              );
            }
          }
        );

        setStatus("模型入口加载成功，正在自动定位……");

        await locateModel();
      } catch (error) {
        showError(error);
      }
    }

    locateButton.addEventListener(
      "click",
      async function () {
        clearError();
        await locateModel();
      }
    );

    freezeButton.addEventListener(
      "click",
      function () {
        if (!tileset) {
          return;
        }

        tileset.debugFreezeFrame =
          !tileset.debugFreezeFrame;

        freezeButton.classList.toggle(
          "active",
          tileset.debugFreezeFrame
        );

        freezeButton.textContent =
          "冻结LOD：" +
          (tileset.debugFreezeFrame
            ? "开启"
            : "关闭");

        setStatus(
          tileset.debugFreezeFrame
            ? "LOD已经冻结。模型不会切换精细层级。"
            : "LOD已解除冻结，模型将按视距加载。"
        );
      }
    );

    boundsButton.addEventListener(
      "click",
      function () {
        if (!tileset) {
          return;
        }

        tileset.debugShowBoundingVolume =
          !tileset.debugShowBoundingVolume;

        boundsButton.classList.toggle(
          "active",
          tileset.debugShowBoundingVolume
        );

        boundsButton.textContent =
          "包围盒：" +
          (tileset.debugShowBoundingVolume
            ? "开启"
            : "关闭");

        setStatus(
          tileset.debugShowBoundingVolume
            ? "正在显示瓦片包围盒。"
            : "瓦片包围盒已经关闭。"
        );
      }
    );

    fpsButton.addEventListener(
      "click",
      function () {
        if (!viewer) {
          return;
        }

        viewer.scene.debugShowFramesPerSecond =
          !viewer.scene.debugShowFramesPerSecond;

        fpsButton.classList.toggle(
          "active",
          viewer.scene.debugShowFramesPerSecond
        );

        fpsButton.textContent =
          "帧率：" +
          (viewer.scene.debugShowFramesPerSecond
            ? "开启"
            : "关闭");
      }
    );

    qualitySelect.addEventListener(
      "change",
      function () {
        if (!tileset) {
          return;
        }

        const value =
          Number(qualitySelect.value);

        tileset.maximumScreenSpaceError = value;

        setStatus(
          "显示质量已切换为：" +
          qualitySelect.options[
            qualitySelect.selectedIndex
          ].text +
          "；误差值：" +
          value
        );
      }
    );

    window.addEventListener(
      "error",
      function (event) {
        showError(
          event.error ||
          event.message ||
          "页面发生未知错误"
        );
      }
    );

    window.addEventListener(
      "unhandledrejection",
      function (event) {
        showError(event.reason);
      }
    );

    start();
  </script>
</body>
</html>

1 2	## 如果修改文件位置记得修改json文件的位置，不修改默认即可 ./terra_3dtiles/tileset.json

6.2 启动本地服务

在模型目录启动一个本地 HTTP 服务，避免直接双击文件（file://）带来的跨域问题。

cd "D:\Users\Administrator\Desktop\3d"
## 上面的地址需要根据自己的实际情况来填写

python -m http.server 8000 `
  --bind 127.0.0.1 `
  --directory "D:\Users\Administrator\Desktop\3d"
## 上面的地址需要根据自己的实际情况来填写

浏览器打开：

1	http://127.0.0.1:8000/viewer.html