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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_30100043/article/details/86599573

公司的项目里面需求一个手机模拟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);

没有更多推荐了,返回首页