如何水平翻转 Three.js VideoTexture?

How can I flip a Three.js VideoTexture horizontally?

我们使用前置摄像头作为 Three.js 场景背景的 VideoTexture。与前置摄像头的正常工作方式相比,该视频是翻转的。有没有办法翻转视频/VideoTexture,使其按我们预期的方式工作?

我已经尝试过另一个中显示的方法。我认为这不起作用,因为视频源不是 2 的幂。

我查看了 Three.js 文档中的 VideoTextureTexture 但似乎只有一种方法可以翻转垂直。这个在前面中也有提到,因为"There is no WebGL flag for gl.UNPACK_FLIP_X_WEBGL..."

有没有水平翻转视频的方法?

您可以在场景后面渲染四边形并旋转它或反向缩放它(而不是使用 .background)。

根据@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 做一些数学运算?