three.js 切换模型多次，重新初始化时动画越来越快的问题

最新推荐文章于 2024-11-28 22:49:22 发布
最新推荐文章于 2024-11-28 22:49:22 发布
阅读量810 收藏 2
点赞数 3
CC 4.0 BY-SA版权
分类专栏： three.js 文章标签： javascript 前端 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44183178/article/details/125872334
在使用three.js进行前端3D开发时，遇到切换模型后动画速度逐渐增快的问题。经过分析，发现是由于之前动画调用未正确清除导致。解决方案是在清除场景时同时清理相关动画，确保每次加载新模型时动画从初始状态开始，避免速度异常。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

假设这是之前的调用动画的地方，给他加一个id

var AnimationId = null;
function animate() {
   
   
    AnimationId = requestAnimationFrame( animate );
    render();
}

在清除场景的函数里把动画清除就ok了


                

                
                
        

    

    
  


        

            

                      
                        最低0.47元/天 解锁文章
                        

                          
200万优质内容无限畅学

                          
                        

                      
            

        


    



                



	

		

			

				
					
Three.js引擎开发：Three.js输入与交互系统_（8）.Three.js动画系统与时间管理

				
			

			

				

					chenlz2007的博客
				

				

					06-11
					
					549
					
				

			

		

		

			
				
Three.js提供了一个灵活且强大的动画系统，可以用于创建各种复杂的动画效果。动画系统的核心是和，它们可以用于管理模型的动画。此外，Three.js还支持使用外部动画库，如GSAP（GreenSock Animation Platform）和TWEEN.js，以实现更精细的动画控制。在虚拟现实游戏中，动画系统与时间管理是关键组件，直接影响到游戏的流畅性和用户体验。Three.js提供了一个灵活且强大的动画系统，可以用于创建各种复杂的动画效果。此外，通过使用外部动画库如GSAP和TWEEN.js。

			
		

	



                

            
              



	

		

			

				
					
three.js在同一个div下切换不同模型挂载的问题

				
			

			

				

					Beam
				

				

					05-15
					
					3696
					
				

			

		

		

			
				
