如何通过API返回的JSON变量加载metaModelSrc而非文件路径？

我来帮你捋清楚这个问题的根源和解决方案！你遇到的SyntaxError: Unexpected token < in JSON at position 0错误，本质是gltfLoader把你传入的File/Blob或字符串当成了URL去请求，结果服务器返回的不是预期的JSON，而是HTML错误页面（比如404页面开头的<html>标签），导致JSON解析失败。

gltfLoader的metaModelSrc参数默认只接受有效的URL路径，直接传变量或文件对象不符合它的预期，咱们可以用这两种思路解决：

方案1：用临时Blob URL（无需本地下载） #

虽然你不想下载Blob，但可以借助浏览器的URL.createObjectURL生成一个内存中的临时URL，让loader像加载普通文件一样读取数据，这个URL不会保存到本地文件系统，加载完成后还能手动释放避免内存泄漏：

// metaData - 从API获取的JSON对象
const metaBlob = new Blob([JSON.stringify(metaData)], { type: 'application/json' });
// 生成临时本地URL
const tempMetaUrl = URL.createObjectURL(metaBlob);

gltfLoader.load({
  id: "fsfdsfsdfs",
  metaModelSrc: tempMetaUrl,
  edges: true,
  performance: true,
});

// 加载完成后记得释放临时URL
gltfLoader.on('loaded', () => {
  URL.revokeObjectURL(tempMetaUrl);
});

方案2：检查loader是否支持直接传入JSON对象 #

有些gltfLoader的扩展或新版本会提供直接接收解析后JSON的参数（比如metaModelData这类命名），如果有这个参数，直接传API返回的metaData对象就行，连字符串化步骤都省了：

gltfLoader.load({
  id: "fsfdsfsdfs",
  metaModelData: metaData, // 直接传解析好的JSON对象
  edges: true,
  performance: true,
});

为什么之前的尝试无效？ #

• 直接传JSON.stringify(metaData)：loader会把这个字符串当作URL去请求，显然不是有效的路径，返回错误HTML
• 传File/Blob对象：除非loader明确支持直接接收这类对象，否则它会把对象转换成[object File]这类字符串当作URL请求，同样返回错误页面

内容的提问来源于stack exchange，提问作者Vadim Tomashevsky