3. 三维计算器交互实现+资产复用

• 资产库
• 二次开发
• 三维模型
• 计算器
• 交互设置
• 三维资产

视频介绍

大家好，今天我们带大家一起看一下，如何在山海鲸中打造一个有真实交互的计算器，并且我们将这个计算器最终加入到我们的资产库。这样我们就可以去做一些真实的仪器，并且它们是带屏幕显示的。

我们先看一下现在这个计算器的效果。这个计算器就是一个非常简单的计算器，我们有一些按键，包括开关。我们可以通过首先点到整个预览界面（不能进入编辑界面），来查看效果。点一下就可以开，然后我们可以做简单计算，8加上3，等于11。

那么这个计算器，就是拥有一个真实计算器的逻辑。那我们在山海鲸里面，如何把这个逻辑实现，并且最终把它加入到资产库里面，变成一个已有的设备资产呢？我们就用这个为例子，带大家一起看一下。

好，我们双击先看一下这个计算器模型。这个模型，我们是用Blender制作的GLB模型，最终导入到山海鲸当中。导入进来之后我们可以简单看一下，它首先分成一个屏幕，屏幕上面会有个显示屏的材质。然后我们还有一些按键，当然我们这里为了做一些Error（比如8/0会显示Error），单独做了一个。当然大家也可以去显示其他内容。这些按键就是一些不同的按键。

那么首先，我们希望能做出来按钮的效果，就是我按了它按下去的效果。其实我们并不需要去做二开，而是直接在我们的模型当中，用交互就可以实现。我们看其中的一个按钮，点到交互，可以看一下它有三个交互事件。

第一个交互事件，是我要把这个按钮按下去的效果，传到二开事件当中，我们是以“清除”这个名字传进去的。当然我们不一定需要用这样交互，我们也可以直接在二开里面去监听这个按钮的事件。当然了，用交互可能会更直观一些，我们这里使用的是交互。

第二个，就是我们在按下的点击的这一刹那，把组件的位置往下压一点。然后可以看到这两个交互写的是与上个动作同时，因为既要发到二开当中，又要去操作改变它的位置。改变位置摁下去之后，它需要自己弹起来，对吧？那这里就再加一个交互，让它在我们摁下去之后，跟着上一个交互再把它弹起来。那这样这个功能就完成了。

我们只需要对整个每一个按键，都复制一下这个交互，就可以实现点了之后，它有个按下去的效果。

好，那我们有了按键之后呢，我们如何实现摁下去的东西在我的屏幕上显示呢？这是这节课的一个非常重点的内容。那这个就需要用到我们的二开。

我们点击这个模型，可以看到我们选择计算器，这个上面有挂一个二开的代码。好，我们到代码中去看一下，点击打开。我们可以看一下这个代码，这个代码核心就是实现了两个部分。

第一个部分就是我们真实的加减乘除。当然真实加减乘除实际上逻辑很简单，但是如果我们遇到一些更加复杂的设备，它可能牵扯更加复杂的交互逻辑。比如说我们可能会有一些电表，它可能会牵扯哪一根线和哪一根线接线，最后会显示什么样的不同逻辑。这个需要大家自己用二开的代码进行实现。我们这里演示的就是一个计算机的基础实现，那就是我们之前把这个按钮加上，如果是加我们就用加，减就用减，这是一个非常简单的同步逻辑。

那么更加复杂的部分是，如何将我这个逻辑的结果显示在我的屏幕上呢？那这个我们就需要用到二开里面的一个叫offscreen的功能。

首先我们在init的时候，要先给这个创建一个offscreen canvas。这个canvas并不会在屏幕上显示，但是它是一个标准的Web上的canvas。我们可以利用canvas的context，在里面去画各种各样的内容，去写text，或者说画一些路径，或者说画一些圆等等的。其实所有我们在外部上能实现的，都可以在我们的代码中进行实现。这里我需要画的是文字，当然了因为我们这里这个字是一个特殊字体，所以我们是用的LCD这样的一个字体直接去处理的。当然这个LCD是我们闪眼睛自带的，默认情况下大家可以用系统的字体。因为我们计算机这个是有一个特殊情况，所以我们需要用LCD。

