个人主页：不叫猫先生
‍♂️ 作者简介：前端领域新星创作者、阿里云专家博主，专注于前端各领域技术，共同学习共同进步，一起加油呀！
系列专栏：vue3从入门到精通、TypeScript从入门到实践
资料领取：前端进阶资料以及文中源码可以找我免费领取
前端学习交流：博主建立了一个前端交流群，汇集了各路大神，一起交流学习，期待你的加入！(文末有我wx或者私信)

目录

  • 搭建three.js环境
    • 1.添加坐标轴辅助器
      • （1）添加坐标轴辅助器，设置坐标轴长度
      • （2）坐标轴添加场景
    • 2.resize页面尺寸
      • （1）设置监听
      • （2）更新摄像头
      • （3）更新渲染器
      • （4）更新像素比
    • 3.普通方式处理动画
    • 4.requestAnimationFrame处理几何体动画
    • 5.clock跟踪事件处理动画
      • （1）获取时钟运行总时长
      • （2）获取两帧之间的时间差

搭建three.js环境

本文内容承接基础（一）。

1.添加坐标轴辅助器

AxesHelper：用于简单模拟3个坐标轴的对象，红色代表 X 轴.，绿色代表 Y 轴.，蓝色代表 Z 轴。
用法：AxesHelper( size : Number )，参数如下

  • size ：表示代表轴的线段长度. 默认为 1，可选。

（1）添加坐标轴辅助器，设置坐标轴长度

//添加坐标轴辅助器(参数是坐标轴的长度)，设置坐标轴长度为5const axesHelper = new THREE.AxesHelper(5)

（2）坐标轴添加场景

sence.add(axesHelper)

2.resize页面尺寸

当页面尺寸大小变化，内容要自适应，使用resize来监听。监听时需要更新摄像头、摄像机的投影矩阵、渲染器、渲染器的像素比。

（1）设置监听

window.addEventListener('resize',()=>{ //代码执行})

（2）更新摄像头

camera.aspect = window.innerWidth / window.innerHeight;

（3）更新渲染器

renderder.resize(window.innerWidth, window.innerHeight)

（4）更新像素比

renderer.setPixelRatio(window.devicePixelRatio)

整体代码如下：

//监听画面变化，更新渲染画面window.addEventListener('resize', () => {console.log('画面变化了')//更新摄像头camera.aspect = window.innerWidth / window.innerHeight;//更新摄像机的投影矩阵，三维通过矩阵算法映射到屏幕的二维画面camera.updateProjectionMatrix()//更新渲染器renderer.setSize(window.innerWidth, window.innerHeight)//更新渲染器的像素比renderer.setPixelRatio(window.devicePixelRatio)})

3.普通方式处理动画

下面的代码每帧都会执行（正常情况下是60次/秒），主要是看电脑的屏幕刷新率。基本上来说，当应用程序运行时，如果你想要移动或者改变任何场景中的东西，都必须要经过这个动画循环。

  • 设置几何体的x轴位置，每次加0.01
  • 几何体在x轴位置超过5，归原位值（0）
  • 循环往复以上操作
function render(){cube.position.x +=0.01;if(cube.position.x>5)cube.position.x = 0;renderer.render(scene,camera)//渲染下一帧的就会调用requestAnimationFrame(render)}

几何体实际在运动时不是直接设置的固定值，可以通过下面的4中内容实现

4.requestAnimationFrame处理几何体动画

requestAnimationFrame函数，参数是一个函数，效果是在浏览器下一次刷新帧时调用这个函数。默认会传一个time，单位是ms。
浏览器一般60帧/s，大概16/ms。

  • time/1000变成秒
  • 为了让几何体往返运动，A到B，B直接到A，所以时间对坐标轴长度(5)求余
  • 设置几何体的位置
  • 如果几何体位置到5时，设置其位置为0
function render(time){ //默认会传一个`time`，单位是ms// 根据时间和速度计算移动距离// 1.计算时间let t = time / 1000 % 5;// 2. 移动距离cube.position.x = 1 * t;//速度按1，t是求余后的时间if(cube.position.x > 5) cube.position.x = 0;//使用渲染器，通过相机将场景渲染进来renderer.render(scene,camera)//渲染下一帧的就会调用requestAnimationFrame(render)}

5.clock跟踪事件处理动画

clock对象用于跟踪时间，具体属性如下：

  • autoStart : Boolean
    如果设置为 true，则在第一次调用getDelta()时开启时钟。默认值是 true

  • startTime : Float
    存储时钟最后一次调用 start方法的时间。默认值是 0

  • oldTime : Float
    存储时钟最后一次调用 start，getElapsedTime()或getDelta()方法的时间。默认值是 0

  • elapsedTime : Float
    保存时钟运行的总时长。默认值是 0

  • running : Boolean
    判断时钟是否在运行。默认值是 false

具体方法如下：

  • start () : undefined
    启动时钟。同时将 startTime 和 oldTime 设置为当前时间。 设置 elapsedTime 为 0，并且设置 running 为 true

  • stop () : undefined
    停止时钟。同时将 oldTime 设置为当前时间

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

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

// 设置时钟const clock = new THREE.Clock()

（1）获取时钟运行总时长

let totalTime = clock.getElapsedTime();

（2）获取两帧之间的时间差

 let deltaTime = clock.getDelta();//两帧的时间差，这一帧到下一帧的时间差

此时deltaTime为0 ，把clock.getElapsedTime()注释掉，则可以得到真正的间隔时间，大概是8ms，那么1000/8 大概是125帧/ms。因为oldtime 指的是存储时钟最后一次调用start ，getElapsedTime或者getDelta方法的时，而getDelta获取自oldTime 设置后到当前的秒数， 同时将 oldTime设置为当前时间，所以中间时间差为0。
所以用clock跟踪事件处理动画最终代码如下：

function render(time){// requestAnimationFrame 会默认传入进来time ，单位ms// 浏览器刷新率是60帧/s，16帧/ms//获取时钟运行的总时长// let totalTime = clock.getElapsedTime();// 获取间隔时间，即oldtime到当前时间的秒数，同时将oldtime设置为当前时间//oldtime ：存储时钟最后一次调用start ，getElapsedTime或者getDelta方法的时间// letdeltaTime = clock.getDelta();//两帧的时间差，这一帧到下一帧的时间差// console.log('间隔时间',deltaTime)//0 此时为0，把clock.getElapsedTime()注释掉，则可以得到真正的间隔时间，大概是8ms，那么1000/8 大概是125帧/s let totalTime = clock.getElapsedTime();let t = totalTime % 5;cube.position.x = t * 1;renderer.render(scene,camera)//渲染下一帧的就会调用requestAnimationFrame(render)}