关于VUE中使用three.js的一些报错

如果你还不会three.js的基础运用知识,可以看一下我的上一篇文章。

以下是我学习three.js所踩的一些坑,所以发出来希望能避免大家重蹈覆辙 ,拒绝踩坑!

目录

一、加载gltf三维模型时,报错404

其实是因为gltf格式文件默认是在根目录的public文件下进行读取

 二、引入OrbitControls、GLTFLoader报错,提示路径不对,文件找不到

我安装的版本号是一致的,但是内部的源代码有一点点不一样,我新建的测试项目,采用的官方最新的引入方式,也就是将three/addons/loaders 替换了老版本的three/examples/jsm/loaders目录


一、加载gltf三维模型时,报错404

 看了官方文档并没有说明关于gltf文件路径的问题,在网上也查询了很多,解决方法五花八门但是一个有用的都没有。有的说安装依赖包,有的说修改vue.config.js,有人说采用import引入等等之类的,但是均无作用。

其实是因为gltf格式文件默认是在根目录的public文件下进行读取

如果还是报错,可以看下这个gltf模型是否没有适配的bin文件,有些.gltf文件是需要和.bin文件相辅相成的 。

如果是从资源网站下载的,不光需要.gltf模型文件.bin文件,甚至还可能需要放贴图的文件夹,里面放了一些模型所需要的一些贴图,如果没有文件夹中的贴图也能渲染出来,但是因为没有贴图图片,会丢失模型上本应该有的外观。

比如我下图中的 textures 文件夹和.bin文件

 下面是在组件中引用gltf格式的三维模型

 二、引入OrbitControls、GLTFLoader报错,提示路径不对,文件找不到

下面这张图是官方提供的引入路径,也可以说是标准引入路径,我在新建测试的项目中使用这种引入,是没有任何问题的。

测试没问题后,便依葫芦画瓢,将这整个组件搬到公司项目中,结果公司项目的控制台竟然报错!

官方提供的这种引入路径在我这个项目里面无法使用!  当时让我挺费解的......

结果在网上查阅无果,我想既然是因为路径报错,那么就仔细检查整个文件结构吧

于是便在node_modules文件夹中搜索three这个依赖包,好家伙,还真让我找到了问题所在!

我安装的版本号是一致的,但是内部的源代码有一点点不一样,我新建的测试项目,采用的官方最新的引入方式,也就是将three/addons/loaders 替换了老版本的three/examples/jsm/loaders目录

而我的公司项目并没有改写,采用这种方式进行引入,所以只能使用老版本的绝对路径引入

 

 

  • 7
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 3
    评论
### 回答1: 在Vue使用this.$set(obj, key, value)方法是为了在响应式地更新对象时,能够添加新的属性而不影响数据的响应式更新。但是,当报错_this15.$set is not a function时,通常有以下几个可能的原因和解决办法: 1. Vue版本较低:请确保你的Vue版本是2.3.0及以上。因为在这个版本之前,Vue的this.$set()方法并不是默认自带的。可以通过查看Vue的版本号来确认是否符合要求。 2. this指向错误:在Vue组件,确保你在正确的作用域内使用了this.$set()方法。如果是在组件的回调函数或者异步操作使用,可能会导致this指向发生变化。 3. 被操作的对象不是响应式的:this.$set()只能在响应式的对象上使用,如果传入的对象不是响应式的,会导致报错。可以使用Vue.set()方法或直接在data声明对象的方式将其转变为响应式对象。 4. Vue的实例被重写:如果在Vue实例被重写之后再使用this.$set()方法,会导致报错。在Vue实例被重写之前或在Vue组件正常使用this.$set()方法。 综上所述,要解决_this15.$set is not a function报错,首先确保Vue版本符合要求,然后确认使用this.$set()的作用域正确并且被操作的对象是响应式的。如果问题仍未解决,可以进一步检查是否重写了Vue实例。 ### 回答2: 当在Vue使用this.$set报错_this15.$set is not a function时,通常是因为this指向不正确或者Vue实例没有正确地初始化。 首先,确保你的Vue实例已经成功创建,并且在使用this.$set之前已经完成了初始化。一般情况下,Vue实例的初始化应该在created或mounted钩子函数完成。 其次,检查this指向是否正确。在Vue组件,你可以在methods定义方法,而在方法使用this来访问Vue实例。如果你有一个异步操作或者回调函数,并且需要在回调函数使用this.$set,那么在回调函数可能会丢失正确的this指向。为了确保this指向正确,你可以在异步回调函数之前将this存为一个变量。 示例代码如下: ``` export default { data() { return { message: "Hello Vue!" } }, created() { // Vue实例初始化 // 这里你可以进行一些初始化操作 }, methods: { updateMessage() { // 在回调函数之前存储正确的this指向 const self = this; // 异步操作或者回调函数 someAsyncOperation(function(response) { // 在回调函数使用正确的this指向 self.$set(self, 'message', response.data); }); } } } ``` 通过以上方法,你应该能够成功使用this.$set来更新Vue实例的数据,而不再遇到_this15.$set is not a function的错误。 ### 回答3: 在Vue使用this.$set工具函数来动态修改响应式数据时,出现_this15.$set is not a function_的报错通常是因为this.$set函数的调用方式不正确或者Vue版本过低导致的。 首先,确保你正在使用的是Vue 2.x版本,因为在Vue 1.x版本并没有this.$set这个函数。 其次,this.$set函数是用来给Vue实例添加响应式属性的,所以调用时需要传入三个参数,分别是对象本身、属性名和属性值。例如: ```javascript this.$set(this.obj, 'prop', value) ``` 其,this.obj是你想要添加属性的对象,'prop'是属性名,value是新的属性值。 另外,如果你在自定义组件的方法使用this.$set,需要保证this指向当前组件实例。如果方法是通过普通的函数定义,可能会导致this指向错误。为了确保this指向正确,可以使用箭头函数或者使用bind()方法来绑定this。例如: ```javascript methods: { updateProp: function(value) { this.$set(this.obj, 'prop', value) } } ``` 或者使用箭头函数: ```javascript methods: { updateProp: (value) => { this.$set(this.obj, 'prop', value) } } ``` 总结一下,要解决_this15.$set is not a function_的报错,需要确保使用的是Vue 2.x版本,并且调用this.$set函数时传入正确的参数,并且保证this指向正确。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

昂首莫回头

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值