我已经阅读了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() {
// 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，但错误仍然存在：canvas渲染对象正在调整大小，略大于屏幕尺寸。我解决问题的最接近方法是执行类似以下内容的操作: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像素（约），导致滚动条出现？
有什么想法或建议吗？