aframe-react icon indicating copy to clipboard operation
aframe-react copied to clipboard

Materials from url() are not loading

Open andrewrutter opened this issue 6 years ago • 2 comments

I am running through a proof of concept which is attempting to load images from a remote host as a material on a collection of blocks. The code is very simple:

<Entity geometry={{'primitive': 'box', width: width, height: height, depth: depth}}
                material={{src: `url('${photoUrl}')`, color}}
                position={`${x} ${y} ${z}`}
                onClick={() => {this.props.onClick(id) }} />

photoUrl is valid and I do see requests to load these images going out in Chromes network inspector. However, the url loads are immediately cancelled which I can only assume is a CORs issue although there is no error information being displayed. I did see on the aframe github issues that there is a need to pass in "crossorigin"="anonymous" but cannot see how to inject that here.

If I change the remote url for a locally hosted image the code is working fine.

Thanks

andrewrutter avatar Jun 02 '18 11:06 andrewrutter

any solution ?

yogiprsetya avatar Oct 04 '21 15:10 yogiprsetya

Same issue, I tried to put crossOrigin='anonymous' in img tag (in the section a-assets) and in THREE.ImageLoader, THREE.FileLoader, document.querySelector('a-assets').fileLoader ... everywhere , I still have CORS issue

My Config: "aframe-react": "^4.4.0" / "aframe": "1.0.4" @andrewrutter @yogiprsetya please have you found a solution ?

I don't know if it's related to aframe-react or aframe component , everywhere in my react app I don't have CORS issues.

ygf8 avatar Aug 11 '22 16:08 ygf8