外部模型

外部模型是指用其他渲染方式加载的模型，当前仅支持three渲染。

在场景中，外部模型使用的图层为ExternalLayer。

1. 功能说明

外部模型的主要功能是：使用外部渲染的方式来加载模型。

2. 构造

new ExternalLayer(properties)

代码示例如下：

const layer = new ubm.ExternalLayer({
  id: 'demo',
  type: 'gltf',
  title: 'demo',
  url: 'https://cdn.hb6oss.xstore.ctyun.cn/assets/LittlestTokyo1.glb',
  position: {
      latitude: 39.89976366941874,
      longitude: 116.39183281819857,
      z: 200
    },
  // 缩放大小：[X轴,Y轴,Z轴]
  scale: [0.2, 0.2, 0.2],
  // 角度旋转:[X轴,Y轴,Z轴]
  rotate: [0, 90, 0],
  spatialReference: 102100,
  // 不开启模型动画
  modelAnimate: false
})

传递给构造函数ExternalLayer的所有属性列表properties可查看后续属性说明。

3. 属性

属性	类型	可选	说明
id	string	必填	图层唯一标识
type	string	必填	图层类型，目前只支持两种类型：`gltf`和`fbx`
title	string	---	图层的名称，显示用的
url	string	必填	图层资源的访问url
modelAnimate	boolean	必填	是否开启模型动画，默认为 true 开启
spatialReference	number	必填	坐标系，共有两种：102100、4326
position	any	必填	位置
scale	number	---	大小
rotate	number	---	角度旋转

4. 方法

方法	说明
startAnimate()	执行动画
stopAnimate()	停止动画
stopModelAnimate()	暂停模型动画
restartModelAnimate()	重启模型动画
resetModelAnimate()	重置模型动画

注：startAnimate() 和 stopAnimate() 是我们为了控制模型进行动画而添加的自定义方法。 stopModelAnimate()、restartModelAnimate()、resetModelAnimate()等方法是用来执行模型自带的一些动画效果。

4.1 执行动画

startAnimate?(option: IGltfAnimate): void

参数option的数据结构IGltfAnimate 如下：

interface IGltfAnimate {
  // 类型有两种: 路径'path'、旋转'rotate'
  type: string
  // 动画路径
  route: number[] | IGltfAnimatePath[]
  // 持续时长
  duration?: number
  // 是否循环
  loop?: boolean
  // 动画函数，请参看https://easings.net/
  // 举例：'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeInQuart' | 'easeOutQuad' | 'easeInOutQuad' | 'easeInOutCubic'
  easing?: string
  // 路径动画时，是否绘制路线
  isDrawLine?: boolean
}

其中IGltfAnimatePath的数据结构如下：

interface IGltfAnimatePath { 
  // 纬度
  latitude: number
  // 经度
  longitude: number
  // 视角高度，单位为米
  z: number
}

根据不同类型，我们开启执行动画的代码示例如下：

路径动画

layer.startAnimate({
  type: 'path',
  route: [
    {
      latitude: 39.89976366941874,
      longitude: 116.39183281819857,
      z: 0
    },
    {
      latitude: 39.99976366941874,
      longitude: 116.39183281819857,
      z: 0
    },
    {
      latitude: 39.99976366941874,
      longitude: 116.36183281819857,
      z: 0
    },
  ],
  duration: 10000,
  loop: false,
  easing: 'easeInOutCubic',
  isDrawLine: false
}).then((status: string) => {
  // 动画执行完成状态status: 'finish'
  if (status === 'finish') {
    // 动画执行完成后需要进行的操作(自定义)
    ...
  }
  // 动画执行中断状态status: 'break' 
  if (status === 'break') {
    // 动画执行中断后需要进行的操作(自定义)
    ...
  }
})

旋转动画

layer.startAnimate({
  type: 'rotate',
  // 旋转角度:[X轴,Y轴,Z轴]
  route: [0, 0, 180],
  duration: 1000,
  loop: false,
  easing: 'easeInOutCubic',
}).then((status: string) => {
  // 同路径动画
  ...
})