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

Question

我开始学习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)

Answer 1

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

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