我最近在Three.js上工作，但显示错误

Question

new THREE.MeshBasicMaterial({                 map: new THREE.TextureLoader().load(                     'https://www.google.com/imgres?imgurl=https%3A%2F%2Fabout.canva.com%2Fen_in%2Fwp-content%2Fuploads%2Fsites%2F3%2F2016%2F08%2Flogos-1.png&imgrefurl=https%3A%2F%2Fwww.canva.com%2Fen_in%2Fcreate%2)
side:Doubleslide); 
Access to image at 'https://www.google.com/imgres?imgurl=https%3A%2F%2Fabout.canva.com%2Fen_in%2Fwp-content%2Fuploads%2Fsites%2F3%2F2016%2F08%2Flogos-1.png&imgrefurl=https%3A%2F%2Fwww.canva.com%2Fen_in%2Fcreate%2Flogos%2F&docid=r_XhzRCvrSzyuM&tbnid=oAN9k3zJALug4M%3A&vet=10ahUKEwiQzJqt_NrmAhXA8XMBHSLLABMQMwh4KAIwAg..i&w=1200&h=1200&bih=586&biw=1233&q=logo&ved=0ahUKEwiQzJqt_NrmAhXA8XMBHSLLABMQMwh4KAIwAg&iact=mrc&uact=8' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

如何通过使用Textureloader函数在Three.js中插入图像是解决此错误的另一种方法？

Answer 1

这是一个跨域安全性错误，但是您也具有指向托管该图像的页面的URL。您可能应该首先尝试使用此图像网址：“ https://about.canva.com/en_in/wp-content/uploads/sites/3/2016/08/logos-1.png”如果这不起作用，请尝试将该图像托管在与javascript相同的域上。如果可以将其托管在您控制的其他域上，请尝试将CORS策略设置为允许跨域加载图像。如果无法实现，则可以将图像转换为base-64并将其作为字符串嵌入到javascript中。（Embedding Base64 Images）