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; overflow: hidden;
} }
#progressBar { progress {
width: 500px; width: 100%;
height: 24px; height:8px;
position: absolute; position: absolute;
left: 50%; border-radius: 0px;
top: 10px; }
margin-left: -250px;
::-webkit-progress-bar {
border-radius: 0px;
background-color: #e6e6fa;
}
::-webkit-progress-value {
background-color: #4682b4;
} }
div#menu { 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 { RenderPass } from "three/examples/jsm/postprocessing/RenderPass";
import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing"; import { BloomEffect, EffectComposer, EffectPass, RenderPass } from "postprocessing";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
// vrma // vrma
let motion_enable = false; let motion_enable = false;
let head = null; let head = null;
// progress
// https://sbcode.net/threejs/progress-indicator // 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 // three
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
@ -57,18 +59,18 @@ window.addEventListener("DOMContentLoaded", () => {
let currentVrm: any = undefined; let currentVrm: any = undefined;
let currentVrmAnimation: any = undefined; let currentVrmAnimation: any = undefined;
let currentMixer:any = undefined; let currentMixer:any = undefined;
let percentComplete = null;
function load(url: string) { function load(url: string) {
loader.load( loader.load(
url, url,
(gltf) => { (gltf) => {
progressBar.style.display = 'none'
tryInitVRM(gltf); tryInitVRM(gltf);
tryInitVRMA(gltf); tryInitVRMA(gltf);
}, },
(xhr) => { (xhr) => {
const percentComplete = (xhr.loaded / xhr.total) * 100 percentComplete = (xhr.loaded / xhr.total) * 100
progressBar.value = percentComplete === Infinity ? 100 : percentComplete //progressBar.value = percentComplete === Infinity ? 100 : percentComplete
}, },
(progress) => console.log( "Loading model...", 100.0 * (progress.loaded / progress.total), "%" ), (progress) => console.log( "Loading model...", 100.0 * (progress.loaded / progress.total), "%" ),
(error) => console.error(error) (error) => console.error(error)
@ -102,7 +104,7 @@ window.addEventListener("DOMContentLoaded", () => {
} }
} }
const loader = new GLTFLoader(); const loader = new GLTFLoader(manager);
loader.register((parser) => { loader.register((parser) => {
return new VRMLoaderPlugin(parser); return new VRMLoaderPlugin(parser);
}); });
@ -422,4 +424,25 @@ window.addEventListener("DOMContentLoaded", () => {
renderer.render(scene, camera); 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'
};
}) })