threejs在vue中帧数低的问题

原创 已于 2022-06-22 09:13:53 修改 · 2.9k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript

于 2022-04-26 16:56:10 首次发布
Vue与ThreeJS结合使用时，双向绑定可能导致渲染效率低下。解决方法是将ThreeJS逻辑写入独立的JS文件，并在Vue页面中仅展示Canvas，从而显著提高渲染速度。

vue会对threeJs的变量进行双向绑定导致渲染效率极大幅度降低，解决方案是是写在外部js文件中，渲染效率大幅度提高。

更好的做法是那threejs写在js文件里导入，vue页面只提供一个canvas，不做任何处理

冰乐_
关注
threejs学习--vue-cli集成threejs后，加载gltf模型FPS很低问题解决（四）
干饭两斤半
11-18 2635
vue集成threejs后，web页面加载模型之后，FPS值在10以下；查阅资料是因为；声明的部分threejs的对象不可以放在data中；否则就会帧数特别低； 以下为修改之后代码 <template> </template> <script> import * as THREE from "three"; import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; i
Three 之 three.js （webgl）性能优化、提高帧率的思路/方向整理
热门推荐
仙魁XAN
04-19 2万+
Three 之 three.js （webgl）性能优化思路方向整理 目录 Three 之 three.js （webgl）性能优化思路方向整理 一、简单介绍 二、优化方向 1、创建多量物体时 ，BufferGeometry （或者InstancedBufferGeometry）创建 2、合理执行渲染方法.render() 3、减少没必要执行的代码在周期性渲染函数中的执行 4、减少模型面数，必要可以用法线贴图增加模型细节替代 5、共享几何体和材质 6、渲染帧率的优化，其实就是合理调用
vue使用three.js实现外部加载模型的自动缩放的效果（进一步优化）
菜鸟karroy
06-13 8989
一、vue使用three.js加载外部模型自适应渲染区域大小 1、实现效果 当在http://localhost:8080/#/scale?name=tree2.glb 中name参数中输入不同名字的.glb模型时，都可以自动进行缩放来适用所定义页面的大小。 但需要注意的是：模型需要为.glb格式。若不是glb格式，可以通过blender软件进行导入后再导出为glb格式。 2、实现思路 （1）定...
Three 使用EffectComposer和OutlinePass后帧率很低
weixin_54045596的博客
04-17 835
最近做到一个需求，需要使用到发光描边，而且需要不停地更改需要发光描边的对象，结果使用后发现帧率直接降到个位数！给后处理的composer添加了无数个outlinePass通道，但是没有清除。想着既然有addPass那应该也有removePass吧，找了一下真的有。然后自己查看了代码发现，因为需要不停更改描边对象，所以一直调用。在网上看了很多帖子发现对我的代码没什么用，改完帧率还是很低。
解决在Vue中使用three.js卡顿、掉帧等问题
mao0523的博客
12-20 2510
情境：我在学习threejs的时候，发现我的代码和老师的几乎是一样的，只是我把项目放在了vue中，可是我的动效明显看着比老师的卡很多（此时已经检查过确定不是哪里写错了），缩放及加载的时候也感受到了卡顿。解决方法：不要将scene及mixer等变量放在vue的data中！vue的双向绑定会让页面变卡！内心OS：我要把之前的three项目都改一下，哭哭，多年的悬案终于破了，啊啊啊啊。
three.js粒子系统-通过加载纹理贴图实现雨滴特效(vue中使用three.js44)
点燃火柴的博客
12-17 1869
通过纹理导入实现雨滴特效1.VUE中纹理导入过程1.1纹理图片存放路径1.2获取环境变量中的BASE_URL1.3通过THREE.TextureLoader加载纹理贴图2.创建雨滴特效2.1用加载的纹理贴图创建雨滴2.2 实现下雨特效动画3.demo效果4.demo代码 1.VUE中纹理导入过程 1.1纹理图片存放路径 vue中导入时默认的public下，所以要使用的纹理图片需要放在该路径下，如下图images文件夹下的raindrop-3.png就是我们要使用的纹理图片 1.2获取环境变量中的BASE_
VUE使用three.js模型缩放卡顿问题
qq_38694388的博客
05-07 4994
VUE使用three.js模型缩放卡顿问题 最近将之前开发的three.js程序集成到vue项目中，发现模型的旋转可缩放变得比较卡顿，网上搜集资料发现是将scene与controls放在vue data中的缘故，解决方法是将其定义在vue之外，然后在method中修改，完整代码如下。 <template> <div class="test" id='gltf'> ...
关于bim数字孪生threejs中使用glb文件大小优化及加载慢的说明(笔记)
大胡子大叔的专栏
06-28 1754
在用three.js开发的时候发现，稍微大一点的glb或者fbx文件加载的时候很慢很卡一直不理解这个卡和慢取决于哪些条件，下面来详细说一下。
在Vue3中集成three.js加载FBX模型教程
资源摘要信息:"在Vue 3中使用Three.js加载FBX模型的方法" Three.js是一个流行的JavaScript 3D库，它提供了一种简单易用的方式在网页上展示3D内容。FBX（Filmbox）是一种流行的3D模型文件格式，广泛应用于电影和游戏...
精选资源
three.js绘制文字光晕动画特效特效代码
03-20
在本项目中，我们主要探讨的是如何利用three.js库来创建一个吸引人的文字光晕动画特效。Three.js是一个流行的JavaScript库，专为WebGL提供3D图形渲染功能，它简化了在网页上创建复杂的3D场景的过程。在这个特定的...
Threejs如何提高渲染效率
ssblxdw的专栏
11-24 777
在Three.js中，提高渲染效率的方法有很多种。
uniapp vue3中使用threejs渲染3D模型
Motion_zq的博客
10-25 5167
uniapp vue3中使用threejs渲染3D模型
threejs点击模型实现模型边缘高亮的选中效果--更改后提高帧率
坏蛋阿土的博客
08-08 2476
先来个效果图之前写的那个稍微有点问题，帧率只有30，参照官方代码修改后，帧率可以达到50了，在不全屏的状态下，帧率60。
VUE框架下FPS低解决方式
april_4的博客
12-09 1282
最近客户发现FPS很低，大模型加载才4,5FPS ，但是之前的用纯js的版本写的用例表现却很好，到30左右，差别这么大 也看了很多vue优化的例子， http://jinlong.github.io/2017/05/08/optimising-the-front-end-for-the-browser/ http://jinlong.github.io/2017/05/08/optimisi...
Three.js性能优化思路
weixin_42277430的博客
01-23 1051
【代码】Three.js性能优化思路。
three.js 设置渲染帧数 FPS
角角兔的博客
01-10 5423
本片文章用于 限制渲染的帧数不超过某个速率 不单单是three.js 任意的使用js渲染的帧率控制都通用 主要思路 在渲染动画的函数外放置一个定时器 在开始渲染的时候计时器开始计时 在渲染一帧之前判断当前渲染的这帧距离 上一帧所经过的时间 如果时间小于（1/FPS） 单帧渲染时间 （例如60帧就是 1/60s）则跳过不进行渲染 如果时间大于(1/FPS) 单帧渲染时间 则将判定的时间设置为(当前帧距离上一帧的时间 - 1/FPS) 用于下一帧的计算 const clock = THREE.Clock
threejs性能优化
qq_26887683的博客
10-19 8482
three.js是目前国内开发Web3D应用最多的第三方库，它提供了非常多的3D显示功能。在使用的时候，虽然three.js 本身做了优化，但是在较大分辨率下，加载较大或者较多模型时会出现，帧率会越低，给人感觉就越卡，因此性能方面的优化对提高视觉体验有着积极影响。以下是我在项目（vue+threejs）开发结合度娘总结的一些思路，希望能有所帮助。 合理执行渲染方法 因为默认情况下requestAnimationFrame（）每秒执行60次，如果在里面加个for循环，代码效率就会严重影响，同时还要减少浮点
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)
最新发布
qq_42760477的博客
07-07 1855
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)，本篇继承上篇，主要详细讲解如何开发一个完全分离的Threejs和vue的脚手架
three.js性能优化
subsistent的博客
02-05 1174
three.js是JavaScript编写的第三方库。提供了非常多的3D显示功能。在使用的时候，虽然three.js 做了优化，但是在使用不恰当的代码，也会产生性能损耗。帧率越低，给人感觉就越卡。这是我在开发中自己百度总结的，有不对的可以联系我啊在加载页面之前可以给个加载页面的缓冲，因为场景模型没有加载的时候会黑屏，加载一瞬间可能会出现闪屏等性能问题，十分影响用户体验的。BufferGeometry 会缓存网格模型，性能要高效点。网格模型生成原理。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值