Chrome, three.js: загрузка изображения с использованием перекрестного изображения

Я использую THREE.js и собираюсь добавить материал, похожий на следующий

var materialWall = new materialClass( { color: 0xffffff, map: THREE.ImageUtils.loadTexture( 'images/a.png' ) } );

Он работает корректно в Chrome, IE, FF, до 3 дней назад, после того как я обновил Chrome до последней версии (17).

Chrome 17 просто не загружает изображение правильно и жалуется

Cross-origin image load denied by Cross-Origin Resource Sharing policy.

Что-то странное, так как изображение явно находится в том же домене, как же тогда происходит перекрестное происхождение?

это ошибка хром или THREE.js или мой код?

Ответы

Ответ 1

https://github.com/mrdoob/three.js/issues/687 относится к проблеме на три .js GitHub, которая имеет хороший список обходных решений, включая ссылка на страницу вики, в которой описывается, как работать локально. В этом потоке есть и другие обходные пути, включая добавление к вашим скриптам следующего:

THREE.ImageUtils.crossOrigin = "";

Или, добавив заголовки CORS, чтобы они были разрешены.

Обратите внимание, что большая часть этой информации была добавлена ​​из уже существующей ссылки на проблему, которую оригинальный автор этого ответа не включил.

Ответ 2

Если вы используете Chrome из localhost и используете Three.js, вам, вероятно, нужно запустить Chrome с этим флагом командной строки:

c:// ... /chrome.exe --allow-file-access-from-files

Ответ 3

Если вы:

  • не хотите настраивать собственный сервер и
  • не хотят понижать уровень безопасности вашего браузера.

тогда я разработал способ вокруг этого, который требует лишь немного усилий:

  • Преобразование изображения в текст Base64
  • Сохраните его во внешнем файле Javascript
  • Свяжите его со своей страницей проекта
  • Загрузите его в свою текстуру

Подробную информацию можно найти на http://tp69.wordpress.com/2013/06/17/cors-bypass/ для интересующих вас.

Ответ 4

Вы также можете запустить простой HTTP-сервер с помощью python, выполнив следующую команду из вашей корневой папки.

python -m SimpleHTTPServer 8000

Ответ 5

это работало для меня в командной строке \terminal:

./chrome.exe --disable-web-security

* обратите внимание, что вы должны закрыть все экземпляры chrome перед выполнением команды для ее работы.

Ответ 6

Идеальное решение для:

THREE.js: отказ от изображения с перекрестным контуром отклонен

Просто добавьте timestamp в URL-адрес изображения. Я не знаю логики, но он работает.

Пример:

var material = new THREE.MeshBasicMaterial({
  map: loader.load(url + "?v=" + (new Date()).toString(), function() {
    animate();
  })
});