将CSS3D宽度与CSS3DStereoRenderer相结合

Question

我有一个360度全景立方体，用CSS3D.js（THREE.js的插件）创建。我跟着一个例子here，它运行正常。这是我使用的代码：

<script src="js/three-css3d.min.js"></script>
<script>
var container;
document.addEventListener("DOMContentLoaded",onload); 
function onload(){ 
    setTimeout(function(){
        run360();
    }, 100);
}

function run360() {
    container = document.getElementById('container');
    var deg2rad = Math.PI / 180;
    var camera, scene, renderer, controls;

    var animate = function(){
        requestAnimationFrame(animate);
        renderer.render(scene, camera);
    }

    camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 1000);
    camera.eulerOrder = "ZXY";

    scene = new THREE.Scene();
    var folder = "images/360_cube/";
    var sides = [
        [folder + "front.jpg", 0, 0, 100, 0, 180, 0],
        [folder + "left.jpg", 100, 0, 0, 0, -90, 0],
        [folder + "back.jpg", 0, 0, -100, 0, 0, 0],
        [folder + "right.jpg", -100, 0, 0, 0, 90, 0 ],
        [folder + "bottom.jpg", 0, 100, 0, 270, 180, 0 ],
        [folder + "top.jpg", 0, -100, 0, 90, 180, 0 ]
    ];

    var cube = new THREE.CSS3DObject( document.createElement('div') );
    for (var i = 0; i < sides.length; i ++) {
        var element = document.createElement('img');
        element.src = sides[i][0];
        element.style.width = '804px';
        element.style.height = '804px';

        var object = new THREE.CSS3DObject(element);
        object.position.set(
            sides[i][1],
            sides[i][2],
            sides[i][3]
        );
        object.rotation.set(
            sides[i][4] * deg2rad,
            sides[i][5] * deg2rad,
            sides[i][6] * deg2rad
        );
        object.scale.set(
            0.25,
            0.25,
            1
        );
        cube.add(object);
    }
    cube.rotation.x = -115;
    scene.add(cube);

    if (typeof window.DeviceOrientationEvent != "undefined") {
        window.addEventListener("deviceorientation", function(e) {
            camera.rotation.set (
                !e.beta  ? 0 : e.beta * deg2rad,
                !e.gamma ? 0 : e.gamma * deg2rad,
                !e.alpha ? 0 : e.alpha * deg2rad
            );
        }, false);

        renderer = new THREE.CSS3DRenderer();
        renderer.setSize(window.innerWidth, window.innerHeight);
        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.top = 0;
        container.appendChild(renderer.domElement);
    } else {
        alert("Device Orientation not supported");
    }

    animate();
}

现在我正在尝试将它与CSS3DStereoEffect.js结合起来，在Stereo中看到这个立方体（有点像VR）。可以找到一个示例here。所以我尝试了这个：

<script src="js/vr/three.min.js"></script>
<script src="js/three-css3d.min.js"></script>
<script src="js/vr/StereoEffect.js"></script>
<script src="js/vr/tween.min.js"></script>
<script src="js/vr/TrackballControls.js"></script>
<script src="js/vr/CSS3DStereoRenderer.js"></script>
<script>
var container;
document.addEventListener("DOMContentLoaded",onload); 
function onload(){ 
    setTimeout(function(){
        run360();
    }, 100);
}

function run360() {
    container = document.getElementById('container');
    var deg2rad = Math.PI / 180;
    var camera, scene, renderer, controls;

    var animate = function(){
        requestAnimationFrame(animate);
        render(); // Calling for render func.
    }

    // NEW CAMERA HERE
    camera = new THREE.PerspectiveCamera( 40, window.innerWidth / window.innerHeight, 1, 10000 );
    camera.position.z = 3000; // NEW CAMERA SETTING
    camera.eulerOrder = "ZXY";

    scene = new THREE.Scene();
    var folder = "images/360_cube/";
    var sides = [
        [folder + "front.jpg", 0, 0, 100, 0, 180, 0],
        [folder + "left.jpg", 100, 0, 0, 0, -90, 0],
        [folder + "back.jpg", 0, 0, -100, 0, 0, 0],
        [folder + "right.jpg", -100, 0, 0, 0, 90, 0 ],
        [folder + "bottom.jpg", 0, 100, 0, 270, 180, 0 ],
        [folder + "top.jpg", 0, -100, 0, 90, 180, 0 ]
    ];

    var cube = new THREE.CSS3DObject( document.createElement('div') );
    for (var i = 0; i < sides.length; i ++) {
        var element = document.createElement('img');
        element.src = sides[i][0];
        element.style.width = '804px';
        element.style.height = '804px';

        var object = new THREE.CSS3DObject(element);
        object.position.set(
            sides[i][1],
            sides[i][2],
            sides[i][3]
        );
        object.rotation.set(
            sides[i][4] * deg2rad,
            sides[i][5] * deg2rad,
            sides[i][6] * deg2rad
        );
        object.scale.set(
            0.25,
            0.25,
            1
        );
        cube.add(object);
    }
    cube.rotation.x = -115;
    scene.add(cube);

    if (typeof window.DeviceOrientationEvent != "undefined") {
        window.addEventListener("deviceorientation", function(e) {
            camera.rotation.set (
                !e.beta  ? 0 : e.beta * deg2rad,
                !e.gamma ? 0 : e.gamma * deg2rad,
                !e.alpha ? 0 : e.alpha * deg2rad
            );
            animate();
        }, false);

        // NEW RENDERER HERE
        renderer = new THREE.CSS3DStereoRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );
        renderer.domElement.style.position = 'absolute';
        renderer.domElement.style.top = 0;
        container.appendChild( renderer.domElement );
    } else {
        alert("Device Orientation not supported");
    }

    animate();

    // NEW RENDER FUNCTION HERE
    function render() {
        renderer.render( scene, camera );
    }
}

在window.addEventListener("deviceorientation"...)内，我还尝试了render()而不是animate()。但它只是不起作用，我看到一个黑屏，并在CSS3DStereoRenderer.js文件第15行收到此错误消息：Uncaught TypeError: this.addEventListener is not a function，其中显示：

this.addEventListener( 'removed', function ( event ) {

    if ( this.elementL.parentNode !== null ) {

        this.elementL.parentNode.removeChild( this.elementL );

    }

    if ( this.elementR.parentNode !== null ) {

        this.elementR.parentNode.removeChild( this.elementR );

    }

} );

是否可以修复它并使其有效？