在vue项目中导入模型时报错如下:
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
at JSON.parse (<anonymous>)
at GLTFLoader.parse
代码写法如下:
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("../../assets/models/rabbit.glb", (gltf) => {
let model = gltf.scene;
console.log("model",model)
scene.add(model);
})
通过测试发现是模型文件路径问题,模型文件路径需采用绝对路径,即"src/assets/models/rabbit.glb",改成如下引入报错解决
// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("src/assets/models/rabbit.glb", (gltf) => {
let model = gltf.scene;
console.log("model",model)
scene.add(model);
})
或是将模型文件放在public文件夹下,路径改为"./models/rabbit.glb",如下
// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("./models/rabbit.glb", (gltf) => {
let model = gltf.scene;
console.log("model",model)
scene.add(model);
})
使用绝对路径可以确保引入的是实际文件系统上的模型文件,避免在打包后文件找不到。