乌市泽哥 发表于 2024-7-16 10:26:02

SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “... is not valid

在vue项目中导入模型时报错如下:
SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse
https://img-blog.csdnimg.cn/direct/71b2e6caf07c4b15a11baa9ca408ddaf.png
代码写法如下:
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",如下
https://img-blog.csdnimg.cn/direct/3b8759ff99a34db5b378af70c518401f.png
// 添加模型
const gltfLoader = new GLTFLoader();
gltfLoader.load("./models/rabbit.glb", (gltf) => {
      let model = gltf.scene;
      console.log("model",model)
      scene.add(model);
}) 使用绝对路径可以确保引入的是现实文件体系上的模型文件,制止在打包后文件找不到。

免责声明:如果侵犯了您的权益,请联系站长,我们会及时删除侵权内容,谢谢合作!更多信息从访问主页:qidao123.com:ToB企服之家,中国第一个企服评测及商务社交产业平台。
页: [1]
查看完整版本: SyntaxError: Unexpected token ‘<‘, “<!DOCTYPE “... is not valid