Hello, i’m AJ Hsu.
Today I’m gonna to solving an annoying problem that WebGL encountered with Amazon S3 storage (or anyother cross-domain hosting space)
Issue
When we using Amazon S3 to storage our 3D model for WebGL,
we may suffering the CORS(Cross-origin resource sharing) issue.
Chrome’s console will says:
XMLHttpRequest cannot load https://s3-ap-northeast-1.amazonaws.com/artgital-bucket-1/cal-nextgen/models/gltf/bc_scene/scene.json. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost‘ is therefore not allowed access.
1. Server-Side permission
So if we’d like to using 3D model from Amazon S3, we should edit the CORS permission of Amazon S3 by editing with S3 dashboard:
and also makes your model file as‘public’:
Then we can load our external 3D model’s full-path within HTML now!
WebGL texture don’t support cross-domain image
But we suddenly found the second problem is that webgl’s texture dont support cross-domain image, just like screenshot below:
Chrome’s console will says:
Uncaught SecurityError: Failed to execute ‘texImage2D’ on ‘WebGLRenderingContext’: The cross-origin image at https://s3-ap-northeast-1.amazonaws.com/example/texture.jpg may not be loaded.
Solution
To solving with this problem, we could simply by setting [crossOrigin] with THEE.ImageUtils (I’m using glTF format for exmaple):
(glTFLoader.js: line 80)
function LoadTexture(src) {
if(!src) { return null; }
//Added by AJHSU, 20140502 – Solving the WebGL texture’s CORS problem
THREE.ImageUtils.crossOrigin = “anonymous";
return THREE.ImageUtils.loadTexture(src);
}
And finally, it works fine with cross-domain glTF model now!