CODEWITHSUNDEEP
javascriptthree.js
bushdiver
bushdiver

Reputation: 771

How to make an interactive video progress bar in three.js?

I can't think of a good way to make an interactive video progress bar using three.js.. and I can't find an example of it being done anywhere.

I can draw the progress of the video pretty well (a plane with a canvas texture ) but selecting a new progress point with a raycast is what I can't figure out. I've tried checking the world coordinates ( intersects[ 0 ].point ) on clicks, the bar ranges from -3x to 2x but I don't know how to translate that into 100% (my math isn't good enough). And this also seems like a bad idea as it depends on keeping the controls fixed

Am I going about this all wrong?

Upvotes: 0

Views: 460

Answers (1)

Shomz
Shomz

Reputation: 37701

You can compare the coordinates of the plane and the raycast hit, it seems like you're already on it.

To translate -3x to 2x into percentages, do this: 

value = (x + 3) / 5; // will return something between 0 and 1,
                     // multiply by 100 to get percentage

It's basically offset compensation divided by the plane length.

Upvotes: 1

Related Questions