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快速入门

  • 2.几何体BufferGeometry

  • 3.模型对象、材质

  • 4.层级模型

  • 5.顶点UV坐标、纹理贴图

  • 6.加载外部三维模型(gltf)

  • 7.PBR材质与纹理贴图

  • 8.渲染器和前端UI界面

  • 9.生成曲线、几何体

  • 10.相机基础

  • 11.光源和阴影

    • 1. 聚光源SpotLight
      • 2. 平行光阴影计算
      • 3. 阴影范围.shadow.camera
      • 4. 阴影.mapSize和.radius
      • 5. 工厂光源(环境贴图和环境光)
      • 6. 工厂光源(平行光模拟太阳光)
      • 7. 工厂(模拟太阳光阴影)
      • 8. gui辅助调节光源阴影
    • 12.精灵模型Sprite

    • 13.后处理EffectComposer

    • 14.射线拾取模型

    • 15.场景标注标签信息

    • 16.关键帧动画

    • 17.动画库tween.js

    • Three.js教程
    • 11.光源和阴影
    郭隆邦
    2023-02-11
    目录

    1. 聚光源SpotLight

    # 聚光源SpotLight

    入门部分给大家介绍过平行光DirectionalLight、点光源PointLight、环境光AmbientLight,下面给大家介绍一个新的光源对象,也就是聚光源SpotLight。

    • 1.8. 光源对物体表面影响 (opens new window)
    • 1.10. 平行光与环境光 (opens new window)

    # 创建聚光源SpotLight

    聚光源可以认为是一个沿着特定方会逐渐发散的光源,照射范围在三维空间中构成一个圆锥体。

    // 聚光源
    // 0xffffff:光源颜色
    // 1.0:光照强度intensity
    const spotLight = new THREE.SpotLight(0xffffff,1.0);
    scene.add(spotLight);//光源添加到场景中
    

    光照强度也可以不通过THREE.SpotLight参数2设置,直接通过光照强度属性.intensity设置。

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

    # 聚光源发散角度.angle

    通过属性.angle可以设置聚光源发散角度,和目标.target两个属性来实现。

    // 设置聚光光源发散角度
    spotLight.angle = Math.PI / 6;//光锥角度的二分之一
    

    # 光源衰减

    生活中聚光源,比如台灯、手电筒之类,随机距离的改变,光线会衰减,越来越弱,.decay默认值是2.0,如果你不希望衰减可以设置为0.0。

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

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

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

    # 聚光源位置.position

    聚光源SpotLight的父类是Light,Light的父类是Object3D,聚光源SpotLight会继承父类Object3D的位置属性.position。

    // 设置聚光光源位置
    spotLight.position.set(0, 50, 0);
    

    # 聚光源目标对象.target

    聚光源目标对象.target和光源的位置.position共同确定聚光源照射方向。

    浏览器控制台打印聚光源目标对象.target属性,可以看到属性值是一个模型对象Object3D。

    console.log('聚光源指向目标',spotLight.target);
    

    聚光源目标对象属性的位置通过属性值Object3D的.position属性设置。

    // spotLight.target是一个模型对象Object3D,默认在坐标原点
    spotLight.target.position.set(50,0,0);
    //spotLight.target添加到场景中.target.position才会起作用
    scene.add(spotLight.target);
    

    # 聚光源辅助对象SpotLightHelper

    // 聚光源辅助对象,可视化聚光源
    const spotLightHelper = new THREE.SpotLightHelper(spotLight,0xffffff)
    scene.add(spotLightHelper);
    
    10. 相机控件MapControls
    2. 平行光阴影计算

    ← 10. 相机控件MapControls 2. 平行光阴影计算→

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