如何在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 

它基本上偏移補償由平面長度劃分。