然后在我们初始化这个canvas之后，我们后面就可以去调用它了。我们这里直接把它放做了我们一个私有的属性。

第二呢，就是我们需要拿到这个canvas，就是这个屏幕的材质。因为最后我这个canvas绘制好了之后，我要把它设置给这个屏幕。我们看一下屏幕的材质是在什么地方，我们屏幕上面有个显示屏，那显示屏我们进入这个样式，就可以看到它有基础色。我们最终其实就是把这个canvas设置给这张贴图，那它就会显示出来。

好，我们看一下具体是怎么设置的。我们这里有个draw screen方法，首先我们要去绘制，把我们整个的结果绘制在我们这个canvas上。那么给它的一个字体，给它个颜色，包括给它一个对齐等等的。最终，我们这里会去绘制这样的一个文字。然后最后我们把绘制好的这个canvas转成我们的blob，然后得到这个block之后我们创建个UIL，把这个UIL设置给我们之前拿到的这个screen material的一个option，这个option就是albedo texture。至于这个albedo texture我们怎么拿，我们在我们其他的二开的教程里面其实有讲，就说我们可以通过在这里右击，左击点这三个点，然后拿到调用代码示例，我们去看到我们到底怎么去设置它。

然后，那我们这个screen canvas material是在哪里拿到的呢？我们是可以通过我们自带的get children，拿到这个screen piece，这个screen piece用我们这个calculate piece，因为我们现在自己就是挂在这个最上层的，挂在这个计算器上的。我们可以通过不断地get children，并且比对它的名字，去拿到我们这个材质。拿到这个材质之后，设置它的这个option，我们就可以替换掉这个字体。

好，我们通过这样的一个二开代码，我们就实现了按钮和整个计算机的逻辑的实时计算。

那我们再看一下，我们怎么把我们这个模型装到我们的资产库里面去。我们只需要把这个模型注意，我们所有的交互，包括我们的二开，一定都得挂在我们这个上面或者它的子元素上，它不能挂在外面，挂在外面我们就把它放到资产库就丢失掉了。一定要我们在我们资产库的这个元素的根目录及以下，去放置我们的二开代码和交互。另外呢，我们如果交互，比如这里一个交互，如果控制到外面的其他的元素，它也会丢失掉，它只能控制它自己，或者这个我们整个的进入资产库这个模型内部的元素。

好，我们在这个上面右击，添加到资产库。好点，我们选择个资产目录，就选全部，然后点确定OK。这样子，我们回到我们的资产库当中，我们可以看到我们这里就有个计算器。之前我们已经用了一个计算器，我们重新再放一下。

那这个计算器，大家有的时候我们的这个封面可能会识别的不是很好，大家可以去自己更换这个封面，这里我就不更换了。

有了这个计算器之后，我们在其他的项目当中，我们这里可以新建一个项目，新建个项目创建成功之后，那我们就可以把这个计算器作为一个资产，放到我们的整个的项目当中。这样子以后我们在其他的项目当中，需要用到同一种设备，并且我们希望这个设备有它自己的行为，都可以通过这种模式来去复用它。

那我们点击这个模型，找到资产库，我们找到这个计算器，我们点一下，它就在整个画面中加进去了。我们来看一下这个计算器，是不是拥有我们刚刚写的所有的交互。我们从下点退出然后点9乘以6，等于54。这个因为整个刚刚有点延迟，可以看到，这样子整个的计算器的这个逻辑就已经实现了。

好，今天这节课我们就是教大家如何将我们的计算器，这样一个带有自己逻辑并且带有自己屏幕的完整设备，去加入到我们资产库当中，并且将来去复用它。

好，谢谢大家。