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)
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:
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.