用HTML创建UI

用HTML创建UI

简介

Verge3D应用程序模板提供单页宽屏布局，带有全屏按钮和加载器。像按钮之类的交互元素可以用三维来实现，然后P到相机上 – 对于文本框同样适用。

然而，更灵活有效的方法是利用既有的Web标准来创建UI。使用HTML和CSS，可以为您的应用构建任何布局，支持响应式和友好的SEO。由于现代Web浏览器的专用光栅引擎，使得UI和特别是使用HTML和CSS创建的文本看起来比用三维创建的模型更清晰。此方法还允许您轻松地将2D媒体（如图像，视频和Web链接）与WebGL内容混合，并为您的应用设置样式以匹配将要部署的网站的设计风格。

有很多网页设计工具，从纯文本编辑器到成熟的所见即所得的网站创建工具。后者可以生成完整的HTML / CSS / JavaScript即用型网页，从而使您可以永远不会触摸任何代码。

如何添加HTML/CSS

假设您使用AppManager（使用默认配置选项）创建了应用程序，并且命名为 myawesome_app 。在_verge3d/applications/my_awesome_app文件夹下，能够找到my_awesome_app.html和my_awesome_app.css，看起来很自然地可以从这里开始编辑，但是并不是。

在实践中，您绝不可能想要编辑由AppManager自动生成的文件，并且通过纯净更新后它们还会被覆盖掉。

创建一个新的HTML文件是在Verge3D应用程序中添加自定义HTML/CSS的一种更加健壮的方式。在这个新的HTML中，Verge3D应用的.html是嵌入式的，俄罗斯套娃式的。

案例：茶壶

查看如下案例（Verge3D茶壶DEMO）：全部界面都是采用第三方的web设计软件创建的，并保存为index.html（此名字并非必须）。除了界面的HTML元素，index.html文件还包括一个iframe元素，通过它，Verge3D项目，teapot_heater.html，被嵌入进来。

在AppManager中，一个整合项目会拥有两个运行图标，您可以单独运行纯粹的Verge3D项目，或者是整合后的应用。

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

教程

在下面的例子中，将会演示如何使用HTML式UI创建一个简单的应用。这个应用只有2个按钮，用来隐藏和显示默认盒子。

首先使用AppManager新建一个项目，命名为 my_awesome_app 。下面将演示如何用3种工具创建用户界面的.html文件： Google Web Designer, Webflow 和 text editor。

情景1：Google Web Designer

Google Web Designer是一款免费的跨平台工具，可用于创建HTML元素并以可视方式为其指定样式。

打开软件后，选择Create new file…

然后在左侧面板中选择HTML，并填写所有空白区域：名字（如：“ my_awesome_app_gwd ”），位置（可以使用任何路径，最好不要在你的应用文件夹下，以避免和发布的版本混淆），标题，然后点击OK。

首先添加一个iframe元素，用来嵌入Verge3D应用的主运行文件my_awesome_app.html。在Google Web Designer里，可以从元素选项卡列表中拖拽出IFrame元素。

IFrame元素位于页面后，切换到属性选项卡，确保iframe元素占据整个页面，left和top位置设为0，宽和高设为100%。在source区域输入Verge3D app主文件- “my_awesome_app.html” （假设要发布的UI文件位于应用程序文件夹的根目录）

到这一步，可以生成UI.html文件并测试Verge3D app。点击右上角的发布按钮，并选择本地。

在发布对话框，选择app文件的路径，my_awesome_app，作为本地发布。名字为空，以便正确保存到app根目录。

新的.html文件会立刻在AppManager中显示为一个额外的蓝色图标。运行程序检测Verge3D app是否能正确加载。

现在，添加那两个按钮。在最左侧的面板，点击元素工具，然后选择div元素并在页面上画出一个长方形。

在属性选项卡，使用颜色拾取器为按钮选择一个颜色，指定它的位置和尺寸，最重要的是为个元素设置一个ID，这样我们可以在拼图里引用它。

为按钮添加标题（hide或show），双击它，这样它的轮廓会变成红色。点击文本工具，然后在按钮上在文本区域输入文字。使用字体设置来设置字号，颜色和其它属性。使用选择工具（带箭头的第一个按钮）移动按钮上的文本区域。

此时，在大纲面板会看到iframe元素，2个带有ID的div元素，及两个包含在div中文字元素。

