I am developing a mobile app using Cordova, which contains an HTML canvas, and I'm using three.js for the 3d environment.
When I attempt to render the 3d environment, the textures are not being rendered properly; all of my 3d objects appear black. The console is throwing errors that say:
THREE.WebGLState: – SecurityError: The operation is insecure. — three.min.js:111 q — three.min.js:114:271
This is happening a texImate2d function.
I don't think this is a CORS issue because all of my texture files are local to the app. I'm creating image objects and using cordova.file.applicationDirectory + path as the source to to load the textures. THe error occurs after I've loaded the textures and added objects to the scene, when I call render() on the Three.js WebGLRenderer.
What's extra crazy is that this WAS WORKING a week ago and the textures failing to load seems to have come out of nowhere. I didn't change anything related to this in the app and I'm not aware of any major updates. This is still all working fine on Android devices.
I've done a ton of searching on this issue and most similar problems seems to be CORS related, but as I said, I don't think that's the case here as all the texture files are local to the app. Has anyone encountered this before? Thanks!
I finally figured this out. For the texture images, I was setting the src of the image using a path string, which is apparently a security issue in ios (although I still don't know why it was working at first and then stopped).
I switched it so that is uses the FileSystem API to read the image as a binary, then convert that to base64 using btoa(), then finally setting the resulting string as the src with the prefix 'data:image/jpeg;base64,'. It works now.