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
    目录

    12. Canvas画布布局和全屏

    # threejs画布尺寸和布局

    threejs渲染输出的结果就是一个Cavnas画布,canvas画布也是HTML的元素之一,这意味着three.js渲染结果的布局和普通web前端习惯是一样的。

    通过renderer.domElement属性可以访问threejs的渲染结果,也就是HTML的元素canvas画布。

    # 非全屏局部布局

    你可以把threejs的渲染结果renderer.domElement,插入到web页面上任何一个元素中,只要符合你项目的布局规则即可。

    <div id="webgl" style="margin-top: 100px;margin-left: 200px;"></div>
    <script type="module">
    // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
    const width = 800; //宽度
    const height = 500; //高度
    
    const camera = new THREE.PerspectiveCamera(30, width / height, 1, 3000);
    
    /**
     * 创建渲染器对象
     */
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(width, height); //设置three.js渲染区域的尺寸(像素px)
    renderer.render(scene, camera); //执行渲染操作
    //three.js执行渲染命令会输出一个canvas画布,也就是一个HTML元素,你可以插入到web页面中
    // document.body.appendChild(renderer.domElement);
    document.getElementById('wegbl').appendChild(renderer.domElement);
    

    # 全屏渲染

    // width和height用来设置Three.js输出的Canvas画布尺寸(像素px)
    const width = window.innerWidth; //窗口文档显示区的宽度作为画布宽度
    const height = window.innerHeight; //窗口文档显示区的高度作为画布高度
    const renderer = new THREE.WebGLRenderer();
    document.body.appendChild(renderer.domElement);
    

    全屏布局注意CSS的设置。

    <style>
        body{
            overflow: hidden;
            margin: 0px;
        }
    </style>
    

    # canvas画布宽高度动态变化

    canvas画布宽高度动态变化,需要更新相机和渲染的参数,否则无法正常渲染。

    // onresize 事件会在窗口被调整大小时发生
    window.onresize = function () {
        // 重置渲染器输出画布canvas尺寸
        renderer.setSize(window.innerWidth, window.innerHeight);
        // 全屏情况下:设置观察范围长宽比aspect为窗口宽高比
        camera.aspect = window.innerWidth / window.innerHeight;
        // 渲染器执行render方法的时候会读取相机对象的投影矩阵属性projectionMatrix
        // 但是不会每渲染一帧,就通过相机的属性计算投影矩阵(节约计算资源)
        // 如果相机的一些属性发生了变化,需要执行updateProjectionMatrix ()方法更新相机的投影矩阵
        camera.updateProjectionMatrix();
    };
    
    11. 动画渲染循环
    13. stats查看threejs渲染帧率

    ← 11. 动画渲染循环 13. stats查看threejs渲染帧率→

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