tweenjs创建threejs动画

已于 2024-09-12 15:08:09 修改
阅读量661 收藏 29
点赞数 30
分类专栏： three.js 文章标签： tweenjs javascript 前端 threejs
于 2024-09-07 19:37:22 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_35430208/article/details/142001002
版权

TweenJS

图片

TweenJS是一个由JavaScript语言编写的补间动画库，项目中可以使用tweenjs辅助你生成动画，对于任何前端web项目，你都可以选择tweenjs库。

如果你使用three.js开发web3d项目，使用tween.js辅助three.js生成动画效果也是比较好的选择。

 

<!DOCTYPEhtml>
 

<htmllang="en">
 

 

<head>
 

   <metacharset="UTF-8">
 

   <title>Three.js</title>
 

   <style>
 

       body{
 
 

           overflow:hidden;
 

           margin:0px;
 

        }
 

       .bu{
 
 

           background:rgb(0,0,0,0.3);
 

           width:60px;
 

           height:60px;
 

           color:#FFFFFF;
 

           display:inline-block;
 

           text-align:center;
 

           line-height:60px;/* 行高等于容器高度 */
 

           border-radius:30px;
 

           margin:10px;
 

        }
 

       .pos{
 
 

           position:absolute;
 

           left:50%;
 

           bottom:100px;
 

           margin-left:-100px;
 

        }
 

       .bu:hover{
 
 

           cursor:pointer;
 

        }
 

   </style>
 

   
 

</head>
 

 

<body>
 

   
 

   
 

   <divclass="pos">
 

       <divid="A"class="bu">快递</div>
 

       <divid="C"class="bu">整体</div>
 

       <divid="B"class="bu">叉车</div>   
 

       

                

        

        

    

  


        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  qq_35430208
                
              
            

            

                关注
              
            

        

        

          
      

      

            

                专栏目录
          









                



	

		

			

				
					
three.js : tweenjs创建threejs动画

				
			

			

				

					yinge0508的博客
				

				

					01-10
					
					503
					
				

			

		

		

			
				
【代码】three.js  :  tweenjs创建threejs动画。

			
		

	



                

              
                



	

		

			

				
					
Three.js相机飞行动画，鼠标点击设备，相机靠近预览

				
			

			

				

					u014291990的博客
				

				

					12-20
					
					2772
					
				

			

		

		

			
				
在物联网、数字孪生Web3D可视化开发的项目中，往往需要调整相机视角或位置，近距离查看预览3D场景中的某个设备。

			
		

	



                


  
              

                


	

		

			

				
					
tweenjs+threejs 多个动画依次执行

				
			

			

				

					weixin_44136421的博客
				

				

					01-20
					
					1762
					
				

			

		

		

			
				
