动画进度条 Three.js

Question

如何在three.js中制作动画进度条？我已经在这个问题上停留了很长一段时间。我尝试使用 html5 视频播放器进度条方法。不过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()
    } );

  } );

Answer 1

也许您想在 HTML 中创建一个进度条，然后将其显示在该场景的顶部。

HTML:

<label for="loading">Progress bar:</label>
<progress id="loading" value="50" max="100">50%</progress>

您会注意到这不会在场景的顶部，而是会将场景推低。

为了解决这个问题，您需要创建一个名为 ui 的 class，您可以将其用于任何类型的 HTML 您想要显示为用户界面。

CSS:

.ui {
    position: absolute;
}

那么你应该确保将class添加到进度条。

<progress class="ui" id="loading" value="50" max="100">50%</progress>

之后，可以使用定位css选择器将进度条放置到正确的位置，如top、bottom、left、right、margin、padding 等。

动画进度条 Three.js

Animation Progress Bar Three.js

javascript

three.js