tweenjs-移动threejs中的物体

谁践踏了优雅 2022-09-05 05:28 389阅读 0赞

## 效果图 ##

![在这里插入图片描述][1b6cda8319ba46f495666a0791acafff.gif_pic_center]

## 方法一： ##

<el-button type="primary" @click="action">开始运动</el-button>

methods:
    action(){ 
    	  var position = {  x: -50, y: 0 } // 物体变动前的位置
          var target = {  x: 400, y: 50 } // 物体变动后的位置
          var tween = new TWEEN.Tween(position).to(target, 2000).easing(TWEEN.Easing.Quadratic.InOut)
          tween.onUpdate(() => { 
            this.objects.position.x = position.x
            this.objects.position.y = position.y
          })
          tween.start()
    },
    animate () { 
          requestAnimationFrame(this.animate)
          TWEEN.update()  一定要在动画循环函数里面更新TWEEN！！
          this.renderer.render(this.scene, this.camera)
    }

## 方法二： ##

<el-button type="primary" @click="action">开始运动</el-button>

methods:
    action(){ 
    	  var position2 = this.objects[0].position // 物体变动前的位置
          var target2 = {  x: 400, y: 50, z: 0 } // 物体变动后的位置
          var tween2 = new TWEEN.Tween(position2).to(target2, 2000).easing(TWEEN.Easing.Quadratic.InOut)
          tween2.start()
    },
    animate () { 
          requestAnimationFrame(this.animate)
          TWEEN.update()  一定要在动画循环函数里面更新TWEEN！！
          this.renderer.render(this.scene, this.camera)
    }

[1b6cda8319ba46f495666a0791acafff.gif_pic_center]: /images/20220829/a7f1afd774fe4cc1a49ecfa36b9840e8.png

发表评论取消回复

表情：

评论列表（有 0 条评论，389人围观）

还没有评论，来说两句吧...

相关阅读

相关 threejs

Three.js是一个基于WebGL技术的JavaScript库，它可以简化3D图形的创建和展示。使用Three.js，你可以在网页上创建复杂的3D场景、模型和动画。 Thr

偏执的太偏执、/ 2024年02月20日 13:09/ 0 赞/ 69 阅读

相关 opencv：移动物体的侦测与统计

> 对运动物体的侦测以及在摄像头下的运动物体数量实时显示以及记录 > 通过背景建模进行前景的提取并对移动物体进行侦测 > 当前opencv版本4.3 //移动物

本是古典何须时尚/ 2022年12月10日 05:57/ 0 赞/ 197 阅读

相关 unity中物体移动到指定位置的四种方法

法一：使用Vector3.MoveTowards()方法 void Update(){ float step = SpeedTime

朱雀/ 2022年11月19日 05:24/ 0 赞/ 626 阅读

相关 unity 移动物体位置的常用方法

在Unity开发中我们难免要使用代码控制角色的移动，现将已知的几种方法总结如下：一、transform.Translate() function Translate (t

迈不过友情╰/ 2022年11月15日 15:51/ 0 赞/ 871 阅读

相关 tweenjs-移动threejs中的物体

效果图 ![在这里插入图片描述][1b6cda8319ba46f495666a0791acafff.gif_pic_center] 方法一： <el-bu

谁践踏了优雅/ 2022年09月05日 05:28/ 0 赞/ 390 阅读

相关 tweenjs-实现threejs的转场动画（基于vue）

注意！文章主讲tweenjs的使用，省去了threejs部分的代码，请自行添加！ [参考博文][Link 1] 链式补间：tween.chain 如果有多组补间动

- 日理万妓/ 2022年09月05日 05:23/ 0 赞/ 631 阅读

相关基于tiny6410的移动物体检测资料

alsa移植：http://blog.csdn.net/linweig/article/details/5459069 motion移植：http://blog.csdn.n

秒速五厘米/ 2022年06月10日 13:36/ 0 赞/ 208 阅读

相关关于Unity里面物体移动的问题

关于Unity里面物体移动的问题 -------------------- 围绕某一个平面水平移动，可以围绕某一个轴旋转在Rigidbody中存在一个Const

心已赠人/ 2022年06月01日 06:36/ 0 赞/ 297 阅读

相关 TweenJS模块

TweenJS模块 [官网][Link 1]链接 > TweenJS Javascript库提供了一个简单但强大的渐变界面。它支持渐变的数字对象属性&CSS样式属性,并

傷城~/ 2022年05月06日 06:46/ 0 赞/ 176 阅读

相关 TweenJS

\[TOC\] [文档][Link 1] TweenJS：用于做动画效果设置一个Tween，你需要调用Tween(target, \[props\], \[plug

ゞ浴缸里的玫瑰/ 2022年02月25日 03:22/ 0 赞/ 252 阅读