使用Three.js JSONLoader加载JSON模型时遇Unexpected token <错误求助

嘿，我帮你分析下这个问题——你遇到的这个错误：

Uncaught SyntaxError: Unexpected token < in JSON...

其实很常见，大概率不是你的Three.js代码逻辑有问题，而是加载t-rex.json时拿到的内容根本不是有效的JSON文件，而是HTML代码（比如404错误页面的开头就是<标签），浏览器尝试把HTML当成JSON解析，自然就报错了。

先看看你写的加载代码，我帮你格式化了一下，方便阅读：

var t_rex;
var loader = new THREE.JSONLoader();
loader.load('t-rex.json', addModelToScene)

function addModelToScene(geometry, materials) {
    var material = new THREE.MeshFaceMaterial(materials)
    t_rex = new THREE.Mesh(geometry, material)
    t_rex.scale.set(0.2, 0.2, 0.2)
    scene.add(t_rex)
}

接下来给你几个排查和解决的方向：

• 先检查文件路径是否正确：确认t-rex.json和你的HTML/JS文件的相对位置是否匹配。比如如果你的JS文件放在js/子文件夹里，那路径应该写成../t-rex.json；如果模型放在models/文件夹，就写成models/t-rex.json，别写错层级或者文件名。
• 确认文件是否真的存在：直接在浏览器地址栏输入模型文件的完整URL（比如http://localhost:8000/t-rex.json），看看能不能正常显示JSON内容。如果跳转到404页面，说明文件没放对位置，或者文件名大小写写错了（很多服务器是区分大小写的，比如T-Rex.json和t-rex.json会被当成两个不同的文件）。
• 用本地服务器运行项目：如果你是直接双击打开HTML文件（用file://协议），浏览器的安全限制可能会导致无法读取本地JSON文件。建议启动一个简单的本地服务器，比如用Python3的话，在项目文件夹里运行python -m http.server，然后通过http://localhost:8000访问你的页面。
• 最后验证JSON本身的有效性：如果上面的步骤都没问题，那可以把t-rex.json的内容复制到编辑器的JSON校验工具（比如VS Code的JSON校验），或者在浏览器控制台里用JSON.parse('你的JSON内容')测试，看看是不是JSON本身有语法错误（比如漏了逗号、引号不匹配）。

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