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

    8. 光源对物体表面影响

    # 光源对物体表面影响

    视频讲解 (opens new window)

    实际生活中物体表面的明暗效果是会受到光照的影响,比如晚上不开灯,你就看不到物体,灯光比较暗,物体也比较暗。在threejs中,咱们用网格模型Mesh模拟生活中物体,所以threejs中模拟光照Light对物体表面的影响,就是模拟光照Light对网格模型Mesh表面的影响。

    你可以打开课件中案例源码,对比有光照和无光照两种情况,网格模型Mesh表面的差异。

    # 受光照影响材质

    threejs提供的网格材质,有的受光照影响,有的不受光照影响。

    基础网格材质MeshBasicMaterial (opens new window)不会受到光照影响。

    //MeshBasicMaterial不受光照影响
    const material = new THREE.MeshBasicMaterial(); 
    

    漫反射网格材质MeshLambertMaterial (opens new window)会受到光照影响,该材质也可以称为Lambert网格材质,音译为兰伯特网格材质。

    一个立方体长方体使用MeshLambertMaterial材质,不同面和光线夹角不同,立方体不同面就会呈现出来不同的明暗效果。

    //MeshLambertMaterial受光照影响
    const material = new THREE.MeshLambertMaterial(); 
    

    # 光源简介

    Three.js提供了多种模拟生活中光源的API,文档搜索关键词light就可以看到。

    # 点光源

    点光源PointLight (opens new window)可以类比为一个发光点,就像生活中一个灯泡以灯泡为中心向四周发射光线。

    //点光源:两个参数分别表示光源颜色和光照强度
    // 参数1:0xffffff是纯白光,表示光源颜色
    // 参数2:1.0,表示光照强度,可以根据需要调整
    const pointLight = new THREE.PointLight(0xffffff, 1.0);
    

    除了通过THREE.PointLight的参数2设置光照强度,你可以可以直接访问光照强度属性.intensity设置。

    pointLight.intensity = 1.0;//光照强度
    

    # 光源衰减

    实际生活中点光源,比如比如一个灯泡,随机距离的改变,光线会衰减,越来越弱,光源衰减属性.decay默认值是2.0,如果你不希望衰减可以设置为0.0。

    pointLight.decay = 0.0;//设置光源不随距离衰减
    

    【扩展提醒】:如果使用默认衰减2.0,不同版本可能有差异,对于部分threejs新版本,有时候你可能看不到光源效果,这时候可以把光照强度加强试试看,如果你的版本不影响,就不用加强光照强度(根据版本情况灵活对应)。

    // 你可以对比不同光照强度明暗差异(传播同样距离)
    pointLight.intensity = 10000.0;//光照强度
    pointLight.intensity = 50000.0;//光照强度
    

    # 光源位置

    你把点光源想象为一个电灯泡,你在3D空间中,放的位置不同,模型的渲染效果就不一样。

    注意光源位置尺寸大小:如果你希望光源照在模型的外表面,那你就需要把光源放在模型的外面。

    //点光源位置
    pointLight.position.set(400, 0, 0);//点光源放在x轴上
    

    # 光源添加到场景

    光源和网格模型Mesh对应一样是三维场景的一部分,自然需要添加到三维场景中才能起作用。

    scene.add(pointLight); //点光源添加到场景中
    

    设置好上面所有代码,你现在可以执行代码,用浏览器查看渲染效果。

    # 改变光源位置,观察网格模型表面的明暗变化。

    pointLight.position.set(400, 200, 300); 
    
    7. 三维坐标系-加强三维空间认识
    9. 相机控件OrbitControls

    ← 7. 三维坐标系-加强三维空间认识 9. 相机控件OrbitControls→

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