Three.js —— Tween.js 使用文档

大家好，欢迎来到IT知识分享网。

Tween.js官网文档：tween.js user guide | tween.js (tweenjs.github.io)

Tween.js 基本使用

1. 引入Tween.js

import TWEEN from "./tween.js-master/dist/tween.esm.js" 

2. 定义基本Tween动画

目的：将model模型的位置，从原来的(0,0,0)位置，经过1s移动到(20,50,30)的位置。

模式一：

// 1 设置动画 const action=new TWEEN.Tween({ 
   x:0,y:0,z:0}) // 初始值 .to({ 
   x:20,y:50,z:30},1000) // 目标值，毫秒数 // 在动画执行期，不断被调用。其中obj为"to"里面的内容 .onUpdate(function(obj){ 
    model.position.x=obj.x; // x:20 model.position.y=obj.y; model.position.z=obj.z; }) .start() // 2 启动动画 function loop(){ 
    // 更新动画 TWEEN.update() requestAnimationFrame(render); } 

模式二：

const action=new TWEEN.Tween(model.position) // 初始值：模型的初始位置 .to({ 
   x:20,y:50,z:30},1000) // 目标值，毫秒数 .start() 

3 字段说明

const action=new TWEEN.Tween(需添加动画的属性)

警告：调用 actA.chain（actB） 实际上修改了actA，所以chain 的返回值只是actA，不是一个新的tween。

警告：yoyo(true) 只有在repeat(Infinity||200)单独使用时有效

4 easing 缓动动画

地址：/tween.js-master/examples/03_graphs.html 官方网址 · GitHub

// 动画开始缓动-类比加速器 action.easing(TWEEN.Easing.Sinusoidal.In); // 动画结束时缓动-类比减速刹车 action.easing(TWEEN.Easing.Sinusoidal.Out); // 同时设置In和Out action.easing(TWEEN.Easing.Sinusoidal.InOut); 

5 例：相机旋转+模型淡入淡出动画

目的：

1. 当镜头移动时，镜头始终对准model模型，模型呈现淡入的效果
2. 当移动返回时，镜头始终对准model模型，模型呈现淡出的效果

镜头移动动画：

const cameraAct=new TWEEN.Tween(camera.position) .to({ 
   x:-100},3000) // 相机移动时，焦点始终为模型的位置 .onUpdate(function(){ 
    camera.lookAt(model.position) }) .start() 

模型淡入动画：

const meshActIn = new TWEEN.Tween({ 
    opacity: 0.0 }) .to({ 
    opacity: 1.0 }, 3000) // 动画开始：开启材质的透明度 .onStart(function () { 
    mat.transparent = true; }) .onUpdate(function (obj) { 
    mat.opacity = obj.opacity; }) // 动画结束：关闭材质的透明度 .onComplete(function () { 
    mat.transparent = false; }) .start(); 

模型淡出动画：

const meshActOut =new TWEEN.Tween({ 
   opacity:mat.opacity}) .to({ 
   opacity:0.0}, 3000) // 动画开始：允许透明opacity属性才能生效 .onStart(function(){ 
    material.transparent = true; }) .onUpdate(function(obj){ 
    material.opacity = obj.opacity }) .start(); 

备注

1. 材质需开启transparent，才能设置透明程度opacity

   const mat = new THREE.MeshLambertMaterial({ 
         color: 0x00ffff, transparent: true, opacity: 0.8, }); 

2. 调用 actA.chain（actB） 实际上修改了actA，所以chain 的返回值只是actA，不是一个新的tween。
3. yoyo(true) 只有在repeat(Infinity||200)单独使用时有效