在 Gridsome 项目 (Vue.js) 中使用 .GLB / Blender 文件

Posted

技术标签:

【中文标题】在 Gridsome 项目 (Vue.js) 中使用 .GLB / Blender 文件【英文标题】:Use .GLB / Blender files in Gridsome project (Vue.js) 【发布时间】:2021-01-21 08:34:03 【问题描述】:

我在 Gridsome 项目中使用 Three.js,但无法使用 GLTFLoader 导入 .glb 文件(3D 模型)。 Gridsome 考虑存储在 src/assets 中的 img (png/jpg) 或 .js 文件,但不考虑 glb。

我的文件层次结构:

我的导入功能:

this.loader.load('../assets/models/mars.glb', function(gltf) 
  let scale = 5.6;
);

加载文件时收到 404 错误。

有什么想法吗?

【问题讨论】:

【参考方案1】:

使用 Gridsome 的 the /static directory 并重新构建您的项目 此目录中的所有文件将在构建期间直接复制到您的 dist。

您可以将导入功能更改为:

this.loader.load('./nameOfYourModel.glb', function(gltf) 
  // Your code here 
);

【讨论】:

以上是关于在 Gridsome 项目 (Vue.js) 中使用 .GLB / Blender 文件的主要内容,如果未能解决你的问题,请参考以下文章

Gridsome 项目托管在 netlify 上。点击时,即使 URL 更新,页面也不会加载

使用 Gridsome 从 Vue 组件访问查询的数据

来自 Gridsome 的 Tailwind 插件的 @apply 不起作用

如何在 Nuxt 中使路由区分大小写

如何在vuejs中使第一个字母大写

如何在 gridsome 中添加和使用 vue-confetti