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.Vue+Three.js基础

  • 2.场景搭建Three+Blender

  • 3.渲染效果提升(材质光照)

    • 1. 光照、环境贴图
    • 2. 环境贴图hdr格式
    • 3. 天空盒全景图作为背景
    • 4. threejs深度冲突
    • 5. 标准网格材质(金属)
    • 6. 物理网格材质(玻璃)
      • 7. dat.gui辅助调试物理材质
      • 8. dat.gui辅助调试光照参数
      • 9. dat.gui调节平行光照射角度
    • 4.渲染性能、模型压缩

    • 5.封装、进度条、切视角

    • js 3D可视化
    • 3.渲染效果提升(材质光照)
    郭隆邦
    2024-03-13
    目录

    6. 物理网格材质(玻璃)

    # 物理网格材质(玻璃)

    上节课给大家介绍了标准网格材质MeshStandardMaterial,下面给大家介绍物理网格材质MeshPhysicalMaterial。

    MeshPhysicalMaterial是MeshStandardMaterial的子类,MeshPhysicalMaterial会继承父类MeshStandardMaterial的属性,比如金属度、粗糙度。

    MeshPhysicalMaterial有用更多的材质属性,比如透射度(透光率).transmission、折射率.ior

    # 测试

    Blender创建一个球体网格模型,然后通过threejs代码创建一个物理材质对象,赋值给这个球体网格模型。

    const spheremesh = gltf.scene.getObjectByName('球体')
    spheremesh.material = new THREE.MeshPhysicalMaterial({
        metalness: 0.0,//玻璃非金属  金属度设置0
        roughness: 0.0,//玻璃表面光滑  
        envMapIntensity:1.0,
        transmission:1.0,//透射度(透光率)
        ior:1.5,//折射率
    })
    

    # 透光率(透射度).transmission

    为了更好的模拟玻璃、半透明塑料一类的视觉效果,可以使用物理透明度.transmission属性代替Mesh普通透明度属性.opacity。

    使用.transmission属性设置Mesh透明度,即便完全透射的情况下仍可保持高反射率。

    物理光学透明度.transmission的值范围是从0.0到1.0。默认值为0.0。

    const mesh = gltf.scene.getObjectByName('球体')
    mesh.material = new THREE.MeshPhysicalMaterial({
        transmission: 1.0, //玻璃材质透光率,transmission替代opacity 
    })
    

    # 折射率.ior

    非金属材料的折射率从1.0到2.333。默认值为1.5。

    不同材质的折射率,你可以百度搜索。

    new THREE.MeshPhysicalMaterial({
        ior:1.5,//折射率
    })
    

    # 玻璃透光率.transmission设置

    先设置玻璃金属度和粗糙度

    const mesh = gltf.scene.getObjectByName('玻璃01')
    mesh.material = new THREE.MeshPhysicalMaterial({
        metalness: 0.0,//玻璃非金属 
        roughness: 0.0,//玻璃表面光滑
        envMap:textureCube,//环境贴图
        envMapIntensity: 1.0, //环境贴图对Mesh表面影响程度
    })
    

    设置透光率.transmission和折射率.ior。

    new THREE.MeshPhysicalMaterial({
        transmission: 1.0, //玻璃材质透光率,transmission替代opacity 
        ior:1.5,//折射率
    })
    

    # Blender设置透射度导出gltf

    上节课,小球网格没有设置透视度.transmission,只是设置了金属度、粗糙度,threejs加载gltf默认小球网格的材质是MeshStandardMaterial。

    通过Blender设置透射度.transmission之后,threejs解析gltf模型默认材质MeshPhysicalMaterial。

    const spheremesh = gltf.scene.getObjectByName('球体');
    console.log('gltf默认材质',spheremesh.material);
    

    这说明threejs会根据gltf材质属性情况,来决定用什么材质渲染,如果用标准网格材质MeshStandardMaterial能渲染,就不用MeshPhysicalMaterial,有些属性比如透射度transmission,MeshStandardMaterial没有,就需要MeshPhysicalMaterial渲染。

    # 总结

    并不是所有的3D建模软件都支持设置物理材质,即便支持物理材质,也不意味着你导出的gltf模型,能包含该软件,设置的物理材质属性,比如金属度、粗糙度、透射度...

    除了物理材质,也有很多建模软件,自带的材质效果,是无法自动导出到threejs的。

    建议:能否导出美术建模软件设置的材质效果,一切以实际测试为准。不同软件,同一个软件不同版本,都会有差异。

    5. 标准网格材质(金属)
    7. dat.gui辅助调试物理材质

    ← 5. 标准网格材质(金属) 7. dat.gui辅助调试物理材质→

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