web-dev-qa-db-fra.com

Refus de chargement d'image avec trois.js en chrome

Essayer d'ajouter du matériel dans THREE.js comme ceci

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

Cela fonctionne très bien dans Chrome, IE, FF, il y a 3 jours, après la mise à jour de Chrome vers la dernière version 17 de dev.

Chrome 17 ne charge tout simplement pas l'image et se plaint de ce qui suit

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

C'est fou puisque l'image est clairement dans le même domaine, est-ce donc une question de chrome ou THREE.js ou autre chose?

javascriptgoogle-chromecross-domainthree.js
20
Nami WANG

https://github.com/mrdoob/three.js/issues/687 fait référence à un problème sur le GitHub de three.js, qui contient une bonne liste de solutions de contournement, y compris un lien vers une page de wiki décrivant comment courir localement . Il existe également d'autres solutions de contournement dans le fil, notamment l'ajout des éléments suivants à vos scripts:

THREE.ImageUtils.crossOrigin = "";

Ou, en ajoutant des en-têtes CORS afin qu'ils soient spécifiquement autorisés. 

Notez que la plupart de ces informations ont été ajoutées à partir du lien déjà existant vers la question, que l'auteur initial de cette réponse n'avait pas incluses.

12
Mr.doob

Si vous exécutez Chrome à partir de localhost et utilisez Three.js, vous devez probablement exécuter Chrome avec l'indicateur de ligne de commande suivant:

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

Si vous:

  • ne voulez pas configurer votre propre serveur, et
  • vous ne voulez pas déclasser la sécurité de votre navigateur

ensuite, j'ai trouvé un moyen de contourner ce problème en ne demandant que peu d'effort:

  1. Convertir l'image en texte Base64
  2. Stockez-le dans un fichier Javascript externe
  3. Liez-le à la page de votre projet
  4. Chargez-le dans votre texture

Vous trouverez tous les détails sur http://tp69.wordpress.com/2013/06/17/cors-bypass/ pour les personnes intéressées.

7
Tim

Vous pouvez également exécuter un serveur HTTP simple à l'aide de python en exécutant la commande suivante à partir de votre dossier racine.

python -m SimpleHTTPServer 8000
2
Santosh

1) raccourci Chrome -> Propriétés -> onglet Raccourci -> cible et ajoutez enfin --allow-file-access-from-files dans la cible. (tuez toutes les tâches de chrome avant de le faire.)

OU

2) Téléchargez le logiciel serveur Mongoose. Mettez-le dans votre répertoire de travail, et exécuter. Il s’ouvrira dans le navigateur http: // localhost: PORT où il servira tous vos fichiers.

OU

3) Vous pouvez également utiliser le serveur NodeJS dans votre application.

1
Swapnil Hadge

Solution parfaite pour:

THREE.js: charge de l'image d'origine croisée refusée 

Ajoutez simplement timestamp à l’URL de l’image. Je ne connais pas la logique derrière cela, mais ça marche.

Exemple:

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

cela a fonctionné pour moi sur la ligne de commande\terminal:

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

* Notez que vous devez fermer toutes les instances de chrome avant d'exécuter la commande pour que celle-ci fonctionne.

0
Ice101781