three.js 引入gltf 文件 显示 GLTFLoader.js:191 SyntaxError: Unexpected token ‘＜‘, “＜!DOCTYPE “

loader.load('../../public/Horse.gltf',  function (gltf) {
  console.log('gltf', gltf);
  // 把gltf.scene里面模型添加到场景scene中
  scene.add(gltf.scene);
  
})

解决方法：  首先 你的gltf 文件要放到 public 静态资源文件夹下面 然后你填写gltf文件路径的时候要使用绝对路径  /Hourse.gltf

​
​
loader.load('/Horse.gltf', function (gltf) {
  console.log('gltf', gltf);
  // 把gltf.scene里面模型添加到场景scene中
  scene.add(gltf.scene);
  
})

​

​

解释：

在 Vue 项目中使用 Three.js 加载 gltf 模型时，通常需要将 gltf 文件放在 public 文件夹下。这是因为 Vue 项目中的 public 文件夹是用于存储静态资源的，这些资源可以被直接访问。将 gltf 文件放在 public 文件夹下，可以确保 Three.js 能够正确加载和解析模型文件。

public 文件夹：

• 这里的资源会原封不动地被复制到最终的构建输出目录中。
• 可以直接通过相对项目根目录的绝对路径来访问，例如 /logo.png。
• 通常用于放置一些不需要经过构建处理的、直接可被浏览器访问的资源，如一些第三方库的静态文件等。

 

在 Vue 项目的语境下，/logo.png可以被视为一种相对项目部署后的根目录的绝对路径。

它表示从项目部署后的根路径开始查找 logo.png 文件。而与传统意义上的整个文件系统的绝对路径（如 C:\folder\logo.png ）是不同的概念。

例如，当项目部署到服务器上，在浏览器中访问时，这个 /logo.png 就是从该项目在服务器上的部署位置开始的绝对路径。