Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档

简介: Threejs中使用Tweenjs实现动画效果和Tweenjs使用说明文档

1,Threejs中使用Tweenjs实现动画


在Threejs中使用Tweenjs很简单,步骤主要是引入Tweenjs,写动画,动画刷新。

如下示例:


<body>
  <div id="dom"></div>
  <script type="text/javascript" src="libs/three.js"></script>
  <script type="text/javascript" src="libs/Tween.min.js"></script>
  <script type="text/javascript">
    var camera;
    var renderer;
    function init() {
      // 创建一个场景,它将包含我们所有的元素,如物体,相机和灯光。
      var scene = new THREE.Scene();
      // 创建一个摄像机,它定义了我们正在看的地方
      camera = new THREE.PerspectiveCamera(65, window.innerWidth / window.innerHeight, 0.1, 10000);
      camera.position.x = 180;
      camera.position.y = 80;
      camera.position.z = 90;
      camera.lookAt(scene.position);
      // 创建一个渲染器并设置大小,WebGLRenderer将会使用电脑显卡来渲染场景
      renderer = new THREE.WebGLRenderer({
        antialias: true,
        logarithmicDepthBuffer: true,
      });
      renderer.setSize(window.innerWidth, window.innerHeight);
      // 在屏幕上显示坐标轴
      var axes = new THREE.AxesHelper(10000);
      scene.add(axes);
      var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
        .easing(TWEEN.Easing.Elastic.InOut)
        .onUpdate(function(){
          console.log(this.x)
        })
        // .start();
      // 将呈现器的输出添加到HTML元素
      document.getElementById("dom").appendChild(renderer.domElement);
      // 启动动画
      renderScene();
      function renderScene() {
        TWEEN.update();
        // 使用requestAnimationFrame函数进行渲染
        requestAnimationFrame(renderScene);
        renderer.render(scene, camera);
      }
      // 渲染的场景
      renderer.render(scene, camera);
    }
    window.onload = init;
  </script>
</body>


2, Tween.js使用说明文档


Tween.js是一个轻量级的JavaScript库,可以从https://github.com/sole/tween.js/下载。

   通过这个库可以很容易地实现某个属性在两个值之间进行过渡,而且起始值和结束值之间的所有中间值都会自动计算出来,这个过程叫作tweening(补间)。


   

var tween = new TWEEN.Tween({x: 10}).to({x: 3}, 10000)
                .easing(TWEEN.Easing.Elastic.InOut)
                .onUpdate(function(){
                         // update the mesh
                })
                .start();

      上述代码创建了TWEEN.Tween对象,这个对象会确保x属性值在10000毫秒内从10变化到3。通过Tween.js,你还可以指定属性值是如何变化的,是线性的、指数性的,还是其他任何可能的方式(完整列表可以参照http://sole.github.io/tween.js/examples/03_graphs.html)。

       属性值在指定时间内的变化被称为easing(缓动),在Tween.js中你可以使用easing()方法来配置缓动效果;

     

       var tweenBack = new TWEEN.Tween({x: 3}).to({x: 10}, 10000);

       tweenBack.easing(TWEEN.Easing.Elastic.InOut);

       tweenBack.chain(tween);

       tweenBack.start();

     

       这个通过chain()方法可以将这两个补间衔接起来,这样当动画启动之后,程序就会在这两个补间循环。例如:一个动画在另一个动画结束后开始。可以通过chain方法来使实现。

 

       tweenBack.repeat(10);

       如果你想制作循环动画可以使用chain来实现,但是更好的方法是使用repeat方法。它接收一个用于描述你想循环多少次。

 

       tweenBack.yoyo();

       这个函数只在你使用repeat方法是起作用。当它被激活时,tween 的效果类似yoyo效果。该效果是动画会在开始或结束处向反方向反弹。

 

       tweenBack.delay(1000);

       delay方法用于控制动画之间的延时。

 

       TWEEN.add(tween) 和 TWEEN.remove(tween)

       用于向被激活的tweens中添加一个tween,或移除一个tween。

 

       以上方法通常只是在内部使用,一般情况下你了解即可。

目录
相关文章
|
4月前
ThreeJs使用tweenjs动画库制作动画
这篇文章介绍了如何在Three.js中使用Tween.js动画库来简化动画制作流程,并演示了如何通过简单的代码实现动画效果。
167 1
ThreeJs使用tweenjs动画库制作动画
开发指南055-根据内容选择样式
平台除了提供各种组件、接口外,更重要的是规定解决方式,就是什么场景用什么解决方案
|
4月前
Threejs用官方提供的编辑器做一个简单的模型
这篇文章介绍了如何使用Three.js内置的编辑器来创建和编辑简单的3D模型,并提供了相应的操作指南。
445 0
|
7月前
|
小程序 前端开发
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
【微信小程序-原生开发】实用教程22 - 绘制图表(引入 echarts,含图表的懒加载-获取到数据后再渲染图表,多图表加载等技巧)
404 0
|
图形学 开发者
Unity——各种特效的基本使用方法
Unity——各种特效的基本使用方法
526 0
|
9月前
|
移动开发 小程序 API
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
uniapp中uview组件库中丰富的LineProgress 线形进度条 的使用方法
688 1
|
开发者
vue3_制作一个在线修改svg颜色功能
vue3_制作一个在线修改svg颜色功能
253 1
|
9月前
|
前端开发
前端如何创建好看的简洁的蒙版弹窗
前端如何创建好看的简洁的蒙版弹窗
104 0
|
JavaScript
vue项目实现预览pdf功能(解决动态文字无法显示的问题)
最近,因为公司项目需要预览pdf的功能,开始的时候找了市面上的一些pdf插件,都能用,但是,后面因为pdf变成了需要根据内容进行变化的,然后,就出现了需要动态生成的文字不显示了。换了好多好多的插件,都无法显示,直接无语了。 (pdf-vue3,pdf.js,vue3-pdfjs,vue-pdf-embed等插件无法显示动态文字)
853 0