如何在3D模型上实现太阳光照模拟？

最新推荐文章于 2024-07-27 12:18:54 发布

Super_Calvin

最新推荐文章于 2024-07-27 12:18:54 发布

阅读量4.2k

点赞数 1

分类专栏： # 三维示例代码文章标签：太阳光照光照模拟 bim 经纬度 webgl

本文链接：https://blog.csdn.net/weixin_45544796/article/details/101023463

版权

该博客介绍了如何在3D模型上模拟太阳光照效果，包括示例描述、操作指南和实现步骤，如添加屏幕炫光、创建阴影平面以及构件旋转。通过这些步骤，读者可以了解如何在BIM项目中结合经纬度信息进行光照模拟。

摘要由CSDN通过智能技术生成

如何在3D模型上实现太阳光照模拟？

示例描述与操作指南

当前示例用于模拟太阳光照效果。

示例效果展示

太阳光

实现步骤

第一步添加屏幕炫光

/**
 * @description:  添加一个屏幕炫光到场景，因为屏幕炫光不是实际的光源，只是一个效果，因此一般配合其他光源使用。
 *                一般用此屏幕炫光来模拟太阳光源，因此配合一个平行光源使用。
 *                一般使平行光产生阴影效果分为以下几步:
 *                1. 将渲染器的阴影设置打开，即 renderer.shadowMap.enabled = true;
 *                2. 将此光源的产生阴影的属性打开，即 spotLdirectionalLightight.castShadow = true;
 *                3. 调整此光源的光源阴影范围，一般要使产生阴影的物体的位置大于阴影相机的最小值，小于最大值;
 *                4. 将需要产生阴影的物体的产生阴影的属性打开，即obj.castShadow = true;
 *                5. 将要接收阴影的属性打开，即obj.receiveShadow = true;

 */
const addLensflareLight = () => {
   
  vizbim.renderer.shadowMap.enabled = true;  // 将渲染器的阴影设置打开，这样渲染器就可以渲染场景内物体的阴影了

  const textureLoader = new THREE.TextureLoader(); // threejs里面的加载器，用于加载图片

  // 用于模仿太阳光的图片图片,地址可以换成本地路径
  const textureFlare0 = textureLoader.load('http://renyuan.bos.xyz/lensflare0.png');
  const textureFlare3 = textureLoader.load('http://renyuan.bos.xyz/lensflare3.png');

  directionalLight = new THREE.DirectionalLight(0xffffff, 1); // 新建一个平行光源，颜色未白色，强度为1
  directionalLight.position.set(0, 0, 200