Я прочитал API-интерфейс Three.js, прочитав вопросы здесь, в StackOverflow, я отлаживал код с помощью firebug и chrome debugger, я удалил все, что мог, но я все еще получаю это раздражающее полноэкранная ошибка, когда порт представления визуализации больше моего экрана, в результате чего появятся полосы прокрутки. Это видимая ошибка, которая не влияет на рендеринг или другие операции, я просто пытаюсь контролировать размер порта представления, чтобы он соответствовал доступной экранной недвижимости без появляющихся полос прокрутки.
Я использую Google Chrome 18 в Windows 7, и я только начинаю работать с API Three.js, но раньше я использовал такие вещи, как 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(), чтобы проверить ширину и высоту окна, а затем посмотреть, как они передаются API-интерфейсу Three.js во время выполнения, но ошибка остается: холст Объект рендеринга изменяет размер до чуть большего размера экрана. Самое близкое, что я могу исправить проблему, - это что-то вроде этого:
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 пикселей (приблизительное), чем на экране, вызывая появление полос прокрутки?
Любые мысли или идеи?
