Javascript 有人能解释一下Three.js StereoEffect的代码中发生了什么吗

了解立体渲染的人能否解释一下这些功能在创建VR立体效果方面的作用。three.js库中几乎没有关于函数的文档，如

StereoCamera（）、setcissor（）、setViewPort（）

我将非常感谢任何高/低层次的解释

另外，我遇到的一个错误是，当我试图更改“eyeSep”值时，它对最终渲染没有影响

/**
 * @author alteredq / http://alteredqualia.com/
 * @authod mrdoob / http://mrdoob.com/
 * @authod arodic / http://aleksandarrodic.com/
 * @authod fonserbc / http://fonserbc.github.io/
*/

THREE.StereoEffect = function ( renderer ) {

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

    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 );

        renderer.getSize( size );

        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 );

    };

};

module.exports = THREE.StereoEffect;

---

setcissor

和

setViewport

设置要渲染的画布区域。更具体地说，

setViewport

设置如何从着色器的剪辑空间转换为画布像素空间的某一部分，并且

setcissor

设置一个不能在其外部渲染任何内容的矩形

看

否则，

StereoCamera

只提供两个分开的

eyeeep

摄像机，因此您只需操作一个摄像机，

PerspectiveCamera

，然后您

更新
StereoCamera
，它将自动更新可用于渲染的两个eye摄像机


body{margin:0；}
#c{宽度：100vw；高度：100vh；显示：块；}
#ui{位置：绝对；左：1em；顶：1em；}

将*作为三个源导入'https://threejsfundamentals.org/threejs/resources/threejs/r115/build/three.module.js';
从导入{GUI}'https://threejsfundamentals.org/threejs/../3rdparty/dat.gui.module.js';
函数main（）{
const canvas=document.querySelector（“#c”）；
const renderer=new THREE.WebGLRenderer（{canvas}）；
常数fov=75；
const aspect=2；//画布默认值
常数近=0.1；
常数far=5；
常量摄影机=新的三个透视摄影机（视野、方位、近距离、远距离）；
摄像机位置z=2；
const stereo=新的三个立体摄影机（）；
constgui=newgui（）；
添加（立体声，'eyeSep'，0,2,0.001）；
const scene=new THREE.scene（）；
{
常量颜色=0xFFFFFF；
常数强度=1；
恒定光=新的三个方向光（颜色、强度）；
灯。位置。设置（-1，2，4）；
场景。添加（灯光）；
}
const geometry=新的三个球体缓冲几何体（0.5,6,3）；
函数makeInstance（几何体、颜色、x）{
const material=new THREE.MeshPhongMaterial（{color，flatShading:true}）；
常量立方体=新的三个网格（几何体、材质）；
场景.添加（立方体）；
立方体位置x=x；
返回立方体；
}
常数立方=[
makeInstance（几何体，0x44aa88，0），
makeInstance（几何体，0x8844aa，-1），
makeInstance（几何体，0xaa8844，1），
];
函数resizeRenderToDisplaySize（渲染器）{
const canvas=renderer.domeElement；
const width=canvas.clientWidth；
常数高度=canvas.clientHeight；
const needResize=canvas.width！==width | | canvas.height！==height；
如果（需要调整大小）{
设置大小（宽度、高度、假）；
}
返回需要调整大小；
}
函数渲染（时间）{
时间*=0.001；
if（ResizeRenderToDisplaySize（渲染器））{
const canvas=renderer.domeElement；
camera.aspect=canvas.clientWidth/canvas.clientHeight/2；
camera.updateProjectMatrix（）；
}
cubes.forEach（（cube，ndx）=>{
恒速=1+ndx*.1；
恒速=时间*速度；
立方体旋转x=旋转；
cube.rotation.y=rot；
});
{
//我们需要手动更新摄像机矩阵
//因为它不会直接传递给
//renderer.render通常是
//更新
camera.updateWorldMatrix（）；
立体声。更新（摄像头）；
const size=new THREE.Vector2（）；
getSize（size）；
renderer.setScissorTest（true）；
渲染器.setScissor（0,0，size.width/2，size.height）；
renderer.setViewport（0,0，size.width/2，size.height）；
渲染器。渲染（场景、立体、摄影机）；
渲染器.setScissor（size.width/2,0，size.width/2，size.height）；
renderer.setViewport（size.width/2,0，size.width/2，size.height）；
渲染器.render（场景、立体、摄影机）；
渲染器。setScissorTest（假）；
}
请求动画帧（渲染）；
}
请求动画帧（渲染）；
}
main（）；