Skip to content
导览

创建一个 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')

注意

每一个配置在初始化之后都对应开启一个云渲染实例,相同的配置也就对应同一个后端云渲染实例。