最近在跟着教程学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", ]);
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 周边上新:园子的第一款马克杯温暖上架
· Open-Sora 2.0 重磅开源!
· 分享 3 个 .NET 开源的文件压缩处理库,助力快速实现文件压缩解压功能!
· Ollama——大语言模型本地部署的极速利器
· [AI/GPT/综述] AI Agent的设计模式综述