如何水平翻转 Three.js VideoTexture？

Question

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

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

我查看了 Three.js 文档中的 VideoTexture 和 Texture 但似乎只有一种方法可以翻转垂直。这个在前面中也有提到，因为"There is no WebGL flag for 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 做一些数学运算？

如何水平翻转 Three.js VideoTexture？

How can I flip a Three.js VideoTexture horizontally?

video

three.js

flip

videotexture