Three.js中文网 Three.js中文网
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
首页
Three.js电子书
WebGL电子书 (opens new window)
免费视频 (opens new window)
3D案例 (opens new window)
系统课程 (opens new window)
案例课程 (opens new window)
threejs中文文档 (opens new window)
Web3D系统课程视频
  • 0.学前说明

  • 1.Three.js快速入门

    • 1. threejs文件包下载和目录简介
    • 2. 学习环境-编辑器和静态服务器
    • 3. 开发和学习环境,引入threejs
    • 4. 第一个3D案例—创建3D场景
    • 5. 第一个3D案例—透视投影相机
    • 6. 第一个3D案例—渲染器
    • 7. 三维坐标系-加强三维空间认识
    • 8. 光源对物体表面影响
    • 9. 相机控件OrbitControls
    • 10. 平行光与环境光
    • 11. 动画渲染循环
      • 12. Canvas画布布局和全屏
      • 13. stats查看threejs渲染帧率
      • 14. 阵列立方体和相机适配体验
      • 15. Threejs常见几何体简介
      • 16. 高光网格材质Phong
      • 17. WebGL渲染器设置(锯齿模糊)
      • 18. gui.js库(可视化改变三维场景)
      • 19. gui调试界面2-颜色命名等
      • 20. gui调试3-下拉菜单、单选框
      • 21. gui.js库(分组)
      • 22. examples和文档(辅助开发)
      • 23. threejs语法总结
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

    • 5.顶点UV坐标、纹理贴图

    • 6.加载外部三维模型(gltf)

    • 7.PBR材质与纹理贴图

    • 8.持续更新中

    • Three.js教程
    • 1.Three.js快速入门
    郭隆邦
    2023-01-20
    目录

    11. 动画渲染循环

    # 动画渲染循环

    threejs可以借助HTML5的API请求动画帧window.requestAnimationFrame实现动画渲染。

    # 请求动画帧window.requestAnimationFrame

    // requestAnimationFrame实现周期性循环执行
    // requestAnimationFrame默认每秒钟执行60次,但不一定能做到,要看代码的性能
    let i = 0;
    function render() {
        i+=1;
        console.log('执行次数'+i);
        requestAnimationFrame(render);//请求再次执行函数render
    }
    render();
    

    # threejs旋转动画

    动画说白了就是一张张照片,连起来依次展示,这样就形成一个动画效果,只要帧率高,人的眼睛就感觉不到卡顿,是连续的视频效果。

    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height);
    // renderer.render(scene, camera); //执行渲染操作
    document.body.appendChild(renderer.domElement);
    
    // 渲染函数
    function render() {
        renderer.render(scene, camera); //执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render,渲染下一帧
    }
    render();
    

    # 计算两帧渲染时间间隔和帧率

    // 渲染循环
    const clock = new THREE.Clock();
    function render() {
        const spt = clock.getDelta()*1000;//毫秒
        console.log('两帧渲染时间间隔(毫秒)',spt);
        console.log('帧率FPS',1000/spt);
        renderer.render(scene, camera); //执行渲染操作
        mesh.rotateY(0.01);//每次绕y轴旋转0.01弧度
        requestAnimationFrame(render);//请求再次执行渲染函数render,渲染下一帧
    }
    render();
    

    # 渲染循环和相机控件OrbitControls

    设置了渲染循环,相机控件OrbitControls就不用再通过事件change执行renderer.render(scene, camera);,毕竟渲染循环一直在执行renderer.render(scene, camera);。

    10. 平行光与环境光
    12. Canvas画布布局和全屏

    ← 10. 平行光与环境光 12. Canvas画布布局和全屏→

    Theme by Vdoing | Copyright © 2016-2023 郭隆邦 | 引用请注明网站链接
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式