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 就是从该项目在服务器上的部署位置开始的绝对路径。

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