Skip to content
导览

Interface: CloudProps

Properties

server

Optional server: RenderParam | ServerParam

初始化云渲染的服务器参数。

Details

每一个云渲染都对应一个服务器云渲染实例。

而开启这个云渲染实例需要传递对应的参数。

初始化参数有两种形式。

第一种是已知server.addressserver.appIdserver.token ,可以开启一个新的云渲染。

第二种是已知server.addressserver.renderId,可以通过 server.renderId 直接连上 server.renderId 的云渲染。

需要注意的是,第二种方式需要保证流的一致性。如果原来 server.renderId 对应的流为视频流,则通过 server.renderId再次开启的流,也需要开启视频流。

server.addressserver.appIdserver.token 可能需要您的申请。

Examples

html
<div id="cloudView"></div>
<div id="cloudView"></div>
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  server:{
    address:"http://***.***.***.***:****",
    appId:"appId-****-****-****-****",
    token:"token-****-****-****-****",
  }
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  server:{
    address:"http://***.***.***.***:****",
    appId:"appId-****-****-****-****",
    token:"token-****-****-****-****",
  }
})
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  server:{
    address:"http://***.***.***.***:****",
    appId:"appId-****-****-****-****",
    token:"token-****-****-****-****",
  }
})
cloud.mount(cloudView)
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  server:{
    address:"http://***.***.***.***:****",
    appId:"appId-****-****-****-****",
    token:"token-****-****-****-****",
  }
})
cloud.mount(cloudView)

关于云渲染服务地址

http://***.***.***.***:**** 对应一个云渲染的服务,请替换为您的应用对应的地址。


el

Optional el: string | HTMLElement

云渲染连接成功后需要挂载的 DOM 元素。

Details

初始化云渲染如果传入 el 参数,则云渲染连接成功后会自动挂载到此 DOM 元素。

传入的 el 可以是一个 css id 选择器,也可以是一个 DOM 元素。

如果传入的是一个 DOM 元素,那么此 DOM 元素应当已经设置 id

Examples

html
<div id="cloudView"></div>
<div id="cloudView"></div>
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView"
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView"
})
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:cloudView
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:cloudView
})

loading

Optional loading: Object

云渲染连接过程在挂载的 DOM 元素上显示 loading 效果。

Details

loading.showtrue ,则会显示默认的 loading 效果。

如果设置了 loading.text ,则 loading 效果中的加载文字会显示为 loading.text 的 前五个字符。

loading 暗黑模式

loading 效果会根据网页的暗黑模式和白天模式进行切换。 例如黑夜模式,只要在DOM自身或任意父级或祖先标签上添加class="dark"即可。

Examples

html
<div id="cloudView"></div>
<div id="cloudViewDark" class="dark"></div>
<div id="cloudView"></div>
<div id="cloudViewDark" class="dark"></div>
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  loading:{
    show:true
  }
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  loading:{
    show:true
  }
})
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  loading:{
    show:true
  }
})
cloud.mount("#cloudViewDark")
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  loading:{
    show:true
  }
})
cloud.mount("#cloudViewDark")

Type declaration

NameTypeDescription
showboolean是否显示 loading 效果 默认为 true
text?string用户自定义显示的 loading 文字,推荐为 5 个英文字符。 默认显示为 "TESLA"
style?LoadingStyle用户自定义显示的颜色 包含 color(文字颜色)、 bgColor(背景颜色)、 orbitColor(动态轨道颜色)。

video

Optional video: boolean

是否开启视频流模式,默认为false

Details

如果传入true,则表示开启视频流。


gis

Optional gis: boolean

是否开启 Gis 模式,默认为false

Details

如果传入true,则表示开启 Gis 模式。


skybox

Optional skybox: SkyBox

云渲染的天空盒

Details

云渲染的背景颜色,可以是颜色的字符串,也可以是颜色的十六进制数值。 默认为 "#000000"


network

Optional network: Object

网速状态的展示,默认为false

Examples

html
<div id="cloudView"></div>
<div id="cloudView"></div>
js
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  network:{
    show: true
  }
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
  el:"#cloudView",
  network:{
    show: true
  }
})

Type declaration

NameTypeDescription
showboolean是否显示网速状态(只在视频流下有效果)。 默认为 false

filter

Optional filter: Object

在初始化的时候对渲染后的云渲染效果进行图像后处理,可以调整渲染效果的亮度(brightness)、对比度(contrast)和饱和度(saturate)。

Details

对于 brightness, 设置的亮度将线性应用于渲染效果,使其看起来或多或少地变得明亮。

值为 00% 将创建全黑图像。值为 1100% 会保持原效果。如果值大于 100% 提供更明亮的结果。若没有设置值,默认为 1

对于 contrast, 设置对比度,也就是设置明暗区域最亮的白和最暗的黑之间不同亮度层级的对比大小。

值为 00% 将创建全黑图像。值为 1100% 会保持原效果。若没有设置值,默认为 1

对于 saturate, 设置饱和度,也就是设置渲染效果中各个色彩的鲜艳程度。

值为 00% 将为完全不饱和,即失去色相的色彩,也就是黑白灰效果。值为 1100% 会保持原效果。

超过 100% 则有更高的饱和度。若没有设置值,默认为 1

Type declaration

NameType
brightness?number
contrast?number
saturate?number