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

這很奇怪。「height」和「z-index」都在動畫屬性列表中。也許發佈你的嘗試JSFiddle，以便我們可以看到發生了什麼？ – raduation

另一種可能性是使用效果的jQuery UI。 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調整畫布點擊

回答

相關問題