Question

我们正在使用前置摄像头提要作为Three.js场景背景的VideoTexture。与前置摄像头正常工作的方式相比，该视频被翻转了。有没有一种方法可以翻转视频/ VideoTexture，使其按我们期望的那样工作？

我尝试了其他question中显示的方法。我认为这是行不通的，因为视频供稿不是2的幂。

我已经浏览了VideoTexture和Texture的Three.js文档，但是似乎只有一种垂直翻转的方法。之前的question中也提到了这一点，因为“ gl.UNPACK_FLIP_X_WEBGL没有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

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

如何水平翻转Three.js VideoTexture？

2 个答案: