三维自定义场景组件场景时间

适用场景：安装了「FineVis数据可视化」插件的用户，可参考本文了解 FineVis 的相关功能。

1.1 版本

1.2 应用场景

通过时间体系可快速设置出满意的光照、天空等效果，通过 JS 接口还可呈现场景跟随时间变化的动态效果。

1.3 功能简介

进入三维自定义场景组件编辑界面，在「场景>环境」属性中设置「场景时间」：

1）默认时间为 14:00 ，可滑动或点选时间轴，或直接编辑时间显示框改变时间，输入框仅支持输入 0-24 之间的整数。

2）场景时间左上角  标识表示为「自动场景状态」，此时「天空背景、环境光、光源」为对应场景时间的默认设置。

3）若场景时间确定后，修改了「天空背景、环境光、光源」中的任意设置，场景状态变为「手动场景状态」，左上角标识为  。

4）在「手动场景状态」下，若再次修改场景时间，场景状态变化为对应时间的「自动场景状态」。

5）在「自动场景状态」下，支持 animateSceneTime() 接口，实现场景时间动态变化。 

本文示例效果为，点击标题组件，实现三维自定义场景组件场景动态变化。

2.1 新建模板

新建一张可视化看板，可自定义名称、画布尺寸等。如下图所示：

2.2 设置三维自定义场景组件

2.2.1 添加组件创建场景

1）点击组件区「3D>三维自定义场景」，将组件添加到画布中，点击右侧配置区「编辑组件」，进入三维自定义场景组件编辑界面。如下图所示：

2）首次进入三维自定义场景组件编辑界面时，需要生成一个空场景或导入已有场景。这里我们选择一种风格，生成场景即可。如下图所示：

注：生成场景后，「场景>环境>场景时间」中的场景状态需保持「自动场景状态」。因为之后需要设置 JS 点击事件，JS 点击事件中的 animateSceneTime 接口仅支持「自动场景状态」。

2.2.2 添加模型对象

1）点击下载并解压仓库模型：仓库.zip 。

2）在组件编辑界面，点击「模型>添加模型对象>上传模型」，选择下载的 仓库.glb 文件，点击「打开」，弹出模型预处理设置框，保持默认设置，点击「确定」，仓库模型则被成功添加至模型库中。如下图所示：

3）选中模型库中的仓库模型，点击「载入场景」，将仓库模型载入场景中。如下图所示：

4）关闭模型管理界面，在模型列表选中仓库模型，调整下缩放比例、位置和视觉方向等。如下图所示：

5）设置完成后，点击左上角「返回可视化看板」回到画布页面。

2.3 设置标题点击事件

2.3.1 添加标题组件

点击「其他>标题」，将其添加到画布，设置标题内容为「点击触发场景状态变化」。如下图所示：

2.3.2 设置JavaScript点击事件

选中标题组件，点击「交互>添加事件>鼠标点击>JavaScript」，输入 JavaScript 代码。如下图所示：

JavaScript 代码如下所示：

注1：from 和 to 对应数字仅支持整数，且 from 必须小于 to 。

注2：JS 代码中双引号内的 三维自定义场景1_页面1 为三维自定义场景组件的组件名称，此例没有修改三维自定义场景组件的组件名称，故此处使用默认的组件名称。若用户在操作过程中修改了组件名称，双引号内需要替换为用户自行修改的组件名称。

duchamp.getWidgetByName("三维自定义场景1_页面1").animateSceneTime({
     from: 14, //从默认的14点开始
     to: 38, //到第二天的14点结束
     duration: 3000 //变化时长为 3 秒
});         

2.4 效果预览

保存报表，点击「预览」，效果如下图所示：

注：不支持移动端。

3. 模板下载

点击下载模板：三维自定义场景组件场景时间.fvs