THREE.JS中 CubeTextureLoader 使用避坑

最近在跟着教程学THREE.JS，毕竟在现在的前端开发市场上，THREE.JS太火爆了。

今天学到“纹理”这一块的时候，跟着教程敲代码，发现自己的没有正确显示，百思不得其解，打开控制台发现，如下WARNING:

?

1	localhost/:1 [.WebGL-000060380A191C00] GL_INVALID_VALUE: Each cubemap face must have equal width and height.

然后突然意识到，自己的图片是网上随机找的，而CubeTextureLoader需要每一个面的素材都是“正方形”!

示例代码如下：

// 创建场景
const scene = new THREE.Scene();

// 添加雾;

// scene.fog = new THREE.Fog(0xcccccc, 10, 16);

// 创建立体的纹理,左右上下前后
const cubeTexture = new THREE.CubeTextureLoader();
cubeTexture.setPath("/");

scene.background = cubeTexture.load([
  "sea.jpg",
  "sea2.jpg",
  "sea2.jpg",
  "sea4.jpg",
  "sea2.jpg",
  "sea2.jpg",
]);