用MapV-Three渲染倾斜摄影，就这么简单

倾斜摄影技术现在越来越常见了。什么园区三维建模、城市三维重建、地形可视化，背后用的基本都是这玩意儿。而在实际开发中，倾斜摄影数据一般都是以3D Tiles格式存储的。

好消息是，MapV-Three框架把3D Tiles的加载渲染封装得非常简单。今天我们就来看看怎么用 Default3DTiles 这个组件快速实现倾斜摄影的渲染。

一、3D Tiles是什么？

在正式开始之前，先简单科普一下。

3D Tiles 是Cesium推出的一种用于传输大规模三维地理空间数据的开放标准。说人话就是：把海量的三维模型数据切成小块（瓦片），然后根据视角和距离按需加载，这样既能保证显示效果，又不会卡到爆炸。

常见的倾斜摄影、BIM模型、点云数据，都可以转成3D Tiles格式。

在MapV-Three中，加载3D Tiles数据主要用到Default3DTiles这个通用的3D Tiles加载器，适用于大部分场景

二、最简单的例子：加载倾斜摄影

废话不多说，直接上代码。

基础加载

import {useRef} from 'react';
import * as mapvthree from '@baidu/mapv-three';

const ref = useRef();
async function callback(engine) {

    const tile = engine.add(new mapvthree.Default3DTiles({
        url: 'data/3dtiles/tileset.json',
    }));

    return engine;
}

<App ref={ref} initConfig={{
    map: {
        center: [105.931684, 29.349367, 280],
        range: 2000,
        pitch: 75,
        provider: null,
    }
}} callback={callback} />

就这么几行代码，搞定！

核心就是：

  1. new mapvthree.Default3DTiles() 创建实例
  2. 传入 url 参数，指向3D Tiles的入口文件（通常是 tileset.json）
  3. engine.add() 添加到场景中

运行后，地图上就会显示出三维建模了。

关键配置说明

地图初始化配置：

  • center：地图中心点坐标，格式是 [经度, 纬度, 高度]。高度这个参数很重要，直接影响初始视角
  • range：相机距离地面的高度（米）
  • pitch：俯仰角，0是平视，90是俯视。倾斜摄影一般设置60-80度比较合适
  • provider: null：不加载底图，因为我们要看的是三维模型本身

tileset.json 是什么：
这是3D Tiles数据的元数据文件，里面定义了瓦片的组织结构、坐标系、细节层级等信息。只要有这个文件，引擎就知道该怎么加载整个数据集。

三、常见问题与解决方案

虽然代码很简单，但实际开发中还是会遇到一些问题。

问题1：模型加载不出来

可能的原因：

  1. tileset.json 路径不对
  2. 数据文件的坐标系和地图坐标系不匹配
  3. 初始视角离模型太远或太近

排查方法：

  • 打开浏览器控制台，看有没有404错误（路径问题）
  • 检查 tileset.json 文件中的 region 或 boundingVolume 字段，确认模型的地理位置
  • 调整 center 和 range 参数，试着飞到模型附近

问题2：模型显示很卡

可能的原因：

  1. 数据量太大，没有做LOD优化
  2. 显卡性能不够
  3. 同时加载了太多瓦片

优化建议：

  • 确保3D Tiles数据是分层级切片的（LOD）
  • 适当调整相机视角，减少可见瓦片数量
  • 关闭不必要的后处理效果（如果开了的话）

问题3：模型位置偏移

原因：坐标系不一致。

倾斜摄影数据可能是WGS84、GCJ02或其他坐标系，而MapV-Three可以使用多种坐标系。如果不匹配，模型会跑偏。

解决方法：

  • 在生成3D Tiles数据时，统一使用ECEF坐标系
  • 如果数据已经生成了，可以通过变换矩阵进行校正（这个比较复杂，一般不推荐）

四、性能优化建议

倾斜摄影数据通常都很大（几个GB甚至几十GB），加载和渲染都是性能瓶颈。以下是一些优化建议：

1. 数据层面

  • 生成3D Tiles时，确保做了LOD分层
  • 瓦片大小控制在2-5MB比较合适，太大会卡
  • 压缩纹理贴图，减少传输量

2. 代码层面

  • 不要在短时间内频繁切换视角，会导致大量瓦片加载
  • 合理设置相机 range，不要离模型太近（太近会加载高精度瓦片，很吃性能）
  • 如果有多个3D Tiles数据，按需加载，不要一次性全加进来

3. 环境层面

  • 建议用支持WebGL 2.0的浏览器
  • 显卡性能要跟得上（集成显卡可能带不动）

六、总结

用MapV-Three加载倾斜摄影数据，核心就是 Default3DTiles 这个组件。

基础用法：

const tile = engine.add(new mapvthree.Default3DTiles({
    url: 'tileset.json',
}));

注意事项：

  • 检查数据路径和坐标系
  • 合理设置初始视角（center、range、pitch）
  • 关注性能，做好数据优化

基本上，只要数据准备好了，代码就是这么几行的事儿。倾斜摄影听起来高大上，但用起来其实挺简单的。