跳到主要内容

加载状态与样式

加载层独立于模型导入。无论采用内置卡片、定制卡片或外部 UI,状态都来自同一份 VoxelLoadOverlayState

模式:VoxelLoadOverlayMode

枚举值含义宿主责任
BUILTIN使用标准遮罩与状态卡。无。
BUILTIN_CUSTOM使用 HAR 卡片,但采用 VoxelLoadOverlayStyle配置样式。
BUILDERHAR 管可见性与遮罩,宿主替换卡片内容。提供 Builder。
EXTERNALHAR 完全不绘制加载 UI。监听回调并绘制全部 UI。

阶段:VoxelLoadOverlayPhase

阶段visible典型含义
IDLE通常否等待导入。
IMPORTING读取或解析输入。
PREPARING准备预览资源。
ANIMATING正在播放加载揭示。
ERROR导入失败,errorMessage 有值。
HIDDEN成功后隐藏。

VoxelLoadOverlayState 包含 phasevisiblemessageerrorMessage。不要通过比较中文 message 判断阶段;应比较 phase

VoxelLoadOverlayStyle 全字段

字段默认值用途
maskColor#00000000整层遮罩颜色。
cardColor#F8FBFFDD状态卡背景。
titleColor#425572普通状态文字。
errorColor#C2413B错误文字。
loadingIndicatorColor#4A7DF3加载指示器颜色。
fontSize / errorFontSize14 / 12文本尺寸。
borderRadius16卡片圆角。
horizontalPadding / verticalPadding18 / 16内边距。
animationTopMargin14指示器与文字间距。
showLoadingIndicatortrue是否显示指示器。
useControllerStatustrue是否取 Controller 当前状态文案。
idleText导入提示空闲文案。
loadingText准备渲染资源导入文案。
preparingText创建预览准备文案。
animationText构建模型动画文案。
errorPrefix导入失败:错误前缀。

外部 UI 示例

@State private overlayText: string = '';
@State private overlayVisible: boolean = false;

private makeOptions(): VoxelViewerOptions {
const options = new VoxelViewerOptions();
options.loadOverlayMode = VoxelLoadOverlayMode.EXTERNAL;
options.onLoadOverlayStateChanged = (state: VoxelLoadOverlayState): void => {
this.overlayVisible = state.visible;
this.overlayText = state.errorMessage.length > 0 ? state.errorMessage : state.message;
};
return options;
}

回调可能在一次导入中多次触发,因此只做轻量状态赋值;不要在回调中再次调用 loadUri() 或同步读取大文件。