Прочетох Three.js API, прочетох въпросите тук в StackOverflow, отстраних грешки в кода с помощта на firebug и програмата за отстраняване на грешки на chrome, премахнах всичко, което мога, но все още получавам тази дразнеща грешка на цял екран , където портът за преглед на рендера е по-голям от моя екран, което води до появата на ленти за превъртане. Това е видима грешка, която не засяга изобразяването или други операции, просто се опитвам да контролирам размера на порта за изглед, така че да съответства на наличната недвижима площ на екрана, без да се появяват ленти за превъртане.
Използвам Google Chrome 18 на Windows 7 и тъкмо започвам да работя с 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 допълнителни пиксела някъде и ги добавя в долната и дясната част на страницата?
Опитах да коригирам CSS за елемента body, за да премахна полето и подложката, същото за елемента 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 (приблизително) от екрана, което води до появата на лентите за превъртане?
Някакви мисли или идеи?
