0

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.

Horia Coman
  • 8,681
  • 2
  • 23
  • 25
Mashiro
  • 1,032
  • 1
  • 12
  • 24
  • It's the image that's being loaded that's the problem. It apparently doesn't allow cross domain images. What sort of configuration have you done on your CDN for CORS or anything like that? – Horia Coman Dec 09 '17 at 06:22
  • https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image – CBroe Dec 09 '17 at 07:59
  • I'm using a commercial CDN, its panel is not in English so not need to paste screenshot here... It has a white list, you have to add the domains that allowed to load resources from CDN. And I've added my domain absolutely. So is there still any possibility something goes wrong with CDN? – Mashiro Dec 09 '17 at 13:29
  • Thanks for the Mozilla's link, I'm trying it... – Mashiro Dec 09 '17 at 13:30

1 Answers1

0

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' ):
HariV
  • 687
  • 1
  • 10
  • 17
  • ```js // load textures var loadedImage = new Image(); loadedImage.src = path; ``` I've tried this: ```js var loadedImage = new Image(); loadedImage.setCrossOrigin ( 'anonymous' ); loadedImage.src = path; ``` – Mashiro Dec 09 '17 at 13:32
  • Hmm, then you may have to make some configurations on the server side. Something related to crossorigin. – HariV Dec 09 '17 at 13:42
  • Things like this, I'm using a commercial CDN, its panel is not in English so not need to paste screenshot here... It has a white list, you have to add the domains that allowed to load resources from CDN. And I've added my domain absolutely. So is there still any possibility something goes wrong with CDN? – Mashiro Dec 09 '17 at 13:51
  • But I think crossorigin requests are different and it should be allowed in the server. Are you able to download the image to your local machine using the url? – HariV Dec 09 '17 at 14:10
  • @MashiroYuuki loadedImage.setCrossOrigin() is wrong. I mean, you have to set crossorigin for the loader. – HariV Dec 09 '17 at 14:26
  • Can you share how you are loading the model? – HariV Dec 09 '17 at 14:35
  • Yep. Thanks for your help, your method works now! I forgot to clean the cache of server before – Mashiro Dec 09 '17 at 16:06
  • Sorry for late reply, the url in my screenshot works only if you request from my site, if open the url in browser directly, request will be forbidden cause with a blank refer – Mashiro Dec 09 '17 at 16:11