开发调试
大约 2 分钟
开发调试
三维应用程序更多依赖Javascript脚本编写,除了依赖一个DOM挂载容器外,并不依赖于任何UI组件。程序开发时建议先直接以HTML和JS方式编写和调试代码,功能完成后再集成到项目UI组件中。
主要调试的内容包括:
- 渲染效率
- 交互事件
- 资源加载时间
- 视点位置
渲染效率
渲染效率跟计算机硬件、软件环境、三维场景资源大小、动画数量和频率、刷新FPS设置有关系,推荐开启debugger
查看渲染效率参数。
注意
FPS不应低于30,根据项目实际情况总结,当FPS低于30时,会有明显卡顿。
Viewer
初始化提供了debugger
对象配置参数,包括FPS、计时、内存占用,可开启相关参数,在三维程序上方将出现实时数据。
{
debugger: {
// 是否允许
enable: true,
// 显示 FPS
showFPS: true,
// 显示 计时
showMilliseconds: true,
// 显示 内存占用
showMemory: true,
}
}
交互事件
交互事件的调试一般是测试鼠标点击或键盘事件的响应情况以及响应参数,当监听事件异常时有可能出现的情况:
- DIV挂载容器被上方容器遮挡,导致无法响应事件;
- 响应事件中的数据获取错误,报空或undefined异常,导致后续程序出错无响应;
- 响应事件中的程序逻辑异常报错,导致后续程序出错无响应;
- 多次响应事件叠加导致的程序逻辑问题。
注意
三维引擎不会判断输入数据的有效性,请根据文档严格保证数据有效性输入。
资源加载时间
三维应用程序的初始化时间包括资源加载+资源编译时间,很大程度上取决于场景模型和资源大小,根据项目测试情况总结:
服务器带宽 | 数据传输速度 | 20M模型加载时间(秒) |
---|---|---|
10M~20M | 1M/s | 20s |
20M~50M | 2M/s | 10s |
50M~100M | 3M~4M/s | 5s |
实际应用中,推荐场景模型文件大小不应大于100m
视点位置
视点位置是指三维程序打开时初始化的角度和中心,这个功能最常用,可调用viewer.getView()
获取,如程序需要保存,则将此结果保存到相关对象中即可。
// 获取当前视点
const view = viewer.getView();
// 设置当前视点
viewer.setView(view);