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

Question

我想不出使用three.js 制作交互式视频进度条的好方法.. 并且我找不到任何地方的示例。

我可以很好地绘制视频的进度（具有画布纹理的平面），但我无法通过光线投射选择新的进度点。我尝试检查点击时的世界坐标（ intersects[ 0 ].point ），条形范围从 -3x 到 2x 但我不知道如何将其转换为 100%（我的数学不够好）。这似乎也是一个坏主意，因为它取决于保持控件固定

这一切都错了吗？

Answer 1

你可以比较一下飞机的坐标和光线投射的命中，好像你已经在上面了。

要将 -3x 转换为 2x 为百分比，请执行以下操作：

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

基本上是偏移补偿除以平面长度。