1.使用场景：当小车自动驾驶时，会由多条路线依次驶过，而tweenjs动画是链式函数执行
let myTwen = new TWEEN.Tween(position);  //position格式 ：{x:x,y:y}
   myTwen.to(
      {
        x: geometryGroup[1][0],
        y: geometryGroup[1][1],
      },
      7000
    )
    .onUpdate((pos) => {
      

			
		

	





	

		

			

				
					
threejs结合tween实现动画效果

				
			

			

				

					popstarqq的博客
				

				

					12-06
					
					4653
					
				

			

		

		

			
				
1 渲染一个八卦图，实现尺寸从1增大到2，并伴随着旋转

效果如下



如果用原生js实现上面效果的话，代码如下:

首先创建一个八卦图圆面:


// 创建圆面
let texture =  new THREE.TextureLoader().load(
  require(`../../assets/images/bagua.jpeg`)
);
let geometry = new THREE.CircleGeometry(20, 150);
let mesh=new THREE.Mesh(
  g.

			
		

	



		

			
		



	

		

			

				
					
threejs动画

				
			

			

				

					疯狂的程序员
				

				

					06-30
					
					655
					
				

			

		

		

			
				
个人博客地址:前面我们所用的模型大都是静态的，没有动画，没有生命。这节我们将赋予它们生命。动画。这些其实在前面章节示例里或多或少已经使用了。

			
		

	





	

		

			

				
					
tweenjs动画库配合ThreeJS使用

				
			

			

				

					xyphf的博客
				

				

					12-09
					
					2168
					
				

			

		

		

			
				
tween.js是一款可生成平滑动画效果的js动画库。其官方网站为：http://www.createjs.cc/tweenjs/docs/modules/TweenJS.html

tween.js允许你以平滑的方式修改元素的属性值。你只需要告诉tween你想修改什么值，以及动画结束时它的最终值是什么，动画花费多少时间等信息，tween引擎就可以计算从开始动画点到结束动画点之间值，来产生平滑的动画效果。例如，假设你有一个对象 position ，它的坐标为 x 和 y ：


var position =

			
		

	





	

		

			

				
					
Threejs实现开门关门动画

				
			

			

				

					左本Web3D
				

				

					05-09
					
					2330
					
				

			

		

		

			
				
1，介绍


该示例使用的是 r95版本Three.js库。

主要实现功能：模拟开门关门动画。效果图如下：




2，动画主要说明


1，使用THREE.BoxGeometry创建几何体。

2，引用纹理THREE.TextureLoader进行材质创建THREE.MeshPhongMaterial

3，创建物体THREE.Mesh并引用几何体和材质

4，设置物体绕Y轴旋转实现动画，这里需要注意的是物体旋转是以自身中心进行旋转的，所以这里需要把几何体THREE.BoxGeometry平移自身宽度.

			
		

	





	

		

			

				
					
ThreeJS:补间动画与Tween.JS

				
			

			

				

					席木木的博客
				

				

					05-05
					
					912
					
				

			

		

		

			
				
ThreeJS:补间动画与Tween.JS

			
		

	





	

		

			

				
					
tweenjs动画库配合ThreeJS使用DEMO

				
			

			

				

					12-09
				

			

		

		

			
				
在本文中，我们将深入探讨如何将TweenJS动画库与Three.js结合使用，通过一个实际的DEMO来展示这种结合的应用。TweenJS是一个轻量级的JavaScript库，它提供了平滑的缓动效果，用于对象属性的过渡动画。而Three.js则是...

			
		

	





	

		

			

				
					
three.js打开礼物爆炸动画特效特效代码

				
			

			

				

					03-20
				

			

		

		

			
				
在本项目中，我们关注的是一个使用three.js库创建的特效——"打开礼物爆炸动画"。这个特效是一种视觉效果，通常用于网站或者互动媒体中，为用户提供一种独特的用户体验，特别是适用于节日或庆祝场合。让我们深入了解...

			
		

	





	

		

			

				
					
VUE+Three使用补间动画TweenJs实现动态切换相机位置

				
			

			

				

					MonkeyB_B的博客
				

				

					09-06
					
					923
					
				

			

		

		

			
				
VUE+Three使用补间动画TweenJs实现动态切换相机位置

			
		

	





	

		

			

				
					
threejs封装相机动画函数，点击任何按钮都可以实现相机飞行到目标观察点前观察

				
			

			

				

					幽幽谷
				

				

					08-19
					
					1078
					
				

			

		

		

			
				
threejs封装相机动画函数，点击任何按钮都可以实现相机飞行到目标观察前观察

			
		

	





	

		

			

				
					
JS-常用功能

				
			

			

				

					qq_40950398的博客
				

				

					10-18
					
					140
					
				

			

		

		

			
				
汇总一些常用的js功能

			
		

	





	

		

			

				
					
ECMAScript标准解析及其发展历史与技术演进

				
			

			

				

					qq_20245171的博客
				

				

					10-15
					
					756
					
				

			

		

		

			
				
ECMAScript（简称ES）是由ECMA国际（欧洲计算机制造商协会）制定的一种脚本语言规范。它是JavaScript、JScript等语言的基础，并为现代Web开发提供了强大的支持。ECMAScript标准不仅定义了语言的语法和语义，还涵盖了数据类型、对象模型和执行环境等内容，极大推动了JavaScript语言的发展。本文将全面介绍ECMAScript标准的起源、各个版本的演变、关键特性以及未来趋势，深入探讨其对Web开发及编程语言设计的影响。

			
		

	





	

		

			

				
					
基于Java微信小程序的水果销售系统详细设计和实现(源码+lw+部署文档+讲解等)

				
			

			

				

					源码好优多
				

				

					10-16
					
					783
					
				

			

		

		

			
				
请联系我获取更详细的演示视频。

			
		

	





	

		

			

				
					
2024 Bootstrap 秘籍：基础详解、实战案例与优化技巧

					
最新发布

				
			

			

				

					weimengen的博客
				

				

					10-18
					
					553
					
				

			

		

		

			
				
本文介绍了使用 Bootstrap 构建网站的技巧。涵盖了 Bootstrap 的基础知识，包括响应式设计原理、HTML 结构、CSS 类作用和 JavaScript 插件。详细阐述了安装与使用方法、布局规划、组件选择及自定义样式等方面，并为每个知识点提供了丰富案例。掌握这些技巧，开发者能构建出高质量、美观且响应式的网站。

			
		

	





	

		

			

				
					
基于SpringBoot的冬奥会科普平台

				
			

			

				

					weixin_53180424的博客
				

				

					10-16
					
					324
					
				

			

		

		

			
				
系统展示
【2024最新】基于Java+SpringBoot+Vue+MySQL的，前后端分离。

			
		

	





	

		

			

				
					
uni-app中添加自定义相机（微信小程序+app）

				
			

			

				

					qq_29184685的博客
				

				

					10-15
					
					774
					
				

			

		

		

			
				
2、使用h5plus提供的plus.video.LivePusher来实现，可以使用于vue平台，如果需要在相机上覆盖样式，比如边框之类的比较复杂，实践过后发现获取的图片宽度比相机宽度大，获取快照时间过长，大概需要2秒。2.1、这种方法可以在vue页面中使用，自定义样式需要plus.webview.create添加一个html页面来实现，在项目根目录下添加一个hybrid目录，在目录下添加html页面。1、使用live-pusher标签，但是页面需要是nvue平台【推荐使用这种】

			
		

	





	

		

			

				
					
vue下载安装 "@tweenjs/tween.js和threejs

				
			

			

				

					09-27
				

			

		

		

			
				
要在Vue项目中安装`@tweenjs/tween.js`和`three.js`库，你需要先确保你已经在项目中安装了Node.js和npm (Node Package Manager)。以下是安装步骤：

1. 打开终端或命令行界面，切换到你的Vue项目的根目录。
2. 使用npm或yarn（推荐使用yarn，因为它有更好的包锁定机制）初始化依赖：

   - **npm**: `npm init` 或 `npm install`
   - **yarn**: `yarn init` 或 `yarn add`

3. 安装`@tweenjs/tween.js`和`three.js`：
   
   - **npm**:  
     ```
     npm install @tweenjs/tween.js three --save
     ```

   - **yarn**:
     ```
     yarn add @tweenjs/tween.js three
     ```

上述命令将这两个库添加到你的`package.json`文件的dependencies或devDependencies部分，取决于它们是否用于生产环境或开发工具。

4. 安装完成后，在你的Vue组件中，可以通过import引入这两个库：

   ```javascript
   // 引入Tween.js
   import * as Tween from '@tweenjs/tween.js';

   // 引入Three.js
   import * as THREE from 'three';
   ```

5. 现在你就可以在组件内使用`@tweenjs/tween.js`创建动画，而`three.js`则提供三维渲染功能。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
qq_35430208

			
您的鼓励是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值