如何在three.js中制作交互式视频进度条？

Question

我想不出一个使用three.js制作交互式视频进度条的好方法，而且我无法找到它在任何地方完成的示例。

我可以很好地画出视频的进度（一个具有画布纹理的平面），但用光线技术选择新的进度点是我无法弄清楚的。我试着在点击上检查世界坐标（相交[0] .point），条从-3x到2x，但我不知道如何将其转换为100％（我的数学不够好）。这也似乎是一个糟糕的主意，因为它取决于保持控制固定

我对这一切都错了吗？

Answer 1

您可以比较飞机的坐标和raycast命中，看起来好像已经在它上面了。

要翻译-3x 2倍成比例，这样做：

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

它基本上偏移补偿由平面长度划分。