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

已于 2023-05-30 11:02:11 修改
阅读量2.3k 收藏 5
点赞数 7
分类专栏： three.js 文章标签： vue.js javascript 前端
于 2023-05-27 17:09:03 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lph574/article/details/130903296
版权

如果你还不会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
    评论
专栏目录
基于vue3，three.js,3D智慧园区
11-09
在构建“基于vue3，three.js,3D智慧园区”的项目中，我们涉及了多个关键技术和概念，这些技术是现代Web开发中3D图形和交互式应用的核心。下面将详细阐述这些知识点： **Vue3**: Vue.js是一个流行的前端JavaScript...
vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)
weixin_44314609的博客
12-03 1814
vue项目引入three.js实现基本的动画(含vue-cli2引入报错解决方案)
vue ui出现erro src/main.js解决方法
yu472623295的博客
05-13 4758
由于我上一个报错找不到"transform-runtime",然后在.babel中添加 [ // “transform-runtime”, // { // “helpers”: false, // “polyfill”: false, // “regenerator”: true, // “moduleName”: “babel-runtime” // } // ] 然后运行vue ui时报错,经过查找注释掉这一行就不会有问题 ...
jenkins目录下的vue3项目——pnpm install后运行报错——奇葩问题解决
yehaocheng520的博客
05-07 1147
jenkins目录下的vue3项目——pnpm install后运行报错——奇葩问题解决
报错 - Failed to load url /src/stores/user (resolved id: D:/src/stores/user) Does the file exist?
weixin_42479421的博客
08-28 3628
问题：使用vue3时，修改了Store命名，报错 Failed to load url /src/stores/user (resolved id: D:/src/stores/user) Does the file exist?（404，get请求）原因：部分Store命名未更新。（使用vite引入Store时报错）若还是不行，加上文件后缀，然后重新运行。
vue3 + vite + js 配置Eslint + prettier
l_____z______z的博客
01-18 1600
vue3 + vite + js 配置Eslint + prettier
three.js报错集锦
Beam
07-23 6440
1、KeyframeTrack 帧动画 报错： THREE.Matrix3: .getInverse() can’t invert matrix, determinant is 0 代码： // 此处是一个缩放动画 let times = [0, 1] let scales = [0, 0, 0, 1, 1, 1] let scaleKeyframeTrack = new THREE.Keyfra...
vscode 报错Failed to load url /src/components/Dialog.vue
qq_52656761的博客
03-26 2875
如何解决？
vue页面引入three.js实现3d动画场景操作
10-14
至此，你已经具备了在Vue中使用Three.js的基础。你可以继续添加更多的3D对象、灯光、纹理和复杂的动画，以创造出更丰富的3D场景。 补充知识：Three.js官方文档（中文版）提供了详细的API介绍和示例，包括相机、几何...
Vue3 + Three.js 商城可视化实战
04-06
Vue3提供了强大的组件化开发模式，而Three.js则是JavaScript中的一个流行库，用于创建和展示复杂的3D场景。下面将详细解析这两个技术的结合及其在实际应用中的关键知识点。 **Vue3** Vue3是Vue.js框架的最新版本，...
vue使用three.js引入外部obj，mtl模型.zip
05-31
在Vue.js应用中集成Three.js库来加载外部的3D模型，如.obj和.mtl文件，是一种常见的增强网页3D视觉效果的方法。Three.js是一个强大的JavaScript库，它为WebGL提供了一个简单易用的接口，使得在浏览器中创建复杂的3D...
Vue使用Three.js加载glTF模型的方法详解
10-15
主要给大家介绍了关于Vue使用Three.js加载glTF模型的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Vue具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
[vite] Pre-transform error: Cannot find package pnpm路径过长导致运行报错
最新发布
undefined
07-10 601
下了套vue3的代码，执行pnpm install初始化，使用vite启动，启动后访问就会报错。
import { createApp } from ‘vue‘ 报错
weixin_50583054的博客
04-29 327
请问大佬们这个怎么解决啊？
vue3+vite,unplugin-vue-component 找不到 Vant 组件的问题
sinat_37746420的博客
04-09 367
只需要在 extensions添加.mjs。如题，按需引入组件报错。
vue3 + ts 项目 导入three报错
m0_56745001的博客
03-22 1878
TS7016: Could not find a declaration file for module 'three'. 'XXXX/node_modules/three/build/three.js' implicitly has an 'any' type. Try `npm i --save-dev @types/three` if it exists or add a new declaration (.d.ts) file containing `declare module 'three';
Blender Three.js 智慧3D机房开发 模型创建与导入中的常见问题与解决方案
qq_59060196的博客
03-17 4939
如果你遇到了在本文中没有出现的问题，欢迎评论或者私信我。
vue使用threejs导入gltf模型时报错的问题解决
CHENC0518的博客
04-17 1162
1.首先需要注意的是，模型需要放到public文件夹下，并且引入gltf/glb文件时，路径前面不能加public。
vue中使用this.$set报错_this15.$set is not a function
07-15
### 回答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、付费专栏及课程。

余额充值