Interface: CloudProps
Properties
server
• Optional
server: RenderParam
| ServerParam
初始化云渲染的服务器参数。
Details
每一个云渲染都对应一个服务器云渲染实例。
而开启这个云渲染实例需要传递对应的参数。
初始化参数有两种形式。
第一种是已知server.address
、 server.appId
、server.token
,可以开启一个新的云渲染。
第二种是已知server.address
、 server.renderId
,可以通过 server.renderId
直接连上 server.renderId
的云渲染。
需要注意的是,第二种方式需要保证流的一致性。如果原来 server.renderId
对应的流为视频流,则通过 server.renderId
再次开启的流,也需要开启视频流。
server.address
、 server.appId
、server.token
可能需要您的申请。
Examples
<div id="cloudView"></div>
<div id="cloudView"></div>
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-****-****-****-****",
}
})
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
<div id="cloudView"></div>
<div id="cloudView"></div>
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
el:"#cloudView"
})
import { createCloud } from 'xre_cloud'
const cloud = createCloud({
el:"#cloudView"
})
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.show
为 true
,则会显示默认的 loading
效果。
如果设置了 loading.text
,则 loading
效果中的加载文字会显示为 loading.text
的 前五个字符。
loading 暗黑模式
loading 效果会根据网页的暗黑模式和白天模式进行切换。 例如黑夜模式,只要在DOM
自身或任意父级或祖先标签上添加class="dark"
即可。
Examples
<div id="cloudView"></div>
<div id="cloudViewDark" class="dark"></div>
<div id="cloudView"></div>
<div id="cloudViewDark" class="dark"></div>
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
}
})
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
Name | Type | Description |
---|---|---|
show | boolean | 是否显示 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
<div id="cloudView"></div>
<div id="cloudView"></div>
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
Name | Type | Description |
---|---|---|
show | boolean | 是否显示网速状态(只在视频流下有效果)。 默认为 false |
filter
• Optional
filter: Object
在初始化的时候对渲染后的云渲染效果进行图像后处理,可以调整渲染效果的亮度(brightness
)、对比度(contrast
)和饱和度(saturate
)。
Details
对于 brightness
, 设置的亮度将线性应用于渲染效果,使其看起来或多或少地变得明亮。
值为 0
或 0%
将创建全黑图像。值为 1
或 100%
会保持原效果。如果值大于 100% 提供更明亮的结果。若没有设置值,默认为 1
。
对于 contrast
, 设置对比度,也就是设置明暗区域最亮的白和最暗的黑之间不同亮度层级的对比大小。
值为 0
或 0%
将创建全黑图像。值为 1
或 100%
会保持原效果。若没有设置值,默认为 1
。
对于 saturate
, 设置饱和度,也就是设置渲染效果中各个色彩的鲜艳程度。
值为 0
或 0%
将为完全不饱和,即失去色相的色彩,也就是黑白灰效果。值为 1
或 100%
会保持原效果。
超过 100% 则有更高的饱和度。若没有设置值,默认为 1
。
Type declaration
Name | Type |
---|---|
brightness? | number |
contrast? | number |
saturate? | number |