三.js，纹理不会在codepen中加载

Posted 2023-03-23

【中文标题】三.js，纹理不会在codepen中加载

【英文标题】：three.js, textures won't load in codepen

【发布时间】：2021-12-15 07:58:57

【问题描述】：

我开始学习three.js，我在codepen.io上做。问题是我尝试向我的 boxgeometry 添加纹理但它没有出现，我的代码有什么问题？

const cubetexture = new THREE.TextureLoader().load('https://i.stack.imgur.com/9vixO.png');

const geometry = new THREE.BoxGeometry( 10, 10, 10 )
const material = new THREE.MeshBasicMaterial(  map: cubetexture  );
const cube = new THREE.Mesh( geometry, material );
cube.rotateY(Math.PI / 3);
scene.add(cube)

【参考方案1】：

由于 Imgur 未指定 CORS policy，您的图像被阻止。由于安全原因，现代浏览器将拒绝加载图像，这在开发者控制台中很明显：

在这种情况下，最简单的解决方案是通过主站点将您的图像重新上传到 Imgur，并使用那里的 URL。 i.stack.imgur.com（通过 *** 上传的图像）不会发送所需的 CORS 标头，但 i.imgur.com（通过 the main site 上传的图像）会发送。

【讨论】：

问题是我尝试使用three.js映射示例的图像，但它不起作用

three.js 的现代版本应该自动解决这个 CORS 问题，但我个人无法让它工作，如果这就是你所指的 - 也许这是 codepen 的问题.io