解决 three.js 的“Texture has been resized from”警告提示

遇到问题

在用threejs中使用canvas作为纹理添加文字的时候，遇到了
three.module.js?325f:21304 THREE.WebGLRenderer: Texture has been resized from (256x118) to (256x64)
类似的提示，添加n个就提示n个，好烦。

解决方案

网上很少相关信息，最后在外国网站找到了解决方案，只需要把canvas的尺寸改为2的n次幂就可以了，例如 256*256。

问题原因

图片的纹理像素在threejs、Unity3D等3d引擎中需要遵循2的N次方，由图形学决定的。
非2的N次方的图片会转化为2的N次方图片（500 x 500 → 512 x 512）,是因为转化过程比较慢，由运行程序转换十分耗时，所以threejs、Unity3D等引擎提前将资源转化为符合标准的图片。

2的n次幂数值

2^0=1
2^1=2
2^2=4
2^3=8
2^4=16
2^5=32
2^6=64
2^7=128
2^8=256
2^9=512
2^10=1024
2^11=2048
2^12=4096
2^13=8192
2^14=16384
2^15=32768
2^16=65536
2^17=131072
2^18=262144
2^19=524288
2^20=1048576
…