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系统课程视频
  • 展厅场景搭建

    • 1. 学前说明、展厅效果
    • 2. Blender查看展厅模型
    • 3. vue3+Vite +threejs
    • 4. 加载展厅gltf模型
    • 5. 发光属性emissive
    • 6. Blender设置发光属性
    • 7. 发光贴图.emissiveMap
    • 8. Blender自发光贴图
    • 9. Blender烘焙光照到贴图
      • 10. Blender烘焙全景图
      • 11. Blender设置环境贴图、涂层
      • 12. gui调试环境贴图
      • 13 .gui调节材质涂层
      • 14. threejs渲染曝光功能
      • 15. 展厅背景音乐
      • 16. 练习题-按钮开关背景音乐
      • 视频作为纹理贴图
      • 18. 色差问题—视频纹理颜色空间
      • 19. 展厅屏幕播放宣传视频
    • 展厅漫游

    • Vue+Threejs展厅
    • 展厅场景搭建
    郭隆邦
    2025-03-24
    目录

    9. Blender烘焙光照到贴图

    # Blender烘焙光照到贴图

    展厅渲染的时候,为了更方便设置3D场景光影效果,可以不在threejs代码里面里面设置光源。

    可以在Blender中设置点光源、聚光源等,不过设置好之后,不是直接导出把光源通过gltf导出到threejs,而是通过Blender烘焙功能,把光照信息烘焙到贴图上。

    # Blender烘焙全流程演示

    整个展厅制作过程比较复杂,咱们选择一个简单场景,从头给大家演示一下Blender烘焙贴图的过程。

    烘焙光源

    整个过程也不要求掌握,主要是了解,实际开发过程,需要公司美术给你提供什么样的模型资源。

    具体点说就是Blender与threejs的对接问题。

    # Blender搭建基本场景

    创建一个矩形平面作为地面,然后创建一个长方体柱子,随便设置一个颜色或颜色贴图map都行。

    烘焙光源

    # 排除场景默认光照

    排除场景默认光照,只查看手动创建光源对场景影响。

    着色模式切换到渲染

    着色模式切换到渲染

    世界环境把默认光照设置到0

    世界环境光照调整到0

    删除Blender默认光源Light(右侧目录可以看到)

    # Blender创建一个点光源

    创建一个点光源,一会要把点光源信息烘焙到贴图上,可以根据需要调整光源位置,光照强度可以根据需要调节。

    # 烘焙准备-图像纹理

    地面平面模型对应材质,创建一个图像纹理节点。

    点新建,给图像纹理节点命名。

    图像纹理节点

    像素大小可以根据需要设置

    烘焙地面纹理

    # 烘焙贴图

    把默认渲染器设置为Cycles

    渲染器设置为Cycles

    采样值可以根据需要设置,设置小一点烘焙快,不过烘焙质量会低一点,更多内容可以学习Blender,这里就不做过多说明。

    翻到下面找到烘焙功能按钮,点击开始烘焙即可。(注意:烘焙前选中对应的模型和材质图像纹理节点)

    烘焙

    验证:点击UV编辑预览模式,可以看下是否烘焙成功。

    # 测试烘焙效果

    先隐藏点光源,方便下面下面测试。

    隐藏点光源

    烘焙的贴图作为发光贴图,然后材质颜色改为黑色(如果不希望光照影响物体表面),这就可以让发光贴图的颜色来表示模型渲染效果,直接导出到threejs即可。

    烘焙贴图作为发光贴图

    # 烘焙长方体柱子模型贴图

    长方体柱子模型和地面模型同样烘焙流程。

    最后搞定所有模型后,可以保存模型文件,导出gltf模型,在threejs代码中测试。

    # 查看课件展厅模型

    你查看课件展厅中部分模型,和咱们上面的简单模型类似设置,美术把一些光照信息,烘焙到模型贴图上,然后把贴图作为发光贴图的属性。

    # 补充——单独导出烘焙的贴图

    如果你想单独导出烘焙好的贴图,也很简单。在UV编辑模式下,有一个图像选项,可以把烘焙好的图像保存为一个png、jpg等格式文件。

    单独导出烘焙的贴图

    备注:有时候为了避免烘焙的贴图在建模过程中意外丢失,最好保存到本地一张,然后在添加到模型的材质上面(上面视频为了方便,没有保存导出烘焙的图像)。

    8. Blender自发光贴图
    10. Blender烘焙全景图

    ← 8. Blender自发光贴图 10. Blender烘焙全景图→

    Theme by Vdoing | Copyright © 2016-2025 豫ICP备16004767号-2
    • 跟随系统
    • 浅色模式
    • 深色模式
    • 阅读模式