Search code examples
javascriptthree.jstexturestexture-mapping

three.js, textures won't load in codepen


I'm starting to learn three.js, I'm doing it on codepen.io. The problem is that I try to add a texture to my boxgeometry and it does not appear, what is the problem with my code?

const cubetexture = new THREE.TextureLoader().load('https://i.sstatic.net/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)

Solution

  • Your image is being blocked because Imgur does not specify a CORS policy. Due to security reasons, modern browsers will refuse to load the image, as evident in the developer console:

    Chromium console displaying failed image fetching

    In this case, the easiest solution would be to re-upload your image to Imgur through the main site, and use the URL from there. i.sstatic.net (images uploaded through Stack Overflow) does not send the required CORS headers, but i.imgur.com (images uploaded through the main site) does.