How do I make an animation progress bar in three.js? I've been stuck on this problem for quite some time. I tried to use the html5 video player progress bar approach. But It seems it doesn't work for 3d animations.
var loader = new GLTFLoader()
loader.load( './resources/full_case/mymodel.glb', function ( gltf ) {
gltf.scene.scale.set(0.1,0.1,0.1)
gltf.scene.position.set(0,0,-150)
gltf.scene.rotation.set(0, Math.PI * 2, 0)
scene.add( gltf.scene );
mixer = new THREE.AnimationMixer( gltf.scene );
gltf.animations.forEach( ( clip ) => {
let animation = mixer.clipAction( clip );
animation.setLoop(THREE.LoopOnce)
animation.clampWhenFinished = true;
animation.timeScale = 1
animation.play()
} );
} );
Maybe you'd want to create a progress bar in HTML instead, and then display it on top of that scene.
HTML:
<label for="loading">Progress bar:</label>
<progress id="loading" value="50" max="100">50%</progress>
You will notice that this won't be on top of the scene, rather, it would be pushing the scene lower.
In order to fix that, you need to create a class called ui, which you can user for any type of HTML that you want to display as user interface.
CSS:
.ui {
position: absolute;
}
Then you should make sure to add the class to the progress bar.
<progress class="ui" id="loading" value="50" max="100">50%</progress>
After that, you can use positioning css selectors to place the progress bar to the correct position, such as top, bottom, left, right, margin, padding, and more.