THREE.JS中 CubeTextureLoader 使用避坑

从前有匹马叫代码發表於2024-05-25
JS

最近在跟著教程學THREE.JS，畢竟在現在的前端開發市場上，THREE.JS太火爆了。

今天學到“紋理”這一塊的時候，跟著教程敲程式碼，發現自己的沒有正確顯示，百思不得其解，開啟控制檯發現，如下WARNING:

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",
]);

相關文章