最后，在CSS属性窗口，设置当经过这些按钮时鼠标cursor为“clicking”状态：

发布index.html文件并从App Manager运行已组装的app后，应该看到如下内容：

有关使用Google Web Designer工具和组件的详细信息，请参阅其文档。

情景2：Webflow

Webflow是一个基于云的工具，也可用于为Verge3D应用程序创建HTML / CSS用户界面。必要的嵌入组件和导出代码功能仅适用于从“精简版”级别开始的付费帐户。

在仪表板中单击“新建项目”按钮，然后从模板中选择“空白站点”：

填写项目名称，然后单击“创建项目”：

现在让我们添加一个iframe元素来嵌入Verge3D应用程序的主文件my_awesome_app.html。在Webflow中，这可以通过以下方式实现。在左侧面板上，单击“添加元素”，然后单击或拖出“嵌入”组件：

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

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

这里我们假设Webflow生成的index.html将放在app文件夹的根目录中。单击“保存并关闭”。

将嵌入组件放置在页面上后，切换到“样式”选项卡，并使iframe元素占据整个页面，方法是为其位置指定“固定”，为宽度和高度指定“100％”。

在这个阶段，我们可以生成我们的UI .html文件，并使用Verge3D app进行测试。单击顶部栏上的“导出代码”按钮…

…然后单击准备ZIP并下载ZIP：

将存档保存到硬盘驱动器上的任何位置，然后解压缩到应用程序文件夹my_awesome_app的根目录。新的.html文件立即开始在App Manager中显示为一个额外的蓝色图标。您可以运行它来检查它是否实际加载了Verge3D应用程序。

现在让我们添加这两个按钮。在最左侧的面板上单击添加元素，然后单击或拖出Div Block组件。

在“样式”选项卡中，使用颜色选择器用颜色填充按钮，指定其位置和尺寸。

为了设置我们将用于在拼图中引用它的元素的ID，请转到元素设置选项卡，然后在ID字段中键入“hide_button”或“show_button”。

要为按钮添加标题（“隐藏”或“显示”），请拖出按钮上的文本块组件，然后在文本区域中键入文本。

使用“样式”选项卡下的“排版设置”设置大小，颜色和其他属性。

在“导航器”选项卡中，您应该看到iframe元素，2个div元素（显示它们的样式名称）和嵌套在这些div中的两个文本元素。

在“样式”选项卡中，当鼠标光标悬停在这些按钮上时，我们可以将鼠标光标变为“点击”形式：

导出项目并从App Manager运行组装的应用程序后，您应该看到如下内容：

有关使用Webflow工具和组件的更多信息，请参阅其教程。

情景3：Text Editor

许多网页设计师仍然认为纯文本编辑器是构建网页的最强大和最灵活的工具。即使您不想深入编写代码，本指南也可以帮助您了解更多艺术家友好工具生成的网页内部结构。

您可以使用任何文本编辑器来编辑HTML / CSS代码，但如果您的编辑器支持语法高亮和行编号（如Notepad ++或Atom），则工作更方便。

最基本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>

新的.html文件在App Manager中显示为一个额外的蓝色图标，在启动时会生成一个白色的空白页面。

现在我们可以在文档的主体中添加一个iframe元素来嵌入我们的Verge3D应用程序的主要启动文件my_awesome_app.html：

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

如果您现在从App Manager运行已组装的应用程序，它将在左上角显示默认盒子app的很小的嵌入。我们可以通过嵌入一些CSS来使它成为宽屏和无边框：

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

现在让我们通过向主体添加2个div元素来创建2个按钮，提供唯一的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; }

就是这样。现在你的app里有了两个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>

从AppManager中运行组装的app时，你会看到如下结果：

访问w3schools.com，获取有关HTML和CSS的更多教程，参考资料和示例。

整合：HTML拼图

现在剩下的就是使按钮可以操作，这样通过点击它们，用户可以隐藏和显示盒子。通过HTML类的event拼图，结合ID，会很容易实现。

由于可点击的HTML元素位于嵌入了Verge3D应用程序的父.html文件中，因此我们应该检查in parent doc 复选框以使它们起作用。

就这样！保存您的拼图并检查按钮是否适用于盒子。

在论坛留下你的反馈或问题（如果有的话）。