调整环境光和太阳光

在实际开发中我们可能需要调整场景环境光和太阳光参数，F-BIM 的调整环境光和太阳光能力应运而生，这一章节将介绍这一能力。

告知

为避免初始化 F-BIM 逻辑占用太多代码行数， Scene 初始化已移至 scene.js 完成，其导出的 scene 已完成初始化。

调整环境光颜色

实现调整环境光颜色大致分为如下步骤：

完成初始化F-BIM
设置 scene_context 的 ambient 为对应值
设置 scene_context 的 changed 为 true 应用更改

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

修改太阳光颜色

实现修改太阳光大致分为如下步骤：

完成初始化F-BIM
设置 scene_context.light 的 color 为对应值
设置 scene_context 的 changed 为 true 应用更改

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

修改太阳光角度

实现修改太阳光角度大致分为如下步骤：

完成初始化F-BIM
设置 scene_context.light 的 phi 和 theta 为对应值
设置 scene_context 的 changed 为 true 应用更改

<!DOCTYPE html>
<html>
<head>
  <title>Parcel Sandbox</title>
  <meta charset="UTF-8" />
  <link rel="stylesheet" href="/styles.css" />
</head>
<body>
  <h1>Hello world</h1>
</body>
</html>

Open Sandbox

告知

上方实例中使用了 dat.gui 库来构建右侧控制面板，你无需关心 dat.gui 如何创建控制面板配置项，只需要关心 onChange 回调中的核心 F-BIM 操作逻辑即可，onChnage 回调中接收到的值即为控制面板中属性的当前值。如你确需了解 dat.gui 如何使用，可以参看这篇文章。

调整环境光和太阳光 ​

调整环境光颜色 ​

修改太阳光颜色 ​

修改太阳光角度 ​

调整环境光和太阳光

调整环境光颜色

修改太阳光颜色

修改太阳光角度