解决在Vue中使用three.js卡顿、掉帧等问题

最新推荐文章于 2024-06-08 14:53:08 发布
最新推荐文章于 2024-06-08 14:53:08 发布
阅读量1.3k 收藏 11
点赞数 11
文章标签： javascript vue.js 前端 前端框架
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mao0523/article/details/135101313
版权

情境：我在学习threejs的时候，发现我的代码和老师的几乎是一样的，只是我把项目放在了vue中，可是我的动效明显看着比老师的卡很多（此时已经检查过确定不是哪里写错了），缩放及加载的时候也感受到了卡顿。

解决方法：不要将scene及mixer等变量放在vue的data中！vue的双向绑定会让页面变卡！

内心OS：我要把之前的three项目都改一下，哭哭，多年的悬案终于破了，啊啊啊啊

啃代码的毛毛虫
关注
  • 11
    点赞
  • 踩
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
threejs学习--vue-cli集成threejs后，加载gltf模型FPS很低问题解决（四）
干饭两斤半
11-18 2420
vue集成threejs后，web页面加载模型之后，FPS值在10以下；查阅资料是因为；声明的部分threejs的对象不可以放在data中；否则就会帧数特别低； 以下为修改之后代码 <template> </template> <script> import * as THREE from "three"; import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"; i
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)
最新发布
07-07
【Threejs进阶教程-优化篇】4.Vue/React与threejs如何解决冲突和卡顿(续)中的全部源码
VUE使用three.js模型缩放卡顿问题
qq_38694388的博客
05-07 4675
VUE使用three.js模型缩放卡顿问题 最近将之前开发的three.js程序集成到vue项目中，发现模型的旋转可缩放变得比较卡顿，网上搜集资料发现是将scene与controls放在vue data中的缘故，解决方法是将其定义在vue之外，然后在method中修改，完整代码如下。 <template> <div class="test" id='gltf'> ...
VUE2+THREE.JS 销毁，防止越来越卡顿
c_x_m的博客
12-04 1299
将场景相关的参数重置，防止页面卡顿
【Threejs进阶教程-优化篇】3. 卡顿与内存管理(二)
qq_42760477的博客
06-08 1188
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，逐步分析贴图，光源，阴影对性能的影响
Vue BabyLon.js和Three.js 解决模型卡顿，模型优化
creatlh的博客
06-09 7125
如果用Vue搭建3D模型时候注意不要把3D模型的场景、相机等数据双向绑定，否则会影响帧率 vue3可以直接不采用响应式声明数据 vue2可以在data() 外部声明所用数据 这样模型大一点也不会影响模型渲染、性能对于体积特别大的模型可以将模型进行压缩再使用 gltf-pipeline 安装 将glTF转换为Draco glTF model.gltf：需要压缩的文件 modelDraco.gltf：压缩后的文件名称 详细可参考：Gltf模型太大，Threejs加载耗时怎么办？答：Blender导出Gltf可以
Vue项目中使用Three.js写Web3D页面问题记录
热门推荐
Mr_Bobcp的博客
01-19 1万+
在Vue项目中使用Three.js出现明显卡顿 现象：单页写的物体自动移动移植到Vue项目中明显卡顿 原因：用浏览器开发者工具中的Performance分析网页性能，发现有一项reactiveGetter耗时占比高，展开其中包含调用Three.js相关函数，结合Vue响应式原理，Vue会对data里面的变量进行变化追踪，占用了资源。 解决方法：将data中的数据写到mounted中或者定义当页局部变量 在Vue项目中退出动画页面还会调用requestAnimationFrame 现象：在Vue项目中某页面W
threejs页面卡顿问题
qq_40712151的博客
11-09 3181
优化threejs页面卡顿问题，尤其是自己使用mesh构建模型
vue 中使用three.js 性能优化
qq_44428688的博客
08-08 335
关于性能优化的地方啊 其实这里面已经做了一个 就是那种重复的模型 不要用几次加载几次啊 加载一次就行了 然后改一下模型的位置啥的 还有就是就是那种大模型如果有重复的很多块的话可以拆开一下 （此做法前端定位会麻烦一些）然后再需要使用three.js的页面。npm i 这些包自己装一下。首先安装three.js环境。容器，相机，场景，光源。最后渲染器和相机控制的东西。
Threejs实现3D场景浏览器内存消耗过高导致浏览器卡顿崩溃刷新等问题解决办法以及3D场景在手机浏览器中画质不高的原因
左本Web3D
04-14 5512
不同的移动设备和浏览器对WebGL的支持程度可能不同，这可能会导致3D场景在不同设备上显示效果不同。相比于桌面设备，移动设备的性能普遍较低，可能无法支持高质量的3D场景渲染。如果场景结构不合理，例如过多的对象或层级嵌套太深等，则会导致性能问题。不合理的代码编写也会导致性能问题，例如频繁的创建和销毁对象、过多的计算和事件监听等。如果场景中有过多的光照和阴影效果、反射和折射等效果，则会导致渲染速度变慢。在一些低端设备上，三维场景的渲染可能受到硬件性能的限制，可以尝试使用更低的画质设置或减少场景中的对象数量。
基于 ThreeJs 的中国 3D 地图展示，使用 vue 框架.zip
06-06
在本项目中，开发者利用了Three.js库创建了一个交互式的中国3D地图，同时结合了Vue.js框架，为用户提供了动态、丰富的前端展示效果。Three.js是一个强大的JavaScript库，专门用于在Web浏览器中构建和展示3D图形。Vue...
基于threejs实现室内模型的动态装载源码(智慧楼宇).zip
11-20
Three.js是一个开源的JavaScript库，它为WebGL提供了一个简单易用的接口，用于在浏览器中创建和展示3D图形。WebGL是一种在HTML5 canvas元素上渲染交互式3D和2D图形的API，无需任何插件。Three.js简化了WebGL的复杂性...
动画框组件打字.rar
04-06
- **实现方式**：在前端开发中，可以使用JavaScript库如jQuery UI或React的自定义组件来创建动画框。在游戏开发中，可以使用Unity3D或其他游戏引擎内置的动画系统。 2. **打字动画效果**： - **模拟打字**：打字...
动态元素周期表 js 高级特效
12-29
在IT行业中，JavaScript（简称js）是一种广泛使用的前端编程语言，尤其在网页交互效果和动态内容展示方面表现突出。本文将深入探讨如何利用JavaScript实现一个动态元素周期表的高级特效。 首先，我们要理解元素周期...
threejs切换模型界面卡顿问题
m0_73495473的博客
01-09 602
如下为threejs官方给出的代码，在销毁模型时使用，即可清除内存。没有在切换模型时清除上一个模型占用的内存。
【Threejs进阶教程-优化篇】1.Vue/React与threejs如何解决冲突和卡顿
qq_42760477的博客
03-03 1480
vue/react+threejs 总是卡顿，怎么解决两者的冲突
【Threejs进阶教程-优化篇】2. 卡顿与内存管理(一)
qq_42760477的博客
03-14 2957
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，逐步分析为什么模型要按照标准来处理
Three 使用EffectComposer和OutlinePass后帧率很低
weixin_54045596的博客
04-17 342
最近做到一个需求，需要使用到发光描边，而且需要不停地更改需要发光描边的对象，结果使用后发现帧率直接降到个位数！给后处理的composer添加了无数个outlinePass通道，但是没有清除。想着既然有addPass那应该也有removePass吧，找了一下真的有。然后自己查看了代码发现，因为需要不停更改描边对象，所以一直调用。在网上看了很多帖子发现对我的代码没什么用，改完帧率还是很低。
【Three.js】渲染模型卡顿的优化办法
jiangxinyu50的博客
03-15 9781
优化方法是根据chatGPT的回答下，我这里记录一下，有的方法进行了尝试，有的还没有。
在vue中使用three.js vr 全景图
07-29
在Vue中使用Three.js VR全景图，你可以按照以下步骤进行： 1. 首先，确保你已经安装了Vue和Three.js的依赖包。你可以使用npm或yarn来安装它们。 2. 在Vue的组件中，导入Three.js所需的库和组件： ```javascript import * as THREE from 'three'; import { VRButton } from 'three/examples/jsm/webxr/VRButton.js'; ``` 3. 创建一个Vue组件，并在其中定义一个方法来初始化Three.js场景： ```javascript export default { mounted() { this.initScene(); }, methods: { initScene() { // 创建场景 const scene = new THREE.Scene(); // 创建相机 const camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 ); // 创建渲染器 const renderer = new THREE.WebGLRenderer({ antialias: true }); renderer.setSize(window.innerWidth, window.innerHeight); document.body.appendChild(renderer.domElement); // 添加VR按钮 document.body.appendChild(VRButton.createButton(renderer)); // 创建全景图 const textureLoader = new THREE.TextureLoader(); const texture = textureLoader.load('path/to/your/panorama-image.jpg'); const sphereGeometry = new THREE.SphereGeometry(500, 60, 40); const sphereMaterial = new THREE.MeshBasicMaterial({ map: texture }); const sphere = new THREE.Mesh(sphereGeometry, sphereMaterial); sphere.position.set(0, 0, 0); scene.add(sphere); // 更新相机和场景 const animate = () => { requestAnimationFrame(animate); sphere.rotation.y += 0.01; renderer.render(scene, camera); }; animate(); }, }, }; ``` 4. 在Vue模板中使用这个组件： ```html <template> <div id="app"> <canvas id="vr-canvas"></canvas> </div> </template> ``` 这样，你就可以在Vue中使用Three.js VR全景图了。当用户点击VR按钮时，全屏显示全景图，并支持通过移动设备或VR眼镜进行交互。你可以适配不同的全景图、修改相机参数等来满足你的需求。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

啃代码的毛毛虫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值