css - Three.js - 使 CSS3D 渲染的 DIV 全屏显示

Question

在我对 three.js 库的实验中，我设法设置了两个不同的场景(一个 Canvas 渲染，一个 css3d 渲染)，使用相同的透视相机显示。

注意:我使用的是 IE 10(没有办法解决这个问题)。

虽然 canvas 渲染场景的对象被大量旋转和移动，但 css3d 场景仅包含一个 DIV 元素，该元素包含一个包含图像的子 DIV。 css3d 呈现的 DIV 应该(几乎)全屏显示，无论窗口大小如何。由于使用 DIV 的 z 轴坐标不会使其看起来更大，因此缩放可以使其更大。但是，对于不同的窗口大小，不同的比例因子会产生最佳结果。

但是，我发现我还可以操纵原始 div 的高度和宽度来使渲染对象变大或变小。由于其中的图像可以像 div 一样容易操作，因此我更喜欢这种方法而不是缩放。

但我没有能力计算正确的像素数量，使 DIV 在场景中全屏渲染。

这是我到目前为止得到的...

    <style>
        body {
            background-color: #000000;
            margin: 0px;
            overflow: hidden;
        }
        .element {
            width: 1000px;
            height: 750px;
            box-shadow: 0px 0px 20px rgba(0,255,255,0.5);
            border: 1px solid rgba(127,255,255,0.25);
            cursor: default;
        }
        .element .profile {
            position: absolute;
            top: 2.5%;
            left: 2.5%;
            width: 95%;
            height: 95%;
            background-image:url('profile.jpg');
            background-size: 100% auto;
            color: rgba(127,255,255,0.75);
        }
    </style>
...

            camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 3000 );
            camera.position.z = 1000;

 ... initialize a lot of particles (that work just fine in their scene with the camera setting above)
            renderer = new THREE.CanvasRenderer();
            renderer.setClearColor(0x000000, 1);
            renderer.setSize( window.innerWidth, window.innerHeight );

  ...

// now: create the css rendered scene, create and configure DIV, add the DIV to scene

            var element = document.createElement( 'div' );
            element.className = 'element';
            element.style.width = window.innerWidth + 'px';
            element.style.height = window.innerHeight + 'px';
            element.style.backgroundColor = 'rgba(0,127,127,' + ( Math.random() * 0.5 + 0.25 ) + ')';
            var profile = document.createElement( 'div' );
            profile.className = 'profile';
            profile.textContent = "";

            if (imgArray != undefined) {
                if (imgArray.length > 0) {
                profile.style.backgroundImage = 'url(' + imgNameArray[0] +  ')';
                profile.style.backgroundSize = "100% auto";
                }
            }

            element.appendChild( profile );
            myimgdiv = new THREE.CSS3DObject( element );
            myimgdiv.position.x = 0;
            myimgdiv.position.y = 0;
            myimgdiv.position.z = 0;
            scene2.add( myimgdiv );

            renderer2 = new THREE.CSS3DRenderer();
            renderer2.setSize( window.innerWidth, window.innerHeight );
            renderer2.domElement.style.position = 'absolute';
            renderer2.domElement.style.top = 0;

   ...

        function animate() {
            requestAnimationFrame( animate );
            render();
        }
        function render() {
            TWEEN.update();
            camera.lookAt( scene.position );
            renderer.render( scene, camera );
            renderer2.render( scene2, camera );
        }

有人可以帮我计算“元素”的正确宽度和高度值，使其在上述设置中看起来全屏吗？

非常感谢您，

奥利弗

Answer 1

您是否尝试过将位置设置到屏幕顶部？x_pos = 0;y_pos = 0;