DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at “https://xxxx.xxxx” may not be loaded

Question

Chrome shows:

DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The cross-origin image at " https://xxxx.xxxx/models/skin.png " may not be loaded.

The project work like this:

--index.html
--live2d.js
--models (folder)
---| model.json
---| skin.png

This model.json defined the pictures needed in the model, and the live2d.js get data from model.json and make the model animate.

If I put these in my main domain, everything works well, but when I tried to load these from my CDN domain (means load only index.html from maindomain, but load other files from CDN), I got this:

enter image description here

But as you can see, although I belive I've set cross-origin of CDN server well, and the live2d.js and model.json load from CDN domain normally, only the picture getting wrong.

I've searched for a while, like this , but my problem is pretty different, cause all my files were load from a server, include index.html .

Answer 1

I also had the same problem and I fixed it by setting the crossorigin for the loader which is used to load and parse the obj file.

Like this,

loader.setCrossOrigin ( value )

Suppose if you are using ObjectLoader, set the crossorigin like this,

var loader = new THREE.ObjectLoader();
loader.setCrossOrigin ( 'anonymous' ):