Chrome, Three.js: tải hình ảnh giữa các gốc từ chối

Question

Tôi đang sử dụng THREE.js và sẽ thêm một vật liệu như sau

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

Nó hoạt động một cách chính xác trong Chrome, IE, FF, cho đến 3 days ago , sau khi tôi cập nhật Chrome lên phiên bản dev mới nhất (17).

Chrome 17 chỉ không tải hình ảnh một cách chính xác và phàn nàn

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

Đó là kinda lạ kể từ khi hình ảnh rõ ràng là trên cùng một tên miền, làm thế nào mà những thứ chéo gốc sau đó?

đây có phải là lỗi của chrome hoặc THREE.js hoặc mã của tôi không?

Answer 1

https://github.com/mrdoob/three.js/issues/687 đề cập đến sự cố trên GitHub của ba.js, có danh sách giải pháp tốt, bao gồm a link to a wiki page describing how to run locally. Ngoài ra còn có một số cách giải quyết khác trong chuỗi, bao gồm việc thêm phần sau vào tập lệnh của bạn:

THREE.ImageUtils.crossOrigin = ""; 

Hoặc thêm tiêu đề CORS để chúng được cho phép cụ thể.

^{Lưu ý rằng hầu hết thông tin này đã được thêm vào từ liên kết đã tồn tại cho vấn đề mà tác giả gốc của câu trả lời này không bao gồm.}

Answer 2

Nếu bạn đang chạy Chrome từ Three.js localhost và sử dụng, bạn có thể cần phải chạy Chrome với cờ dòng lệnh này:

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

Answer 3

Nếu bạn:

• không muốn để thiết lập máy chủ của riêng bạn và
• không muốn hạ cấp bảo mật của trình duyệt của bạn

sau đó tôi làm việc ra một khoảng cách này mà chỉ liên quan đến một chút nỗ lực:

1. Chuyển đổi hình ảnh vào Base64 văn bản
2. Lưu trữ nó trong một javascript bên ngoài nộp
3. liên kết nó vào trang dự án của bạn
4. tải nó vào kết cấu của bạn

Chi tiết đầy đủ có thể được tìm thấy tại http://tp69.wordpress.com/2013/06/17/cors-bypass/ cho những người quan tâm.

Answer 4

này làm việc cho tôi tại dòng lệnh \ Terminal:

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

* lưu ý rằng bạn phải đóng tất cả các trường hợp của chrome trước khi thực hiện lệnh cho nó làm việc.

Answer 5

Perfect giải pháp cho:

BA.js: Tải hình ảnh có nguồn gốc chéo bị từ chối

Chỉ cần thêm dấu thời gian vào url hình ảnh. Tôi không biết logic đằng sau nó, nhưng nó hoạt động.

Ví dụ:

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

Answer 6

Bạn cũng có thể chạy một máy chủ HTTP đơn giản sử dụng python bằng cách chạy lệnh sau đây từ thư mục gốc của bạn.

python -m SimpleHTTPServer 8000