Blender导出ThreeJS模型报错：Unexpected token

Blender导出ThreeJS模型报错：Unexpected token < in JSON at position 0

阿华AIGC实验室

2026-5-20

解决Three.js加载Blender导出JSON模型时的"Unexpected token <"错误

这个报错我太熟了——本质上是你的浏览器请求到的不是JSON模型文件，而是一个HTML页面（大概率是404错误页），所以解析JSON时遇到了HTML开头的<就炸了。先别着急换加载器，先把最基础的路径问题搞定：

第一步：确认文件路径绝对正确

如果用的是Create React App这类框架，静态资源（比如你的JSON模型）必须放在项目根目录的public文件夹里，而且加载路径要写成根绝对路径，不是相对路径：

// 错误写法：相对路径可能找不到文件
loader.load('./making_a_face10.json', handle_load);

// 正确写法：从public文件夹根目录开始（假设文件放在public下）
loader.load('/making_a_face10.json', handle_load);

你可以直接在浏览器地址栏敲http://localhost:3000/making_a_face10.json（开发服务器地址），如果能看到纯JSON代码，说明路径没问题；如果跳转到404或者显示网页，那就是文件放错位置了。

第二步：检查Blender导出的JSON格式

打开你导出的making_a_face10.json文件，确认开头是{或者[（标准JSON的起始字符）。有时候io_three插件导出会出问题，比如：

导出时选错了格式（要确保选的是Three.js兼容的JSON格式）
插件版本和你用的Three.js版本不匹配（比如新版Three.js不再支持旧版JSONLoader的格式）

建议重新导出一次，导出时注意：

选对Three.js导出选项
如果你的Three.js是v125+版本，优先导出成Object JSON格式，配合THREE.ObjectLoader使用

第三步：用正确的加载器（针对新版Three.js）

THREE.JSONLoader已经被废弃了，新版Three.js推荐用ObjectLoader或者BufferGeometryLoader。给你一个完整的React类组件示例，包含错误排查：

import React, { Component } from 'react';
import * as THREE from 'three';

class FaceModel extends Component {
  componentDidMount() {
    const loader = new THREE.ObjectLoader();
    loader.load(
      '/making_a_face10.json',
      (loadedModel) => {
        console.log('模型加载成功！', loadedModel);
        // 这里可以把模型添加到你的Three.js场景里
        // 比如：this.scene.add(loadedModel);
      },
      (progress) => {
        console.log(`加载进度：${(progress.loaded / progress.total) * 100}%`);
      },
      (error) => {
        console.error('加载失败：', error);
        // 打印返回的内容，确认是不是HTML
        error.response.text().then(text => {
          console.log('服务器返回的内容：', text);
        });
      }
    );
  }

  render() {
    // 渲染一个容器给Three.js场景
    return <div ref={el => this.container = el} style={{ width: '800px', height: '600px' }} />;
  }
}

export default FaceModel;