公司的项目里面需求一个手机模拟VR双屏幕的效果，然后可以使用VR头显，将手机放入来查看模拟3d的效果。
好在Three.js已经实现了这个功能这个文件位置在官方文件的路径：\examples\js\effects\StereoEffect.js
我们可以通过这个路径找到当前版本的双屏幕效果文件。在当前文件夹下面还有一些其他的文件，都是一些实现某些效果的比如实现电影的3d特效的重叠效果，将图像转为代码的效果等等，这些后面我再更新。

接下来我们看一下文件内的内容：

THREE.StereoEffect = function (renderer) {

    var _stereo = new THREE.StereoCamera();
    _stereo.aspect = 0.5;

    this.setEyeSeparation = function (eyeSep) {

        _stereo.eyeSep = eyeSep;

    };

    this.setSize = function (width, height) {

        renderer.setSize(width, height);

    };

    this.render = function (scene, camera) {

        scene.updateMatrixWorld();

        if (camera.parent === null) camera.updateMatrixWorld();

        _stereo.update(camera);

        var size = renderer.getSize();

        if (renderer.autoClear) renderer.clear();
        renderer.setScissorTest(true);

        renderer.setScissor(0, 0, size.width / 2, size.height);
        renderer.setViewport(0, 0, size.width / 2, size.height);
        renderer.render(scene, _stereo.cameraL);

        renderer.setScissor(size.width / 2, 0, size.width / 2, size.height);
        renderer.setViewport(size.width / 2, 0, size.width / 2, size.height);
        renderer.render(scene, _stereo.cameraR);

        renderer.setScissorTest(false);

    };

};

这个文件内，就一个构造函数，需要通过传入一个THREE.WebGLRenderer对象来实例化，然后里面有三个方法：
setEyeSeparation 是设置双眼间距
setSize 设置场景的渲染尺寸
render 是主要方法，如果实现双屏效果，我们将不能使用renderer直接去渲染场景，而是通过当前实例化对象去渲染。我们可以看到方法内部，使用THREE.StereoCamera对象的两个相机再加上渲染之前设置渲染区域setViewport来实现双屏。
看完方法以后，是不是感觉原理很简单，接下来我们看一下案例，和在代码中如何实现。

案例请点击：https://www.wjceo.com/blog/threejs2/2019-01-22/183.html

案例中实现

首先，我们需要创建一个实例化对象

VrRender = new THREE.StereoEffect(renderer);

然后，在渲染场景时，我们直接改成双屏对象进行渲染即可：

VrRender.render(scene, camera);

是不是很简单。
如果要渲染回来也很简单，改回原来的渲染器即可，但是你会发现，只会渲染右侧那一块，这是因为使用双屏对象渲染时，它是通过修改渲染区域，分两次渲染的，渲染完成后没有修改回默认的渲染区域，所以，我们改回原来的渲染方式，需要将渲染区域修改回来即可：

renderer.setViewport(0, 0, size.width, size.height);

107 THREE.JS 使用StereoEffect实现模拟VR双屏

案例中实现

猜你喜欢