🐱 个人主页：不叫猫先生

🙋‍♂️ 作者简介：前端领域新星创作者    
    
    
、阿里云专家博主    
    
    
，专注于前端各领域技术     


     


     


 ，共同学习共同进步




 




 




 ，一起加油呀！

💫系列专栏：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()时开启时钟               。默认值是 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方法 的时间 // 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) }