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 就是从该项目在服务器上的部署位置开始的绝对路径。
AtomGit 是由开放原子开源基金会联合 CSDN 等生态伙伴共同推出的新一代开源与人工智能协作平台。平台坚持“开放、中立、公益”的理念,把代码托管、模型共享、数据集托管、智能体开发体验和算力服务整合在一起,为开发者提供从开发、训练到部署的一站式体验。
更多推荐



所有评论(0)