THREEjs изменение размера холста мыши

Я в настоящее время пытается найти способ, чтобы изменить размер моего threejs/WebGL холст с этой функциейTHREEjs изменение размера холста мыши

function resize(){ 
    $('#canvas').css('height', '100%'); 
    $('#canvas').css('z-index', '1'); 

    camera.aspect = window.innerWidth/parseInt($('#canvas').css('height')); 
    camera.updateProjectionMatrix(); 
    renderer.setSize(window.innerWidth, parseInt($('#canvas').css('height'))); 
}

Он выполняет свою работу, однако он просто переходит на 100% и Мне было интересно, есть ли способ получить плавный переход

источник

2016-01-16 arahoomam

Вы можете использовать переходы CSS, если вы не слишком строги по обратной совместимости.

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

источник

2016-01-16 03:18:42 raduation

Я действительно пробовал css-переходы, но он никогда не обновляет экран. Я даже прибегал к переходу в цикл и добавлению одного пикселя за раз и повторному отображению экрана каждый пиксель, но он все еще просто прыгает – arahoomam

Это странно. И «высота», и «z-index» находятся в списке анимированных атрибутов. Возможно, опубликуйте JSFiddle своей попытки, чтобы мы могли видеть, что происходит? – raduation

Другая возможность - пользовательский интерфейс jQuery, используя эффекты. https://jqueryui.com/ – raduation

Так что я был неудачен при изменении размера холста через изменение размеров события, даже если он вступал мою функцию обратного вызова. Вместо того, чтобы полагаться на события DOM, я прямо просто поставить изменение размера в моей анимации петли, как так

if(expand){ 
    var temp = parseInt($('#canvas').css('height')); 
    temp+=11.5; 
    renderer.setSize(window.innerWidth, temp); 
    $('#canvas').css('height', temp); 
    camera.aspect = window.innerWidth/parseInt($('#canvas').css('height')); 
    camera.updateProjectionMatrix(); 
}

Это своего рода небрежный решения, но я только это нужно сделать один изменение размера, а затем сама страница перенаправляется где-нибудь еще.

источник

2016-01-16 08:47:45 arahoomam

THREEjs изменение размера холста мыши

ответ

Смежные вопросы