LogoLogo
HomeBlogResources
  • README
  • Design
    • Awesome Design Tools
      • Awesome Design Tools
    • Awesome-UI-Templates
      • README-en
    • awesome-design-systems
      • Awesome Design System
    • Awesome Figma
      • Awesome Figma
    • awesome-styleguides
      • README-en
    • awesome-typography
      • Awesome Typography
    • awesome-ui
      • README-en
    • Awesome UX Design Styleguides
      • Awesome UX Design Styleguides
    • awesome-ux-designer
      • README-en
      • Reading list
    • awesome-ux
      • README-en
    • Awesome Webflow
      • webflow-masterclass
        • Webflow + Firebase用戶認證
    • webflow-masterclass
      • Webflow + Firebase用戶認證
  • Devops
    • Awesome SaaS boilerplate
    • Free for Dev
    • Mega Awesome List
    • Awesome-WordPress-Plugins
      • Awesome WordPress Plugins List
    • Awesome Wordpress Plugin List
    • Awesome CMS
    • awesome-flutter-cn
    • awesome-headless-cms
      • readme-en
    • Awesome-jamstack-resources
      • Awesome-jamstack-resources
    • Awesome Laravel
      • Awesome Laravel
    • awesome-list
      • The awesome manifesto
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • Creating Your Own List
      • pull_request_template
      • Media
    • Awesome Minio
    • awesome-react
      • README-en
    • Awesome Stack
      • Awesome Stacks
    • Awesome UI component library
      • Awesome UI component library
    • awesome-uikit
      • README-en
    • awesome-vercel
      • Awesome Vercel (Previously ZEIT )
    • Awesome WooCommerce
      • Awesome WooCommerce
    • Awesome WordPress
      • Awesome WordPress
    • Awesome Wordpress Developer Tools
      • Awesome WP Developer Tools
  • Marketing
    • Awesome ADTech
      • Awesome AdTech
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • HubSpot CMS Boilerplate
      • HubSpot CMS Boilerplate
    • Awesome HubSpot
    • Awesome Marketing
    • awesome-seo
    • marketing-for-engineers
      • README-en
    • Tech-Marketer
  • Nocode
    • Awesome NoCode / LowCode
      • readme-en
  • Server
    • Awesome Cloudflare
      • Awesome Cloudflare
    • Awesome-Selfhosted
      • Awesome-Selfhosted
  • shopify
    • Awesome Shopify
      • Awesome Shopify
    • Shopify Awesome 真棒!
      • Awesome Shopify
  • Tools
    • Awesome VS Code
    • Awesome Mac
      • Awesome Mac
      • editor-plugin-zh
      • editor-plugin
    • Awesome Nomad
      • Awesome Nomad
    • Awesome-notion
      • Awesome Notion (Eng)
    • awesome-tools-for-startups
      • Awesome list of FREE tools Startups should be using
  • web3
    • Blockchain-stuff
      • CONTRIBUTE
    • Blockchain-stuff
    • Web3.0_Vault-main
    • Web3.0_Vault-main
      • basics
    • awesome-discord-communities
      • Contributor Covenant Code of Conduct
      • CONTRIBUTING
      • FAQ
      • Server Badges and Tags
      • .github
        • ISSUE_TEMPLATE
          • custom
        • ISSUE_TEMPLATE
          • issue--exisiting-community
        • ISSUE_TEMPLATE
    • awesome-ethereum
    • awesome-solidity-gh-pages
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • Awesome Web3
      • Awesome Web3 Code of Conduct
      • Contribution Guidelines
      • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • Contributor Covenant Code of Conduct
    • free-Web3-resources
      • Contributing Guidelines
    • free-Web3-resources
    • free-Web3-resources
      • Intro to Solidity
    • free-Web3-resources
      • 200-days-of-Web3
    • free-Web3-resources
    • free-Web3-resources
    • Free Web3 Resources
    • free-Web3-resources
      • .github
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
    • Web3.0_Vault-main
    • web3together-main
      • CODE_OF_CONDUCT
      • sessions
        • Getting Started in Smart Contract Development with Solidity
    • free-Web3-resources
      • .github
        • PULL_REQUEST_TEMPLATE
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • bug_report
    • free-Web3-resources
      • .github
        • ISSUE_TEMPLATE
          • feature_request
  • webgl
    • Awesome-threejs
      • docs
        • Hellow Three.js 之 三维空间中观察物体的方法--照相机
        • 创建自己的全景图
        • Hellow Three.js 之 创建各种几何形状
        • hello-light-pro
        • Hellow Three.js 之 光影之谜
        • Hellow Three.js 之 加载外部3D模型
        • Hellow Three.js 之 给创建的物体赋予材质
        • hello-obj-mtl
        • P5
        • Hellow Three.js 之 有趣的着色器
        • Hellow Three.js 之 运动物体的性能监测
        • Hellow Three.js 之 让物体动起来
        • Hello Three.js 之 Hello world!
        • what-webgl
        • glsl
          • GLSL 中文手册
          • OpenGL GLSL 语法和函数详解
          • The book of shaders 记录
          • 各种 Shaders 效果
      • demo
        • 有趣的 three.js Demo
          • Decorative WebGL Backgrounds
          • Infinite Tubes
          • The Aviator
        • P5.js Demo
        • Learning-Threejs
          • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • learning-threejs
        • Learning-Threejs
          • master
            • assets
              • models
                • ogre
                  • ogro
    • awesome-threejs
      • README-en
      • Contributor Covenant Code of Conduct
      • Contribution Guidelines
    • Awesome WebGL
      • CONTRIBUTING
      • Awesome WebGL
      • Contributor Covenant Code of Conduct
      • Libraries
        • CONTRIBUTING
      • Libraries
        • WebGL Libraries - Features
      • Libraries
        • WebGL Libraries - File Size
      • Awesome WebGL - Libaries/Frameworks
  • AI
    • ChatGPT 中文指南
    • 生成式 AI 項目、工具、藝術作品和模型的精選列表
    • 精選 GPT-4 指南
    • ChatGPT 工具收錄
      • Awesome ChatGPT
    • ChatGPT 中文調教指南
    • GPT 開放原始碼項目合集
    • ChatGPT 應用收藏
    • Awesome OpenAI - 超酷的 OpenAI 蒐藏
      • Awesome-openAI
    • Awesome GPT-3 應用集
      • Awesome GPT-3
    • ChatGPT 提示指令庫
      • Awesome ChatGPT Prompts
  • SaaS
    • awesome-saas-boilerplates
