Creating a dynamic video progress bar using three.js: A step-by-step guide

I'm struggling to create an interactive video progress bar using three.js and haven't been able to find any examples of it being done before.

While I can successfully draw the progress of the video (using a plane with a canvas texture), I'm having difficulty figuring out how to select a new progress point with a raycast. I've attempted checking world coordinates (intersects[0].point) on clicks, but the bar ranges from -3x to 2x and I'm unsure how to translate that into a percentage (my math skills are lacking). Additionally, this method seems impractical as it relies on keeping the controls fixed.

Am I approaching this task incorrectly?

javascriptthree.js

Answer №1

When comparing the coordinates of the plane with the raycast hit, it appears that you are heading in the right direction.

To convert -3x to 2x into percentages, follow these steps: 

value = (x + 3) / 5; // this equation will result in a value between 0 and 1,
                     // multiply by 100 for percentage calculation

This process essentially involves offset adjustment divided by the length of the plane.

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

Merging two arrays concurrently in Angular 7

When attempting to merge two arrays side by side, I followed the procedure below but encountered the following error: Cannot set Property "account" of undefined. This is the code in question: acs = [ { "account": "Cash In Hand", ...

javascriptangulartypescriptangular7

What steps can be taken to avoid the duplication of color and stock values when including additional sizes?

Individual users have the ability to include additional text fields for size, color, and stocks. When adding more sizes, the data inputted for colors and stock will duplicate from the initial entry. Desired output: 1st Size : small color: red, stocks: 10 ...

javascriptreactjsmaterial-ui

Difficulty in selecting an item from a list of array

Encountering an issue when attempting to create a custom select drop-down list. When utilizing an array list in the map(), everything functions correctly. However, upon pressing enter, an item in the input field appears as [object Object]. Despite numerous ...

javascripthtmlreactjs

Encountering issues with extension CLI - "Unable to utilize the import statement outside a module"

Recently, I've been attempting to integrate the Afinn-165 node package (https://www.npmjs.com/package/afinn-165) into my Google Chrome extension. The goal is to analyze the sentiment of text scraped from each page. Being a novice in web development, I ...

javascriptnpmgoogle-chrome-extensionimporterror

How can I locate a specific value within a multidimensional array when I already have a known value to

I am working with a multidimensional array in jQuery and I need to retrieve the conversionSI value based on a known shortname. How can I get this value and store it in a variable, or possibly display it using console.log? Could there be an optimal way to s ...

javascriptjqueryarraysmultidimensional-array

The slice method for copying arrays seems to be malfunctioning

It's perplexing that even after utilizing distances.slice(), I end up modifying the original array when I make changes to the new copy. What could be causing this unexpected behavior? var distances = [ ['-1', '10', '-1&ap ...

javascriptarrays

React hook not working to update state across multiple components

My code consists of a hook and 2 components: App.js and New.js. The issue I'm facing is that when the state in the hook is changed by a function in App.js, the value is not updated in New.js. I have reviewed my code multiple times but still can't ...

javascriptreactjsecmascript-6react-hooks

There seems to be a limitation in JS/JQuery where it is unable to append HTML that spans

I am encountering an issue with retrieving data in a div element. It seems that the function provided does not work correctly for files larger than a single line of code or even possibly a string. What can be done to resolve this? <ul class="dropdo ...

javascriptphpjqueryhtml

Utilizing timezones with Moment.js

Currently, I am utilizing momemt.js and moment-timezone.js to present time in the browser. At this time, I have received epoch time from the server which has been converted to central time. My goal now is to exhibit the time in EST/EDT format. To achieve t ...

javascriptjquerytimetimezonemomentjs

What could be causing the server to return an empty response to an ajax HTTP POST request?

Attempting to make a POST request using ajax in the following manner: $.ajax({ type: "POST", url: 'http://192.168.1.140/', data: "{}", dataType: "json", ...

javascripthtmljqueryajax

Generate a Vue Component in real-time with a click of a button

My task involves populating a list of orders using the orders array. Each order has an edit functionality that triggers a vuetify dialog box component when clicked, displaying default data for editing. Here's my current approach: <tbody class=" ...

javascriptvue.jsvuetify.js

Utilizing AJAX to showcase an HTML popup

I am currently working on a project to create an HTML page that will display another HTML file in an alert when a button is pressed. However, I am facing an issue where the content is not being displayed as expected. <html> <head> ...

javascriptajax

Increasing the number of arguments being passed to a callback function

When utilizing lodash's _.forIn function, you will have access to a callback that includes both the key and value of the current element. _.forIn({...}, callback); function callback(key, value) {...} Is there a method available to pass an additiona ...

javascriptparameterscallbackparameter-passinglodash

Sending data from PHP to JavaScript using AJAX

I'm encountering an issue trying to pass data from a PHP file to a JavaScript file using echo. My PHP file contains the following code snippet: <?php ...establishing connection and retrieving list from database... for($i=0;$i<sizeOf($li ...

javascriptphpjqueryajax

The Discord OAuth2 bot fails to assign roles to authenticated users

While working on OAuth2 login for my website, I encountered an issue. After a user successfully logs in through OAuth2, the bot should assign a role to them on my Discord server. However, when I tested the login process myself, the bot returned an error me ...

javascriptnode.jsdiscorddiscord.js

Having issues with Protractor unable to locate CKEditor during testing proceedings

When working with Protractor on a non-Angular page, I am trying to locate the CKEditor instance in order to update the data. The following code snippet works in the Chrome console: CKEDITOR.instances.html_editor.setData("Hello") However, when I attempt t ...

javascriptangularjsseleniumckeditorprotractor

Can someone assist me with arranging these divs within my flexbox layout?

I'm having a tough time figuring out why the flex box aspect is making things so complicated for me. My goal is to achieve responsiveness like this - https://i.sstatic.net/MdzPO.png Despite following various flex tutorials, I haven't been succe ...

javascripthtmlcss

Navigating through Node's asynchronous behavior

I am currently developing a web scraper that gathers data about various shirts from a specific website. I have successfully set up all the necessary NPM packages in Node.js to scrape the information and save it to a CSV file. However, I have encountered ...

javascriptjquerynode.jsasynchronousnpm

Why is there a node_modules folder present in the npm package I authored when using it as a dependency in another module?

After successfully launching my first npm package, I noticed something strange when installing it as a dependency in my project. Upon exploring the project folder in node_modules, I discovered an unexpected node_modules folder containing just one package ...

javascriptnode.jsnpmdependenciesnode-modules

Phonegap app developer encounters issue with sending ajax requests

Recently, I encountered an issue with Ajax in my Phonegap development. Previously, it worked perfectly but now when I call the Ajax function, nothing happens. Here are the steps I have taken to troubleshoot: 1) I edited the config.xml file and added the f ...

javascriptajaxjsoncordovaphonegap-build