"Enhancing User Experience with Animated Progress Bars in Three.js

Is there a way to create a progress bar animation in three.js? I've been grappling with this issue for quite some time now. I attempted to replicate the html5 video player progress bar method, but unfortunately, it doesn't seem to be compatible with 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()
    } );

  } );
javascriptthree.js

Answer №1

One option is to implement a progress bar using HTML and then overlay it on the scene.

Here's an example of HTML code for a progress bar:

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

However, you may notice that the progress bar might not be overlaid on top of the scene but rather push the scene downwards.

To correct this, you can create a CSS class called ui which can be used to style any HTML elements intended for the user interface.

Here is an example CSS code for the ui class:

.ui {
    position: absolute;
}

Make sure to apply the ui class to the progress bar element.

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

Once the class is added, you can utilize positioning CSS properties like top, bottom, left, right, margin, padding, and more to position the progress bar correctly on the scene.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

How to achieve a typewriter effect in React using JavaScript

I've been attempting to incorporate a typewriter effect into my website - at the moment, the animation is functioning but each letter appears twice (e.g. instead of reading "Welcome!" it displays "Wweellccoommee!!"). I suspect this is an asynchronous ...

javascriptreactjsasynchronousreact-statereact-effects

What is the best way to incorporate a <li> view cap within a div element using JavaScript?

Currently, I am attempting to implement a dynamic <li> view limit within the content of a div. My goal is to display only 3 <li> elements each time the div content is scrolled. Although not confirmed, I believe this example may be helpful: ...

javascriptjqueryhtmlcss

Prevent postback when clicking on an image button in ASP

I have a project in ASP where I have an image button that allows users to browse an image and display it. I am utilizing a script for this project. Here is the code I am using: ASPX: <asp:Panel ID="stage" runat="server" cssClass="containment-wrapper" ...

c#javascriptasp.net

What is the reason for create-react-app initializing twice?

After creating a react app using the command npx create-react-app, I encountered an issue: import React from 'react'; class Costly { constructor() { console.log('creating costly class'); } } function App() { const costlyRef ...

javascriptreactjsreact-hooks

Encountering an error where property 'onClicked' is not defined when attempting to utilize chrome.action or chrome.browserAction in Chrome

I am currently developing a Chrome extension that will automatically redirect me to a specific URL when I click on the browser action icon. Here is the code snippet that I am trying to implement: chrome.browserAction.onClicked.addListener However, I am ...

javascriptgoogle-chrome-extension

Making API calls using JavaScript

I'm struggling with understanding how to approach this problem in javascript. Here is the question along with the details. I would appreciate any assistance. QUERY We have a server backend that provides two endpoints: /GetLocalPressReleases and /Get ...

javascriptjqueryjsonajaxvue.js

Searching for paired values within an array using Javascript or Jquery

In my JavaScript code, I am working with an array called ppts that looks like: var ppts = []; //... ppts.push({x: mouse.x, y: mouse.y}); //... var tmpArr = []; for (var i=1;ppts.length-1; i++) tmpArr.push(ppts[i].x); alert(tmpArr[2]); tmp_ctx.lineTo(pars ...

javascriptjqueryarraysfind

Ways to stop a ng-click event on a child div controller from activating an ng-click in the parent controller?

http://plnkr.co/edit/gB7MtVOOHH0FBJYa6P8t?p=preview The example above demonstrates a parent-child controller setup. In the child controller, when a button is clicked, it displays the div showPop and emits an event to the $rootScope. Upon receiving this e ...

javascriptangularjsangularjs-scopeangularjs-ng-click

The data returned by AJAX is not in the correct order in the database

function retrieveData() { <?php $stmt = $conn->prepare("SELECT id, name FROM data"); $stmt->execute(); $stmt->bind_result($id ,$name); while ($stmt->fetch()) {?> processData (<?php echo "'$id'";?>,<?php echo "&apo ...

javascriptjqueryajaxmysqli

Using Axios to fetch data and populating select dropdown options in a Vue component

I am currently working on integrating the response data values with my multiselect options. Although the console log displays the returned results, I'm facing difficulty in connecting them to my multiselect options. When I enter 'Day' into ...

javascriptlaravelvue.jsaxios

Incorporating AJAX in jQuery mobile to transmit data to a controller in CodeIgniter

I'm currently facing an issue where despite successfully retrieving the latitude and longitude values from the geolocation feature in Google Chrome, I am unable to pass these values to the index function within the controller named Add. When attemptin ...

phpjavascriptajaxcodeignitergoogle-maps-api-3

Disregard any unnecessary lines when it comes to linting and formatting in VSC using EsLint and Prettier

some.JS.Code; //ignore this line from linting etc. ##Software will do some stuff here, but for JS it's an Error## hereGoesJs(); Is there a way to prevent a specific line from being considered during linting and formatting in Visual Studio Code? I h ...

javascripttypescriptvisual-studio-codeprettier-eslint

Bootstrap3 Remote Modal experiencing conflict due to Javascript

Utilizing a bootstrap modal to showcase various tasks with different content but the same format is my current goal. However, I am encountering an issue when attempting to make the textareas editable using JavaScript. The conflict arises when I open and cl ...

javascriptphpjquerymodal-dialogbootstrap-modal

The jsonGenerator is unable to process strings containing spaces

Hey, I'm having trouble passing a string with whitespaces to my JavaScript function using jsonGenerator. Here's the code snippet: jGenerator.writeStringField(cols[8], ap.getContentId() != null ? "<img src='img/active.png' onclick=au ...

javajavascripthtmljson

Await keyword cannot be used due to undefined object reference

Currently in the process of implementing authentication into my node API. Using PassportJS, although I am fairly new to this so please bear with me. The goal is to add a local strategy and verify the user's password during login: // Local Strategy ...

javascriptnode.jsjwtpassport.js

Unable to execute JavaScript function by clicking

I've tried everything, but I can't seem to change the button text when selecting an item in the "Requirements" dropdown. You can view the issue on this site. Located at the bottom of the page is the "Requirements" dropdown. Each item has an oncl ...

javascriptphpjqueryhtml

The inputs for Node express middleware are unclear and lack definition

I am currently exploring Node.js as a potential replacement for my existing DOT NET API. I have created middleware to enforce basic non-role authorization in my application, but I am encountering compilation problems with the function inputs. Compilation ...

javascriptnode.jsexpress

Express.js app does not seem to properly handle app.use(express.raw()) functionality

I am in the process of creating an Express application that is designed to handle binary post data. The code snippet below showcases my progress so far: Server-side: var express = require('express'); var app = express(); var PORT = 3000; app.us ...

javascriptnode.jsexpress

What is the process for displaying a list of all files within a folder?

I'm currently working on a project where I have a 'products' directory located in the same folder as my index.html file. My goal is to develop a script that can tally all the jpg files within the 'products' folder and then generate ...

javascriptjqueryjsonajaxhtml

Updating the src of an iframe and adding an onclick event to a link using JavaScript

Looking to design a page that accommodates both login and sign up functionalities by dynamically updating the src of an iframe. In the navigation bar, there is: <li id="change"><a onclick="sign()">Sign up</a></li> And within the ...

javascripthtmlfunction