如何实现三维模型的初始化配置和切换_三维空间重建(3D Space Reconstruction)-阿里云帮助中心

本文主要介绍了如何实现三维模型的初始化配置和切换。

SDK初始化

以下主要介绍三维模型通过前端引擎SDK进行初始化配置的相关示例。

模型初始化

const applicationInitOptions = {
  config: IResolver<any>; // 配置文件的加载器
  publicResourceResolver: OssResolver; // 全景贴图加载器
  privateResourceResolver: OssResolver; // 模型文件加载器
  mouseTexture?: string; // 自定义鼠标图片纹理
  spot?: { //自定义地面spot点配置
    activeSpotTexture?: string, // 鼠标hover态下的图片纹理
    normalSpotTexture?: string // 常规态下的图片纹理
  };
  background? [number, number, number]; // 场景背景色，每个颜色分量[0, 255]，
  enablePierce?: boolean; // 全景模型是否开启穿墙模式，默认不开启
}

const app = new Application(parentDom, applicationInitOptions);
app.start().then(() => {});

模型切换

以下主要介绍模型之间的切换的实现和设计理念。

设计理念

在SDK的设计中，只会初始化一次模型场景，场景中的摄像机、画布都是一直存在的基础实体。所以如果有需要切换模型的业务场景，SDK提供了切换api，只更改跟模型相关的配置数据，并重新运行必要的加载流程，同时会销毁不需要的实体。而不是通过销毁当前场景，再重新初始化的方式进行。相比而言场景的切换的效率更高。

切换API

调用changeScene方法，传入目标模型的初始化配置数据即可完成模型视图的切换，同时视图加载流程中的生命周期事件也会重新被触发。

app.changeScene(initOptions: ApplicationInitOptions)

如果对应模型的画布的大小发生了变化，可以调用 resize 方法进行重置。

app.resize()

配置文件

以下主要介绍三维模型场景必备的两个配置文件的文件格式，其中config.json是模型的配置文件，记录着模型中的初始配置信息、场景配置信息、楼层配置信息等。orthsmap.json是墙体结构的配置文件，记录着建筑物的墙体结构数据和户型图绘制数据，在黑白户型图SDK中也用到了该配置文件。

config.json

{
    // 默认初始配置
    "default": { 
        "firstScene": "p0" ｜ "normal", // 初始视图,px表示进入全景图中的场景，normal表示进入3d视图
        "viewImage": 'xxxx', // 初始视图
        "fov": 60, // 初始相机fov
        "directionIn": [-0.019438116573232567,-2.441381578553673]  // 初始视图的相机垂直和水平朝向
    },
    // 场景配置
    "scenes": {
        "p0": {
          // 当前spot点的相机位姿和一些参数
            "spotPose": { 
               "visible": true,  // 是否可见
                "opticalCenter": [-2.25014, 1.18265, 0.0439659], // 相机拍摄时的位置
                "upwardDirection": [-0.00649945, -0.041113, 0.999133], // 相机上方向
                "groundCoord": [-2.43126, 0.170385, -1.4279], // 相机拍摄时的地面坐标
                "forwardDirection": [0.999545, 0.0108317, 0.0281633] // 相机拍摄时朝向
            },
            "hotSpots":["p1", "p2"], // 可见spot点
          // 场景标签    
            "label" {
               "name": "客厅",
               "visible": false,
                "image": 'xxxx'
            },
            "floor": "f1" // 所属的楼层标识
        },
    },
    // 楼层配置
    "multiFloor": {
        "floorNumber": 3, // 楼层总数
        "floorScene": {
          "f1": { // 具体楼层标识
            "name": '一楼', // 楼层名称
            "base": 0, // 楼层基底高度
            "height": 3 // 楼层高度
          },
          "f2": {
            "name": '二楼',
            "base": 3,
            "height": 3
          },
          "f3": {
            "name": '三楼',
            "base": 6,
            "height": 3
          }
        }
    },
    "type": "lyj", // 模型配置文件的来源标识
    "version": "1.0.0"
}

orthsmap.json

{
    "scale": 1,
    "images": [ // 墙面结构数据
        {
            "Ts": [39.3071,0,0,0,0,39.3071,0,0,0,0,1,0,0,0,0,1],
            "Tt": [1,0,0,8.23438,0,1,0,5.24763,0,0,1,1.5709,0,0,0,1],
            "bbox": [121,149,425,406],
            "name": "dense_trim_tex.png",
            "Tflip": [1,0,0,0,0,-1,0,550,0,0,1,0,0,0,0,1],
            "width": 550, // 俯视图宽度
            "height": 550, // 俯视图高度
            "floor_idx": 1,
            "transform": [13.404881550731902,3.0947607558699075,0,286.18651804794627,3.0947607558699075,-13.404881550731902,0,302.2712288581845,0,0,1,1.5709,0,0,0,1],
            "actual_bbox": [-8.972166725209949,-4.789703991378149,-1.5709,6.49577672520995,8.286813991378148,1.41589], // 户型长宽高起点和终点坐标
          // 绘制的户型图数据
           "vectorMap":{
                "wall": [ { "data": []} ], // 墙体数据
                "version": "1.1",
                "ornament": [], // 门窗等配件数据
                "dimension": { // 面积配置
                   "default": 124.53,
                   "modify": 90.5,
                   "display": 'default' | "modify" | 'none',
                },
                "plottingScale": 5.586436133068909 // 绘制比例尺
            },
           "floor": "f1" // 所属的楼层标识
        },
      {
        ......
      }
    ],
    "compassAngle": 76,
    "translationX": 0,
    "translationY": 0,
    "rotationAngle": -74
}