Three JS动画初体验----(4)

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第4天，点击查看活动详情 >

动画制作

解析

想要mesh产生动画，则需要mesh发生变化，所以会涉及缩放，大小，旋转，属性等参数的修改，在前两篇有详细介绍如何修改模型属性信息； 在本篇我们通过requestAnimationFrame（浏览器自带，一般每秒60帧,在dom不可见时不进行重绘/回流）实现动画效果，在requestAnimationFrame传入我们的变化方法，让它在下一帧渲染时执行。

旋转动画的简单实现

function tick(){
    // 创建变量 此刻的变量是你想创建的任意动画效果
    mesh.rotation.y += 0.01;
    ...anyAnimate
    // 重新渲染
    renderer.render(scene, camera)
    // 不断调用
    requestAnimationFrame(tick)
}
tick()

注：这种方式可以实现旋转动画效果，但是由于是在下一帧调用方法的方式使得动画的速度由电脑的刷新率（FPS）决定，这个参数充满了不可控性；

优化版旋转动画

// 储存时间差变量
let time = Date.now();
function tick() {
    // 获取当前时间戳
    const currentTime = Date.now();
    // 计算时差
    const deltaTime = currentTime - time;
    time = currentTime;
    // 当前修改的值得大小与时间绑定
    mesh.rotation.y += 0.001 * deltaTime;
    // 重新渲染
    renderer.render(scene, camera)
    requestAnimationFrame(tick)
}
tick()

补充说明:Date.now()与new Date().getTime()都可以获取时间戳,但是Date.now()效率更高,因为他不用实例化,直接取constructor的属性(无关但有用的小知识点)

优化版旋转动画2.0

Clock官方文档链接

// clock使用  THREEJS自带的,可以获取自从开始后的累计时长,单位为秒
let clock = new THREE.Clock();
function tick2() {
    // 获取自时钟启动后的秒数
    let elapsedTime = clock.getElapsedTime();
    // 传递变量
    mesh.rotation.y = elapsedTime * Math.PI ;
    // 添加三角函数,动画变得更加生动 [-1,1]的波浪线
    //mesh.position.y = Math.sin(elapsedTime)
    // 重新渲染
    renderer.render(scene, camera)
    requestAnimationFrame(tick2)
}
tick2()

优化版旋转动画3.0

gsap动画库,用起来很简单也很易于理解

// 安装
npm install gasp
// 引入
import gsap from 'gsap'
// 动画实现 直接传入需要修改的参数及其对应的值就可以实现动画效果
gsap.to(mesh.position,{duration:1,delay:1,x:2})

如果有哪里描述不准确或者有问题,欢迎大佬指正!
(≖ᴗ≖)✧