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

    16. 高光网格材质Phong

    # 高光网格材质MeshPhongMaterial

    高光网格材质MeshPhongMaterial和基础网格材质MeshBasicMaterial、漫反射网格材质MeshLambertMaterial一样都是网格模型的Mesh的材质。

    高光网格材质MeshPhongMaterial和漫反射网格材质MeshLambertMaterial一样会受到光照的影响。

    # MeshPhongMaterial对光照反射特点

    MeshPhongMaterial和MeshLambertMaterial都会收到光照的影响区别在于,对光线反射方式有差异。

    MeshPhongMaterial可以实现MeshLambertMaterial不能实现的高光反射效果。对于高光效果,你可以想象一下,你在太阳下面观察一辆车,你会发现在特定角度和位置,你可以看到车表面某个局部区域非常高亮。

    # 镜面反射与漫反射

    MeshPhongMaterial可以提供一个镜面反射效果,可以类比你生活中拿一面镜子,放在太阳光下,调整角度,可以把太阳光反射到其它地方,如果反射光对着眼睛,也就是反射光线和视线平行的时候,会非常刺眼。

    MeshLambertMaterial对应的Mesh受到光线照射,没有镜面反射的效果,只是一个漫反射,也就是光线向四周反射。

    # 高光亮度属性.shininess

    通过MeshPhongMaterial的高光亮度.shininess属性,可以控制高光反射效果。

    // 模拟镜面反射,产生一个高光效果
    const material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        shininess: 20, //高光部分的亮度,默认30
    });
    

    # 高光颜色属性.specular

    可以给颜色属性.specular设置不同的值,比如0x444444、0xfffffff 查看渲染效果变化。

    // 模拟镜面反射,产生一个高光效果
    const material = new THREE.MeshPhongMaterial({
        color: 0xff0000,
        shininess: 20, //高光部分的亮度,默认30
        specular: 0x444444, //高光部分的颜色
    });
    
    15. Threejs常见几何体简介
    17. WebGL渲染器设置(锯齿模糊)

    ← 15. Threejs常见几何体简介 17. WebGL渲染器设置(锯齿模糊)→

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