更新

在较新版本的THREE.js中，默认情况下处理跨源图像。THREE.ImageUtils.loadTexture已弃用。通常使用TextureLoader

const loader = new THREE.TextureLoader();
const mapOverlay = loader.load('http://i.imgur.com/3tU4Vig.jpg');

原始答案

这个管用

THREE.ImageUtils.crossOrigin = '';
var mapOverlay = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');

这里有一个样本
一个一个二个一个一个一个三个一个一个一个一个一个四个一个
注意：不能将new与THREE.ImageUtils.loadTexture一起使用
为了将一张图片"交叉来源"加载到WebGL中，发送图片的服务器必须用正确的标题进行响应。你说你想使用图片"交叉来源"是不够的，你所做的只是告诉服务器你正在请求使用该图片的权限。
你可以设置img.crossOrigin，或者在THREE的情况下设置THREE.ImageUtils.crossOrigin为''或'anonymous'，'anonymous'与''相同，或者设置为'use-credentials'，'use-credentials'会向服务器发送更多的信息，浏览器会看到你设置了crossOrigin，并向服务器发送特定的报头，服务器读取这些报头，决定你的域名是否有权限使用该图片，如果你有权限，它会将某些标题发送回浏览器。浏览器，如果它看到这些标题，然后让你使用该图片。
最重要的一点是服务器必须发送头文件。大多数服务器不发送这些头文件。www.example.com显然会发送。我怀疑bitlocker不会，尽管我没有测试它。imgur.com does apparently. I suspect bitlocker does not though I didn't test it.
你也必须设置crossOrigin，如果你不这样做，浏览器将不允许你使用img，即使服务器发送了正确的头部，你也不应该这样做。

UPDATE：已弃用的方法
我遇到了这个问题，并应用了答案中的解决方案，发现由于THREE.js的新版本中的方法已被弃用，它无法正常工作。我发布此答案，以防有人遇到同样的问题。尽管已被弃用，但gman在原始答案中提供的信息是最有帮助的，我建议阅读它。

THREE.ImageUtils.loadTexture()

方法自最初的问题和答案以来已弃用。
当前加载纹理的方式：

// instantiate a loader
var loader = new THREE.TextureLoader();

//allow cross origin loading
loader.crossOrigin = '';

// load a resource
loader.load('textures/land_ocean_ice_cloud_2048.jpg',
    // Function when resource is loaded
    function ( texture ) {},
    // Function called when download progresses
    function ( xhr ) {},
    // Function called when download errors
    function ( xhr ) {}
);

我发现了一个解决图像和JSON模型的跨域问题的方法。这个方法总是有效的，在Localhost上也是如此。
在我的例子中，我从端口3001的NodeJS加载游戏，以使用Socket.io。我需要端口80的3d模型。
假设所有模型都在目录中：游戏/分发/型号/* /
我创建了一个PHP文件game/dist/models/json. php：

<?php

header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Methods: GET');
header('Access-Control-Allow-Origin: http://localhost:3001');

if (isset($_GET['file']))
{
    switch($_GET['file'])
    {
        case 'house1':
            header('Content-Type: application/json');
            $file = 'houses/house1.json';
            $json = json_decode(file_get_contents($file),TRUE);
            echo json_encode($json, TRUE);
            die();
        break;
    }
}
?>

三个JS：

var loader = new THREE.ObjectLoader();  
    loader.load(distPath+"models/json.php?file=house1",function ( obj ) {
         scene.add( obj );
    });

好好玩!

A screencapture of the error

VM266 three.min.js:127 THREE.WebGLState: DOMException: Failed to execute 'texImage2D' on 'WebGLRenderingContext': The image element contains cross-origin data, and may not be loaded.
    at Object.texImage2D (https://unpkg.com/three@0.86.0/build/three.min.js:127:99)
    at dg.r [as setTexture2D] (https://unpkg.com/three@0.86.0/build/three.min.js:103:189)

刚刚遇到了同样的问题，而我的codepen演示工作：https://codepen.io/fritx/project/editor/AoLRoy
通过将three.js从0.86升级到〉=0.87解决

- <script src="https://unpkg.com/three@0.86.0/build/three.min.js"></script>
+ <script src="https://unpkg.com/three@0.87.0/build/three.min.js"></script><!-- >=0.87 (img.crossorigin) -->

在图像URL末尾添加“？not-from-cache-please”作为TextureLoader中的参数。

您也可以使用它：https://stackoverflow.com/a/75208933/18133340此选项告知服务器不要使用缓存加载映像