three.js学习(三)-一一网

第三天:

关于让自己创建的3D模型动起来的一些基础知识，毕竟动起来才会显得逼格很高，动的更快，更炫酷岂不是求职利器

每执行一次渲染器对象的render()方法，浏览器就会通过CPU把相关的图形数据发送到GPU和显存，然后渲染出一帧图像，这就是说你按照一定的周期调用该方法就可以不停地生成新的图像覆盖原来的图像，这时要注意我为了产生立方体的旋转动画效果，每执行一次render()渲染方法，要把立方体绕一个坐标轴旋转一定的角度，立方体不停地旋转，相机不停地拍照自然就会形成动画的效果。

      function render() {
          renderer.render(scene,camera);//执行渲染操作
          spereMesh.rotateY(0.01);//立方体每次绕y轴旋转0.01弧度
          boxMesh.rotateY(0.01);//球体每次绕y轴旋转0.01弧度
          requestAnimationFrame(render);//请求再次执行渲染函数render
      }
      render();
复制代码

这里用到了一个用于动画的方法requestAnimationFrame()，该方法属于浏览器的window对象可以直接调用，参数是将要被调用函数的函数名，该方法调用函数不是立即调用而是向浏览器发起一个执行某函数的请求，什么事会执行由浏览器决定，一般默认保持60FPS的频率，就是肉眼所见不会卡顿的一个频率

实际动画过程中会出现不均匀旋转的情况，这时候就需要用到时间戳来控制(当然代码是我复制来的，实际中出现不均匀情况就来复制代码吧)：

let T0 = new Date();//上次时间
function render() {
        let T1 = new Date();//本次时间
        let t = T1-T0;//时间差
        T0 = T1;//把本次时间赋值给上次时间
        requestAnimationFrame(render);
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.001*t);//旋转角速度0.001弧度每毫秒
    }
render();
复制代码