创建一个 Tesla 云渲染
云渲染实例
每个云渲染应用都是通过 createCloud
函数创建一个新的 云渲染实例。 传入初始化参数 CloudProps,返回一个云渲染实例 Cloud。
html
<div id="cloudView" style="width:100vw;height:100vh;"></div>
<div id="cloudView" style="width:100vw;height:100vh;"></div>
js
import { createCloud } from 'xre_cloud'
const server = {
address: 'http://***.***.***.***:****', // 后端启动云渲染接口地址
appId: 'appId-****-****-****-****', // 使用tesla的系统标识 //之前版本的server
token: 'token-****-****-****-****', // 业务方的token
}
// 创建云渲染
const cloud = createCloud({
/* 初始化选项 */
// 挂载的dom
el: cloudView,
// 云渲染服务参数
server,
// 是否开启启动动画
loading: {
show: true
},
// 是否开启视频流
video: false,
// 图像后处理效果
filter: {
brightness: 1,
contrast: 1,
saturate: 1
}
})
import { createCloud } from 'xre_cloud'
const server = {
address: 'http://***.***.***.***:****', // 后端启动云渲染接口地址
appId: 'appId-****-****-****-****', // 使用tesla的系统标识 //之前版本的server
token: 'token-****-****-****-****', // 业务方的token
}
// 创建云渲染
const cloud = createCloud({
/* 初始化选项 */
// 挂载的dom
el: cloudView,
// 云渲染服务参数
server,
// 是否开启启动动画
loading: {
show: true
},
// 是否开启视频流
video: false,
// 图像后处理效果
filter: {
brightness: 1,
contrast: 1,
saturate: 1
}
})
挂载云渲染
云渲染实例必须在调用了 .mount()
方法后才会渲染出来。该方法接收一个“容器”参数,可以是一个实际的 DOM 元素或是一个 CSS 选择器字符串:
html
<div id="cloudView"></div>
<div id="cloudView"></div>
js
cloud.mount('#cloudView')
cloud.mount('#cloudView')
js
cloud.mount(cloudView)
cloud.mount(cloudView)
云渲染实例的内容将会被渲染在容器元素里面。
.mount()
方法应该始终在整个云渲染配置和资源注册完成后被调用。
多个云渲染实例
云渲染实例并不只限于一个。createCloud
API 允许你在同一个页面中创建多个共存的 云渲染 应用,而且每个应用都拥有自己的用于配置和全局资源的作用域。
html
<div id="cloudView1"></div>
<div id="cloudView2"></div>
<div id="cloudView1"></div>
<div id="cloudView2"></div>
js
const cloud1 = createCloud({
/* ... */
})
cloud1.mount(cloudView1)
cloud1.mount('#cloudView1')
const cloud2 = createCloud({
/* ... */
})
cloud1.mount(cloudView2)
cloud2.mount('#cloudView2')
const cloud1 = createCloud({
/* ... */
})
cloud1.mount(cloudView1)
cloud1.mount('#cloudView1')
const cloud2 = createCloud({
/* ... */
})
cloud1.mount(cloudView2)
cloud2.mount('#cloudView2')
注意
每一个配置在初始化之后都对应开启一个云渲染实例,相同的配置也就对应同一个后端云渲染实例。