zoukankan      html  css  js  c++  java
  • 使用tween.js移动three.js相机创建转场动画

    three.js借助tween.js快速创建补间动画,可以非常方便的控制机械、游戏角色运动。当然也可以控制three.js相机的移动。

    注:从github上能够搜到两个tweenjs相关的项目,本示例为使用tweenjs/tween.js。

    一、引入tween.js:

    从官网检出代码,并打包.

    git clone https://github.com/tweenjs/tween.js
    cd tween.js
    npm i .
    npm run build

    生成dist目录,并打包成以下文件,选择对应的js包引入即可:

    • UMD : tween.umd.js
    • AMD : tween.amd.js
    • CommonJS : tween.cjs.js
    • ES6 Module : tween.es.js

    比如引入tween.umd.js:

    <script src="js/tween.umd.js"></script>

    二、编写代码创建动画效果

     1 /**
     2      * 相机移动方法
     3      */ 
     4     function move(){
     5         // 设定相机初始位置
     6         var coords = {x:100,y:350,z:700};
     7         const tween = new TWEEN.Tween(coords) 
     8           .to({x: 100, y: 100, z:100}, 1000) // 指定目标位置和耗时.
     9           .easing(TWEEN.Easing.Quadratic.Out) // 指定动画效果曲线.
    10           .onUpdate(() => {
    11             // 渲染时每一帧执行:设定相机位置
    12             camera.position.set(coords.x,coords.y,coords.z);
    13           })
    14           .onComplete(()=>{
    15             // 动画结束后执行
    16           })
    17           .start() // 即刻开启动画
    18     }
    19   
  • 相关阅读:
    穷举 百鸡百钱
    for嵌套for ★
    纸张的厚度循环
    MySQL架构由小变大的演变过程
    MySQL数据库主从复制实践
    想要写出高性能sql语句,你得记住这些……
    Mongodb常用的性能监控命令
    Mongodb的mongostat命令
    Windows下MongoDB常用命令
    Windows下Mysql常用操作命令
  • 原文地址:https://www.cnblogs.com/malcolmfeng/p/15789319.html
Copyright © 2011-2022 走看看