threejs 创建光照，光晕以及阴影

最新推荐文章于 2025-10-27 15:58:55 发布

原创

最新推荐文章于 2025-10-27 15:58:55 发布 · 2.4k 阅读

标签

#threejs #三维 #前端

这篇博客详细介绍了如何使用Three.js库在WebGL场景中创建不同类型的光照，包括环境光、平行光、聚光灯和点光源，并展示了如何设置阴影效果。此外，还讲解了如何为光源添加逼真的光晕，通过加载光晕图片并配置光晕对象，使场景更具视觉吸引力。博客内容涵盖了从开启阴影、设置投影平面和实体，到调整光源属性的全过程。

一创建光照

1 环境光

无特定的方向，光照会应用到全局

        var ambientLight = new THREE.AmbientLight("white");
        scene.add(ambientLight);

2 平行光(太阳光)

平行光照亮的整个区域接收到的光强是一样的。光是平行的；可以生成阴影的光之一

        var light = new THREE.DirectionalLight("red");//光源颜色
        light.position.set(20, 10000, 13);//光源位置
        scene.add(light);//光源添加到场景中

3 聚光灯(台灯)

可以产生阴影的光之一

      var spotLight = new THREE.SpotLight(0xffffff);
      spotLight.position.set(3500, 4000, 3500);

4 点光源(灯泡，照明弹)

一种单点发光、照射所有方向的光源；不会产生阴影。因为它会朝所有的方向发射光线

        var pointLight = new THREE.PointLight("red");
        pointLight.position.set(1000,1000,1000);
        scene.add(pointLight)

最低0.47元/天解锁文章