我正在使用Aframe和stereo component来显示180个3D视频。在通过WebVR等的标准硬纸板设置上,这可以很好地工作。这是使用Three.js图层功能
现在,我正在尝试从GearVR开始在头戴式耳机上实现它,不久将转向基于Oculus Go和Pico等基于Android的设备。
我立即遇到的问题是在默认商店浏览器(我假设是Oculus Caramel,但可能是三星)中的GearVR中,只有一只眼睛会渲染(有趣的是右眼,左是黑色)。我记得在某些耳机中,aframe不会拆分屏幕,而只会全屏显示,但这对立体渲染没有帮助。
我还意识到,当我进入专用设备中的多个屏幕时,我必须弄清楚如何在一个屏幕中显示一个视图,而在另一个屏幕中显示另一个视图。
我注意到其他一些VR 3D网站似乎也解决了这个问题,但是我不确定在Aframe / Three.js中是如何完成的。
立体声组件中代码的重要部分
// If left eye is set, and the split is horizontal, take the left half of the video texture. If the split
// is set to vertical, take the top/upper half of the video texture.
if (this.data.eye === "left") {
var uvs = geometry.faceVertexUvs[ 0 ];
var axis = this.data.split === "vertical" ? "y" : "x";
for (var i = 0; i < uvs.length; i++) {
for (var j = 0; j < 3; j++) {
if (axis == "x") {
uvs[ i ][ j ][ axis ] *= 0.5;
}
else {
uvs[ i ][ j ][ axis ] *= 0.5;
uvs[ i ][ j ][ axis ] += 0.5;
}
}
}
}
// If right eye is set, and the split is horizontal, take the right half of the video texture. If the split
// is set to vertical, take the bottom/lower half of the video texture.
if (this.data.eye === "right") {
var uvs = geometry.faceVertexUvs[ 0 ];
var axis = this.data.split === "vertical" ? "y" : "x";
for (var i = 0; i < uvs.length; i++) {
for (var j = 0; j < 3; j++) {
if (axis == "x") {
uvs[ i ][ j ][ axis ] *= 0.5;
uvs[ i ][ j ][ axis ] += 0.5;
}
else {
uvs[ i ][ j ][ axis ] *= 0.5;
}
}
}
}
在相机上
// Retrieve the PerspectiveCamera
var rootIndex = childrenTypes.indexOf("PerspectiveCamera");
var rootCam = this.el.object3D.children[rootIndex];
if(originalData.eye === "both"){
rootCam.layers.enable( 1 );
rootCam.layers.enable( 2 );
}
else{
rootCam.layers.enable(originalData.eye === 'left' ? 1:2);
}
}