Three.js全屏问题

Question

我已经阅读了Three.js API,仔细阅读StackOverflow上的问题,我使用firebug和chrome的调试器调试了代码,我已经删除了所有可能的内容,但是我仍然遇到这个令人恼火的全屏错误,渲染器视图端口大于我的屏幕,从而导致滚动条出现.这是一个可见的错误,不会影响渲染或其他操作,我只是试图控制视图端口的大小,以便它匹配可用的屏幕空间而不会出现滚动条.

我在Windows 7上使用谷歌Chrome 18,我刚刚开始使用Three.js API,但我过去使用过像OpenGL这样的东西,所以图形API并不陌生.

当我尝试运行此代码时(这是github主页上显示的默认示例):

var camera, scene, renderer,
geometry, material, mesh;

init();
animate();

function init() {

    scene = new THREE.Scene();

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

    geometry = new THREE.CubeGeometry( 200, 200, 200 );
    material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

    mesh = new THREE.Mesh( geometry, material );
    scene.add( mesh );

    renderer = new THREE.CanvasRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );

    document.body.appendChild( renderer.domElement );

}

function animate() {

    // note: three.js includes requestAnimationFrame shim
    requestAnimationFrame( animate );
    render();

}

function render() {

    mesh.rotation.x += 0.01;
    mesh.rotation.y += 0.02;

    renderer.render( scene, camera );

}

它渲染得很好,我看到红色线框框旋转,但我注意到渲染器视图端口太大,它比我可用的屏幕尺寸大,这会导致滚动条出现.代码使用window.innerWidth和window.innerHeight设置渲染器的宽高比和宽度/高度,但似乎它在某处拾取了20到30个额外像素并将它们添加到页面的底部和右侧？

我已经尝试调整body元素的CSS以删除边距和填充,对于创建的canvas元素也是如此,但没有.我已经回显了页面的屏幕大小,并使JavaScript alert()函数检查窗口的宽度和高度,然后观察它们在运行时操作期间传递给Three.js API,但错误仍然存​​在:画布渲染对象是将自身调整为略大于屏幕尺寸.我最接近纠正问题是做这样的事情:

var val = 7;
//Trims the window size by val
function get_width(){return window.innerWidth - val;}
function get_height(){return window.innerHeight - val;}

//... Code omitted for brevity

camera = new THREE.PerspectiveCamera( 75, get_width() / get_height(), 1, 10000 );

//... Code omitted for brevity 

render.setSize(get_width(), get_height());

它可以将渲染器大小放在窗口的边界内,但仅限于一个点.如果我降低val到小于7,例如6或更小,渲染器大小弹出并再次比屏幕大20 px(大约),导致滚动条出现？

有什么想法或想法吗？

Answer 1

只需设置display:block; 在CSS中的canvas元素上

该<canvas>元素是根据mozilla开发者网络正式的块级元素.内联元素和块元素之间的东西.他们写:

浏览器通常在元素之前和之后使用换行符显示块级元素.

但是,元素的呈现可能因浏览器而异,因此为了确保您获得正确的行为,最好明确设置display: inline;或display: block;在CSS中.

因此,只需在CSS文件中设置其显示值即可阻止,以解决问题.

canvas {
    display: block; /* fix necessary to remove space at bottom of canvas */
}

Answer 2

删除CSS正文边距并隐藏溢出:

body{
  margin: 0px;
  overflow: hidden;
}