构建基于HTML的三维网页应用的用户界面

了解如何利用标准web技术创建丰富且移动端友好的用户界面与网站集成。

简介

Verge3D主程序提供的模板是一个带有全屏按钮和预加载器的单页宽屏布局网页。在摄影机上固定3D对象可以实现像按钮这样的交互元素，同样的方法也适用于文本类型对象。

但更为灵活和有效的方法，是利用已有的web标准来创建用户界面。通过HTML和CSS，您可以为应用构建任何布局，并使其具有响应性和SEO友好性。由于现代web浏览器多基于特殊光栅化引擎，因此使用HTML和CSS创建的界面，尤其是文本看起来通常比3D元素更清晰。这种方法还允许您轻松地将图像、视频和web链接等2D媒体与WebGL内容混合使用，并使应用的风格与将要部署它的网站的设计相匹配。

互联网中有大量的Web设计工具，从纯文本编辑器到功能完善的网站编辑器，一应俱全。一些网站编辑器提供完整的HTML/CSS/JavaScript模板，借助这些工具，可以实现轻代码甚至是零代码建站，降低了用户技术成本。

在哪里添加HTML和CSS?

如果您使用了应用管理器的默认设置，并在其中创建了一个 My_Awesome_App新应用，那么您会在文件夹 Verge3D/ApplicationS/My_Awesome_App 看到 my_awesome_app.html 和 my_awesome_app.css 这两个文件。也许您自然而然地想直接编辑他们，

但我们并不推荐这样做——因为这些被应用管理器自动生成的文件，会在应用更新过程中被直接覆盖。更为合理的方法是新建一个 .html 文件，并将Verge3D应用的 .html 文件嵌套进去，就像俄罗斯套娃那样。

案例概览：Teapot Heater

请查看此案例(Verge3D 茶壶加热器 Demo）：应用中的前端界面都是在第三方网页设计软件中制作的，并存储为 index.html (此命名非必需，可修改)。除了界面中的HTML元素，此 index.html 文件中还通过 iframe 素内嵌了Verge3D项目的 teapot_heater.html文件。

在Verge3D应用管理器中，这样的复合型项目会有两个启动图标，点击后分别启动您自行建立的 index.html 页面及独立的Verge3D应用页面。

最后，2D和3D部分通过 HTML拼图建立逻辑联系以处理用户事件。

教程

在下面的教程中，我们将介绍如何使用基于HTML的UI创建一个简单的应用。此应用只有2个按钮，用于隐藏和显示默认立方体。

我们首先通过应用管理器创建项目，命名为 My_Awesome_App 。紧接着，我们演示两种创建UI中附加的 .html 的方法：使用第三方网页编辑器的可视化方法和基于代码的方法。UI准备就绪，我们就可以用HTML按钮来进行拼图操作了。

设计师方法

经过将Verge3D的工作流程放在时下各种免费或付费的网站编辑器中实验后，我们选择并推荐使用 WebFlow 。这是一个在线编辑器，可以让毫无代码基础的用户也可以轻松地为Verge3D应用创建UI。当然，您也可以尝试其他工具，例如Adobe Dreamweaver、Google Web Designer、Tumult Hype或Pinegrow等，它们可能需要用户具备一定的HTML/CSS基础。

在Webflow的官网点击“Get started”建立一个帐户。所需的“Embed”组件和“Export Code”功能只有付费账户才可以使用，因此您需要 subscription（订阅）之后，才可以完全跟进本教程的所有流程。

登录您的Webflow帐户，转到 Dashboard ，然后单击 New Project。

从模板中选择 Blank Site 。填写项目名称，然后单击 Create project：

现在我们将已创建的Verge3D应用嵌入到这个网页中。在左侧面板上，单击最上面带有“加号”图标的按钮（Add Elements）。找到 Embed 组件，然后单击（或拖拽）：

复制以下行并将其粘贴到编辑器窗口：


<iframe width="100%" height="100%" frameborder="0" src="my_awesome_app.html"></iframe>

这行代码假设的前提是把Webflow生成的网页复制到Verge3D应用文件夹中，这样<iframe>元素将获取应用中名为 my_awesome_app.html的文件。

点击 Save & Close。现在 Embed 组件已经放在页面上。请暂时忽略404错误提示——导出项目到本地后它会消失。

现在我们来修改 Embed 组件，让其占满整个页面。单击右上角的 Style 按钮。在 Size 面板，将 Width 和 Height 设置为 100% ，（您需要点击 px 按钮，将单位从像素切换为百分比）。为 Position 选择 Fixed模式。

现在来创建两个按钮。再次单击 Add Elements 按钮，找到 Button 元素,并将其拖拽到动到页面中。

注意，该按钮不会立即可见，因为它被前面添加的 Embed 挡住了。要修正此问题，请单击左侧图标栏中 Navigator 按钮，在其中选择中新添加的元素...

…在 Style 选项卡中，将 Position 设置为 Fixed ，如 Embed 一样。将页边距的上边和左边都设置为10个像素，让按钮不要太贴边。

现在按钮就会显示在页面左上角了。双击编辑标题，改为“Hide/隐藏”。

用相同方法添加另一个按钮。将其左边距设置为80像素，并将其标题更改为“Show/显示”。

现在我们需要为两个按钮设置独有的 ID ——我们将在拼图中使用它们。要执行此操作，请选择一个按钮，转到 Element Settings 选项卡，然后在 ID 处填写“hide_button”。对第二个按钮重复此操作，将“show_button”分配给它的 ID。

在这一阶段，我们可以生成UI的 .html 文件，并放在Verge3D应用目录中测试。单击在上面的尖括号按钮（Export Code）...

...然后单击 Prepare ZIP ，最后，单击 Download ZIP：

找到下载的ZIP文件并将其内容解压到应用文件夹 My_Awesome_App中。

运行或重新加载Verge3D应用管理器——新的 .html 文件显示为一个额外的蓝色图标。

单击应用名称打开详情页，可以更清楚地看到文件结构，

现在，单击 index.html 图标，即可运行组合后的应用。您会看到如下内容：

紧接着使HTML按钮可被点击，这样用户就可以隐藏和显示立方体了。这可以通过将HTML类的 event 拼图与WebFlow中相关元素的ID连接起来轻松实现。运行拼图编辑器并添加以下块：

因为按钮位于嵌入Verge3D应用的父级 .html 文件中，因此必须选中 in parent doc 复选框。

搞定！保存拼图并再次运行/重新加载组装好的应用，检查一下按钮是否能够正常起作用。

开发人员方法

大多数网页设计师仍然认为纯文本编辑器是最强大且最灵活的网页构建工具。即使您不打算深入研究编码，本指南也可以帮助您进一步了解由可视化工具生成的网页的内部结构。

您可以使用任何文本编辑器来编辑HTML/CSS代码。但使用支持显示行号及语法高亮的工具会提高工作效率，比如Notepad++或VS Code等。

我们可以从一个基础HTML文档开始，如下所示。将以下代码内容复制到一个新的文本文档中，命名为 index.html ，并保存到 verge3d/applications/my_awesome_app 文件夹下。同样，文件名不是固定的，我们只是为了保持一致性才总是用这个名称。


<!DOCTYPE html>
<html>

<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
</head>

<body>

</body>

</html>

运行或重新加载Verge3D应用管理器——新的 .html 文件显示为一个额外的蓝色图标。

单击应用名称打开详情页，可以更清楚地看到文件结构，

现在我们可以添加一个 iframe 元素到文档的 body 部分，嵌入Verge3D应用的主文件 my_awesome_app.html：


<body>
<iframe id="my_iframe" src="my_awesome_app.html"></iframe>
</body>

如果您现在从应用管理器运行该应用，它会显示为一个嵌入在屏幕左上角的默认立方体。我们可以通过嵌入一些CSS来去除边框并占满屏幕：


<style>
#my_iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 0;
}
</style>

