three.js 动画性能优化
1、 requestAnimationFrame 和 setInterval
requestAnimationFrame 和 setInterval 在three动画开发中非常用,但是他们两个都不会随着canvas的销毁而销毁,需要我们手动清除。
setInterval对应clearInterval(this.setInter)
requestAnimationFrame对应cancelAnimationFrame(this.request);
2、dispose方法
three中geometry和material都自带有dispose的方法。在删除一个不用的对象的时候,最好去遍历销毁它的geometry和material。texture也需要dispose。
geometry.dispose();
material.dispose();
texture.dispose();
3、关于WebGL 上下文丢失
这个问题是个古老的问题了,浏览器只支持16个(火狐)webgl上下文,测试了一下chrome也差不多是16个。意思就是一个页面画了超过16个webgl,最先绘制的将会丢失掉。
Too many active WebGL contexts. Oldest context will be lost.
Exceeded 16 live WebGL contexts for this principal, losing the least recently used one.
THREE.WebGLRenderer: Context Lost.
Too many active WebGL contexts. Oldest context will be lost.