从前有匹马叫代码
心若没有栖息的地方,到哪里都是流浪
posts - 81,comments - 3,views - 22179

最近在跟着教程学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",
]);
复制代码

 

posted on   从前有匹马叫代码  阅读(262)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示