THREEjs 通过单击调整画布大小答案

【问题标题】：THREEjs resizing canvas with clickTHREEjs 通过单击调整画布大小
【发布时间】：2016-01-16 16:47:45
【问题描述】：

我目前正在尝试使用此功能调整我的 threejs/webgl 画布的大小

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%，我想知道是否有一种方法可以实现平稳过渡

【问题讨论】：

标签： javascript three.js

【解决方案1】：

如果您对向后兼容性不太严格，可以使用 CSS 过渡。

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

【讨论】：

我实际上尝试过 css 过渡，但它从未真正更新屏幕。我什至将过渡放入一个循环中，一次添加一个像素，然后重新渲染每个像素的屏幕，但它仍然只是跳跃
这很奇怪。 “高度”和“z-index”都在动画属性列表中。也许发布您尝试的 JSFiddle，以便我们了解发生了什么？
单独使用 css 过渡将调整画布大小，但不会每帧调用 renderer.setsize 函数。我认为 canvas 元素会触发一个 resize 事件，您应该听该事件以调用 renderer.setSize 函数。所以这里的答案只给出了部分答案。

【解决方案2】：

所以我没有成功通过调整大小事件调整画布大小，即使它正在进入我的回调函数。我没有依赖 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();
}

这是一种草率的解决方案，但我只需要它进行一次调整大小，然后页面本身就会被重定向到其他地方。

【讨论】：