Блог

Я начинаю учиться 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)
 

Ваше изображение блокируется, потому что Imgur не указывает политику CORS. По соображениям безопасности современные браузеры откажутся загружать изображение, как видно из консоли разработчика:

В этом случае самым простым решением было бы повторно загрузить свое изображение в Imgur через основной сайт и использовать URL-адрес оттуда. i.stack.imgur.com (изображения, загруженные через Stackoverflow) не отправляет необходимые заголовки CORS, но i.imgur.com (изображения, загруженные через основной сайт) отправляет.