fix progress

aisyui · Mar 20, 2024 · dfc7601 · dfc7601
1 parent ed1d908
commit dfc7601
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 12 deletions.
diff --git a/dist/css/style.css b/dist/css/style.css
@@ -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 {

diff --git a/src/index.ts b/src/index.ts
@@ -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'
+	};
+
 })