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快速入门

  • 2.几何体BufferGeometry

  • 3.模型对象、材质

  • 4.层级模型

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

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

  • 7.PBR材质与纹理贴图

    • 1. PBR材质简介
    • 2. PBR材质金属度和粗糙度
    • 3. 环境贴图.envMap(金属效果)
    • 4. 环境贴图2
    • 5. MeshPhysicalMaterial清漆层
    • 6. 物理材质透光率.transmission
    • 7. 三维软件导出PBR材质属性
    • 8.渲染器和前端UI界面

    • 9.生成曲线、几何体

    • 10.相机基础

    • 11.光源和阴影

    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 7.PBR材质与纹理贴图
    郭隆邦
    2023-01-29
    目录

    7. 三维软件导出PBR材质属性

    # 三维建模软件导出PBR材质属性

    实际开发的时候PBR材质的属性,很多时候是可以在三维建模软件中设置的,然后通过gltf导出即可,这样就不用在threejs代码设置。

    通常美术对三维场景渲染的了解也比大部分前端程序员多的多,只要美术在三维建模软件设置好并导出包含pbr材质属性的gltf即可。

    # threejs与建模软件对接的问题

    1. gltf能否存储3D建模软件的某个材质属性:有些三维软件特有的材质属性,不一定能通过gltf导出,也谈不上threejs解析
    2. 三维建模能否导出PBR材质:能导出的话,能导出哪些属性,不能导出哪些属性

    如果你的三维建模不能导出pbr材质,或者部分pbr材质属性无法导出,那你通常需要用代码方式添加材质,这样就麻烦些。

    # Blender导出PBR材质演示

    首先Blender最新版导出gltf模型时候,是可以把PBR材质的很多属性导出的,比如金属度metalness、粗糙度roughness、清漆.clearcoat、透光率(透射度).transmission等等。课件源码中提供了blender导出的gltf模型你可以浏览器控制台打印测试,这些PBR材质属性能否解析渲染。

    # Bledner中设置PBR材质

    你可以在Bledner中设置车外壳、车玻璃的材质属性

    1. 车外壳:清漆、清漆粗糙度
    2. 车玻璃:透光率(透射度)

    # threejs解析gltf材质规则

    大家都知道,MeshPhysicalMaterial是MeshStandardMaterial的子类,具有更多的PBR材质属性和功能。

    所以,threejs解析gltf模型,会用两种材质PBR材质去解析,一个是标准网格材质MeshStandardMaterial,一个是物理网格材质MeshPhysicalMaterial,如果能用MeshStandardMaterial表示就用,不能就换MeshPhysicalMaterial。

    具体说就是,threejs解析gltf模型材质的时候,一般默认使用标准网格材质MeshStandardMaterial,如果gltf有的材质具有.clearcoat、.transmission等属性,标准网格材质MeshStandardMaterial无法表达的时候,会用物理网格材质MeshPhysicalMaterial来解析gltf材质。

    查看threejs解析的PBR材质

    gltf.scene.traverse(function(obj) {
        if (obj.isMesh) {
            console.log('obj.material',obj.material);
        }
    });
    console.log('外壳',mesh1.material);
    console.log('玻璃',mesh2.material);
    

    # 设置环境贴图

    这时候清漆、清漆粗糙度、透光率(透射度)等属性Bledner都已经设置好了,threejs可以自动解析渲染,不用在代码中麻烦设置了,只要配上环境贴图即可。

    const mesh1 = gltf.scene.getObjectByName('外壳01');
    mesh1.material.envMap = textureCube; //环境贴图
    mesh1.material.envMapIntensity = 1.0; ////环境贴图对Mesh表面影响程度
    const mesh2 = gltf.scene.getObjectByName('玻璃01');
    mesh2.material.envMap = textureCube; //环境贴图
    mesh2.material.envMapIntensity = 1.0; ////环境贴图对Mesh表面影响程度
    
    6. 物理材质透光率.transmission
    1. three.js Canvas画布布局

    ← 6. 物理材质透光率.transmission 1. three.js Canvas画布布局→

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