We are using the front camera feed as a VideoTexture for the background of the Three.js Scene. This video is flipped compared to the way the front-facing camera normally works. Is there a way to flip the video / VideoTexture so that it will work as we expect?
I have tried the method shown in this other question . This doesn't work, I think, because the video feed isn't a power of 2.
I have looked through the Three.js docs for VideoTexture and Texture but there only seems to be a way to flip vertically. This is also mentioned in the previous question , because "There is no WebGL flag for gl.UNPACK_FLIP_X_WEBGL
..."
Is there anyway to flip the video horizontally?
您可以在场景后渲染四边形,然后对其进行旋转或缩放(而不是使用.background
)。
Adding on to what @pailhead suggested and talking with a coworker, I came up with a solution. The only thing that is by guess is the '14' as shown below.
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);
}
The scale change by '14' feels good but I am not sure if there is a better way to calculate that value. However, for now this works for me quite well.
Edit 1
Looks like the width value works for mobile but is small on desktop. May need to do some math based on the ppi?
也许只是将transform: scaleX(-1)
设置为画布?
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.