three.js如何给模型锚点（【Three.js基础】坐标轴辅助器、requestAnimationFrame处理动画、Clock时钟、resize页面尺寸（二））
🐱 个人主页：不叫猫先生
🙋♂️ 作者简介：前端领域新星创作者 、阿里云专家博主 ，专注于前端各领域技术 ，共同学习共同进步 ，一起加油呀！
💫系列专栏：vue3从入门到精通 、TypeScript从入门到实践
📢 资料领取：前端进阶资料以及文中源码可以找我免费领取
🔥 前端学习交流：博主建立了一个前端交流群 ，汇集了各路大神 ，一起交流学习 ，期待你的加入！(文末有我wx或者私信)搭建three.js环境
本文内容承接基础（一） 。
1.添加坐标轴辅助器
AxesHelper：用于简单模拟3个坐标轴的对象 ，红色代表 X 轴. ，绿色代表 Y 轴. ，蓝色代表 Z 轴 。
用法：AxesHelper( size : Number ) ，参数如下 size ：表示代表轴的线段长度. 默认为 1 ，可选 。（1）添加坐标轴辅助器 ，设置坐标轴长度
//添加坐标轴辅助器(参数是坐标轴的长度) ，设置坐标轴长度为5 const 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()时开启时钟 。默认值是 truestartTime : Float
存储时钟最后一次调用 start方法的时间 。默认值是 0oldTime : Float
存储时钟最后一次调用 start ，getElapsedTime()或getDelta()方法的时间 。默认值是 0elapsedTime : Float
保存时钟运行的总时长 。默认值是 0running : Boolean
判断时钟是否在运行 。默认值是 false具体方法如下：
start () : undefined
启动时钟 。同时将 startTime 和 oldTime 设置为当前时间 。 设置 elapsedTime 为 0 ，并且设置 running 为 truestop () : 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方法 的时间 // let deltaTime = 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) }创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！