Loader.setCrossOrigin()

设置Loader是否使用跨域资源共享（CORS）策略来加载纹理或模型文件。

语法

Loader.setCrossOrigin( crossOrigin : String )

参数

• crossOrigin：一个可选参数，表示如何处理跨域请求。可以取以下值：
  • 'anonymous'（Anonymous）：无需凭据，即可将资源公开给任意用户。
  • 'use-credentials'（Use-Credentials）：需要凭据，即只有特定用户才能使用资源。

返回值

此方法没有返回值。

描述

三维场景中的纹理或模型有可能存储在其他域中，而这些域的协议、主机和端口号与当前页面不同，此时就需要跨域访问资源。浏览器在跨域请求时需要遵守CORS规则，而Loader.setCrossOrigin()方法可以设置CORS的处理方式。

要使CORS生效，需要在加载文件时指定crossOrigin参数。例如，使用TextureLoader来加载纹理时：

var loader = new THREE.TextureLoader();
loader.setCrossOrigin('anonymous');
loader.load('http://example.com/test.png', function (texture) {
   // ...
});

但是，在开发环境下，如果在源码里为每个loader单独设置，很容易出现遗漏，因此建议在全局设置中指定CORS策略，例如：

THREE.Loader.setCrossOrigin('use-credentials');

这样，所有loader都可以使用指定的CORS策略来加载资源。

示例

// 全局设置CORS策略
THREE.Loader.setCrossOrigin('anonymous');

// 加载纹理
var loader = new THREE.TextureLoader();
loader.load('http://example.com/test.png', function (texture) {
   // ...
});

// 加载模型
var loader = new THREE.GLTFLoader();
loader.load('http://example.com/model.glb', function (gltf) {
   // ...
});

参考文献

• MDN Web Docs: 跨域资源共享（CORS）
• three.js documentation: TextureLoader
• three.js documentation: GLTFLoader