下面我们通过一个示例给大家介绍一下在鲸孪生中如何通过按钮和数据对模型显示隐藏以及模型动画的播放停止进行控制。

整个示例项目分为两个页面，第一个页面演示的是按钮控制。

第二个页面演示的是数据控制。

因为涉及到两个子看板的切换，所以项目中我们使用了前景看板，添加了一个菜单组件。

并且在菜单上添加了交互设置。

第一个交互是切换子看板。

第二个是点击菜单切换视角，具体设置见截图，这里的视角是在鲸孪生中添加的，我们会在后面演示。

下面我们先从按钮控制开始介绍。

1. 按钮控制模型

（1）按钮控制动画播放和停止

首先我们需要在建模工具中添加模型动画。

然后在鲸孪生中导入这个模型，双击鲸孪生组件进入编辑模式，在左上角选择“模型—>本地”，点击加号进行模型导入。

展开左侧模型层，可以看到导入后的动画在这里。

点击选择左侧的“鸟瞰相机”，我们在右侧添加几个预设视角，这些视角是配合按钮切换时使用的。

点击右上角的加号和删除可以添加和删除预设视角，将模型转到合适的视角位置后，可以点击预设视角设置项右侧的三个点，然后点击获取当前视角来设置视角数值。

退出鲸孪生的编辑模式，添加按钮组件。以“开启动画”和“关闭动画”按钮为例：

这里为了区分控制过程，我们给按钮添加了两个状态，一个状态下可以点击操作（默认状态），一个状态下不可操作（选中状态）。

需要注意的是，所有的交互都是绑定在默认状态下的，也正式因为选中状态下没有绑定交互，所以点击不会有反应。

然后我们给按钮组件添加交互。

第一个交互是点击“开启动画”按钮后将自己切换到选中状态，选中状态下按钮会灰掉，再点击就不会触发什么交互。

第二个交互是点击“开启动画”按钮后把“关闭动画”按钮切换到默认状态。

第三个交互是点击“开启动画”按钮后切换鲸孪生里的模型到一个预设视角。

第四个交互是点击“开启动画”按钮来播放模型动画。我们需要在指定组件这里选择鲸孪生中的动画。

与此对应的，在“关闭动画”按钮上，我们设置了关闭动画的交互。

（2）按钮控制模型显示隐藏和材质变化

下面以“拆解模型”和“还原模型”两个按钮为例。

前两个交互仍然是在控制按钮本身的状态切换。

第三个交互是点击“拆解模型”按钮后切换视角，这个我们在上面已经介绍过了。

第四个交互就是切换模型的隐藏了，这里我们通过修改模型的参数，将不透明度设为0%实现了模型的隐藏，隐藏的部分是模型的外壳。同时为了让隐藏过程更平滑，我们添加了补间动画。

第五个交互是修改模型的材质，这里我们通过修改模型基础色设置项中的颜色来实现了材质变化（最终的模型显示的材质效果是：颜色*贴图）。

【温馨提示】这里选择组件时选择的是模型的材质，而不是模型本身。

与此对应的，我们给“还原模型”按钮添加了显示模型的交互，和恢复模型材质的交互。

2. 数据控制模型

通过数据来控制模型有两种方式，一种是通过交互进行控制，另一种是通过条件样式进行控制，两者本质上没有什么区别，只是设置方法不同而已。

当然，我们需要先添加好数据条件。具体可以参考这个教程：数据条件

（1）方法1：通过交互来控制

通过交互来控制时，数据控制和按钮控制的方式是一样的，只是设置的位置不同而已。

点击编辑窗口空白区域，这样就会选择到整个看板。然后就可以添加交互，把触发事情设为“满足数据条件时”。

这里的交互是当数据异常时触发的。第一个交互是切换视角。

第二个交互是控制模型隐藏。

第三个是修改模型材质。

与此相对，当数据正常时我们也设置对应的三个交互。

（2）方法2：通过条件样式来控制

关于条件样式可以先看看这个教程：条件样式。二维和三维组件都是一样的，都是通过数据条件来修改组件的设置项参数值。

首先我们双击鲸孪生组件进入编辑模式。

在前面咱们已经介绍过，可以通过修改不透明度来进行显示隐藏，这里我们选择对应的模型，在右侧找到不透明度设置项，点击旁边的三个点，然后选择条件样式。

这里我们设置正常条件时显示，异常条件时隐藏。

选择涡轮的材质（注意是选择材质而不是模型），然后在右侧找到颜色，点击旁边的三个点，选择条件样式。

这里我们设置正常时白色，异常时为红色。

最后我们选择扇叶的动画（注意是动画，不是模型，也不是材质），然后在右侧找到播放动画设置项，选择条件样式。

然后设置正常时播放动画，异常时停止动画。

本教程的项目文件和模型文件如下：

点此下载项目文件

点此下载模型文件（glb格式）