Three.js全屏问题

26 浏览
0 Comments

Three.js全屏问题

我阅读了Three.js的API，也在StackOverflow上阅读了相关问题，我使用firebug和chrome的调试器调试了代码，我尽可能地剥离了所有东西，但我仍然遇到这个令人烦恼的全屏错误，渲染器视口比我的屏幕大，因此出现了滚动条。这是一个可见的错误，不会影响渲染或其他操作，我只是想控制视口的大小，使其与可用的屏幕空间匹配，而不会出现滚动条。

我在Windows 7上使用Google 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() {
    // 注意：three.js包含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，但错误仍然存在：canvas渲染对象自动调整大小，比屏幕稍大。我接近解决问题的方法是这样的：

var val = 7;
// 减去val来调整窗口大小
function get_width(){return window.innerWidth - val;}
function get_height(){return window.innerHeight - val;}
//... 代码省略
camera = new THREE.PerspectiveCamera( 75, get_width() / get_height(), 1, 10000 );
//... 代码省略
render.setSize(get_width(), get_height());

它可以将渲染器的大小调整到窗口的边界内，但只有到一定程度。如果我将val降低到小于7，例如6或更少，渲染器的大小会再次增加20像素（大约），比屏幕更大，导致出现滚动条？

有什么想法或建议吗？

0