ai/vrm
ai/vrm
1
0
Fork 0
Code

fix progress

Browse Source
This commit is contained in:
syui 2024-03-20 23:44:39 +09:00
parent ed1d908e74
commit dfc76015a6
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
2 changed files with 42 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
dist/css/style.css vendored
View File

@ -3,13 +3,20 @@ body {
overflow: hidden;
}
#progressBar {
width: 500px;
height: 24px;
progress {
width: 100%;
height:8px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -250px;
border-radius: 0px;
}
::-webkit-progress-bar {
border-radius: 0px;
background-color: #e6e6fa;
}
::-webkit-progress-value {
background-color: #4682b4;
}
div#menu {

35
src/index.ts
View File

@ -11,15 +11,17 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
//import { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
window.addEventListener("DOMContentLoaded", () => {
// vrma
let motion_enable = false;
let head = null;
// progress
// https://sbcode.net/threejs/progress-indicator
const progressBar = document.getElementById('progressBar') as HTMLProgressElement
let manager = new THREE.LoadingManager();
let progressBar = document.getElementById('progressBar') as HTMLProgressElement
// three
const canvas = document.getElementById("canvas");
@ -57,18 +59,18 @@ window.addEventListener("DOMContentLoaded", () => {
let currentVrm: any = undefined;
let currentVrmAnimation: any = undefined;
let currentMixer:any = undefined;
let percentComplete = null;
function load(url: string) {
loader.load(
url,
(gltf) => {
progressBar.style.display = 'none'
tryInitVRM(gltf);
tryInitVRMA(gltf);
},
(xhr) => {
const percentComplete = (xhr.loaded / xhr.total) * 100
progressBar.value = percentComplete === Infinity ? 100 : percentComplete
percentComplete = (xhr.loaded / xhr.total) * 100
//progressBar.value = percentComplete === Infinity ? 100 : percentComplete
},
(progress) => console.log( "Loading model...", 100.0 * (progress.loaded / progress.total), "%" ),
(error) => console.error(error)
@ -102,7 +104,7 @@ window.addEventListener("DOMContentLoaded", () => {
}
}
const loader = new GLTFLoader();
const loader = new GLTFLoader(manager);
loader.register((parser) => {
return new VRMLoaderPlugin(parser);
});
@ -422,4 +424,25 @@ window.addEventListener("DOMContentLoaded", () => {
renderer.render(scene, camera);
}
// https://threejs.org/docs/#api/en/loaders/managers/LoadingManager
manager.onStart = function ( url, itemsLoaded, itemsTotal ) {
//console.log( 'Started loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
progressBar.style.display = 'block'
let percentComplete = (itemsLoaded / itemsTotal) * 100
progressBar.value = percentComplete === Infinity ? 100 : percentComplete
};
manager.onLoad = function ( ) {
//console.log( 'Loading complete!');
progressBar.style.display = 'none'
};
manager.onProgress = function ( url, itemsLoaded, itemsTotal ) {
let percentComplete = (itemsLoaded / itemsTotal) * 100
progressBar.value = percentComplete === Infinity ? 100 : percentComplete
//console.log( 'Loading file: ' + url + '.\nLoaded ' + itemsLoaded + ' of ' + itemsTotal + ' files.' );
};
manager.onError = function ( url ) {
//console.log( 'There was an error loading ' + url );
progressBar.style.display = 'block'
};
})