eZWalker Tesla创建一个 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-****-****-****-****',
token: 'token-****-****-****-****',
}
const cloud = createCloud({
el: cloudView,
server,
loading: {
show: true
}
})import { createCloud } from 'xre_cloud'
const server = {
address: 'http://***.***.***.***:****',
appId: 'appId-****-****-****-****',
token: 'token-****-****-****-****',
}
const cloud = createCloud({
el: cloudView,
server,
loading: {
show: true
}
})关于云渲染后端服务地址
http://***.***.***.***:**** 对应一个云渲染的后端服务，请替换为您的应用对应的地址。
token 说明
TIP
客户端和服务端需要先约定好相关 appId 和对应的 key。
appId: 规则为纯小写英文字符+数字。 总体长度不超过10位。（双方存储）
key: 规则为纯小写英文字符+数字，整体长度必须为16位。key应该妥善存放好，不能被泄露，不能暴露在前端代码中。（双方存储）
time: 规则为单位为秒的时间戳，10位。（双方各自获取各自时间）
token 的计算过程应当是业务系统后端计算完成，前端通过请求接口获取到后端计算好的 token 。
token 计算规则示例：
ts
const appId='ho';
const time = Date.now() / 1000 | 0;
const key = '9d8a121ce581499d';
const appIdMixed = appId + time + key;
// 按照 appId + time + key 的方式拼接后，进行md5操作
// md5(ho16595802059d8a121ce581499d)=db344bb65ffb45e4d4f8be0b0ff02950
// 最终得到32位纯小写的md5值
const sign = md5(
appIdMixed,
);
// 将 time 和 sign 以 time_sign 方式作为token
const token = `${time}_${sign}`;
// 以上计算 token 的过程应当由业务系统后端完成，前端通过请求接口获取到计算好的 token。
// 那么在前端初始化的时候传递的参数应该为：
const server = {
address: 'http://***.***.***.***:****',
appId,
token,
}const appId='ho';
const time = Date.now() / 1000 | 0;
const key = '9d8a121ce581499d';
const appIdMixed = appId + time + key;
// 按照 appId + time + key 的方式拼接后，进行md5操作
// md5(ho16595802059d8a121ce581499d)=db344bb65ffb45e4d4f8be0b0ff02950
// 最终得到32位纯小写的md5值
const sign = md5(
appIdMixed,
);
// 将 time 和 sign 以 time_sign 方式作为token
const token = `${time}_${sign}`;
// 以上计算 token 的过程应当由业务系统后端完成，前端通过请求接口获取到计算好的 token。
// 那么在前端初始化的时候传递的参数应该为：
const server = {
address: 'http://***.***.***.***:****',
appId,
token,
}Parameters
| Name | Type | Description |
|---|---|---|
props | CloudProps | 云渲染初始化参数。 |
Returns
挂载云渲染
初始化云渲染如果传入 el 参数，则云渲染连接成功后会自动挂载到此 DOM 元素。 如果初始化云渲染没有传入 el 参数，则在云渲染连接成功后不会挂载。 此时可以通过调用 .mount() 手动挂载。 该方法接收一个容器参数，可以是一个实际的 DOM 元素或是一个 CSS id选择器字符串：
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')注意
每一个配置在初始化之后都对应开启一个云渲染实例，相同的配置对应同一个后端云渲染实例。