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
就是从该项目在服务器上的部署位置开始的绝对路径。
更多推荐
已为社区贡献2条内容
所有评论(0)