ai/vrm
ai/vrm
1
0
Fork 0
Code

add progress

Browse Source
This commit is contained in:
syui 2024-03-20 16:26:17 +09:00
parent 3085921580
commit 08a5984fef
Signed by: syui
GPG Key ID: 5417CFEBAD92DF56
3 changed files with 310 additions and 290 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
dist/css/style.css vendored
View File

@ -3,6 +3,15 @@ body {
overflow: hidden; overflow: hidden;
} }
#progressBar {
width: 500px;
height: 24px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -250px;
}
div#menu { div#menu {
padding: 20px; padding: 20px;
border-bottom:solid 1px #ccc; border-bottom:solid 1px #ccc;

1
dist/index.html vendored
View File

@ -10,6 +10,7 @@
<script src="main.js"></script> <script src="main.js"></script>
</head> </head>
<body> <body>
<progress value="0" max="100" id="progressBar"></progress>
<div id="menu"> <div id="menu">
<span class="menu-top"> <span class="menu-top">
<button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button> <button id='btn-ai'><a href="/"><span class="icon-ai"></span></a></button>

12
src/index.ts
View File

@ -13,11 +13,16 @@ import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader";
window.addEventListener("DOMContentLoaded", () => { window.addEventListener("DOMContentLoaded", () => {
// vrma
let motion_enable = false; let motion_enable = false;
// progress
// https://sbcode.net/threejs/progress-indicator
const progressBar = document.getElementById('progressBar') as HTMLProgressElement
// three
const canvas = document.getElementById("canvas"); const canvas = document.getElementById("canvas");
if (canvas == null) return; if (canvas == null) return;
const scene = new THREE.Scene(); const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000); const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000);
camera.position.set(0, 1, -1.5) camera.position.set(0, 1, -1.5)
@ -50,9 +55,14 @@ window.addEventListener("DOMContentLoaded", () => {
loader.load( loader.load(
url, url,
(gltf) => { (gltf) => {
progressBar.style.display = 'none'
tryInitVRM(gltf); tryInitVRM(gltf);
tryInitVRMA(gltf); tryInitVRMA(gltf);
}, },
(xhr) => {
const percentComplete = (xhr.loaded / xhr.total) * 100
progressBar.value = percentComplete === Infinity ? 100 : percentComplete
},
(progress) => console.log( (progress) => console.log(
"Loading model...", "Loading model...",
100.0 * (progress.loaded / progress.total), "%" 100.0 * (progress.loaded / progress.total), "%"