使用three.js GLTFLoader加载导出JSON文件时遇版本不兼容错误

问题场景 #

从Three.js 3D查看器和编辑器导出的JSON文件，使用GLTFLoader加载时触发错误：

THREE.GLTFLoader: Unsupported asset. glTF versions >=2.0 are supported

该JSON文件的metadata.version为4.5，且能在Three.js编辑器中正常加载。

错误原因 #

你误用了加载器——这个JSON是Three.js原生场景格式（由Object3D.toJSON()生成），并非glTF格式。GLTFLoader仅支持加载glTF 2.0及以上版本的文件，无法识别Three.js专属的原生JSON结构。

解决方案 #

替换为ObjectLoader，它是Three.js官方提供的、专门用于加载编辑器导出的原生JSON格式文件的加载器。

修改后的JSX代码 #

import { ObjectLoader } from "three";

// 导入飞船的JSON文件
import Praetor from "../Assets/GameObjects/Spaceships/Praetor.json";

const SpaceshipLoader = new ObjectLoader();

class Spaceship {
  constructor() {
    this.health = 100;
    this.speed = 10;
    this.positionX = 0;
    this.positionY = 0;
  }
  create(Scene) {
    // 将飞船加载到目标场景中
    SpaceshipLoader.parse(
      Praetor,
      (SpaceshipObject) => {
        Scene.add(SpaceshipObject);
      },
      // 加载进度提示
      (xhr) => {
        console.log(`${(xhr.loaded / xhr.total) * 100}% 已加载`);
      },
      // 错误处理
      (error) => {
        console.log("加载出错");
        console.error(error);
      }
    );
  }
  move() {}
  shoot() {}
}

export { Spaceship };

额外提示 #

• 若需要跨引擎/工具兼容，建议在Three.js编辑器中选择导出glTF格式，而非原生JSON，这样就能继续使用GLTFLoader加载。
• Three.js原生JSON格式为专属格式，只有ObjectLoader能完整还原编辑器中的场景层级、材质、几何体等信息。

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