vue3.0 + GLTFLoader 加载 .gltf 模型报错

文章讲述了作者在处理Webpack加载.gltf模型时遇到问题,通过在线工具将模型转换为.glb格式并成功使用GLTFLoader加载。同时提到了两种导入模型的方法:绝对路径和import导入.
摘要由CSDN通过智能技术生成

Module parse failed: Unexpected token (2:12)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
在这里插入图片描述
我找了很多文档,实在也是没找到很好的解决方式,后来偶尔从一篇文档中误打误撞找到一个思路,有一个线上查看模型的网址: https://gltf.report/
在这里查看模型后:
在这里插入图片描述
点击 Export 按钮后可以再次下载为 .glb 格式文档,这个格式的模型还是也可以用
const loaderGltf = new GLTFLoader(); 方式加载模型

const loaderGltf = new GLTFLoader();
loaderGltf.load('/model/car.glb', (gltf: any) => {
  // 这个就是获取到的模型
  const mesh = gltf.scene;
});

这里加载模型地址时,一种可以将模型放入 public 下 写绝对路径,
或者 import 引入
import car13 from ‘@/components/models/car.glb’;

Vue.js是目前最流行的前端框架之一,它简单、高效、易于学习,同时有着很好的可维护性和可扩展性。随着Vue.js的不断发展和升级,Vue3.0相继推出,Vue.config.js作为Vue.js开发中非常重要的配置文件之一,在Vue3.0中的确被删除了。 在Vue.js中,Vue.config.js是一个重要的配置文件,它可以定义和修改Vue.js应用程序的各种默认设置,比如修改Webpack的配置选项、添加插件等等。然而,在Vue3.0中,Vue.config.js文件已经被删除了,这个文件现在不再起作用。这是因为Vue3.0使用了新的模块化API,这个API允许开发者更加灵活地配置Vue.js应用程序。 新的模块化API是Vue3.0相对于Vue2.0最重要的改变之一,它使用了ES6模块化语法,将Vue.js应用程序分解成了不同的部分,开发者可以在各个模块之间进行灵活的组合和使用。这个新的API允许开发者通过导入和导出模块的方式来进行自定义配置。因此,在Vue3.0中,开发者可以在自己的项目中使用额外的_Vite_或_Rollup_等构建工具,通过使用这些工具来进行对Vue.js应用程序的构建和优化。 总之,尽管Vue.config.js在Vue3.0中被删除了,但是Vue3.0带来的新的模块化API却为开发者提供了更加灵活和强大的配置方式。除此之外,Vue3.0还提供了大量的新特性和改进,在性能、可维护性、可扩展性等方面都有了显著的提高,这将对Vue.js的开发者们带来很多的好处。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值