My Domain Return Error For Texture Load Image Url

image does not load by my domain Other domain no problem. it is working it just doesn't load my domain var textureLoader = new THREE.TextureLoader(); textureLoader.crossOrigin = ''

Solution 1:

From the response header your server sends I can see that it doesn't return a Access-Control-Allow-Origin header. This should either be <origin>or *. So I'm afraid you might have to configure your server properly.

I noticed you you're using LiteSpeed Web Server so have a look at their Wiki page: https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:config:cors

If I try to serve your image via a proxy everything's fine.

var textureLoader = new THREE.TextureLoader();
textureLoader.crossOrigin = '';
varmap = textureLoader.load('https://api.codetabs.com/v1/proxy?quest=https://zomisoft.com/blog_img/5-5bcf0cae447c36.35706243.png');

Solution 2:

Other solution i found

Get base64 type picture with web service

Web service

<?php

header("access-control-allow-origin: *");


if($_GET['key']=='1453'){
    try {
$path  = $_GET['url'];

$type = pathinfo($path, PATHINFO_EXTENSION);
$data = file_get_contents($path);
$base64 = 'data:image/' . $type . ';base64,' . base64_encode($data);

    echo$base64;
    } catch (Exception$e) {
    echo'Caught exception: ',  $e->getMessage(), "\n";
    }
}else{
    echo404;
}

three.js

var image = newImage();
image.src = data;//base64 type image from web servicevar texture = newTHREE.Texture();
texture.image = image;

image.onload = function() {
  texture.needsUpdate = true;
};

var material = newTHREE.MeshPhongMaterial({
  map: texture,
});