javascript - meshphongmaterial - three js rotation

Carga de imagen de origen cruzado denegada con three.js en cromo

Question

Tratando de agregar material en THREE.js como este

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

Funciona bien en Chrome, IE, FF, hasta hace 3 días, después de que Chrome se actualizó a la última versión de desarrollo 17.

Chrome 17 simplemente no carga la imagen y se queja de lo siguiente

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

Eso es una locura ya que la imagen está claramente en el mismo dominio, ¿es esto un problema de Chrome o THREE.js o algo más?

Answer 1

1) Acceso directo de Chrome -> Propiedades -> pestaña de acceso directo -> segmentar y agregar al final --allow-file-access-from-files en target. (Mata todas las tareas de Chrome antes de hacer esto.)

O

2) Descargar el software del servidor web Mongoose . Ponlo en tu directorio de trabajo y ejecútalo. Se abrirá en el navegador http://localhost:PORT donde servirá todos sus archivos.

O

3) También puede usar el servidor NodeJS en su aplicación.

Answer 2

Si está ejecutando Chrome desde localhost y utilizando Three.js, probablemente necesite ejecutar Chrome con este indicador de línea de comando:

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

Answer 3

Si tu:

• No quiero configurar tu propio servidor, y
• No quiero degradar la seguridad de tu navegador.

Luego, resolví una forma de solucionar esto, lo que implica solo un poco de esfuerzo:

1. Convertir la imagen en texto Base64
2. Guárdelo en un archivo Javascript externo
3. Enlace a su página de proyecto
4. Cargarlo en su textura

Los detalles completos se pueden encontrar en http://tp69.wordpress.com/2013/06/17/cors-bypass/ para aquellos que estén interesados.

Answer 4

Solución perfecta para:

THREE.js: carga de imagen de origen cruzado denegada

Solo agrega la marca de tiempo a la url de la imagen. No sé la lógica detrás de esto, pero funciona.

Ejemplo:

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

Answer 5

También puede ejecutar un servidor HTTP simple usando python ejecutando el siguiente comando desde su carpeta raíz.

python -m SimpleHTTPServer 8000

Answer 6

esto funcionó para mí en la línea de comandos / terminal:

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

* tenga en cuenta que debe cerrar todas las instancias de Chrome antes de ejecutar el comando para que funcione.

Answer 7

https://github.com/mrdoob/three.js/issues/687 refiere a un problema en three.js ''GitHub, que tiene una buena lista de soluciones, que incluye un enlace a una página wiki que describe cómo ejecutarse localmente . También hay algunas otras soluciones en el hilo, que incluyen agregar lo siguiente a sus scripts:

THREE.ImageUtils.crossOrigin = "";

O bien, agregando encabezados CORS para que estén específicamente permitidos.

^{Tenga en cuenta que la mayor parte de esta información se agregó desde el enlace existente al problema, que el autor original de esta respuesta no incluyó.}