更新

在 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');

这是一个示例

var canvas = document.getElementById("c");
var renderer = new THREE.WebGLRenderer({canvas: canvas});

var camera = new THREE.PerspectiveCamera( 20, 1, 1, 10000 );
var scene = new THREE.Scene();
var sphereGeo = new THREE.SphereGeometry(40, 16, 8);

var light = new THREE.DirectionalLight(0xE0E0FF, 1);
light.position.set(200, 500, 200);
scene.add(light);
var light = new THREE.DirectionalLight(0xFFE0E0, 0.5);
light.position.set(-200, -500, -200);
scene.add(light);

camera.position.z = 300;

THREE.ImageUtils.crossOrigin = '';
var texture = THREE.ImageUtils.loadTexture('http://i.imgur.com/3tU4Vig.jpg');
var material = new THREE.MeshPhongMaterial({
    map: texture,
    specular: 0xFFFFFF,
    shininess: 30,
    shading: THREE.FlatShading,
});
var mesh = new THREE.Mesh(sphereGeo, material);
scene.add(mesh);

function resize() {
    var width = canvas.clientWidth;
    var height = canvas.clientHeight;
    if (canvas.width != width ||
        canvas.height != height) {
          renderer.setSize(canvas.clientWidth, canvas.clientHeight, false);  // don't update the style. Why does three.js fight CSS? It should respect CSS :(
        
        camera.aspect = canvas.clientWidth / canvas.clientHeight;
        camera.updateProjectionMatrix();
    }
}

function render(time) {
    time *= 0.001;  // seconds
    resize();
    mesh.rotation.y = time;
    renderer.render(scene, camera);
    requestAnimationFrame(render);
}
requestAnimationFrame(render);

body {
    margin: 0;
}

#c {
    width: 100vw;
    height: 100vh;
    display: block;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/84/three.min.js"></script>
<canvas id="c"></canvas>

注意：你不使用newwithTHREE.ImageUtils.loadTexture

为了将跨域图像加载到 WebGL 中，发送图像的服务器必须以正确的标头进行响应。仅仅说要使用图像跨域是不够的。所做的只是告诉服务器您正在请求使用该图像的权限。

您可以将img.crossOrigin或在三种情况下THREE.ImageUtils.crossOrigin设置为''，'anonymous'这与 相同''，或者您可以将其设置为'use-credentials'向服务器发送更多信息。浏览器看到您设置crossOrigin并将某些标头发送到服务器。服务器读取这些标题，决定您的域是否有权使用该图像，如果您有权限，它会将某些标题发送回浏览器。浏览器，如果它看到这些标题，就会让你使用图像。

从上面带走的最重要的一点是服务器必须发送标头。大多数服务器不发送这些标头。imgur.com 显然确实如此。我怀疑 bitlocker 没有，尽管我没有测试过它。

您还必须设置crossOrigin. 如果您不这样做，即使服务器发送正确的标头，浏览器也不会允许您以您不应该能够使用的方式使用 img。

更新：不推荐使用的方法

我遇到了这个问题，并从答案中应用了解决方案，发现由于 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模型的解决方案。这总是有效，也在本地主机上。

就我而言，我从 NodeJS 的 3001 端口加载游戏，以使用 Socket.io。我想要来自端口 80 的 3d 模型。

假设所有模型都在目录中：game/dist/models/**/*

我创建了一个 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 );
    });

玩得开心！

错误的屏幕截图

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) -->