通过clock跟踪时间处理对象开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的31天，点击查看活动详

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的31天，点击查看活动详情

Clock

该对象用于跟踪时间。如果performance.now可用，则 Clock 对象通过该方法实现，否则回落到使用略欠精准的Date.now来实现。

Clock实例有四个方法

start

启动时钟。同时将 startTime 和 oldTime 设置为当前时间。设置 elapsedTime 为 0，并且设置 running 为 true.

stop

停止时钟。同时将 oldTime 设置为当前时间。

.getElapsedTime () : Float

获取自时钟启动后的秒数，同时将 .oldTime 设置为当前时间。
如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。

.getDelta () : Float

获取自 .oldTime 设置后到当前的秒数。同时将 .oldTime 设置为当前时间。
如果 .autoStart 设置为 true 且时钟并未运行，则该方法同时启动时钟。

定义太过于抽象，clock.getElapsedTime获取启动的时间秒数，然后用这时间对9取余数，就是9秒运动一次，余数是几，物体移动x轴的位置就是你，匀速线性运动

function render() {
    let time=clock.getElapsedTime();
    // let deltaTime=clock.getDelta();
    let t = time % 9;
    cube.position.x =t;
   
    renderer.render(scene, camera);
    requestAnimationFrame(render)
}
render()

使用gsap库实现动画

gsap GSAP 是一个强大的 JavaScript 工具集，可以将开发人员变成动画超级英雄。构建适用于所有主要浏览器的高性能动画。动画化 CSS、SVG、画布、React、Vue、WebGL、颜色、字符串、运动路径、通用对象……任何 JavaScript 可以触及的东西！GSAP 的ScrollTrigger插件可让您使用最少的代码创建令人惊叹的基于滚动的动画。gsap.matchMedia()使构建响应式、可访问性友好的动画变得轻而易举。

使用gsap让cube.postion的x从0到5，用时5秒，动画类型为elastic.out(1,0.3),效果很好。

// 设置动画
gsap.to(cube.position, {
    x:5,
    duration:5,
    ease:"elastic.out(1, 0.3)"
})
gsap.to(cube.rotation, {
    x: Math.PI * 2,
    duration: 5
})

function render() {
    // let time = clock.getElapsedTime();
    // let deltaTime=clock.getDelta();
    // let t = time % 9;
    // cube.position.x = t;

    renderer.render(scene, camera);
    requestAnimationFrame(render)
}
render()

greensock.com/docs/v3/Eas… 官网地址又很多动画类型可以选择