tweenjs-移动threejs中的物体

谁践踏了优雅 2022-09-05 05:28 369阅读 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 条评论，369人围观）

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

相关阅读

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

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

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

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

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

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

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

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

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

相关 tweenjs-移动threejs中的物体

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

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

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

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

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

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

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

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

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

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

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

相关 TweenJS模块

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

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

相关 TweenJS

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

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

相关 three.js物体移动以及相机的移动（位置以及旋转方位）

之前trackballcontrols.js的所谓旋转缩小是指的，站在相机的角度上，我们围着物体转。物体在空间中的坐标是没有发生变化的。接下来的transform是指坐标变

逃离我推掉我的手/ 2022年02月21日 03:49/ 2 赞/ 1781 阅读