使用Three.js从URL导出3D模型遇报错，求修复方案（附代码）

一、修复JSON.parse解析错误 #

JSON.parse: unexpected non-whitespace character after JSON data 错误的核心是你传入解析函数的内容不是标准JSON格式，常见修复方式：

• 先打印原始响应内容：在请求代码中加入console.log(responseText)，查看返回的是纯JSON还是其他内容（比如HTML错误页、带注释的文本）。如果是HTML，说明请求的URL无效或触发了跨域限制。
• 解决跨域问题：浏览器禁止前端直接请求不同域名的资源。你可以用npx serve启动本地静态服务器运行HTML文件，或者写简单的Node.js代理脚本转发请求。
• 清理非JSON字符：如果返回的JSON末尾有多余注释、空格，用正则过滤后再解析：

  // 保留最外层JSON结构，去除前后无关内容
  const cleanedContent = rawResponse.replace(/^[\s\S]*?({)|(})[\s\S]*?$/, '$1$2');
  const modelData = JSON.parse(cleanedContent);
  

二、修复自动提取3D模型URL失效问题 #

• 重新定位页面元素：AI生成的DOM选择器可能不符合目标页面结构。打开目标网页的开发者工具（F12），找到模型URL所在的标签（比如<script>、<meta>或自定义属性），更新选择器。例如：

  // 假设URL在type为application/json的script标签中
  const modelScript = document.querySelector('script[type="application/json"]');
  const modelUrl = JSON.parse(modelScript.textContent).modelUrl;
  

• 处理动态加载内容：如果模型URL是JS动态渲染的，直接用DOM选择器可能无法获取。可以在DOMContentLoaded事件中执行提取逻辑，或者查看浏览器网络面板，找到加载模型的API请求，直接调用该API获取URL。
• 同样注意跨域限制：自动提取其他网站内容也会触发CORS，需用本地服务器或代理绕过。

三、新手调试技巧 #

• 拆分功能测试：先单独验证手动输入URL的导出逻辑是否正常，再调试自动提取功能。
• 依赖控制台排查：浏览器控制台（F12）会显示错误的具体代码行，根据提示定位问题，比如JSON解析错误会明确指出哪一行有非法字符。

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