Powered by GitBook
On this page
  • 动画原理
  • 动画的实现方法
  • requestAnimationFrame方法
  • Tweenjs 实现
Export as PDF
  1. webgl
  2. Awesome-threejs
  3. docs

Hellow Three.js 之 让物体动起来

PreviousHellow Three.js 之 运动物体的性能监测NextHello Three.js 之 Hello world!

Last updated 2 years ago

动画原理

在这里,我们将动态画面简称为动画(animation)。正如动画片的原理一样,动画的本质是利用了人眼的视觉暂留特性,快速地变换画面,从而产生物体在运动的假象。而对于Three.js程序而言,动画的实现也是通过在每秒中多次重绘画面实现的。

为了衡量画面切换速度,引入了每秒帧数FPS(Frames Per Second)的概念,是指每秒画面重绘的次数。FPS越大,则动画效果越平滑,当FPS小于20时,一般就能明显感受到画面的卡滞现象。

那么FPS是不是越大越好呢?其实也未必。当FPS足够大(比如达到60),再增加帧数人眼也不会感受到明显的变化,反而相应地就要消耗更多资源(比如电影的胶片就需要更长了,或是电脑刷新画面需要消耗计算资源等等)。因此,选择一个适中的FPS即可。

NTSC标准的电视FPS是30,PAL标准的电视FPS是25,电影的FPS标准为24。而对于Three.js动画而言,一般FPS在30到60之间都是可取的。

动画的实现方法

window.requestAnimationFrame(callback);

requestAnimationFrame 方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,通常可能达到60FPS。

在之前demo中我们已经有过使用的代码,立方体的旋转等。

// 循环动画
function animate() {
  mesh.rotation.x += 0.01;
  mesh.rotation.y += 0.02;
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}

Tween.js是一个包含各种经典动画算法的JS资源,动画效果主要包括以下:

Quad, Cubic等等都是经典的动画运动算法名称,完整列表如下:

  • Linear:线性匀速运动效果;

  • Quadratic:二次方的缓动(t^2);

  • Cubic:三次方的缓动(t^3);

  • Quartic:四次方的缓动(t^4);

  • Quintic:五次方的缓动(t^5);

  • Sinusoidal:正弦曲线的缓动(sin(t));

  • Exponential:指数曲线的缓动(2^t);

  • Circular:圆形曲线的缓动(sqrt(1-t^2));

  • Elastic:指数衰减的正弦曲线缓动;

  • Back:超过范围的三次方缓动 ((s+1)*t^3 – s*t^2)

  • Bounce:指数衰减的反弹缓动

每个效果都分三个缓动方式,分别是:

  • easeIn:从0开始加速的缓动,也就是先慢后快;

  • easeOut:减速到0的缓动,也就是先快后慢;

  • easeInOut:前半段从0开始加速,后半段减速到0的缓动。

Tween.js 具体用法

tween.js 可以链式调用! 每个tween函数都会返回tween实例。

让某物体从A位置移动到B位置,

var position = { x: 100, y: 0 }
var tween = new TWEEN.Tween(position)
    .to({ x: 200 }, 1000)
    .start();

本文部分内容参照及引用:

方法

实现

这里还有一份

requestAnimationFrame
Tweenjs
缓动函数速查表
tween是什么?如何使用?
Three.js入门指南
详解requestAnimationFrame
Demo查看
tween
easings