mirror of
https://github.com/Afilmory/afilmory
synced 2026-04-24 23:05:05 +00:00
add load progress for 3d scene
This commit is contained in:
@@ -125,8 +125,20 @@ export const LoadingIndicator = ({ ref }: { ref?: React.Ref<LoadingIndicatorRef
|
||||
{loadingState.webglQuality}
|
||||
</span>
|
||||
)}
|
||||
{loadingState.totalBytes > 0 && (
|
||||
<span className="text-xs text-white/60 tabular-nums">
|
||||
{Math.round(loadingState.loadingProgress)}%
|
||||
</span>
|
||||
)}
|
||||
</div>
|
||||
<p className="text-xs text-white/70">{loadingState.webglDetail || t('loading.webgl.building')}</p>
|
||||
{loadingState.totalBytes > 0 ? (
|
||||
<p className="text-xs text-white/70 tabular-nums">
|
||||
{(loadingState.loadedBytes / 1024 / 1024).toFixed(1)}MB /{' '}
|
||||
{(loadingState.totalBytes / 1024 / 1024).toFixed(1)}MB
|
||||
</p>
|
||||
) : (
|
||||
<p className="text-xs text-white/70">{loadingState.webglDetail || t('loading.webgl.building')}</p>
|
||||
)}
|
||||
</>
|
||||
) : (
|
||||
// 图片加载状态
|
||||
|
||||
@@ -143,7 +143,7 @@ export const ProgressiveImage = ({
|
||||
|
||||
const handleWebGLLoadingStateChange = useWebGLLoadingState(loadingIndicatorRef)
|
||||
const handleThreeDLoadingStateUpdate = useCallback(
|
||||
(state: { isVisible?: boolean }) => {
|
||||
(state: { isVisible?: boolean; loadingProgress?: number; loadedBytes?: number; totalBytes?: number }) => {
|
||||
if (state.isVisible === false) {
|
||||
loadingIndicatorRef?.current?.updateLoadingState({ isVisible: false })
|
||||
return
|
||||
@@ -158,6 +158,9 @@ export const ProgressiveImage = ({
|
||||
webglMessage: t('photo.3d.fetching'),
|
||||
webglDetail: t('photo.3d.fetchingDetail'),
|
||||
webglQuality: 'unknown',
|
||||
loadingProgress: state.loadingProgress ?? 0,
|
||||
loadedBytes: state.loadedBytes ?? 0,
|
||||
totalBytes: state.totalBytes ?? 0,
|
||||
})
|
||||
},
|
||||
[loadingIndicatorRef, t],
|
||||
|
||||
Reference in New Issue
Block a user