¿Cómo hago una barra de progreso de animación en three.js? He estado atrapado en este problema durante bastante tiempo. Traté de usar el enfoque de la barra de progreso del reproductor de video html5. Pero parece que no funciona para animaciones 3d.
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() } ); } );Tal vez desee crear una barra de progreso en HTML y luego mostrarla en la parte superior de esa escena.
HTML:
<label for="loading">Progress bar:</label> <progress id="loading" value="50" max="100">50%</progress>Notarás que esto no estará en la parte superior de la escena, sino que empujará la escena hacia abajo.
Para solucionarlo, debe crear una clase llamada ui , que puede usar para cualquier tipo de HTML que desee mostrar como interfaz de usuario.
CSS:
.ui { position: absolute; }Luego, debe asegurarse de agregar la clase a la barra de progreso.
<progress class="ui" id="loading" value="50" max="100">50%</progress> Después de eso, puede usar los selectores CSS de posicionamiento para colocar la barra de progreso en la posición correcta, como top , bottom , left , right , margin , padding y más.