动画进度条 Three.js

【问题标题】：Animation Progress Bar Three.js动画进度条 Three.js
【发布时间】：2022-02-17 04:09:03
【问题描述】：

如何在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()
    } );

  } );

【问题讨论】：

也许discourse.threejs.org/t/basic-loading-screen/2332 有帮助。
Mugen87 有一个很好的答案，但如果您需要更多详细信息，请查看我的答案。

标签： javascript three.js

【解决方案1】：

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

HTML：

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

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

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

CSS：

.ui {
    position: absolute;
}

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

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

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

【讨论】：