Three.js中文网 Three.js中文网
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (opens new window)
首页
免费视频
系统课 (opens new window)
  • Three.js基础课程
  • Vue3+Threejs 3D可视化
  • Threejs进阶课程
  • 展厅3D预览漫游
  • Threejs Shader
  • Blender建模基础
  • Three.js基础课程(旧版本) (opens new window)
  • 文章
WebGPU教程
  • WebGL教程
  • WebGL教程(旧版本) (opens new window)
3D案例
  • 本站部署(打开快) (opens new window)
  • 原英文官网文档 (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语法总结
      • 【选修】Vue+Threejs开发环境
      • 【选修】React+Three.js开发环境
    • 2.几何体BufferGeometry

    • 3.模型对象、材质

    • 4.层级模型

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

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

    • 7.PBR材质与纹理贴图

    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

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

    12. Canvas画布布局和全屏

    # threejs画布尺寸和布局

    视频讲解 (opens new window)

    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-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式