vue 访问本地文件 相对路径 文件目录 three.js 加载模型

环境:

  • vue/cli 4.5.9
  • “three”: “^0.124.0”,
  • “vue”: “^2.6.11”,
  • “vue-router”: “^3.2.0”

搞了一下把three.js融入vue,前面比较顺利,在加载文件时遇到了问题(GLTFLoader)
这些我都有

import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";

加载模型的代码如下:

initLoadGLTF() {
      let loader = new GLTFLoader();
      loader.load(
        "/Models/bonetest/bonetest.gltf",gltf=> {
            console.log(gltf)
          this.scene.add(gltf.scene);
        },
      );
    },

目录结构如下:
在这里插入图片描述
搞了半天,老是报这么个错,网上也没搜到解决方案,而且这个错误给的不明确,

SyntaxError: Unexpected token < in JSON at position 0
    at JSON.parse (<anonymous>)
    at GLTFLoader.parse (GLTFLoader.js?34ad:281)
    at Object.eval [as onLoad] (GLTFLoader.js?34ad:174)
    at XMLHttpRequest.eval (three.module.js?5a89:36749)

我报这个错的原因是模型文件路径错误,…/…/…/一层一层往上找了半天,愣是没碰出来个对的路径,吐了
搞了半天,最后测试了一下用axios读取本地txt,发现路径不对,txt都读不出来,感谢这篇文章

✔当然上面贴出的代码里是正确的,需要注意的一点就是,你路径已/开头,是从public文件开始,public下的models文件夹下的test.gltf,那么url就是zhongdian”/models/test.gltf“

  • 3
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值