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

    10. 平行光与环境光

    # 平行光与环境光

    本节课通过平行光DirectionalLight (opens new window)和环境光AmbientLight (opens new window)进一步了解光照对应模型Mesh表面的影响。

    # 点光源辅助观察PointLightHelper

    通过点光源辅助观察对象PointLightHelper (opens new window)可视化点光源。

    预览观察:可以借助相机控件OrbitControls旋转缩放三维场景便于预览点光源位置

    // 光源辅助观察
    const pointLightHelper = new THREE.PointLightHelper(pointLight, 10);
    scene.add(pointLightHelper);
    

    改变点光源位置,观察光照效果变化。

    directionalLight.position.set(100, 60, 50);
    // 改变点光源位置,使用OrbitControls辅助观察
    pointLight.position.set(-400, -200, -300);
    

    # 环境光设置

    环境光AmbientLight (opens new window)没有特定方向,只是整体改变场景的光照明暗。

    //环境光:没有特定方向,整体改变场景的光照明暗
    const ambient = new THREE.AmbientLight(0xffffff, 0.4);
    scene.add(ambient);
    

    # 平行光

    平行光DirectionalLight (opens new window)就是沿着特定方向发射。

    // 平行光
    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
    // 设置光源的方向:通过光源position属性和目标指向对象的position属性计算
    directionalLight.position.set(80, 100, 50);
    // 方向光指向对象网格模型mesh,可以不设置,默认的位置是0,0,0
    directionalLight.target = mesh;
    scene.add(directionalLight);
    

    # 平行光辅助观察DirectionalLightHelper

    通过点光源辅助观察对象DirectionalLightHelper (opens new window)可视化点光源。

    // DirectionalLightHelper:可视化平行光
    const dirLightHelper = new THREE.DirectionalLightHelper(directionalLight, 5,0xff0000);
    scene.add(dirLightHelper);
    

    # 平行光与Mesh表面光线反射规律

    平行光照射到网格模型Mesh表面,光线和模型表面构成一个入射角度,入射角度不同,对光照的反射能力不同。

    光线照射到漫反射网格材质MeshLambertMaterial (opens new window)对应Mesh表面,Mesh表面对光线反射程度与入射角大小有关。

    // 对比不同入射角,mesh表面对光照的反射效果
    directionalLight.position.set(100, 0, 0);
    directionalLight.position.set(0, 100, 0);
    directionalLight.position.set(100, 100, 100);
    directionalLight.position.set(100, 60, 50);
    //directionalLight.target默认指向坐标原点
    
    9. 相机控件OrbitControls
    11. 动画渲染循环

    ← 9. 相机控件OrbitControls 11. 动画渲染循环→

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