如何水平翻转三.js视频纹理

Question

我们使用前置摄像头馈送作为三.js场景背景的视频纹理。与前置摄像头正常工作的方式相比，此视频是翻转的。有没有办法翻转视频/视频纹理，使其按预期工作？

我已经尝试了另一个问题中显示的方法。我认为这是行不通的，因为视频源不是 2 的幂。

我已经浏览了VideoTexture和Texture的Three.js文档，但似乎只有一种垂直翻转的方法。这在上一个问题中也提到过，因为"没有 WebGL 标志用于gl.UNPACK_FLIP_X_WEBGL......">

有没有办法水平翻转视频？

Answer 1

您可以在场景后面渲染一个四边形并对其进行旋转或负缩放(而不是使用 .background (。

Answer 2

加上@pailhead的建议并与同事交谈，我想出了一个解决方案。唯一可以猜测的是"14"，如下所示。

function scaleBG(workCam, scaleObj) {
  var aspectRatio = window.innerWidth / window.innerHeight;
  var alpha = ((workCam.fov / 2.0) * Math.PI / 180);
  var beta = (90.0 * Math.PI / 180.0); 
  var gamma = ((180.0 - alpha - beta) * Math.PI / 180.0);
  var c = workCam.far - camZOffset - 1.0;
  var a = c * Math.sin(alpha) / Math.sin(gamma);
  var b = c * Math.sin(beta) / Math.sin(gamma);
  var width = a * 2 / (window.innerWidth / 14);
  scaleObj.scale.set(-width, width / aspectRatio, 1);
  scaleObj.position.set(camXOffset,0,-c);
}

"14"的比例变化感觉很好，但我不确定是否有更好的方法来计算该值。但是，就目前而言，这对我很有用。

编辑 1

看起来宽度值适用于移动设备，但在桌面上很小。可能需要根据 ppi 做一些数学运算？