公司的項目里面需求一個手機模擬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双屏的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。