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

    8. 光源对物体表面影响

    # 光源对物体表面影响

    实际生活中物体表面的明暗效果是会受到光照的影响,threejs中同样也要模拟光照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);
    

    # 光源位置

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

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

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

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

    directionalLight.position.set(100, 60, 50); 
    

    # 光源添加到场景

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

    scene.add(directionalLight); //点光源添加到场景中
    
    7. 三维坐标系-加强三维空间认识
    9. 相机控件OrbitControls

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

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