需求
同一个div下，通过查询不同的设备展示不同的模型。
实现
关键代码如下：
<div id="equip-model"></div>
// 加载three.js
needReloadThreeJs (devtype) {
  div3D = document.getElementById('equip-model')
  this.initScene() // 场景
 ...

			
		

	



              


  
              

                


	

		

			

				
					
webgl、threeJS地球案例：地球转速越来越快

				
			

			

				

					weixin_52296487的博客
				

				

					11-12
					
					1023
					
				

			

		

		

			
				
在用three.js写地球案例时候，使用了动画，设置了它的自转速度，但是转速却一直在加快

动画这样设置：
function animate( ) {
			let elapsed = clock.getElapsedTime();
			moon.position.set(Math.sin(elapsed)*4,0,Math.cos(elapsed)*4)

			//地球自转
			   //自转轴
			   var axis= new THREE.Vector3(0,1,0);
	
			   ea

			
		

	





	

		

			

				
					
threejs切换模型界面卡顿问题

				
			

			

				

					m0_73495473的博客
				

				

					01-09
					
					989
					
				

			

		

		

			
				
如下为threejs官方给出的代码，在销毁模型时使用，即可清除内存。没有在切换模型时清除上一个模型占用的内存。

			
		

	



		

			
		



	

		

			

				
					
three.js在vue3中模型切换

				
			

			

				

					qq_52499093的博客
				

				

					08-29
					
					1405
					
				

			

		

		

			
				
three.js在vue3中模型切换

			
		

	





	

		

			

				
					
Threejs多个相同格式模型同一页面加载切换

				
			

			

				

					qq_53479183的博客
				

				

					03-21
					
					1541
					
				

			

		

		

			
				
Threejs多个相同格式模型单页面切换加载

			
		

	





	

		

			

				
					
Three.js碎片化图片切换特效.zip

				
			

			

				

					10-08
				

			

		

		

			
				
在这里，jQuery可能用于页面加载时初始化Three.js场景，或者在用户交互时触发图片切换事件，比如点击按钮或滑动鼠标。  5. **CSS特效**：虽然Three.js负责3D渲染，但CSS可以用来增强2D元素的样式，如按钮、背景等。...

			
		

	





	

		

			

				
					
Three.js渲染较大的模型之解决方案

				
			

			

				

					m0_51244077的博客
				

				

					11-28
					
					2478
					
				

			

		

		

			
				
Three.js渲染较大的模型之解决方案

			
		

	





	

		

			

				
					
学习threejs，对模型多个动画切换展示

				
			

			

				

					我哎GIS博客
				

				

					11-20
					
					1750
					
				

			

		

		

			
				
本文详细介绍如何基于threejs在三维场景中对模型多个动画切换展示，亲测可用。希望能帮助到您。一起学习，加油！加油！

			
		

	





	

		

			

				
					
three3D 模型切换Demo

				
			

			

				

					04-26
				

			

		

		

			
				
three3D 模型切换Demo

			
		

	





	

		

			

				
					
threejs 切换场景

				
			

			

				

					07-29
				

			

		

		

			
				
threejs切换场景  实现图朴上的切换效果，  而不是相机的视角移动，不浪费性能，非常棒的效果，代码简单，实现思路简单，适合新手开发项目中，遇到当前视角切换到模型内部  等效果 ， threejs scene的切换 ， 视角的移动会导致页面不是很流畅，而且旋转也会有点小bug 直接切换场景，就不会存在这种的问题，值得收藏，学不会找博主  私信  看到了会回复  

			
		

	





	

		

			

				
					
解决vue多个页面组件在来回切换时，模型运动疯狂掉帧的bug

				
			

			

				

					string佳佳的博客
				

				

					09-26
					
					1467
					
				

			

		

		

			
				
个人亲测，方法有效！
bug原因（均为个人猜测，有不同意见欢迎评论区提出）：
我们在创建threejs 3D场景时，往往会有这么一个函数：
    render () {
    	requestAnimationFrame(this.render)
        this.renderer.render(this.scene, this.camera)
    }

其中 requestAnimationFrame(this.render) 会让render函数不停地自身调用自身，即使切换到不同的vue

			
		

	





	

		

			

				
					
threejs动画播放(暂停、倍速、循环)AnimationAction

				
			

			

				

					u014291990的博客
				

				

					12-19
					
					2460
					
				

			

		

		

			
				
设置播放模式为非循环模式的时候，你会发现关键帧动画执行完成一个后，模型回到了关键帧动画开头状态，如果你希望模型停留在关键帧动画结束的状态，可以设置。，做了整体介绍，下面进一步介绍关键帧动画播放的知识，比如关键帧动画停止播放、暂停播放、倍速播放…对象的功能就是用来控制如何播放关键帧动画，比如是否播放、几倍速播放、是否循环播放、是否暂停播放…方法，动画会停止，并结束，模型回到动画开始状态,注意不是暂停，是动画彻底终止，回到初始状态。默认值false，动画正常执行，如果你想暂停正在执行的动画可以把。

			
		

	





	

		

			

				
					
【Threejs进阶教程-优化篇】2. 卡顿与内存管理(一)

				
			

			

				

					qq_42760477的博客
				

				

					03-14
					
					5516
					
				

			

		

		

			
				
Threejs进阶教程，优化篇，卡顿与内存管理，本文从demo的角度，讲解如何加载10万个盒子，并逐步分析为什么模型要按照标准来处理

			
		

	





	

		

			

				
					
three.js 的动画，不同设备的动画效果不同。

				
			

			

				

					jdhrucn的博客
				

				

					03-17
					
					280
					
				

			

		

		

			
				
在做项目时，加载模型之后，给位移动画效果时，在我自己的电脑上没问题（自己电脑配置不好）。但是在我们公司的电脑上（配置比较好）会出现位移不到指定的位置。一开始我自己也是满头雾水，这不是硬件方面的问题吗?，再渲染期间，他是要不停的调用的，硬件好的电脑你不会出现掉帧的问题，也就是画面可以很流畅的执行并到达指定位置，硬件不好的就眼泪直流。近期在做vue3加three.js的项目时，遇到一个问题，记录一下。的调用次数减少，这样就会是两台电脑达到相差无几的效果。最后还是我们组里的大佬解决了。自己的部分代码，仅供参考。

			
		

	





	

		

			

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

				
			

			

				

					mao0523的博客
				

				

					12-20
					
					2361
					
				

			

		

		

			
				
情境：我在学习threejs的时候，发现我的代码和老师的几乎是一样的，只是我把项目放在了vue中，可是我的动效明显看着比老师的卡很多（此时已经检查过确定不是哪里写错了），缩放及加载的时候也感受到了卡顿。解决方法：不要将scene及mixer等变量放在vue的data中！vue的双向绑定会让页面变卡！内心OS：我要把之前的three项目都改一下，哭哭，多年的悬案终于破了，啊啊啊啊。

			
		

	





	

		

			

				
					
图形化开发（七）04-Three.js之动画——补间动画-以平滑的方式更改对象的位置

				
			

			

				

					weixin_44867717的博客
				

				

					09-20
					
					1238
					
				

			

		

		

			
				
图形化开发（七）04-Three.js之动画——补间动画-以平滑的方式更改对象的位置
补间动画
补间(动画)（来自 in-between）是一个概念，允许你以平滑的方式更改对象的属性。你只需告诉它哪些属性要更改，当补间结束运行时它们应该具有哪些最终值，以及这需要多长时间，补间引擎将负责计算从起始点到结束点的值。
在Three.js中，我们也有一些修改模型的位置，旋转和缩放的需求，我们无法直接在webgl中使用css3动画，所以，Tween给我们提供了一个很好的解决方案。
我们先实现一个Three.js应用T

			
		

	





	

		

			

				
					
three.js根据模型动画帧数切割动画

				
			

			

				

					qq_41026858的博客
				

				

					01-26
					
					1905
					
				

			

		

		

			
				
注意在帧数切割时，某段动画帧数是开区间，若0-15   则在切割时最好是到0-16
  generateFBX(v, maxTime, startTime) {
      var loader = new FBXLoader()
      loader.load('FBX/tt1.FBX', (mesh) => {
        mesh.scale.set(20, 20, 20)
        mesh.position.set(0, 300, 0)
        this.mixer =

			
		

	





	

		

			

				
					
THREE.JS 根据起始帧将一个AnimationClip对象分割成多个AnimationClip

				
			

			

				

					qq_21222737的博客
				

				

					11-01
					
					3027
					
				

			

		

		

			
				
THREE.JS 根据起始帧将一个AnimationClip对象分割成多个AnimationClip
因为从3dsMax里面导出的模型只支持一个动画，如果需要对多个动画进行单独控制的话就必须将其切割成多个AnimationClip对象，其实原理跟数组截取是一样的。

/**
 *根据起始帧将当前动画切割成多段动画
 * @param clips 起始帧数组[[起始帧，结束帧],[起始帧，结束帧]....

			
		

	





	

		

			

				
					
three.js 模型回到初始位置动画

					
最新发布

				
			

			

				

					04-02
				

			

		

		

			
				
好的，用户想实现Three.js模型通过动画回到初始位置的功能。我需要先理解他的需求，然后根据Three.js的知识找到合适的解决方法。  首先，用户提到了使用动画让模型回到初始位置。这可能涉及到模型的位置、旋转、缩放...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		
评论 3

	

  
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值