（五）Threejs基础-Clock时间跟踪动画与Gsap动画库使用

1、Clock时间跟踪

1.1 对象构造

//创建时间跟踪对象
const clock=new THREE.Clock();

1.2 常用属性

 //当clock start, .getElapsedTime() or .getDelta() 更新oldTime,注意查看oldTime值
 var oldTime=clock.oldTime;
 //时钟总的运行时间
 var elapsedTime= clock.elapsedTime 

1.3 常用方法

//获取上次 .oldTime更新至clock.getDelta()被调用后的时间，并更新 .oldTime
var delta=clock.getDelta();
//获取时钟启动至当前的时间，并更新 .oldTime
var elapsedTime= clock.getElapsedTime ()

1.4 完整过程

//导入threejs框架
import * as THREE from "three"
//导入轨道控制器 允许相机围绕着目标对象旋转
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
//1创建场景 threejs对象及对象位置的渲染是在场景中完成的，场景中可渲染配置对象、灯光、相机
const scene=new THREE.Scene();
//2创建相机 perspective projection 模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。详见第3部分相机类型
const camera=new >THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//3设置相机位置 详见第3部分其它相机位置说明
camera.position.set(0,0,10)
//4添加相机到场景
scene.add(camera);
//5场景中添加物体
const geometry= new THREE.BoxGeometry( 1, 1, 1);
const material= new THREE.MeshBasicMaterial({color: 0xffff00});
const cube=new THREE.Mesh(geometry,material);
scene.add(cube);
//6初始化渲染器
const renderer=new THREE.WebGLRenderer();
//7设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//8将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
//9创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);

//10创建辅助坐标轴
const axesHelper=new THREE.AxesHelper(5);
scene.add(axesHelper);
//11缩放
cube.scale.x=2;
//12 创建clock
const clock=new THREE.Clock();
//13动画实现
animate();
var flag=true;

function animate(){
   //14旋转
  cube.rotation.x+=0.01;
   //15 获取每帧调用时间，1000/clock.getDelta()=渲染帧数
  var delta=clock.getDelta();
   t+=delta;
   //时间X速度=路程  根据耗费的时间移动相应的距离
   cube.position.x=t*1%5;
   requestAnimationFrame(animate);
   //使用渲染器，通过相机将场景渲染进来
   renderer.render(scene,camera);
}

2、Gsap动画控制

2.1 安装依赖

gsap文档: link

2.2 完整过程

//导入threejs框架
import * as THREE from "three"
//导入轨道控制器 允许相机围绕着目标对象旋转
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
//1创建场景 threejs对象及对象位置的渲染是在场景中完成的，场景中可渲染配置对象、灯光、相机
const scene=new THREE.Scene();
//2创建相机 perspective projection 模拟人眼所看到的景象，它是3D场景的渲染中使用得最普遍的投影模式。详见第3部分相机类型
const camera=new >THREE.PerspectiveCamera(75,window.innerWidth/window.innerHeight,0.1,1000);
//3设置相机位置 详见第3部分其它相机位置说明
camera.position.set(0,0,10)
//4添加相机到场景
scene.add(camera);
//5场景中添加物体
const geometry= new THREE.BoxGeometry( 1, 1, 1);
const material= new THREE.MeshBasicMaterial({color: 0xffff00});
const cube=new THREE.Mesh(geometry,material);
scene.add(cube);
//6初始化渲染器
const renderer=new THREE.WebGLRenderer();
//7设置渲染的尺寸大小
renderer.setSize(window.innerWidth,window.innerHeight);
//8将webgl渲染的canvas内容添加到body
document.body.appendChild(renderer.domElement);
//9创建轨道控制器
const controls=new OrbitControls(camera,renderer.domElement);

//10创建辅助坐标轴
const axesHelper=new THREE.AxesHelper(5);
scene.add(axesHelper);
//11缩放
cube.scale.x=2;

//12动画实现

//13 gsap动画js框架使用
gsap.to(cube.position,{x:5,duration:10});
animate();
function animate(){
   requestAnimationFrame(animate);
   //使用渲染器，通过相机将场景渲染进来
   renderer.render(scene,camera);
}