现在，来为两个按钮创建对应的 div 元素，每个按钮都必须使用唯一的 ID 属性，以便在CSS和拼图中引用：


<div id="hide_button">Hide</div>
<div id="show_button">Show</div>

不过，在您用CSS给它们指定绝对位置和样式之前，不会在应用中找到它们：


#hide_button, #show_button {
        position: absolute;
        width: 100px;
        height: 30px;
        background-color: DodgerBlue;
        color: white;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
}

#hide_button {
        left: 10px;
}

#show_button {
        left: 120px;
}

好了，现在应用页面中有了两个HTML按钮。下面是完整的 index.html 页面代码：



<!DOCTYPE html>
<html>

<head>
<title>Index of My Awesome App</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta name="description" content="Put some description here - remember about SEO!">
<style>
#my_iframe {
        position: absolute;
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
        border: 0;
}

#hide_button, #show_button {
        position: absolute;
        width: 100px;
        height: 30px;
        background-color: DodgerBlue;
        color: white;
        text-align: center;
        line-height: 30px;
        cursor: pointer;
}

#hide_button {
        left: 10px;
}

#show_button {
        left: 120px;
}
</style>
</head>

<body>
        <iframe id="my_iframe" src="my_awesome_app.html"></iframe>

        <div id="hide_button">Hide</div>
        <div id="show_button">Show</div>
</body>

</html>

当从应用管理器运行这一组装好的应用时，您会看到如下内容：

因为按钮位于嵌入Verge3D应用的父级 .html 文件中，因此必须选中 in parent doc 复选框。

搞定！保存拼图并再次运行/重新加载组装好的应用，检查一下按钮是否能够正常起作用。

注解

Verge3D注解是在3D内容上方绘制信息弹出元素的最简单的方法。您不需要通晓HTML就可以将它们添加到应用中。只需使用 add annotation 拼图即可。

可以通过修改字体、形状、颜色或大小来更改批注的样式。参见这里的更多信息。

另请参阅

您可以从下面的视频教程中了解如何为3D网页应用创建基于HTML的用户界面。

遇到问题？

欢迎您随时在论坛上提问！您还可以加入中文用户社区QQ群(171678760)，在线寻求帮助。