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;
}
#progressBar {
width: 500px;
height: 24px;
position: absolute;
left: 50%;
top: 10px;
margin-left: -250px;
}
div#menu {
padding: 20px;
border-bottom:solid 1px #ccc;

1
dist/index.html vendored
View File

@ -10,6 +10,7 @@
<script src="main.js"></script>
</head>
<body>
<progress value="0" max="100" id="progressBar"></progress>
<div id="menu">
<span class="menu-top">
<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", () => {
// vrma
let motion_enable = false;
// progress
// https://sbcode.net/threejs/progress-indicator
const progressBar = document.getElementById('progressBar') as HTMLProgressElement
// three
const canvas = document.getElementById("canvas");
if (canvas == null) return;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera( 70, canvas.clientWidth/canvas.clientHeight, 0.1, 2000);
camera.position.set(0, 1, -1.5)
@ -50,9 +55,14 @@ window.addEventListener("DOMContentLoaded", () => {
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
},
(progress) => console.log(
"Loading model...",
100.0 * (progress.loaded / progress.total), "%"