Question

在我使用three.js库的实验中，我设法用相同的透视相机设置了两个不同的场景（一个画布渲染，一个css3d渲染）。

注意：我使用的是IE 10（没办法）。

当画布渲染场景的对象旋转并大量移动时，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;

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

1 个答案: