Skip to content

Commit

Permalink
✨ feat: add vrm loading dom
Browse files Browse the repository at this point in the history
  • Loading branch information
rdmclin2 committed Aug 27, 2024
1 parent 6429601 commit 7d1f049
Show file tree
Hide file tree
Showing 3 changed files with 113 additions and 4 deletions.
21 changes: 19 additions & 2 deletions src/features/AgentViewer/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,25 @@ function AgentViewer(props: Props) {
(canvas: HTMLCanvasElement) => {
if (canvas) {
viewer.setup(canvas);
fetchModelUrl(agent.agentId, agent.meta.model!).then((modelUrl) => {
fetchModelUrl(agent.agentId, agent.meta.model!).then(async (modelUrl) => {
if (modelUrl) {
viewer.loadVrm(modelUrl);
// add loading dom
const agentViewer = document.querySelector('#agent-viewer')!;
const loadingScreen = document.createElement('div');
loadingScreen.setAttribute('id', 'loading-screen');
const loader = document.createElement('div');
loader.setAttribute('id', 'loader');
loadingScreen.append(loader);
agentViewer.append(loadingScreen);

// load
await viewer.loadVrm(modelUrl);

// remove loading dom
loadingScreen.classList.add('fade-out');
loadingScreen.addEventListener('transitionend', () => {
loadingScreen.remove();
});
}
});

Expand Down Expand Up @@ -90,6 +106,7 @@ function AgentViewer(props: Props) {
<div
ref={ref}
className={classNames(styles.viewer, className)}
id="agent-viewer"
style={{ height, width, ...style }}
>
<ToolBar className={styles.toolbar} viewer={viewer} />
Expand Down
93 changes: 93 additions & 0 deletions src/features/AgentViewer/style.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,99 @@ export const useStyles = createStyles(({ css, token }) => ({
width: 100%;
height: 100%;
min-height: 0;
#loading-screen {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 1;
background-color: #000;
transition: 1s opacity;
}
#loading-screen.fade-out {
opacity: 0;
}
#loader {
position: relative;
top: 50%;
left: 50%;
display: block;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
border: 3px solid transparent;
border-top-color: #9370db;
border-radius: 50%;
animation: spin 2s linear infinite;
animation: spin 2s linear infinite;
}
#loader::before {
content: '';
position: absolute;
inset: 5px;
border: 3px solid transparent;
border-top-color: #ba55d3;
border-radius: 50%;
animation: spin 3s linear infinite;
animation: spin 3s linear infinite;
}
#loader::after {
content: '';
position: absolute;
inset: 15px;
border: 3px solid transparent;
border-top-color: #f0f;
border-radius: 50%;
animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
@keyframes spin {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
transform: rotate(360deg);
transform: rotate(360deg);
}
}
`,
toolbar: css`
position: absolute;
Expand Down
3 changes: 1 addition & 2 deletions src/libs/vrmViewer/model.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { VRM, VRMLoaderPlugin, VRMUtils } from '@pixiv/three-vrm';
import * as THREE from 'three';
import { AnimationAction, AnimationClip } from 'three';
import { AnimationAction, AnimationClip, LoadingManager } from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { LoopOnce } from 'three/src/constants';

Expand Down Expand Up @@ -50,7 +50,6 @@ export class Model {
autoUpdateHumanBones: true,
}),
);

const gltf = await loader.loadAsync(url);

// 提升性能
Expand Down

0 comments on commit 7d1f049

Please sign in to comment.