旋转动画、requestAnimationFrame周期性渲染

上庸者-不服周

已于 2023-11-15 16:00:12 修改

阅读量161

点赞数

分类专栏： ThreeJS 3D 文章标签：前端 javascript ThreeJS

于 2023-11-07 12:19:07 首次发布

本文链接：https://blog.csdn.net/m0_37911706/article/details/134264366

版权

ThreeJS 3D 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文探讨了在WebGL技术中，特别是在ThreeJS框架下如何实现周期性渲染和均匀旋转。通过requestAnimationFrame实现每秒30~60次的渲染频率，确保视觉效果的流畅性。同时，通过精确计算时间间隔来保证立方体旋转的均匀性，避免因执行间隔不一致导致的运动不平滑问题。

摘要由CSDN通过智能技术生成

基于WebGL技术开发在线游戏、商品展示、室内漫游往往都会涉及到动画。

一、周期性渲染

为了实现周期性渲染可以通过浏览器全局对象window对象的一个方法setInterval(),可以通过window对象调用该方法window.setInterval()，也可以直接以函数形式调用setInterval()。setInterval()是一个周期性函数，就像一个定时器，每隔多少毫秒ms执行一次某个函数。

// 间隔20ms周期性调用函数fun
setInterval("render()",20)

为了实现立方体旋转动画效果，看以下代码

function render(){
     renderer.render(scene,camera);//执行渲染操作
     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
}
setInterval("render()",20);

上面代码定义了一个渲染函数render()，函数中定义了三个语句，通过setInterval("render()",20);可以实现m每间隔20毫秒调用一次函数render()，每次调用渲染函数的时候，执行renderer.render(scene,camera);渲染出一帧图像，执行mesh.rotateY(0.01);语句使立方体网格模型绕y轴旋转0.01弧度。

二、渲染频率

调用渲染方法.render()进行渲染的渲染频率不能太低，比如执行setInterval("render()",200);间隔200毫秒调用渲染函数渲染一次，相当于每秒渲染5次，会感觉到比较卡顿。渲染频率除了不能太低，也不能太高，太高的话计算机的硬件资源跟不上，函数setInterval()设定的渲染方式也未必能够正常实现。一般调用渲染方法.render()进行渲染的渲染频率控制在每秒30~60次，人的视觉效果都很正常，也可以兼顾渲染性能。

//设置调用render函数的周期为200ms，刷新频率相当于5你能明显的感受到卡顿
setInterval("render()",200);

三、函数`requestAnimationFrame()`

requestAnimationFrame()参数是将要被调用函数的函数名，requestAnimationFrame()调用一个函数不是立即调用而是向浏览器发起一个执行某函数的请求，什么时候会执行由浏览器决定，一般默认保持60FPS的频率，大约每16.7ms调用一次requestAnimationFrame()方法指定的函数，60FPS是理想的情况下，如果渲染的场景比较复杂或者说硬件性能有限可能会低于这个频率。

function render() {
        renderer.render(scene,camera);//执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render
    }
render();

四、均匀旋转

在实际执行程序的时候，可能requestAnimationFrame(render)请求的函数并不一定能按照理想的60FPS频率执行，两次执行渲染函数的时间间隔也不一定相同，如果执行旋转命令的rotateY的时间间隔不同，旋转运动就不均匀，为了解决这个问题需要记录两次执行绘制函数的时间间隔。

使用下面的渲染函数替换原来的渲染函数即可，rotateY()的参数是0.001*t，也意味着两次调用渲染函数执行渲染操作的间隔t毫秒时间内，立方体旋转了0.001*t弧度，很显然立方体的角速度是0.001弧度每毫秒(0.0001 rad/ms = 1 rad/s = 180度/s)。CPU和GPU执行一条指令时间是纳秒ns级，相比毫秒ms低了6个数量级，所以一般不用考虑渲染函数中几个计时语句占用的时间，除非你编写的是要精确到纳秒ns的级别的标准时钟程序。

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();

五、完整的示例

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个ThreeJS</title>
    <!--引入three.js三维引擎-->
    <!-- <script src="http://www.yanhuangxueyuan.com/versions/threejsR92/build/three.js"></script> -->
    <script src="../js/three.js"></script>
    <script src="../js/OrbitControls.js"></script>
</head>
<style>
    body {
        margin: 0;
        overflow: hidden
            /*隐藏body窗口区域滚动条*/
        ;
    }
</style>

<body>
    <script>
        //创建场景对象
        var scene = new THREE.Scene();
        //创建网格模型
        var geometry = new THREE.BoxGeometry(50, 100, 100);//创建一个立方体几何对象
        // var geometry = new THREE.SphereGeometry(60, 40, 40);
        var material = new THREE.MeshLambertMaterial({
            color: 0x0000ff
        }) //创建材质对象Material

        var mesh = new THREE.Mesh(geometry, material); //网格对象模型
        scene.add(mesh);//将网格模型添加到场景中

        //光源设置：点光源
        var point = new THREE.PointLight(0xffffff);
        point.position.set(400, 200, 300); //点光源位置
        scene.add(point); //点光源添加到场景中

        //环境光
        var ambient = new THREE.AmbientLight(0x444444);
        scene.add(ambient); //将环境光添加到场景中

        //相机设置
        var width = window.innerWidth; //创建宽度
        var height = window.innerHeight;//窗口高度
        var k = width / height;//窗口宽高比
        var s = 200; //三维场景显示范围控制系数，系数越大显示的范围越大

        var camera = new THREE.OrthographicCamera(-s * k, s * k, s, -s, 1, 1000); //创建相机对象
        camera.position.set(250, 300, 200); //设置相机位置
        camera.lookAt(scene.position); //设置相机方向(指向的场景对象)

        var renderer = new THREE.WebGLRenderer();//创建渲染器对象
        renderer.setSize(width, height); //设置渲染区域尺寸
        renderer.setClearColor(0xb9d3ff, 1);//设置背景颜色
        document.body.appendChild(renderer.domElement);//body元素中插入canvas对象
        // renderer.render(scene, camera);//执行渲染操作   指定场景、相机作为参数

        // function render(){
        //     renderer.render(scene,camera);//执行渲染操作
        //     mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        //     requestAnimationFrame(render);//请求再次执行渲染函数render
        // }
        // render();
        // 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();
        function render() {
            renderer.render(scene, camera);//执行渲染操作
            // mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
            requestAnimationFrame(render);//请求再次执行渲染函数render
        }
        render();
        var controls = new THREE.OrbitControls(camera, renderer.domElement);//创建控件对象
        // 已经通过requestAnimationFrame(render);周期性执行render函数，没必要再通过监听鼠标事件执行render函数
        // controls.addEventListener('change', render)
    </script>
</body>

</html>