公司的项目里面需求一个手机模拟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双屏相关推荐

Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房、房间切换和自定义标注
Vue使用photo-sphere-viewer360°×180°全景插件模拟VR看房.房间切换和自定义标注 photo-sphere-viewer 下载插件使用常用参数 Markers插件使用 ...
用JS写了一个模拟串行加法器
在重温<编码:隐匿在计算机软硬件背后的语言>第12章--二进制加法器时,心血来潮用JS写了一个模拟串行加法器. 测试断言工具TestUtils.js function assertTrue ...
unity如何使用电脑模拟VR环境
unity如何通过VRTK模拟VR环境如何在没有HTC VIVE的前提下使用VR?由于作者研究室课题是基于虚拟现实的人机交互,需要用到VR下的场景,但由于实验室设备只有一套,而当我们想要随时随地进行 ...
three.js初体验：模拟一个小树杈的生长
代码效果: 完整代码: <template><div><button @click="run" class="btn">ru ...
前端Vue使用封装Mock.js和api请求模拟数据案例(带源码)
目录一:准备阶段二:使用阶段一:准备阶段 1.安装mockjs axios npm install mockjs --save npm install axios --save 2.main.j ...
手机+Driver4VR模拟VR一体机：解锁零成本VR游戏无线体验方案 | driver4vr破解 alyx
原文链接最近刷B站看到一位up主发的VR游戏视频: [通关完结]<半衰期/半条命:Alyx>最好的VR游戏,2020年的无冕之王|小宁子看起来针不戳啊. 于是,体验一下? 搜了一下VR ...
如何使用aframe.js构建一个简单的VR播放器
在当今这个信息化的时代,虚拟现实(VR)已经开始逐渐成为一种新的生活方式.作为一名前端开发工程师,在学习和探索VR技术方面,aframe.js是一个非常有趣和有用的工具.在本文中,我将介绍如何使用af ...
js贝塞尔曲线cubic-bezier 模拟实现附UnitBezier.h
cubic-bezier 曲线是 css3 动画的一个重要基石.另一个为 steps (ease 等都是 cubic-bezier 的特殊形式),css3 中的 cubic_bezier 曲线限制了首 ...
js 利用数组队列模拟多线程操作
不知道下面的想法对不对,如有错误还请大佬斧正需求分析有一批设备,数量很多,需要为他们开启远程驱动(即调用后台的远程驱动接口),问题是后台处理远程驱动只能一台一台设备处理,如果设备数量很多,后台ph ...

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

案例中实现

107 THREE.JS 使用StereoEffect实现模拟VR双屏相关推荐

最新文章

热门文章