首页 前端知识 SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “... is not valid JSON at JSON.parse (<anonymous>)

SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “... is not valid JSON at JSON.parse (<anonymous>)

2024-04-29 11:04:06 前端知识 前端哥 370 13 我要收藏

在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);
})

使用绝对路径可以确保引入的是实际文件系统上的模型文件,避免在打包后文件找不到。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/6045.html
标签
评论
发布的文章

qt JSON和字符串相互转换

2024-05-05 12:05:04

nlohmann::json从入门到精通

2024-05-05 12:05:00

Android-第十节JSON讲解

2024-05-05 12:05:35

FastJson 框架详解

2024-05-05 12:05:31

MySql操作JSON

2024-05-05 12:05:31

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!