我已经通读了 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
and window.innerHeight
设置渲染器的长宽比和宽度/高度,但似乎它在某处拾取了 20 到 30 个额外像素并将它们添加到页面的底部和右侧?
我尝试调整 body 元素的 CSS 以删除边距和填充,与创建的 canvas 元素相同,但没有任何效果。我已将屏幕尺寸回显到页面,并编写了 JavaScriptalert()
函数来检查窗口宽度和高度,然后观察它们在运行时操作期间传递给 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(大约),从而导致出现滚动条?
有什么想法或想法吗?