Question

我不确定为什么以下这个html中的css：

<!DOCTYPE html>
<html>
    <head>
        <title>Three.js</title>
        <style>
            body {
                margin: 0;
            }
            canvas {
                display: block;
                width: 100%;
                height: 100%;
            }
        </style>
    </head>
    <body>
        <script src = "three.js"></script>
        <script src = "script.js"></script>
    </body>
</html>

似乎不会影响script.js：

var resolutionDivisor = 2;

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);

var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);
document.body.appendChild(renderer.domElement);

var geometry = new THREE.BoxGeometry( 1, 1, 1 );
var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( geometry, material );
scene.add( cube );

camera.position.z = 5;

var render = function () {
    requestAnimationFrame( render );

    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;

    renderer.render(scene, camera);
};

render();

我试图以屏幕分辨率的一半渲染three.js，以提高渲染速度，并使用CSS将画布拉伸到屏幕大小，但CSS似乎不会影响画布，所以画布没有占据全屏。

我正在使用谷歌浏览器。

可以找到下载here。

Answer 1

问题是您正在设置渲染器大小，如下所示。

renderer.setSize(window.innerWidth / resolutionDivisor, window.innerHeight / resolutionDivisor);

所以你的画布总是呈现身体高度和宽度的一半。

此外，canvas通过在canvas元素本身上放置width / height属性来工作。关于使用！important的hacky /不完整的工作可以在http://jsfiddle.net/thewolff/3onsp221/2/找到。

但实际上你应该在窗口调整大小时更新宽度/高度以保持porportions准确。

CSS无法设置画布大小？

1 个答案: