Aframe / Three.js-在GearVR和其他耳机上具有立体感

时间:2018-08-26 22:50:37

标签: three.js aframe webvr gear-vr

我正在使用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);
              }
            }

0 个答案:

没有答案